@hpcc-js/form 3.2.8 → 3.2.10
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/index.js +588 -265
- package/dist/index.js.map +1 -1
- package/dist/index.umd.cjs +2 -3
- package/dist/index.umd.cjs.map +1 -1
- package/package.json +6 -6
package/dist/index.js
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
|
-
var
|
|
3
|
-
var __publicField = (obj, key, value2) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value2);
|
|
2
|
+
var __name = (target, value2) => __defProp(target, "name", { value: value2, configurable: true });
|
|
4
3
|
import { IInput } from "@hpcc-js/api";
|
|
5
4
|
import { HTMLWidget, rgb, WidgetArray, d3Event, select, SVGWidget, scaleLinear, timeParse, drag, timeFormat, format } from "@hpcc-js/common";
|
|
6
|
-
const PKG_NAME = "@hpcc-js/form"
|
|
7
|
-
|
|
5
|
+
const PKG_NAME = "@hpcc-js/form";
|
|
6
|
+
const PKG_VERSION = "3.1.0";
|
|
7
|
+
const BUILD_VERSION = "3.2.1";
|
|
8
|
+
const _Button = class _Button extends HTMLWidget {
|
|
9
|
+
_inputElement = [];
|
|
8
10
|
constructor() {
|
|
9
11
|
super();
|
|
10
|
-
|
|
11
|
-
|
|
12
|
+
IInput.call(this);
|
|
13
|
+
this._tag = "div";
|
|
12
14
|
}
|
|
13
15
|
enter(domNode, element) {
|
|
14
16
|
super.enter(domNode, element);
|
|
@@ -18,36 +20,54 @@ class Button extends HTMLWidget {
|
|
|
18
20
|
}).on("blur", function(w) {
|
|
19
21
|
w.blur(w);
|
|
20
22
|
}).on("change", function(w) {
|
|
21
|
-
context.value([context._inputElement[0].property("value")])
|
|
23
|
+
context.value([context._inputElement[0].property("value")]);
|
|
24
|
+
w.change(w, true);
|
|
22
25
|
});
|
|
23
26
|
}
|
|
24
27
|
update(domNode, element) {
|
|
25
|
-
super.update(domNode, element)
|
|
28
|
+
super.update(domNode, element);
|
|
29
|
+
this._inputElement[0].text(this.value());
|
|
26
30
|
}
|
|
27
|
-
}
|
|
31
|
+
};
|
|
32
|
+
__name(_Button, "Button");
|
|
33
|
+
let Button = _Button;
|
|
28
34
|
Button.prototype._class += " form_Button";
|
|
29
35
|
Button.prototype.implements(IInput.prototype);
|
|
30
|
-
class
|
|
36
|
+
const _CheckBox = class _CheckBox extends HTMLWidget {
|
|
37
|
+
_inputElement = [];
|
|
31
38
|
constructor() {
|
|
32
39
|
super();
|
|
33
|
-
|
|
34
|
-
|
|
40
|
+
IInput.call(this);
|
|
41
|
+
this._tag = "div";
|
|
35
42
|
}
|
|
36
43
|
enter(domNode, element) {
|
|
37
44
|
super.enter(domNode, element);
|
|
38
|
-
const context = this
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
45
|
+
const context = this;
|
|
46
|
+
const checkboxContainer = element.append("ul");
|
|
47
|
+
if (!this.selectOptions().length) {
|
|
48
|
+
this.selectOptions().push("");
|
|
49
|
+
}
|
|
50
|
+
this.selectOptions().forEach(function(val, idx) {
|
|
51
|
+
context._inputElement[idx] = checkboxContainer.append("li").append("input").attr("type", "checkbox");
|
|
52
|
+
context._inputElement[idx].node().insertAdjacentHTML("afterend", "<text>" + val + "</text>");
|
|
53
|
+
});
|
|
54
|
+
this._inputElement.forEach(function(e, idx) {
|
|
55
|
+
e.attr("name", context.name());
|
|
56
|
+
e.on("click", function(w) {
|
|
43
57
|
w.click(w);
|
|
44
|
-
})
|
|
58
|
+
});
|
|
59
|
+
e.on("blur", function(w) {
|
|
45
60
|
w.blur(w);
|
|
46
|
-
})
|
|
61
|
+
});
|
|
62
|
+
e.on("change", function(w) {
|
|
47
63
|
const vals = [];
|
|
48
64
|
context._inputElement.forEach(function(d) {
|
|
49
|
-
|
|
50
|
-
|
|
65
|
+
if (d.property("checked")) {
|
|
66
|
+
vals.push(d.property("value"));
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
context.value(vals);
|
|
70
|
+
w.change(w, true);
|
|
51
71
|
});
|
|
52
72
|
});
|
|
53
73
|
}
|
|
@@ -55,36 +75,62 @@ class CheckBox extends HTMLWidget {
|
|
|
55
75
|
super.update(domNode, element);
|
|
56
76
|
const context = this;
|
|
57
77
|
this._inputElement.forEach(function(e, idx) {
|
|
58
|
-
e.property("value", context.selectOptions()[idx])
|
|
78
|
+
e.property("value", context.selectOptions()[idx]);
|
|
79
|
+
if (context.value().indexOf(context.selectOptions()[idx]) !== -1 && context.value() !== "false") {
|
|
80
|
+
e.property("checked", true);
|
|
81
|
+
} else {
|
|
82
|
+
e.property("checked", false);
|
|
83
|
+
}
|
|
59
84
|
});
|
|
60
85
|
}
|
|
61
86
|
insertSelectOptions(optionsArr) {
|
|
62
87
|
let optionHTML = "";
|
|
63
|
-
optionsArr.length > 0
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
88
|
+
if (optionsArr.length > 0) {
|
|
89
|
+
optionsArr.forEach(function(opt) {
|
|
90
|
+
const val = opt instanceof Array ? opt[0] : opt;
|
|
91
|
+
const text = opt instanceof Array ? opt[1] ? opt[1] : opt[0] : opt;
|
|
92
|
+
optionHTML += "<option value='" + val + "'>" + text + "</option>";
|
|
93
|
+
});
|
|
94
|
+
} else {
|
|
95
|
+
optionHTML += "<option>selectOptions not set</option>";
|
|
96
|
+
}
|
|
97
|
+
this._inputElement[0].html(optionHTML);
|
|
67
98
|
}
|
|
68
|
-
}
|
|
99
|
+
};
|
|
100
|
+
__name(_CheckBox, "CheckBox");
|
|
101
|
+
let CheckBox = _CheckBox;
|
|
69
102
|
CheckBox.prototype._class += " form_CheckBox";
|
|
70
103
|
CheckBox.prototype.implements(IInput.prototype);
|
|
71
104
|
CheckBox.prototype.publish("selectOptions", [], "array", "Array of options used to fill a dropdown list");
|
|
72
|
-
class
|
|
105
|
+
const _ColorInput = class _ColorInput extends HTMLWidget {
|
|
106
|
+
_inputElement = [];
|
|
73
107
|
constructor() {
|
|
74
108
|
super();
|
|
75
|
-
|
|
76
|
-
|
|
109
|
+
IInput.call(this);
|
|
110
|
+
this._tag = "div";
|
|
77
111
|
}
|
|
78
112
|
enter(domNode, element) {
|
|
79
113
|
super.enter(domNode, element);
|
|
80
114
|
const context = this;
|
|
81
|
-
this._inputElement[0] = element.append("input").attr("type", "text")
|
|
115
|
+
this._inputElement[0] = element.append("input").attr("type", "text");
|
|
116
|
+
this._inputElement[0].classed("color-text", true);
|
|
117
|
+
this._inputElement[1] = element.append("input").attr("type", "color");
|
|
118
|
+
this._inputElement.forEach(function(e, idx) {
|
|
82
119
|
e.on("click", function(w) {
|
|
83
120
|
w.click(w);
|
|
84
|
-
})
|
|
121
|
+
});
|
|
122
|
+
e.on("blur", function(w) {
|
|
85
123
|
w.blur(w);
|
|
86
|
-
})
|
|
87
|
-
|
|
124
|
+
});
|
|
125
|
+
e.on("change", function(w) {
|
|
126
|
+
if (idx === 0) {
|
|
127
|
+
context._inputElement[1].property("value", rgb(context._inputElement[0].property("value")).toString());
|
|
128
|
+
context.value(context._inputElement[0].property("value"));
|
|
129
|
+
} else {
|
|
130
|
+
context._inputElement[0].property("value", context._inputElement[1].property("value"));
|
|
131
|
+
context.value(rgb(context._inputElement[1].property("value")).toString());
|
|
132
|
+
}
|
|
133
|
+
w.change(w, true);
|
|
88
134
|
});
|
|
89
135
|
});
|
|
90
136
|
}
|
|
@@ -93,67 +139,82 @@ class ColorInput extends HTMLWidget {
|
|
|
93
139
|
const context = this;
|
|
94
140
|
this._inputElement.forEach(function(e) {
|
|
95
141
|
e.attr("name", context.name());
|
|
96
|
-
})
|
|
142
|
+
});
|
|
143
|
+
this._inputElement[0].attr("type", "text");
|
|
144
|
+
this._inputElement[1].attr("type", "color");
|
|
145
|
+
this._inputElement[0].property("value", this.value());
|
|
146
|
+
this._inputElement[1].property("value", rgb(this.value()).toString());
|
|
97
147
|
const bbox = this._inputElement[0].node().getBoundingClientRect();
|
|
98
148
|
this._inputElement[1].style("height", bbox.height - 2 + "px");
|
|
99
149
|
}
|
|
100
|
-
}
|
|
150
|
+
};
|
|
151
|
+
__name(_ColorInput, "ColorInput");
|
|
152
|
+
let ColorInput = _ColorInput;
|
|
101
153
|
ColorInput.prototype._class += " form_ColorInput";
|
|
102
154
|
ColorInput.prototype.implements(IInput.prototype);
|
|
103
|
-
class
|
|
155
|
+
const _Form = class _Form extends HTMLWidget {
|
|
156
|
+
tbody;
|
|
157
|
+
tfoot;
|
|
158
|
+
btntd;
|
|
159
|
+
_controls;
|
|
160
|
+
_maxCols;
|
|
104
161
|
constructor() {
|
|
105
162
|
super();
|
|
106
|
-
__publicField(this, "tbody");
|
|
107
|
-
__publicField(this, "tfoot");
|
|
108
|
-
__publicField(this, "btntd");
|
|
109
|
-
__publicField(this, "_controls");
|
|
110
|
-
__publicField(this, "_maxCols");
|
|
111
163
|
this._tag = "form";
|
|
112
164
|
}
|
|
113
165
|
data(_) {
|
|
114
|
-
if (arguments.length)
|
|
115
|
-
this.inputsForEach(function(input, idx) {
|
|
116
|
-
_ && _.length > idx && input.value(_[idx]).render();
|
|
117
|
-
});
|
|
118
|
-
else {
|
|
166
|
+
if (!arguments.length) {
|
|
119
167
|
const retVal = [];
|
|
120
|
-
|
|
168
|
+
this.inputsForEach(function(input) {
|
|
121
169
|
retVal.push(input.value());
|
|
122
|
-
})
|
|
170
|
+
});
|
|
171
|
+
return retVal;
|
|
172
|
+
} else {
|
|
173
|
+
this.inputsForEach(function(input, idx) {
|
|
174
|
+
if (_ && _.length > idx) {
|
|
175
|
+
input.value(_[idx]).render();
|
|
176
|
+
}
|
|
177
|
+
});
|
|
123
178
|
}
|
|
124
179
|
return this;
|
|
125
180
|
}
|
|
126
181
|
inputsForEach(callback, scope) {
|
|
127
182
|
let idx = 0;
|
|
128
183
|
this.inputs().forEach(function(inp) {
|
|
129
|
-
|
|
130
|
-
|
|
184
|
+
const inpArray = inp instanceof WidgetArray ? inp.content() : [inp];
|
|
185
|
+
inpArray.forEach(function(inp2) {
|
|
186
|
+
if (scope) {
|
|
187
|
+
callback.call(scope, inp2, idx++);
|
|
188
|
+
} else {
|
|
189
|
+
callback(inp2, idx++);
|
|
190
|
+
}
|
|
131
191
|
});
|
|
132
192
|
});
|
|
133
193
|
}
|
|
134
194
|
inputsMap() {
|
|
135
195
|
const retVal = {};
|
|
136
|
-
|
|
196
|
+
this.inputs().forEach(function(inp) {
|
|
137
197
|
retVal[inp.name()] = inp;
|
|
138
|
-
})
|
|
198
|
+
});
|
|
199
|
+
return retVal;
|
|
139
200
|
}
|
|
140
201
|
calcMaxColumns() {
|
|
141
202
|
let retVal = 0;
|
|
142
|
-
|
|
203
|
+
this.inputs().forEach(function(inputWidget) {
|
|
143
204
|
const inputWidgetArray = inputWidget instanceof WidgetArray ? inputWidget.content() : [inputWidget];
|
|
144
|
-
inputWidgetArray.length > retVal
|
|
145
|
-
|
|
205
|
+
if (inputWidgetArray.length > retVal) {
|
|
206
|
+
retVal = inputWidgetArray.length;
|
|
207
|
+
}
|
|
208
|
+
});
|
|
209
|
+
return retVal;
|
|
146
210
|
}
|
|
147
211
|
values(_) {
|
|
148
|
-
if (arguments.length)
|
|
149
|
-
this.inputsForEach(function(inp) {
|
|
150
|
-
_[inp.name()] ? inp.value(_[inp.name()]) : this.omitBlank() && inp.value("");
|
|
151
|
-
}, this);
|
|
152
|
-
else {
|
|
212
|
+
if (!arguments.length) {
|
|
153
213
|
const dataArr = {};
|
|
154
|
-
|
|
214
|
+
this.inputsForEach(function(inp) {
|
|
155
215
|
const type = inp.type ? inp.type() : "text";
|
|
156
|
-
|
|
216
|
+
const value2 = inp.value();
|
|
217
|
+
if (value2 || !this.omitBlank()) {
|
|
157
218
|
switch (type) {
|
|
158
219
|
case "checkbox":
|
|
159
220
|
dataArr[inp.name()] = inp.value_exists() ? !!inp.value() : void 0;
|
|
@@ -167,26 +228,49 @@ class Form extends HTMLWidget {
|
|
|
167
228
|
dataArr[inp.name()] = inp.value_exists() ? inp.value() : void 0;
|
|
168
229
|
break;
|
|
169
230
|
}
|
|
170
|
-
|
|
231
|
+
}
|
|
232
|
+
}, this);
|
|
233
|
+
return dataArr;
|
|
234
|
+
} else {
|
|
235
|
+
this.inputsForEach(function(inp) {
|
|
236
|
+
if (_[inp.name()]) {
|
|
237
|
+
inp.value(_[inp.name()]);
|
|
238
|
+
} else if (this.omitBlank()) {
|
|
239
|
+
inp.value("");
|
|
240
|
+
}
|
|
241
|
+
}, this);
|
|
171
242
|
}
|
|
172
243
|
return this;
|
|
173
244
|
}
|
|
174
245
|
submit() {
|
|
175
|
-
let isValid =
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
246
|
+
let isValid = true;
|
|
247
|
+
if (this.validate()) {
|
|
248
|
+
isValid = this.checkValidation();
|
|
249
|
+
}
|
|
250
|
+
if (!this.allowEmptyRequest() && !this.inputs().some(function(w) {
|
|
251
|
+
if (w._class.indexOf("WidgetArray") !== -1) {
|
|
252
|
+
return w.content().some(function(wa) {
|
|
253
|
+
return wa.hasValue();
|
|
254
|
+
});
|
|
255
|
+
}
|
|
256
|
+
return w.hasValue();
|
|
257
|
+
})) {
|
|
258
|
+
return;
|
|
259
|
+
}
|
|
260
|
+
this.click(isValid ? this.values() : null, null, isValid);
|
|
181
261
|
}
|
|
182
262
|
clear() {
|
|
183
263
|
this.inputsForEach(function(inp) {
|
|
184
264
|
switch (inp.classID()) {
|
|
185
265
|
case "form_Slider":
|
|
186
|
-
|
|
266
|
+
if (inp.allowRange()) {
|
|
267
|
+
inp.value([inp.low(), inp.low()]).render();
|
|
268
|
+
} else {
|
|
269
|
+
inp.value(inp.low()).render();
|
|
270
|
+
}
|
|
187
271
|
break;
|
|
188
272
|
case "form_CheckBox":
|
|
189
|
-
inp.value(
|
|
273
|
+
inp.value(false).render();
|
|
190
274
|
break;
|
|
191
275
|
case "form_Button":
|
|
192
276
|
break;
|
|
@@ -197,27 +281,37 @@ class Form extends HTMLWidget {
|
|
|
197
281
|
});
|
|
198
282
|
}
|
|
199
283
|
checkValidation() {
|
|
200
|
-
let ret =
|
|
284
|
+
let ret = true;
|
|
201
285
|
const msgArr = [];
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
286
|
+
this.inputsForEach(function(inp) {
|
|
287
|
+
if (!inp.isValid()) {
|
|
288
|
+
msgArr.push("'" + inp.label() + "' value is invalid.");
|
|
289
|
+
}
|
|
290
|
+
});
|
|
291
|
+
if (msgArr.length > 0) {
|
|
292
|
+
alert(msgArr.join("\n"));
|
|
293
|
+
ret = false;
|
|
294
|
+
}
|
|
295
|
+
return ret;
|
|
206
296
|
}
|
|
207
297
|
enter(domNode, element) {
|
|
208
|
-
super.enter(domNode, element)
|
|
298
|
+
super.enter(domNode, element);
|
|
299
|
+
element.on("submit", function() {
|
|
209
300
|
d3Event().preventDefault();
|
|
210
|
-
})
|
|
301
|
+
});
|
|
302
|
+
this._placeholderElement.style("overflow", "auto");
|
|
211
303
|
const table = element.append("table");
|
|
212
|
-
this.tbody = table.append("tbody")
|
|
304
|
+
this.tbody = table.append("tbody");
|
|
305
|
+
this.tfoot = table.append("tfoot");
|
|
306
|
+
this.btntd = this.tfoot.append("tr").append("td").attr("colspan", 2);
|
|
213
307
|
const context = this;
|
|
214
308
|
this._controls = [
|
|
215
|
-
new Button().classed({ default:
|
|
309
|
+
new Button().classed({ default: true }).value("Submit").on("click", function() {
|
|
216
310
|
context.submit();
|
|
217
|
-
},
|
|
311
|
+
}, true),
|
|
218
312
|
new Button().value("Clear").on("click", function() {
|
|
219
313
|
context.clear();
|
|
220
|
-
},
|
|
314
|
+
}, true)
|
|
221
315
|
];
|
|
222
316
|
const rightJust = context.btntd.append("div").style("float", "right");
|
|
223
317
|
this._controls.forEach(function(w) {
|
|
@@ -226,72 +320,108 @@ class Form extends HTMLWidget {
|
|
|
226
320
|
});
|
|
227
321
|
}
|
|
228
322
|
update(domNode, element) {
|
|
229
|
-
super.update(domNode, element)
|
|
230
|
-
|
|
323
|
+
super.update(domNode, element);
|
|
324
|
+
this._maxCols = this.calcMaxColumns();
|
|
325
|
+
const context = this;
|
|
326
|
+
const rows = this.tbody.selectAll("tr").data(this.inputs());
|
|
231
327
|
rows.enter().append("tr").each(function(inputWidget, i) {
|
|
232
|
-
const element2 = select(this)
|
|
328
|
+
const element2 = select(this);
|
|
329
|
+
const inputWidgetArray = inputWidget instanceof WidgetArray ? inputWidget.content() : [inputWidget];
|
|
233
330
|
inputWidgetArray.forEach(function(inputWidget2, idx) {
|
|
234
331
|
element2.append("td").attr("class", "prompt");
|
|
235
332
|
const input = element2.append("td").attr("class", "input");
|
|
236
|
-
if (idx === inputWidgetArray.length - 1 && inputWidgetArray.length < context._maxCols
|
|
333
|
+
if (idx === inputWidgetArray.length - 1 && inputWidgetArray.length < context._maxCols) {
|
|
334
|
+
input.attr("colspan", (context._maxCols - inputWidgetArray.length + 1) * 2);
|
|
335
|
+
}
|
|
336
|
+
inputWidget2.target(input.node()).render();
|
|
337
|
+
if (inputWidget2 instanceof SVGWidget) {
|
|
237
338
|
const bbox = inputWidget2.element().node().getBBox();
|
|
238
|
-
input.style("height", bbox.height + "px")
|
|
339
|
+
input.style("height", bbox.height + "px");
|
|
340
|
+
inputWidget2.resize().render();
|
|
239
341
|
}
|
|
240
|
-
inputWidget2._inputElement instanceof Array
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
342
|
+
if (inputWidget2._inputElement instanceof Array) {
|
|
343
|
+
inputWidget2._inputElement.forEach(function(e) {
|
|
344
|
+
e.on("keyup.form", function(w) {
|
|
345
|
+
setTimeout(function() {
|
|
346
|
+
context._controls[0].disable(!context.allowEmptyRequest() && !context.inputs().some(function(w2) {
|
|
347
|
+
if (w2._class.indexOf("WidgetArray") !== -1) {
|
|
348
|
+
return w2.content().some(function(wa) {
|
|
349
|
+
return wa.hasValue();
|
|
350
|
+
});
|
|
351
|
+
}
|
|
352
|
+
return w2.hasValue();
|
|
353
|
+
}));
|
|
354
|
+
}, 100);
|
|
355
|
+
});
|
|
249
356
|
});
|
|
250
|
-
}
|
|
357
|
+
}
|
|
251
358
|
});
|
|
252
359
|
}).merge(rows).each(function(inputWidget, i) {
|
|
253
360
|
const element2 = select(this);
|
|
254
|
-
|
|
361
|
+
const inputWidgetArray = inputWidget instanceof WidgetArray ? inputWidget.content() : [inputWidget];
|
|
362
|
+
inputWidgetArray.forEach(function(inputWidget2, idx) {
|
|
255
363
|
element2.select("td.prompt").text(inputWidget2.label() + ":");
|
|
256
364
|
});
|
|
257
|
-
})
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
365
|
+
});
|
|
366
|
+
rows.each(function(inputWidget, i) {
|
|
367
|
+
if (i === 0 && inputWidget.setFocus) {
|
|
368
|
+
inputWidget.setFocus();
|
|
369
|
+
}
|
|
370
|
+
});
|
|
371
|
+
rows.exit().each(function(inputWidget, i) {
|
|
372
|
+
const inputWidgetArray = inputWidget instanceof WidgetArray ? inputWidget.content() : [inputWidget];
|
|
373
|
+
inputWidgetArray.forEach(function(inputWidget2, idx) {
|
|
261
374
|
inputWidget2.target(null);
|
|
262
375
|
});
|
|
263
|
-
}).remove()
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
376
|
+
}).remove();
|
|
377
|
+
this.tfoot.style("display", this.showSubmit() ? "table-footer-group" : "none");
|
|
378
|
+
this.btntd.attr("colspan", this._maxCols * 2);
|
|
379
|
+
if (!this.allowEmptyRequest()) {
|
|
380
|
+
setTimeout(function() {
|
|
381
|
+
context._controls[0].disable(!context.allowEmptyRequest() && !context.inputs().some(function(w) {
|
|
382
|
+
if (w._class.indexOf("WidgetArray") !== -1) {
|
|
383
|
+
return w.content().some(function(wa) {
|
|
384
|
+
return wa.hasValue();
|
|
385
|
+
});
|
|
386
|
+
}
|
|
387
|
+
return w.hasValue();
|
|
388
|
+
}));
|
|
389
|
+
}, 100);
|
|
390
|
+
}
|
|
270
391
|
}
|
|
271
392
|
exit(domNode, element) {
|
|
272
|
-
this.inputsForEach((input) => input.target(null))
|
|
393
|
+
this.inputsForEach((input) => input.target(null));
|
|
394
|
+
super.exit(domNode, element);
|
|
273
395
|
}
|
|
274
396
|
click(row, col, sel) {
|
|
275
397
|
}
|
|
276
|
-
}
|
|
398
|
+
};
|
|
399
|
+
__name(_Form, "Form");
|
|
400
|
+
let Form = _Form;
|
|
277
401
|
Form.prototype._class += " form_Form";
|
|
278
|
-
Form.prototype.publish("validate",
|
|
279
|
-
Form.prototype.publish("inputs", [], "widgetArray", "Array of input widgets", null, { render:
|
|
280
|
-
Form.prototype.publish("showSubmit",
|
|
281
|
-
Form.prototype.publish("omitBlank",
|
|
282
|
-
Form.prototype.publish("allowEmptyRequest",
|
|
283
|
-
class
|
|
402
|
+
Form.prototype.publish("validate", true, "boolean", "Enable/Disable input validation");
|
|
403
|
+
Form.prototype.publish("inputs", [], "widgetArray", "Array of input widgets", null, { render: false });
|
|
404
|
+
Form.prototype.publish("showSubmit", true, "boolean", "Show Submit/Cancel Controls");
|
|
405
|
+
Form.prototype.publish("omitBlank", false, "boolean", "Drop Blank Fields From Submit");
|
|
406
|
+
Form.prototype.publish("allowEmptyRequest", false, "boolean", "Allow Blank Form to be Submitted");
|
|
407
|
+
const _Input = class _Input extends HTMLWidget {
|
|
408
|
+
_inputElement = [];
|
|
409
|
+
_labelElement = [];
|
|
284
410
|
constructor() {
|
|
285
411
|
super();
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
IInput.call(this), this._tag = "div";
|
|
412
|
+
IInput.call(this);
|
|
413
|
+
this._tag = "div";
|
|
289
414
|
}
|
|
290
415
|
checked(_) {
|
|
291
|
-
|
|
416
|
+
if (!arguments.length) return this._inputElement[0] ? this._inputElement[0].property("checked") : false;
|
|
417
|
+
if (this._inputElement[0]) {
|
|
418
|
+
this._inputElement[0].property("checked", _);
|
|
419
|
+
}
|
|
420
|
+
return this;
|
|
292
421
|
}
|
|
293
422
|
enter(domNode, element) {
|
|
294
|
-
super.enter(domNode, element)
|
|
423
|
+
super.enter(domNode, element);
|
|
424
|
+
this._labelElement[0] = element.append("label").attr("for", this.id() + "_input").style("visibility", this.inlineLabel_exists() ? "visible" : "hidden");
|
|
295
425
|
const context = this;
|
|
296
426
|
switch (this.type()) {
|
|
297
427
|
case "button":
|
|
@@ -305,19 +435,27 @@ class Input extends HTMLWidget {
|
|
|
305
435
|
break;
|
|
306
436
|
}
|
|
307
437
|
this._inputElement.forEach(function(e, idx) {
|
|
308
|
-
e.attr("name", context.name())
|
|
438
|
+
e.attr("name", context.name());
|
|
439
|
+
e.on("click", function(w) {
|
|
309
440
|
w.click(w);
|
|
310
|
-
})
|
|
441
|
+
});
|
|
442
|
+
e.on("blur", function(w) {
|
|
311
443
|
w.blur(w);
|
|
312
|
-
})
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
444
|
+
});
|
|
445
|
+
e.on("change", function(w) {
|
|
446
|
+
context.value([e.property("value")]);
|
|
447
|
+
w.change(w, true);
|
|
448
|
+
});
|
|
449
|
+
e.on("keyup", function(w) {
|
|
450
|
+
context.value([e.property("value")]);
|
|
451
|
+
w.change(w, false);
|
|
316
452
|
});
|
|
317
453
|
});
|
|
318
454
|
}
|
|
319
455
|
update(domNode, element) {
|
|
320
|
-
|
|
456
|
+
super.update(domNode, element);
|
|
457
|
+
this._labelElement[0].style("visibility", this.inlineLabel_exists() ? "visible" : "hidden").text(this.inlineLabel());
|
|
458
|
+
switch (this.type()) {
|
|
321
459
|
case "button":
|
|
322
460
|
this._inputElement[0].text(this.value());
|
|
323
461
|
break;
|
|
@@ -325,7 +463,8 @@ class Input extends HTMLWidget {
|
|
|
325
463
|
this._inputElement[0].property("value", this.value());
|
|
326
464
|
break;
|
|
327
465
|
default:
|
|
328
|
-
this._inputElement[0].attr("type", this.type())
|
|
466
|
+
this._inputElement[0].attr("type", this.type());
|
|
467
|
+
this._inputElement[0].property("value", this.value());
|
|
329
468
|
break;
|
|
330
469
|
}
|
|
331
470
|
}
|
|
@@ -342,14 +481,17 @@ class Input extends HTMLWidget {
|
|
|
342
481
|
}
|
|
343
482
|
change(w, complete) {
|
|
344
483
|
}
|
|
345
|
-
}
|
|
484
|
+
};
|
|
485
|
+
__name(_Input, "Input");
|
|
486
|
+
let Input = _Input;
|
|
346
487
|
Input.prototype._class += " form_Input";
|
|
347
488
|
Input.prototype.implements(IInput.prototype);
|
|
348
489
|
Input.prototype.publish("type", "text", "set", "Input type", ["string", "number", "boolean", "date", "time", "hidden", "nested", "button", "checkbox", "text", "textarea", "search", "email", "datetime"]);
|
|
349
|
-
Input.prototype.publish("inlineLabel", null, "string", "Input Label", null, { optional:
|
|
350
|
-
class
|
|
490
|
+
Input.prototype.publish("inlineLabel", null, "string", "Input Label", null, { optional: true });
|
|
491
|
+
const _FieldForm = class _FieldForm extends Form {
|
|
351
492
|
constructor() {
|
|
352
|
-
super()
|
|
493
|
+
super();
|
|
494
|
+
this._tag = "form";
|
|
353
495
|
}
|
|
354
496
|
fields(_) {
|
|
355
497
|
const retVal = super.fields.apply(this, arguments);
|
|
@@ -363,57 +505,79 @@ class FieldForm extends Form {
|
|
|
363
505
|
}
|
|
364
506
|
data(_) {
|
|
365
507
|
if (!arguments.length) return super.data();
|
|
366
|
-
|
|
367
|
-
|
|
508
|
+
super.data(_[0]);
|
|
509
|
+
if (_[0]) {
|
|
510
|
+
const inputs = this.inputs();
|
|
511
|
+
const __lparam = _[0][this.columns().length];
|
|
368
512
|
let i = 0;
|
|
369
|
-
for (const key in __lparam)
|
|
370
|
-
inputs[i].name(key)
|
|
513
|
+
for (const key in __lparam) {
|
|
514
|
+
inputs[i].name(key);
|
|
515
|
+
++i;
|
|
516
|
+
}
|
|
371
517
|
}
|
|
372
518
|
return this;
|
|
373
519
|
}
|
|
374
|
-
}
|
|
520
|
+
};
|
|
521
|
+
__name(_FieldForm, "FieldForm");
|
|
522
|
+
let FieldForm = _FieldForm;
|
|
375
523
|
FieldForm.prototype._class += " form_FieldForm";
|
|
376
|
-
class
|
|
524
|
+
const _InputRange = class _InputRange extends HTMLWidget {
|
|
525
|
+
_inputElement = [];
|
|
526
|
+
_labelElement = [];
|
|
527
|
+
_rangeData = [];
|
|
377
528
|
constructor() {
|
|
378
529
|
super();
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
__publicField(this, "_rangeData", []);
|
|
382
|
-
IInput.call(this), this._tag = "div";
|
|
530
|
+
IInput.call(this);
|
|
531
|
+
this._tag = "div";
|
|
383
532
|
}
|
|
384
533
|
enter(domNode, element) {
|
|
385
|
-
super.enter(domNode, element)
|
|
534
|
+
super.enter(domNode, element);
|
|
535
|
+
this._labelElement[0] = element.append("label").attr("for", this.id() + "_input").style("visibility", this.inlineLabel_exists() ? "visible" : "hidden");
|
|
536
|
+
this._inputElement.push(element.append("input").attr("id", this.id() + "_input_min").attr("type", this.type()));
|
|
537
|
+
this._inputElement.push(element.append("input").attr("id", this.id() + "_input_max").attr("type", this.type()));
|
|
386
538
|
const context = this;
|
|
387
539
|
this._inputElement.forEach(function(e, idx) {
|
|
388
|
-
e.attr("name", context.name())
|
|
540
|
+
e.attr("name", context.name());
|
|
541
|
+
e.on("click", function(w) {
|
|
389
542
|
w.click(w);
|
|
390
|
-
})
|
|
543
|
+
});
|
|
544
|
+
e.on("blur", function(w) {
|
|
391
545
|
w.blur(w);
|
|
392
|
-
})
|
|
393
|
-
|
|
546
|
+
});
|
|
547
|
+
e.on("change", function(w) {
|
|
548
|
+
context._rangeData[idx] = e.property("value");
|
|
549
|
+
context.value(context._rangeData);
|
|
550
|
+
w.change(w, true);
|
|
394
551
|
});
|
|
395
552
|
});
|
|
396
553
|
}
|
|
397
554
|
update(domNode, element) {
|
|
398
|
-
super.update(domNode, element)
|
|
555
|
+
super.update(domNode, element);
|
|
556
|
+
this._labelElement[0].style("visibility", this.inlineLabel_exists() ? "visible" : "hidden").text(this.inlineLabel());
|
|
557
|
+
this._rangeData = this.value();
|
|
558
|
+
this._inputElement.forEach(function(e, idx) {
|
|
399
559
|
e.attr("type", this.type()).property("value", this._rangeData.length > idx ? this._rangeData[idx] : "");
|
|
400
560
|
}, this);
|
|
401
561
|
}
|
|
402
|
-
}
|
|
562
|
+
};
|
|
563
|
+
__name(_InputRange, "InputRange");
|
|
564
|
+
let InputRange = _InputRange;
|
|
403
565
|
InputRange.prototype._class += " form_InputRange";
|
|
404
566
|
InputRange.prototype.implements(IInput.prototype);
|
|
405
567
|
InputRange.prototype.publish("type", "text", "set", "InputRange type", ["number", "date", "text", "time", "datetime", "hidden"]);
|
|
406
|
-
InputRange.prototype.publish("inlineLabel", null, "string", "InputRange Label", null, { optional:
|
|
407
|
-
InputRange.prototype.publish("value", ["", ""], "array", "Input Current Value", null, { override:
|
|
408
|
-
class
|
|
568
|
+
InputRange.prototype.publish("inlineLabel", null, "string", "InputRange Label", null, { optional: true });
|
|
569
|
+
InputRange.prototype.publish("value", ["", ""], "array", "Input Current Value", null, { override: true });
|
|
570
|
+
const _OnOff = class _OnOff extends HTMLWidget {
|
|
571
|
+
_inputElement = [];
|
|
572
|
+
_input;
|
|
409
573
|
constructor() {
|
|
410
574
|
super();
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
IInput.call(this), this._tag = "div";
|
|
575
|
+
IInput.call(this);
|
|
576
|
+
this._tag = "div";
|
|
414
577
|
}
|
|
415
578
|
enter(domNode, element) {
|
|
416
|
-
super.enter(domNode, element)
|
|
579
|
+
super.enter(domNode, element);
|
|
580
|
+
element.classed("onoffswitch", true);
|
|
417
581
|
const context = this;
|
|
418
582
|
this._input = element.append("input").attr("class", "onoffswitch-checkbox").attr("type", "checkbox").attr("id", this.id() + "_onOff").on("click", function(w) {
|
|
419
583
|
w.click(w);
|
|
@@ -422,18 +586,33 @@ class OnOff extends HTMLWidget {
|
|
|
422
586
|
}).on("change", function(w) {
|
|
423
587
|
const vals = [];
|
|
424
588
|
context._inputElement.forEach(function(d, idx) {
|
|
425
|
-
|
|
426
|
-
|
|
589
|
+
if (d.property("checked")) {
|
|
590
|
+
vals.push(d.property("value"));
|
|
591
|
+
}
|
|
592
|
+
});
|
|
593
|
+
context.value(vals);
|
|
594
|
+
w.change(w, true);
|
|
427
595
|
});
|
|
428
|
-
const label = element.append("label").attr("class", "onoffswitch-label").attr("for", this.id() + "_onOff")
|
|
429
|
-
|
|
596
|
+
const label = element.append("label").attr("class", "onoffswitch-label").attr("for", this.id() + "_onOff");
|
|
597
|
+
const inner = label.append("div").attr("class", "onoffswitch-inner");
|
|
598
|
+
inner.append("div").attr("class", "onoffswitch-offText").style("padding-right", this.containerRadius() / 2 + "px").text(this.offText());
|
|
599
|
+
inner.append("div").attr("class", "onoffswitch-onText").style("padding-left", this.containerRadius() / 2 + "px").style("width", `calc(100% - ${this.containerRadius() / 2}px)`).text(this.onText());
|
|
600
|
+
label.append("div").attr("class", "onoffswitch-switch");
|
|
430
601
|
}
|
|
431
602
|
update(domNode, element) {
|
|
432
|
-
super.update(domNode, element)
|
|
603
|
+
super.update(domNode, element);
|
|
604
|
+
this._input.attr("name", this.name());
|
|
605
|
+
element.style("margin-left", this.marginLeft() + "px").style("margin-bottom", this.marginBottom() + "px").style("width", this.minWidth() + "px");
|
|
433
606
|
const _switch_size = this.minHeight() - this.gutter() * 4;
|
|
434
|
-
element.select(".onoffswitch-switch").style("height", _switch_size + "px").style("width", _switch_size + "px").style("top", this.gutter() * 2 + 1 + "px").style("border-radius", this.switchRadius() + "px")
|
|
607
|
+
element.select(".onoffswitch-switch").style("height", _switch_size + "px").style("width", _switch_size + "px").style("top", this.gutter() * 2 + 1 + "px").style("border-radius", this.switchRadius() + "px");
|
|
608
|
+
element.select(".onoffswitch-inner").style("min-height", this.minHeight() + "px");
|
|
609
|
+
element.select(".onoffswitch-label").style("border-radius", this.containerRadius() + "px");
|
|
610
|
+
element.select(".onoffswitch-offText").style("color", this.offFontColor()).style("background-color", this.offColor());
|
|
611
|
+
element.select(".onoffswitch-onText").style("color", this.onFontColor()).style("background-color", this.onColor());
|
|
435
612
|
}
|
|
436
|
-
}
|
|
613
|
+
};
|
|
614
|
+
__name(_OnOff, "OnOff");
|
|
615
|
+
let OnOff = _OnOff;
|
|
437
616
|
OnOff.prototype._class += " form_OnOff";
|
|
438
617
|
OnOff.prototype.implements(IInput.prototype);
|
|
439
618
|
OnOff.prototype.publish("marginLeft", 0, "number", "Margin left of OnOff");
|
|
@@ -449,24 +628,35 @@ OnOff.prototype.publish("onColor", "#2ecc71", "html-color", "Background color wh
|
|
|
449
628
|
OnOff.prototype.publish("offColor", "#ecf0f1", "html-color", "Background color when 'OFF'");
|
|
450
629
|
OnOff.prototype.publish("onFontColor", "#2c3e50", "html-color", "Font color when 'ON'");
|
|
451
630
|
OnOff.prototype.publish("offFontColor", "#7f8c8d", "html-color", "Font color when 'OFF'");
|
|
452
|
-
class
|
|
631
|
+
const _Radio = class _Radio extends HTMLWidget {
|
|
632
|
+
_inputElement = [];
|
|
453
633
|
constructor() {
|
|
454
634
|
super();
|
|
455
|
-
|
|
456
|
-
|
|
635
|
+
IInput.call(this);
|
|
636
|
+
this._tag = "div";
|
|
457
637
|
}
|
|
458
638
|
enter(domNode, element) {
|
|
459
639
|
super.enter(domNode, element);
|
|
460
|
-
const context = this
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
640
|
+
const context = this;
|
|
641
|
+
const radioContainer = element.append("ul");
|
|
642
|
+
if (!this.selectOptions().length) {
|
|
643
|
+
this.selectOptions().push("");
|
|
644
|
+
}
|
|
645
|
+
this.selectOptions().forEach(function(val, idx) {
|
|
646
|
+
context._inputElement[idx] = radioContainer.append("li").append("input").attr("type", "radio");
|
|
647
|
+
context._inputElement[idx].node().insertAdjacentHTML("afterend", "<text>" + val + "</text>");
|
|
648
|
+
});
|
|
649
|
+
this._inputElement.forEach(function(e, idx) {
|
|
650
|
+
e.attr("name", context.name());
|
|
651
|
+
e.on("click", function(w) {
|
|
465
652
|
w.click(w);
|
|
466
|
-
})
|
|
653
|
+
});
|
|
654
|
+
e.on("blur", function(w) {
|
|
467
655
|
w.blur(w);
|
|
468
|
-
})
|
|
469
|
-
|
|
656
|
+
});
|
|
657
|
+
e.on("change", function(w) {
|
|
658
|
+
context.value([e.property("value")]);
|
|
659
|
+
w.change(w, true);
|
|
470
660
|
});
|
|
471
661
|
});
|
|
472
662
|
}
|
|
@@ -474,43 +664,81 @@ class Radio extends HTMLWidget {
|
|
|
474
664
|
super.update(domNode, element);
|
|
475
665
|
const context = this;
|
|
476
666
|
this._inputElement.forEach(function(e, idx) {
|
|
477
|
-
e.property("value", context.selectOptions()[idx])
|
|
667
|
+
e.property("value", context.selectOptions()[idx]);
|
|
668
|
+
if (context.value().indexOf(context.selectOptions()[idx]) !== -1 && context.value() !== "false") {
|
|
669
|
+
e.property("checked", true);
|
|
670
|
+
} else {
|
|
671
|
+
e.property("checked", false);
|
|
672
|
+
}
|
|
478
673
|
});
|
|
479
674
|
}
|
|
480
|
-
}
|
|
675
|
+
};
|
|
676
|
+
__name(_Radio, "Radio");
|
|
677
|
+
let Radio = _Radio;
|
|
481
678
|
Radio.prototype._class += " form_Radio";
|
|
482
679
|
Radio.prototype.implements(IInput.prototype);
|
|
483
680
|
Radio.prototype.publish("selectOptions", [], "array", "Array of options used to fill a dropdown list");
|
|
484
|
-
class
|
|
681
|
+
const _Range = class _Range extends HTMLWidget {
|
|
682
|
+
_inputElement = [];
|
|
485
683
|
constructor() {
|
|
486
684
|
super();
|
|
487
|
-
|
|
488
|
-
|
|
685
|
+
IInput.call(this);
|
|
686
|
+
this._tag = "div";
|
|
489
687
|
}
|
|
490
688
|
enter(domNode, element) {
|
|
491
689
|
super.enter(domNode, element);
|
|
492
690
|
const context = this;
|
|
493
|
-
this._inputElement[0] = element.append("input").attr("type", "range")
|
|
494
|
-
|
|
691
|
+
this._inputElement[0] = element.append("input").attr("type", "range");
|
|
692
|
+
this._inputElement[1] = element.append("input").attr("type", "number");
|
|
693
|
+
this._inputElement.forEach(function(e, idx) {
|
|
694
|
+
e.attr("name", context.name());
|
|
695
|
+
e.on("click", function(w) {
|
|
495
696
|
w.click(w);
|
|
496
|
-
})
|
|
697
|
+
});
|
|
698
|
+
e.on("blur", function(w) {
|
|
497
699
|
w.blur(w);
|
|
498
|
-
})
|
|
499
|
-
|
|
700
|
+
});
|
|
701
|
+
e.on("change", function(w) {
|
|
702
|
+
if (idx === 0) {
|
|
703
|
+
context._inputElement[1].property("value", rgb(context._inputElement[0].property("value")).toString());
|
|
704
|
+
context.value(context._inputElement[0].property("value"));
|
|
705
|
+
} else {
|
|
706
|
+
context._inputElement[0].property("value", context._inputElement[1].property("value"));
|
|
707
|
+
context.value(rgb(context._inputElement[1].property("value")).toString());
|
|
708
|
+
}
|
|
709
|
+
w.change(w, true);
|
|
500
710
|
});
|
|
501
711
|
});
|
|
502
712
|
}
|
|
503
713
|
update(domNode, element) {
|
|
504
|
-
super.update(domNode, element)
|
|
714
|
+
super.update(domNode, element);
|
|
715
|
+
this._inputElement[0].attr("type", "range");
|
|
716
|
+
this._inputElement[0].property("value", this.value());
|
|
717
|
+
this._inputElement[0].attr("min", this.low());
|
|
718
|
+
this._inputElement[0].attr("max", this.high());
|
|
719
|
+
this._inputElement[0].attr("step", this.step());
|
|
720
|
+
this._inputElement[1].attr("type", "number");
|
|
721
|
+
this._inputElement[1].property("value", this.value());
|
|
722
|
+
this._inputElement[1].attr("min", this.low());
|
|
723
|
+
this._inputElement[1].attr("max", this.high());
|
|
724
|
+
this._inputElement[1].attr("step", this.step());
|
|
505
725
|
}
|
|
506
726
|
insertSelectOptions(optionsArr) {
|
|
507
727
|
let optionHTML = "";
|
|
508
|
-
optionsArr.length > 0
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
728
|
+
if (optionsArr.length > 0) {
|
|
729
|
+
optionsArr.forEach(function(opt) {
|
|
730
|
+
const val = opt instanceof Array ? opt[0] : opt;
|
|
731
|
+
const text = opt instanceof Array ? opt[1] ? opt[1] : opt[0] : opt;
|
|
732
|
+
optionHTML += "<option value='" + val + "'>" + text + "</option>";
|
|
733
|
+
});
|
|
734
|
+
} else {
|
|
735
|
+
optionHTML += "<option>selectOptions not set</option>";
|
|
736
|
+
}
|
|
737
|
+
this._inputElement[0].html(optionHTML);
|
|
512
738
|
}
|
|
513
|
-
}
|
|
739
|
+
};
|
|
740
|
+
__name(_Range, "Range");
|
|
741
|
+
let Range = _Range;
|
|
514
742
|
Range.prototype._class += " form_Range";
|
|
515
743
|
Range.prototype.implements(IInput.prototype);
|
|
516
744
|
Range.prototype.publish("type", "text", "set", "Input type", ["html-color", "number", "checkbox", "button", "select", "textarea", "date", "text", "range", "search", "email", "time", "datetime"]);
|
|
@@ -518,11 +746,12 @@ Range.prototype.publish("selectOptions", [], "array", "Array of options used to
|
|
|
518
746
|
Range.prototype.publish("low", null, "number", "Minimum value for Range input");
|
|
519
747
|
Range.prototype.publish("high", null, "number", "Maximum value for Range input");
|
|
520
748
|
Range.prototype.publish("step", null, "number", "Step value for Range input");
|
|
521
|
-
class
|
|
749
|
+
const _Select = class _Select extends HTMLWidget {
|
|
750
|
+
_inputElement = [];
|
|
522
751
|
constructor() {
|
|
523
752
|
super();
|
|
524
|
-
|
|
525
|
-
|
|
753
|
+
IInput.call(this);
|
|
754
|
+
this._tag = "div";
|
|
526
755
|
}
|
|
527
756
|
enter(domNode, element) {
|
|
528
757
|
super.enter(domNode, element);
|
|
@@ -532,138 +761,223 @@ class Select extends HTMLWidget {
|
|
|
532
761
|
}).on("blur", function(w) {
|
|
533
762
|
w.blur(w);
|
|
534
763
|
}).on("change", function(w) {
|
|
535
|
-
context.value([context._inputElement[0].property("value")])
|
|
764
|
+
context.value([context._inputElement[0].property("value")]);
|
|
765
|
+
w.change(w, true);
|
|
536
766
|
});
|
|
537
767
|
}
|
|
538
768
|
update(domNode, element) {
|
|
539
|
-
super.update(domNode, element)
|
|
769
|
+
super.update(domNode, element);
|
|
770
|
+
this.insertSelectOptions(this.selectOptions());
|
|
771
|
+
this._inputElement[0].property("value", this.value()).style("max-width", this.maxWidth_exists() ? this.maxWidth() + "px" : null);
|
|
540
772
|
}
|
|
541
773
|
insertSelectOptions(optionsArr) {
|
|
542
774
|
let optionHTML = "";
|
|
543
|
-
optionsArr.length > 0
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
775
|
+
if (optionsArr.length > 0) {
|
|
776
|
+
optionsArr.forEach(function(opt) {
|
|
777
|
+
const val = opt instanceof Array ? opt[0] : opt;
|
|
778
|
+
const text = opt instanceof Array ? opt[1] ? opt[1] : opt[0] : opt;
|
|
779
|
+
optionHTML += "<option value='" + val + "'>" + text + "</option>";
|
|
780
|
+
});
|
|
781
|
+
} else {
|
|
782
|
+
optionHTML += "<option>selectOptions not set</option>";
|
|
783
|
+
}
|
|
784
|
+
this._inputElement[0].html(optionHTML);
|
|
547
785
|
}
|
|
548
|
-
}
|
|
786
|
+
};
|
|
787
|
+
__name(_Select, "Select");
|
|
788
|
+
let Select = _Select;
|
|
549
789
|
Select.prototype._class += " form_Select";
|
|
550
790
|
Select.prototype.implements(IInput.prototype);
|
|
551
791
|
Select.prototype.publish("selectOptions", [], "array", "Array of options used to fill a dropdown list");
|
|
552
|
-
Select.prototype.publish("maxWidth", 120, "number", "Width", null, { optional:
|
|
553
|
-
class
|
|
792
|
+
Select.prototype.publish("maxWidth", 120, "number", "Width", null, { optional: true });
|
|
793
|
+
const _Slider = class _Slider extends SVGWidget {
|
|
794
|
+
xScale;
|
|
795
|
+
moveMode;
|
|
796
|
+
moveStartPos;
|
|
797
|
+
prevValue;
|
|
798
|
+
slider;
|
|
799
|
+
handleLeft;
|
|
800
|
+
handleLeftPos = 0;
|
|
801
|
+
handleLeftStartPos;
|
|
802
|
+
handleRight;
|
|
803
|
+
handleRightPos = 0;
|
|
804
|
+
handleRightStartPos;
|
|
554
805
|
constructor() {
|
|
555
806
|
super();
|
|
556
|
-
__publicField(this, "xScale");
|
|
557
|
-
__publicField(this, "moveMode");
|
|
558
|
-
__publicField(this, "moveStartPos");
|
|
559
|
-
__publicField(this, "prevValue");
|
|
560
|
-
__publicField(this, "slider");
|
|
561
|
-
__publicField(this, "handleLeft");
|
|
562
|
-
__publicField(this, "handleLeftPos", 0);
|
|
563
|
-
__publicField(this, "handleLeftStartPos");
|
|
564
|
-
__publicField(this, "handleRight");
|
|
565
|
-
__publicField(this, "handleRightPos", 0);
|
|
566
|
-
__publicField(this, "handleRightStartPos");
|
|
567
|
-
__publicField(this, "handlePath", function(d) {
|
|
568
|
-
const e = +(d === "r"), x = e ? 1 : -1, xOffset = this.allowRange() ? 0.5 : 0, y = 18;
|
|
569
|
-
let retVal = "M" + xOffset * x + "," + y + "A6,6 0 0 " + e + " " + 6.5 * x + "," + (y + 6) + "V" + (2 * y - 6) + "A6,6 0 0 " + e + " " + xOffset * x + "," + 2 * y;
|
|
570
|
-
return this.allowRange() ? retVal += "ZM" + 2.5 * x + "," + (y + 8) + "V" + (2 * y - 8) + "M" + 4.5 * x + "," + (y + 8) + "V" + (2 * y - 8) : retVal += "M" + 1 * x + "," + (y + 8) + "V" + (2 * y - 8), retVal;
|
|
571
|
-
});
|
|
572
807
|
IInput.call(this);
|
|
573
808
|
}
|
|
574
809
|
enter(domNode, element) {
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
810
|
+
super.enter(domNode, element);
|
|
811
|
+
this.resize({ width: this.width(), height: 50 });
|
|
812
|
+
this.xScale = scaleLinear().clamp(true);
|
|
813
|
+
this.slider = element.append("g").attr("class", "slider");
|
|
814
|
+
if (this.low() === null && this.high() === null) {
|
|
815
|
+
if (this.lowDatetime() !== null && this.highDatetime() !== null) {
|
|
816
|
+
const time_parser = timeParse(this.timePattern() ? this.timePattern() : "%Q");
|
|
817
|
+
this.low(time_parser(this.lowDatetime()).getTime());
|
|
818
|
+
this.high(time_parser(this.highDatetime()).getTime());
|
|
819
|
+
}
|
|
578
820
|
}
|
|
579
821
|
this.slider.append("line").attr("class", "track").select(function() {
|
|
580
|
-
return this.parentNode.appendChild(this.cloneNode(
|
|
822
|
+
return this.parentNode.appendChild(this.cloneNode(true));
|
|
581
823
|
}).attr("class", "track-inset").select(function() {
|
|
582
|
-
return this.parentNode.appendChild(this.cloneNode(
|
|
824
|
+
return this.parentNode.appendChild(this.cloneNode(true));
|
|
583
825
|
}).attr("class", "track-overlay").call(drag().on("start", () => {
|
|
584
826
|
const event = d3Event();
|
|
585
|
-
this.moveStartPos = event.x
|
|
827
|
+
this.moveStartPos = event.x;
|
|
828
|
+
this.handleLeftStartPos = this.handleLeftPos;
|
|
829
|
+
this.handleRightStartPos = this.handleRightPos;
|
|
830
|
+
if (this.allowRange() && this.handleLeftPos <= event.x && event.x <= this.handleRightPos) {
|
|
831
|
+
this.moveMode = "both";
|
|
832
|
+
} else if (Math.abs(event.x - this.handleLeftPos) < Math.abs(event.x - this.handleRightPos)) {
|
|
833
|
+
this.moveMode = "left";
|
|
834
|
+
} else {
|
|
835
|
+
this.moveMode = "right";
|
|
836
|
+
}
|
|
837
|
+
this.moveHandleTo(event.x);
|
|
586
838
|
}).on("drag", () => {
|
|
587
839
|
this.moveHandleTo(d3Event().x);
|
|
588
840
|
}).on("end", () => {
|
|
589
|
-
this.moveHandleTo(d3Event().x)
|
|
590
|
-
|
|
841
|
+
this.moveHandleTo(d3Event().x);
|
|
842
|
+
this.data([[this.xScale.invert(this.handleLeftPos), this.xScale.invert(this.handleRightPos)]]);
|
|
843
|
+
this.checkChangedValue();
|
|
844
|
+
}));
|
|
845
|
+
this.slider.insert("g", ".track-overlay").attr("class", "ticks").attr("transform", `translate(0, ${this.fontSize() + this.tickHeight() / 2})`);
|
|
846
|
+
this.handleRight = this.slider.insert("path", ".track-overlay").attr("class", "handle");
|
|
847
|
+
this.handleLeft = this.slider.insert("path", ".track-overlay").attr("class", "handle");
|
|
591
848
|
}
|
|
592
849
|
update(domNode, element) {
|
|
593
850
|
super.update(domNode, element);
|
|
594
851
|
const context = this;
|
|
595
|
-
this.xScale.domain([this.low(), this.high()]).range([0, this.width() - this.padding() * 2])
|
|
596
|
-
|
|
852
|
+
this.xScale.domain([this.low(), this.high()]).range([0, this.width() - this.padding() * 2]);
|
|
853
|
+
this.slider.attr("transform", "translate(" + (-this.width() / 2 + this.padding()) + ",0)");
|
|
854
|
+
this.slider.selectAll("line.track,line.track-inset,line.track-overlay").attr("x1", this.xScale.range()[0]).attr("x2", this.xScale.range()[1]);
|
|
855
|
+
const x_distance = (this.width() - this.padding() * 2) / (this.tickCount() - 1);
|
|
856
|
+
const tick_text_arr = [];
|
|
597
857
|
if (this.tickDateFormat() !== null && this.timePattern() !== null) {
|
|
598
|
-
const Q_parser = timeParse("%Q")
|
|
858
|
+
const Q_parser = timeParse("%Q");
|
|
859
|
+
const time_formatter = timeFormat(this.tickDateFormat());
|
|
860
|
+
const time_segment = (this.high() - this.low()) / (this.tickCount() - 1);
|
|
599
861
|
for (let i = 0; i < this.tickCount(); i++) {
|
|
600
|
-
const date_to_parse = "" + (this.low() + time_segment * i)
|
|
862
|
+
const date_to_parse = "" + (this.low() + time_segment * i);
|
|
863
|
+
const parsed_date = Q_parser(date_to_parse);
|
|
601
864
|
tick_text_arr.push(time_formatter(parsed_date));
|
|
602
865
|
}
|
|
603
866
|
} else {
|
|
604
|
-
const value_formatter = format(this.tickValueFormat())
|
|
867
|
+
const value_formatter = format(this.tickValueFormat());
|
|
868
|
+
const value_segment = (this.high() - this.low()) / (this.tickCount() - 1);
|
|
605
869
|
for (let i = 0; i < this.tickCount(); i++) {
|
|
606
870
|
const tick_value = this.low() + value_segment * i;
|
|
607
871
|
tick_text_arr.push(value_formatter(tick_value));
|
|
608
872
|
}
|
|
609
873
|
}
|
|
610
|
-
const tickText = this.slider.selectAll("g.tick").data(tick_text_arr)
|
|
611
|
-
tickTextEnter.
|
|
874
|
+
const tickText = this.slider.selectAll("g.tick").data(tick_text_arr);
|
|
875
|
+
const tickTextEnter = tickText.enter().append("g").attr("class", "tick");
|
|
876
|
+
tickTextEnter.append("text").attr("class", "tick-text");
|
|
877
|
+
tickTextEnter.append("line").attr("class", "tick-line");
|
|
878
|
+
tickTextEnter.merge(tickText).each(function(d, i) {
|
|
612
879
|
const x = x_distance * i;
|
|
613
880
|
select(this).select("text.tick-text").style("font-size", context.fontSize()).attr("x", function() {
|
|
614
|
-
|
|
881
|
+
if (i === 0) return x - 2;
|
|
882
|
+
return i === context.tickCount() - 1 ? x + 2 : x;
|
|
615
883
|
}).attr("y", context.tickHeight() + context.tickOffset() / 2 + context.fontSize()).attr("text-basline", "text-before-edge").attr("text-anchor", function() {
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
884
|
+
if (i === 0) return "start";
|
|
885
|
+
return i === context.tickCount() - 1 ? "end" : "middle";
|
|
886
|
+
}).text(() => d);
|
|
887
|
+
select(this).select("line.tick-line").attr("x1", x).attr("x2", x).attr("y1", context.tickOffset() - 1).attr("y2", context.tickOffset() + context.tickHeight()).style("stroke", "#000").style("stroke-width", 1);
|
|
888
|
+
});
|
|
889
|
+
this.slider.node().appendChild(this.handleRight.node());
|
|
890
|
+
this.slider.node().appendChild(this.handleLeft.node());
|
|
891
|
+
this.handleLeftPos = this.lowPos();
|
|
892
|
+
this.handleRightPos = this.highPos();
|
|
893
|
+
this.updateHandles();
|
|
894
|
+
this.checkChangedValue();
|
|
619
895
|
}
|
|
620
896
|
checkChangedValue() {
|
|
621
|
-
this.prevValue !== this.value() && typeof this.prevValue
|
|
897
|
+
if (this.prevValue !== this.value() && typeof this.prevValue !== "undefined") {
|
|
898
|
+
this.change(this);
|
|
899
|
+
}
|
|
900
|
+
this.prevValue = this.value();
|
|
622
901
|
}
|
|
623
902
|
updateHandles() {
|
|
624
|
-
this.handleLeft.attr("transform", `translate(${this.handleLeftPos}, -28)`).attr("d", (d) => this.handlePath("l"))
|
|
903
|
+
this.handleLeft.attr("transform", `translate(${this.handleLeftPos}, -28)`).attr("d", (d) => this.handlePath("l"));
|
|
904
|
+
this.handleRight.attr("transform", `translate(${this.handleRightPos}, -28)`).attr("d", (d) => this.handlePath("r"));
|
|
625
905
|
}
|
|
626
906
|
lowPos() {
|
|
627
907
|
let data = [[this.low(), this.high()]];
|
|
628
|
-
|
|
908
|
+
if (this.data().length > 0 && typeof this.data()[0][0] === "number" && typeof this.data()[0][1] === "number") {
|
|
909
|
+
data = this.data();
|
|
910
|
+
}
|
|
911
|
+
return this.xScale(data[0][0]);
|
|
629
912
|
}
|
|
630
913
|
highPos() {
|
|
631
914
|
let data = [[this.low(), this.high()]];
|
|
632
|
-
|
|
915
|
+
if (this.data().length > 0 && typeof this.data()[0][0] === "number" && typeof this.data()[0][1] === "number") {
|
|
916
|
+
data = this.data();
|
|
917
|
+
}
|
|
918
|
+
return this.xScale(data[0][this.allowRange() ? 1 : 0]);
|
|
633
919
|
}
|
|
634
920
|
moveHandleTo(pos) {
|
|
635
|
-
if (this.allowRange())
|
|
921
|
+
if (this.allowRange()) {
|
|
636
922
|
switch (this.moveMode) {
|
|
637
923
|
case "both":
|
|
638
|
-
this.handleLeftPos = this.handleLeftStartPos + pos - this.moveStartPos
|
|
924
|
+
this.handleLeftPos = this.handleLeftStartPos + pos - this.moveStartPos;
|
|
925
|
+
this.handleRightPos = this.handleRightStartPos + pos - this.moveStartPos;
|
|
639
926
|
break;
|
|
640
927
|
case "left":
|
|
641
|
-
this.handleLeftPos = pos
|
|
928
|
+
this.handleLeftPos = pos;
|
|
929
|
+
if (this.handleLeftPos > this.handleRightPos) {
|
|
930
|
+
this.handleRightPos = this.handleLeftPos;
|
|
931
|
+
}
|
|
642
932
|
break;
|
|
643
933
|
case "right":
|
|
644
|
-
this.handleRightPos = pos
|
|
934
|
+
this.handleRightPos = pos;
|
|
935
|
+
if (this.handleRightPos < this.handleLeftPos) {
|
|
936
|
+
this.handleLeftPos = this.handleRightPos;
|
|
937
|
+
}
|
|
645
938
|
break;
|
|
646
939
|
}
|
|
647
|
-
else
|
|
940
|
+
} else {
|
|
648
941
|
this.handleLeftPos = this.handleRightPos = pos;
|
|
649
|
-
|
|
942
|
+
}
|
|
943
|
+
this.handleLeftPos = this.constrain(this.handleLeftPos);
|
|
944
|
+
this.handleRightPos = this.constrain(this.handleRightPos);
|
|
945
|
+
this.value(this.allowRange() ? [this.xScale.invert(this.handleLeftPos), this.xScale.invert(this.handleRightPos)] : this.xScale.invert(this.handleLeftPos));
|
|
946
|
+
this.updateHandles();
|
|
650
947
|
}
|
|
651
948
|
constrain(pos) {
|
|
652
949
|
const range = this.xScale.range();
|
|
653
|
-
|
|
950
|
+
if (pos < range[0]) pos = range[0];
|
|
951
|
+
if (pos > range[1]) pos = range[1];
|
|
952
|
+
return this.nearestStep(pos);
|
|
654
953
|
}
|
|
655
954
|
nearestStep(pos) {
|
|
656
955
|
const value2 = this.xScale.invert(pos);
|
|
657
956
|
return this.xScale(this.low() + Math.round((value2 - this.low()) / this.step()) * this.step());
|
|
658
957
|
}
|
|
659
|
-
|
|
958
|
+
handlePath = /* @__PURE__ */ __name(function(d) {
|
|
959
|
+
const e = +(d === "r");
|
|
960
|
+
const x = e ? 1 : -1;
|
|
961
|
+
const xOffset = this.allowRange() ? 0.5 : 0;
|
|
962
|
+
const y = 18;
|
|
963
|
+
let retVal = "M" + xOffset * x + "," + y + "A6,6 0 0 " + e + " " + 6.5 * x + "," + (y + 6) + "V" + (2 * y - 6) + "A6,6 0 0 " + e + " " + xOffset * x + "," + 2 * y;
|
|
964
|
+
if (this.allowRange()) {
|
|
965
|
+
retVal += "ZM" + 2.5 * x + "," + (y + 8) + "V" + (2 * y - 8) + "M" + 4.5 * x + "," + (y + 8) + "V" + (2 * y - 8);
|
|
966
|
+
} else {
|
|
967
|
+
retVal += "M" + 1 * x + "," + (y + 8) + "V" + (2 * y - 8);
|
|
968
|
+
}
|
|
969
|
+
return retVal;
|
|
970
|
+
}, "handlePath");
|
|
971
|
+
};
|
|
972
|
+
__name(_Slider, "Slider");
|
|
973
|
+
let Slider = _Slider;
|
|
660
974
|
Slider.prototype._class += " form_Slider";
|
|
661
975
|
Slider.prototype.implements(IInput.prototype);
|
|
662
976
|
Slider.prototype.publish("padding", 16, "number", "Outer Padding", null, { tags: ["Basic"] });
|
|
663
977
|
Slider.prototype.publish("fontSize", 12, "number", "Font Size", null, { tags: ["Basic"] });
|
|
664
978
|
Slider.prototype.publish("fontFamily", null, "string", "Font Name", null, { tags: ["Basic"] });
|
|
665
979
|
Slider.prototype.publish("fontColor", null, "html-color", "Font Color", null, { tags: ["Basic"] });
|
|
666
|
-
Slider.prototype.publish("allowRange",
|
|
980
|
+
Slider.prototype.publish("allowRange", false, "boolean", "Allow Range Selection", null, { tags: ["Intermediate"] });
|
|
667
981
|
Slider.prototype.publish("low", null, "number", "Low", null, { tags: ["Intermediate"] });
|
|
668
982
|
Slider.prototype.publish("high", null, "number", "High", null, { tags: ["Intermediate"] });
|
|
669
983
|
Slider.prototype.publish("step", 10, "number", "Step", null, { tags: ["Intermediate"] });
|
|
@@ -688,15 +1002,21 @@ Slider.prototype.name = function(_) {
|
|
|
688
1002
|
const value = Slider.prototype.value;
|
|
689
1003
|
Slider.prototype.value = function(_) {
|
|
690
1004
|
const retVal = value.apply(this, arguments);
|
|
691
|
-
if (arguments.length)
|
|
1005
|
+
if (!arguments.length) {
|
|
1006
|
+
if (!this.allowRange()) {
|
|
1007
|
+
return SVGWidget.prototype.data.call(this)[0][0];
|
|
1008
|
+
}
|
|
1009
|
+
return SVGWidget.prototype.data.call(this)[0];
|
|
1010
|
+
} else {
|
|
692
1011
|
SVGWidget.prototype.data.call(this, [this.allowRange() ? _ : [_, _]]);
|
|
693
|
-
|
|
694
|
-
return this.allowRange() ? SVGWidget.prototype.data.call(this)[0] : SVGWidget.prototype.data.call(this)[0][0];
|
|
1012
|
+
}
|
|
695
1013
|
return retVal;
|
|
696
1014
|
};
|
|
697
|
-
class
|
|
1015
|
+
const _TextArea = class _TextArea extends Input {
|
|
698
1016
|
constructor() {
|
|
699
|
-
super()
|
|
1017
|
+
super();
|
|
1018
|
+
this._tag = "div";
|
|
1019
|
+
this.type("textarea");
|
|
700
1020
|
}
|
|
701
1021
|
enter(domNode, element) {
|
|
702
1022
|
super.enter(domNode, element);
|
|
@@ -705,15 +1025,18 @@ class TextArea extends Input {
|
|
|
705
1025
|
return Math.max(this.minHeight_exists() ? this.minHeight() : 0, this.height());
|
|
706
1026
|
}
|
|
707
1027
|
update(domNode, element) {
|
|
708
|
-
super.update(domNode, element)
|
|
1028
|
+
super.update(domNode, element);
|
|
1029
|
+
this._inputElement[0].attr("rows", this.rows()).attr("cols", this.cols()).attr("wrap", this.wrap()).attr("spellcheck", this.spellcheck()).style("height", this.calcHeight() + "px");
|
|
709
1030
|
}
|
|
710
|
-
}
|
|
1031
|
+
};
|
|
1032
|
+
__name(_TextArea, "TextArea");
|
|
1033
|
+
let TextArea = _TextArea;
|
|
711
1034
|
TextArea.prototype._class += " form_TextArea";
|
|
712
|
-
TextArea.prototype.publish("rows", null, "number", "Rows", null, { optional:
|
|
713
|
-
TextArea.prototype.publish("cols", null, "number", "Columns", null, { optional:
|
|
1035
|
+
TextArea.prototype.publish("rows", null, "number", "Rows", null, { optional: true });
|
|
1036
|
+
TextArea.prototype.publish("cols", null, "number", "Columns", null, { optional: true });
|
|
714
1037
|
TextArea.prototype.publish("wrap", "off", "set", "Wrap", ["off", "on"]);
|
|
715
|
-
TextArea.prototype.publish("minHeight", null, "number", "Minimum Height", null, { optional:
|
|
716
|
-
TextArea.prototype.publish("spellcheck", null, "boolean", "Input spell checking", { optional:
|
|
1038
|
+
TextArea.prototype.publish("minHeight", null, "number", "Minimum Height", null, { optional: true });
|
|
1039
|
+
TextArea.prototype.publish("spellcheck", null, "boolean", "Input spell checking", { optional: true });
|
|
717
1040
|
export {
|
|
718
1041
|
BUILD_VERSION,
|
|
719
1042
|
Button,
|
|
@@ -733,4 +1056,4 @@ export {
|
|
|
733
1056
|
TextArea
|
|
734
1057
|
};
|
|
735
1058
|
//# sourceMappingURL=index.js.map
|
|
736
|
-
|
|
1059
|
+
!function(){"use strict";try{if("undefined"!=typeof document){var o=document.createElement("style");o.appendChild(document.createTextNode(".form_Input input,.form_Input select,.form_Input button,.form_Input textarea{padding:2px}.form_Input button{cursor:pointer}.form_Input input.color-text{width:120px}.form_Input input.color-text+input{width:57px;position:absolute}.form_Input textarea,.form_Input input[type=textbox]{width:100%;box-sizing:border-box;display:block}.form_Input ul{list-style-type:none;float:left;padding:0;margin:0}.form_Input li{float:left;list-style-position:inside}.form_Form{color:#404040}.form_Form tbody td{white-space:nowrap;border:1px solid #E5E5E5}.form_Form td.prompt{padding:2px;vertical-align:middle;background-color:#e5e5e5}.form_Form td.input{padding:2px;width:100%;vertical-align:middle}.form_Form td.input .common_HTMLWidget ul{margin:0}.form_Form tfoot button{margin:5px}.form_Form tbody tr:hover{background-color:#fafafa}.form_Form .form_Button button{background-position:-1px -1px;box-sizing:border-box;color:#24292e;cursor:pointer;height:28px;inset:0;overflow-wrap:break-word;position:relative;text-decoration:none solid rgb(36,41,46);vertical-align:middle;white-space:nowrap;word-wrap:break-word;column-rule-color:#24292e;perspective-origin:57.2938px 14px;transform-origin:57.2938px 14px;-webkit-user-select:none;user-select:none;background:#eff3f6 linear-gradient(-180deg,#fafbfc,#eff3f6 90%) repeat-x scroll -1px -1px / 110% 110% padding-box border-box;border:1px solid rgba(27,31,35,.2);border-radius:3px;outline:rgb(36,41,46) none 0px;padding:3px 10px}.form_Form .form_Button button[disabled=disabled]{background:#dbdfe2}.form_Form .form_Button button:focus{box-shadow:0 0 0 .2em #0366d64d}.form_Form .form_Button button:hover{background:#dbdfe2}.form_Form .form_Button.default button{color:#fff;text-decoration:none solid rgb(255,255,255);word-wrap:break-word;column-rule-color:#fff;perspective-origin:44.975px 17px;transform-origin:44.975px 17px;background:#28a745 linear-gradient(-180deg,#34d058,#28a745 90%) repeat-x scroll -1px -1px / 110% 110% padding-box border-box;outline:rgb(255,255,255) none 0px}.form_Form .form_Button.default button[disabled=disabled],.form_Form .form_Button.default button[disabled=disabled]:hover{background:#dbdfe2}.form_Form .form_Button.default button:hover{background:#149331}.onoffswitch-checkbox{display:none}.onoffswitch{position:relative;height:20px;width:100px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.onoffswitch-label{display:block;overflow:hidden;cursor:pointer;border:1px solid #999999;height:20px}.onoffswitch-inner{position:relative;display:block;transition:margin .3s ease-in 0s}.onoffswitch-inner>.onoffswitch-offText,.onoffswitch-inner>.onoffswitch-onText{height:100%}.onoffswitch-inner>.onoffswitch-offText{font-weight:700;position:absolute;right:0;transition:all .3s ease-in 0s;width:100%;text-align:right}.onoffswitch-inner>.onoffswitch-onText{font-weight:700;position:absolute;left:-100%;transition:all .3s ease-in 0s;width:100%;text-align:left}.onoffswitch-switch{display:block;width:20px;margin:-1px;background:#fff;position:absolute;border:1px solid #999999;transition:all .3s ease-in 0s;inset:0 78px 0 4px}.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner>.onoffswitch-offText{right:-100%}.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner>.onoffswitch-onText{left:0}.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch{left:calc(100% - 20px)}.form_Slider .ticks{font:10px sans-serif}.form_Slider .track,.form_Slider .track-inset,.form_Slider .track-overlay{stroke-linecap:round}.form_Slider .track{stroke:#000;stroke-opacity:.3;stroke-width:10px}.form_Slider .track-inset{stroke:#ddd;stroke-width:8px}.form_Slider .track-overlay{pointer-events:stroke;stroke-width:50px;stroke:transparent;cursor:crosshair}.form_Slider .handle{fill:#fff;stroke:#000;stroke-opacity:.5;stroke-width:1.25px}.form_Slider .tick-line{stroke:#000;stroke-opacity:.5;stroke-width:1px;shape-rendering:crispEdges}")),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
|