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