@hpcc-js/form 2.12.0 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/dist/index.js +227 -1288
  2. package/dist/index.js.map +7 -1
  3. package/package.json +31 -34
  4. package/src/Button.ts +11 -10
  5. package/src/CheckBox.ts +21 -13
  6. package/src/ColorInput.ts +16 -10
  7. package/src/FieldForm.ts +2 -2
  8. package/src/Form.ts +20 -13
  9. package/src/Input.ts +39 -24
  10. package/src/InputRange.ts +24 -15
  11. package/src/OnOff.ts +15 -10
  12. package/src/Radio.ts +21 -13
  13. package/src/Range.ts +33 -21
  14. package/src/Select.ts +24 -15
  15. package/src/Slider.ts +7 -3
  16. package/src/TextArea.ts +19 -12
  17. package/src/__package__.ts +2 -2
  18. package/src/index.ts +14 -14
  19. package/types/Button.d.ts +10 -21
  20. package/types/CheckBox.d.ts +17 -26
  21. package/types/ColorInput.d.ts +14 -21
  22. package/types/FieldForm.d.ts +1 -2
  23. package/types/Form.d.ts +18 -27
  24. package/types/Input.d.ts +28 -42
  25. package/types/InputRange.d.ts +20 -31
  26. package/types/OnOff.d.ts +12 -21
  27. package/types/Radio.d.ts +17 -26
  28. package/types/Range.d.ts +29 -46
  29. package/types/Select.d.ts +20 -31
  30. package/types/Slider.d.ts +3 -3
  31. package/types/TextArea.d.ts +18 -31
  32. package/types/__package__.d.ts +2 -3
  33. package/types/index.d.ts +14 -15
  34. package/dist/index.es6.js +0 -1271
  35. package/dist/index.es6.js.map +0 -1
  36. package/dist/index.min.js +0 -2
  37. package/dist/index.min.js.map +0 -1
  38. package/types/Button.d.ts.map +0 -1
  39. package/types/CheckBox.d.ts.map +0 -1
  40. package/types/ColorInput.d.ts.map +0 -1
  41. package/types/FieldForm.d.ts.map +0 -1
  42. package/types/Form.d.ts.map +0 -1
  43. package/types/Input.d.ts.map +0 -1
  44. package/types/InputRange.d.ts.map +0 -1
  45. package/types/OnOff.d.ts.map +0 -1
  46. package/types/Radio.d.ts.map +0 -1
  47. package/types/Range.d.ts.map +0 -1
  48. package/types/Select.d.ts.map +0 -1
  49. package/types/Slider.d.ts.map +0 -1
  50. package/types/TextArea.d.ts.map +0 -1
  51. package/types/__package__.d.ts.map +0 -1
  52. package/types/index.d.ts.map +0 -1
  53. package/types-3.4/Button.d.ts +0 -29
  54. package/types-3.4/CheckBox.d.ts +0 -35
  55. package/types-3.4/ColorInput.d.ts +0 -29
  56. package/types-3.4/FieldForm.d.ts +0 -11
  57. package/types-3.4/Form.d.ts +0 -53
  58. package/types-3.4/Input.d.ts +0 -51
  59. package/types-3.4/InputRange.d.ts +0 -41
  60. package/types-3.4/OnOff.d.ts +0 -58
  61. package/types-3.4/Radio.d.ts +0 -34
  62. package/types-3.4/Range.d.ts +0 -55
  63. package/types-3.4/Select.d.ts +0 -40
  64. package/types-3.4/Slider.d.ts +0 -86
  65. package/types-3.4/TextArea.d.ts +0 -37
  66. package/types-3.4/__package__.d.ts +0 -4
  67. package/types-3.4/index.d.ts +0 -15
package/dist/index.es6.js DELETED
@@ -1,1271 +0,0 @@
1
- import { IInput } from '@hpcc-js/api';
2
- import { HTMLWidget, rgb, WidgetArray, d3Event, select, SVGWidget, scaleLinear, timeParse, drag, timeFormat, format } from '@hpcc-js/common';
3
-
4
- var PKG_NAME = "@hpcc-js/form";
5
- var PKG_VERSION = "2.12.0";
6
- var BUILD_VERSION = "2.107.0";
7
-
8
- /******************************************************************************
9
- Copyright (c) Microsoft Corporation.
10
-
11
- Permission to use, copy, modify, and/or distribute this software for any
12
- purpose with or without fee is hereby granted.
13
-
14
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
15
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
16
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
17
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
18
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
19
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
20
- PERFORMANCE OF THIS SOFTWARE.
21
- ***************************************************************************** */
22
- /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
23
-
24
- var extendStatics = function(d, b) {
25
- extendStatics = Object.setPrototypeOf ||
26
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
27
- function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
28
- return extendStatics(d, b);
29
- };
30
-
31
- function __extends(d, b) {
32
- if (typeof b !== "function" && b !== null)
33
- throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
34
- extendStatics(d, b);
35
- function __() { this.constructor = d; }
36
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
37
- }
38
-
39
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
40
- var e = new Error(message);
41
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
42
- };
43
-
44
- function styleInject(css, ref) {
45
- if ( ref === void 0 ) ref = {};
46
- var insertAt = ref.insertAt;
47
-
48
- if (!css || typeof document === 'undefined') { return; }
49
-
50
- var head = document.head || document.getElementsByTagName('head')[0];
51
- var style = document.createElement('style');
52
- style.type = 'text/css';
53
-
54
- if (insertAt === 'top') {
55
- if (head.firstChild) {
56
- head.insertBefore(style, head.firstChild);
57
- } else {
58
- head.appendChild(style);
59
- }
60
- } else {
61
- head.appendChild(style);
62
- }
63
-
64
- if (style.styleSheet) {
65
- style.styleSheet.cssText = css;
66
- } else {
67
- style.appendChild(document.createTextNode(css));
68
- }
69
- }
70
-
71
- var css_248z$3 = ".form_Input button,.form_Input input,.form_Input select,.form_Input textarea{padding:2px}.form_Input button{cursor:pointer}.form_Input input.color-text{width:120px}.form_Input input.color-text+input{position:absolute;width:57px}.form_Input input[type=textbox],.form_Input textarea{box-sizing:border-box;display:block;width:100%}.form_Input ul{float:left;list-style-type:none;margin:0;padding:0}.form_Input li{float:left;list-style-position:inside}";
72
- styleInject(css_248z$3);
73
-
74
- var Button = /** @class */ (function (_super) {
75
- __extends(Button, _super);
76
- function Button() {
77
- var _this = _super.call(this) || this;
78
- _this._inputElement = [];
79
- IInput.call(_this);
80
- _this._tag = "div";
81
- return _this;
82
- }
83
- Button.prototype.enter = function (domNode, element) {
84
- _super.prototype.enter.call(this, domNode, element);
85
- var context = this;
86
- this._inputElement[0] = element.append("button")
87
- .attr("name", this.name())
88
- .on("click", function (w) {
89
- w.click(w);
90
- })
91
- .on("blur", function (w) {
92
- w.blur(w);
93
- })
94
- .on("change", function (w) {
95
- context.value([context._inputElement[0].property("value")]);
96
- w.change(w, true);
97
- });
98
- };
99
- Button.prototype.update = function (domNode, element) {
100
- _super.prototype.update.call(this, domNode, element);
101
- this._inputElement[0].text(this.value());
102
- };
103
- return Button;
104
- }(HTMLWidget));
105
- Button.prototype._class += " form_Button";
106
- Button.prototype.implements(IInput.prototype);
107
-
108
- var CheckBox = /** @class */ (function (_super) {
109
- __extends(CheckBox, _super);
110
- function CheckBox() {
111
- var _this = _super.call(this) || this;
112
- _this._inputElement = [];
113
- IInput.call(_this);
114
- _this._tag = "div";
115
- return _this;
116
- }
117
- CheckBox.prototype.enter = function (domNode, element) {
118
- _super.prototype.enter.call(this, domNode, element);
119
- var context = this;
120
- var checkboxContainer = element.append("ul");
121
- if (!this.selectOptions().length) {
122
- this.selectOptions().push(""); // create an empty radio if we using .value and not selectOptions array
123
- }
124
- this.selectOptions().forEach(function (val, idx) {
125
- context._inputElement[idx] = checkboxContainer.append("li").append("input").attr("type", "checkbox");
126
- context._inputElement[idx].node().insertAdjacentHTML("afterend", "<text>" + val + "</text>");
127
- });
128
- this._inputElement.forEach(function (e, idx) {
129
- e.attr("name", context.name());
130
- e.on("click", function (w) {
131
- w.click(w);
132
- });
133
- e.on("blur", function (w) {
134
- w.blur(w);
135
- });
136
- e.on("change", function (w) {
137
- var vals = [];
138
- context._inputElement.forEach(function (d) {
139
- if (d.property("checked")) {
140
- vals.push(d.property("value"));
141
- }
142
- });
143
- context.value(vals);
144
- w.change(w, true);
145
- });
146
- });
147
- };
148
- CheckBox.prototype.update = function (domNode, element) {
149
- _super.prototype.update.call(this, domNode, element);
150
- var context = this;
151
- this._inputElement.forEach(function (e, idx) {
152
- e.property("value", context.selectOptions()[idx]);
153
- if (context.value().indexOf(context.selectOptions()[idx]) !== -1 && context.value() !== "false") {
154
- e.property("checked", true);
155
- }
156
- else {
157
- e.property("checked", false);
158
- }
159
- });
160
- };
161
- CheckBox.prototype.insertSelectOptions = function (optionsArr) {
162
- var optionHTML = "";
163
- if (optionsArr.length > 0) {
164
- optionsArr.forEach(function (opt) {
165
- var val = (opt instanceof Array ? opt[0] : opt);
166
- var text = (opt instanceof Array ? (opt[1] ? opt[1] : opt[0]) : opt);
167
- optionHTML += "<option value='" + val + "'>" + text + "</option>";
168
- });
169
- }
170
- else {
171
- optionHTML += "<option>selectOptions not set</option>";
172
- }
173
- this._inputElement[0].html(optionHTML);
174
- };
175
- return CheckBox;
176
- }(HTMLWidget));
177
- CheckBox.prototype._class += " form_CheckBox";
178
- CheckBox.prototype.implements(IInput.prototype);
179
- CheckBox.prototype.publish("selectOptions", [], "array", "Array of options used to fill a dropdown list");
180
-
181
- var ColorInput = /** @class */ (function (_super) {
182
- __extends(ColorInput, _super);
183
- function ColorInput() {
184
- var _this = _super.call(this) || this;
185
- _this._inputElement = [];
186
- IInput.call(_this);
187
- _this._tag = "div";
188
- return _this;
189
- }
190
- ColorInput.prototype.enter = function (domNode, element) {
191
- _super.prototype.enter.call(this, domNode, element);
192
- var context = this;
193
- this._inputElement[0] = element.append("input").attr("type", "text");
194
- this._inputElement[0].classed("color-text", true);
195
- this._inputElement[1] = element.append("input").attr("type", "color");
196
- this._inputElement.forEach(function (e, idx) {
197
- e.on("click", function (w) {
198
- w.click(w);
199
- });
200
- e.on("blur", function (w) {
201
- w.blur(w);
202
- });
203
- e.on("change", function (w) {
204
- if (idx === 0) {
205
- context._inputElement[1].property("value", rgb(context._inputElement[0].property("value")).toString());
206
- context.value(context._inputElement[0].property("value"));
207
- }
208
- else {
209
- context._inputElement[0].property("value", context._inputElement[1].property("value"));
210
- context.value(rgb(context._inputElement[1].property("value")).toString());
211
- }
212
- w.change(w, true);
213
- });
214
- });
215
- };
216
- ColorInput.prototype.update = function (domNode, element) {
217
- _super.prototype.update.call(this, domNode, element);
218
- var context = this;
219
- this._inputElement.forEach(function (e) {
220
- e.attr("name", context.name());
221
- });
222
- this._inputElement[0].attr("type", "text");
223
- this._inputElement[1].attr("type", "color");
224
- this._inputElement[0].property("value", this.value());
225
- this._inputElement[1].property("value", rgb(this.value()).toString());
226
- var bbox = this._inputElement[0].node().getBoundingClientRect();
227
- this._inputElement[1].style("height", (bbox.height - 2) + "px");
228
- };
229
- return ColorInput;
230
- }(HTMLWidget));
231
- ColorInput.prototype._class += " form_ColorInput";
232
- ColorInput.prototype.implements(IInput.prototype);
233
-
234
- var css_248z$2 = ".form_Form{color:#404040}.form_Form tbody td{border:1px solid #e5e5e5;white-space:nowrap}.form_Form td.prompt{background-color:#e5e5e5;padding:2px;vertical-align:middle}.form_Form td.input{padding:2px;vertical-align:middle;width:100%}.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{word-wrap:break-word;background-position:-1px -1px;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 3px 3px 3px;bottom:0;box-sizing:border-box;color:#24292e;column-rule-color:#24292e;cursor:pointer;height:28px;left:0;outline:0 none #24292e;overflow-wrap:break-word;padding:3px 10px;perspective-origin:57.2938px 14px;position:relative;right:0;text-decoration:none solid #24292e;top:0;transform-origin:57.2938px 14px;user-select:none;vertical-align:middle;white-space:nowrap}.form_Form .form_Button button[disabled=disabled]{background:#dbdfe2}.form_Form .form_Button button:focus{box-shadow:0 0 0 .2em rgba(3,102,214,.3)}.form_Form .form_Button button:hover{background:#dbdfe2}.form_Form .form_Button.default button{word-wrap:break-word;background:#28a745 linear-gradient(-180deg,#34d058,#28a745 90%) repeat-x scroll -1px -1px /110% 110% padding-box border-box;color:#fff;column-rule-color:#fff;outline:0 none #fff;perspective-origin:44.975px 17px;text-decoration:none solid #fff;transform-origin:44.975px 17px}.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}";
235
- styleInject(css_248z$2);
236
-
237
- var Form = /** @class */ (function (_super) {
238
- __extends(Form, _super);
239
- function Form() {
240
- var _this = _super.call(this) || this;
241
- _this._tag = "form";
242
- return _this;
243
- }
244
- Form.prototype.data = function (_) {
245
- if (!arguments.length) {
246
- var retVal_1 = [];
247
- this.inputsForEach(function (input) {
248
- retVal_1.push(input.value());
249
- });
250
- return retVal_1;
251
- }
252
- else {
253
- this.inputsForEach(function (input, idx) {
254
- if (_ && _.length > idx) {
255
- input.value(_[idx]).render();
256
- }
257
- });
258
- }
259
- return this;
260
- };
261
- Form.prototype.inputsForEach = function (callback, scope) {
262
- var idx = 0;
263
- this.inputs().forEach(function (inp) {
264
- var inpArray = inp instanceof WidgetArray ? inp.content() : [inp];
265
- inpArray.forEach(function (inp2) {
266
- if (scope) {
267
- callback.call(scope, inp2, idx++);
268
- }
269
- else {
270
- callback(inp2, idx++);
271
- }
272
- });
273
- });
274
- };
275
- Form.prototype.inputsMap = function () {
276
- var retVal = {};
277
- this.inputs().forEach(function (inp) {
278
- retVal[inp.name()] = inp;
279
- });
280
- return retVal;
281
- };
282
- Form.prototype.calcMaxColumns = function () {
283
- var retVal = 0;
284
- this.inputs().forEach(function (inputWidget) {
285
- var inputWidgetArray = inputWidget instanceof WidgetArray ? inputWidget.content() : [inputWidget];
286
- if (inputWidgetArray.length > retVal) {
287
- retVal = inputWidgetArray.length;
288
- }
289
- });
290
- return retVal;
291
- };
292
- Form.prototype.values = function (_) {
293
- if (!arguments.length) {
294
- var dataArr_1 = {};
295
- this.inputsForEach(function (inp) {
296
- var type = inp.type ? inp.type() : "text";
297
- var value = inp.value();
298
- if (value || !this.omitBlank()) {
299
- switch (type) {
300
- case "checkbox":
301
- dataArr_1[inp.name()] = inp.value_exists() ? !!inp.value() : undefined;
302
- break;
303
- case "number":
304
- var v = inp.value();
305
- dataArr_1[inp.name()] = v === "" ? undefined : +v;
306
- break;
307
- case "text":
308
- default:
309
- dataArr_1[inp.name()] = inp.value_exists() ? inp.value() : undefined;
310
- break;
311
- }
312
- }
313
- }, this);
314
- return dataArr_1;
315
- }
316
- else {
317
- this.inputsForEach(function (inp) {
318
- if (_[inp.name()]) {
319
- inp.value(_[inp.name()]);
320
- }
321
- else if (this.omitBlank()) {
322
- inp.value("");
323
- }
324
- }, this);
325
- }
326
- return this;
327
- };
328
- Form.prototype.submit = function () {
329
- var isValid = true;
330
- if (this.validate()) {
331
- isValid = this.checkValidation();
332
- }
333
- if (!this.allowEmptyRequest() && !this.inputs().some(function (w) {
334
- if (w._class.indexOf("WidgetArray") !== -1) {
335
- return w.content().some(function (wa) {
336
- return wa.hasValue();
337
- });
338
- }
339
- return w.hasValue();
340
- })) {
341
- return;
342
- }
343
- this.click(isValid ? this.values() : null, null, isValid);
344
- };
345
- Form.prototype.clear = function () {
346
- this.inputsForEach(function (inp) {
347
- switch (inp.classID()) {
348
- case "form_Slider":
349
- if (inp.allowRange()) {
350
- inp.value([inp.low(), inp.low()]).render();
351
- }
352
- else {
353
- inp.value(inp.low()).render();
354
- }
355
- break;
356
- case "form_CheckBox":
357
- inp.value(false).render();
358
- break;
359
- case "form_Button":
360
- /* skip */
361
- break;
362
- default:
363
- inp.value(undefined).render();
364
- break;
365
- }
366
- });
367
- };
368
- Form.prototype.checkValidation = function () {
369
- var ret = true;
370
- var msgArr = [];
371
- this.inputsForEach(function (inp) {
372
- if (!inp.isValid()) {
373
- msgArr.push("'" + inp.label() + "'" + " value is invalid.");
374
- }
375
- });
376
- if (msgArr.length > 0) {
377
- alert(msgArr.join("\n"));
378
- ret = false;
379
- }
380
- return ret;
381
- };
382
- Form.prototype.enter = function (domNode, element) {
383
- _super.prototype.enter.call(this, domNode, element);
384
- element.on("submit", function () {
385
- d3Event().preventDefault();
386
- });
387
- this._placeholderElement.style("overflow", "auto");
388
- var table = element
389
- .append("table");
390
- this.tbody = table.append("tbody");
391
- this.tfoot = table.append("tfoot");
392
- this.btntd = this.tfoot.append("tr").append("td")
393
- .attr("colspan", 2);
394
- var context = this;
395
- this._controls = [
396
- new Button()
397
- .classed({ default: true })
398
- .value("Submit")
399
- .on("click", function () {
400
- context.submit();
401
- }, true),
402
- new Button()
403
- .value("Clear")
404
- .on("click", function () {
405
- context.clear();
406
- }, true)
407
- ];
408
- var rightJust = context.btntd
409
- .append("div")
410
- .style("float", "right");
411
- this._controls.forEach(function (w) {
412
- var leftJust = rightJust
413
- .append("span")
414
- .style("float", "left");
415
- w.target(leftJust.node()).render();
416
- });
417
- };
418
- Form.prototype.update = function (domNode, element) {
419
- _super.prototype.update.call(this, domNode, element);
420
- this._maxCols = this.calcMaxColumns();
421
- var context = this;
422
- var rows = this.tbody.selectAll("tr").data(this.inputs());
423
- rows.enter().append("tr")
424
- .each(function (inputWidget, i) {
425
- var element2 = select(this);
426
- var inputWidgetArray = inputWidget instanceof WidgetArray ? inputWidget.content() : [inputWidget];
427
- inputWidgetArray.forEach(function (inputWidget2, idx) {
428
- element2.append("td")
429
- .attr("class", "prompt");
430
- var input = element2.append("td")
431
- .attr("class", "input");
432
- if (idx === inputWidgetArray.length - 1 && inputWidgetArray.length < context._maxCols) {
433
- input.attr("colspan", (context._maxCols - inputWidgetArray.length + 1) * 2);
434
- }
435
- inputWidget2.target(input.node()).render();
436
- if (inputWidget2 instanceof SVGWidget) {
437
- var bbox = inputWidget2.element().node().getBBox();
438
- input.style("height", bbox.height + "px");
439
- inputWidget2.resize().render();
440
- }
441
- if (inputWidget2._inputElement instanceof Array) {
442
- inputWidget2._inputElement.forEach(function (e) {
443
- e.on("keyup.form", function (w) {
444
- setTimeout(function () {
445
- context._controls[0].disable(!context.allowEmptyRequest() && !context.inputs().some(function (w2) {
446
- if (w2._class.indexOf("WidgetArray") !== -1) {
447
- return w2.content().some(function (wa) {
448
- return wa.hasValue();
449
- });
450
- }
451
- return w2.hasValue();
452
- }));
453
- }, 100);
454
- });
455
- });
456
- }
457
- });
458
- })
459
- .merge(rows)
460
- .each(function (inputWidget, i) {
461
- var element2 = select(this);
462
- var inputWidgetArray = inputWidget instanceof WidgetArray ? inputWidget.content() : [inputWidget];
463
- inputWidgetArray.forEach(function (inputWidget2, idx) {
464
- element2.select("td.prompt")
465
- .text(inputWidget2.label() + ":");
466
- });
467
- });
468
- rows.each(function (inputWidget, i) {
469
- if (i === 0 && inputWidget.setFocus) {
470
- inputWidget.setFocus();
471
- }
472
- });
473
- rows.exit()
474
- .each(function (inputWidget, i) {
475
- var inputWidgetArray = inputWidget instanceof WidgetArray ? inputWidget.content() : [inputWidget];
476
- inputWidgetArray.forEach(function (inputWidget2, idx) {
477
- inputWidget2.target(null);
478
- });
479
- })
480
- .remove();
481
- this.tfoot
482
- .style("display", this.showSubmit() ? "table-footer-group" : "none");
483
- this.btntd
484
- .attr("colspan", this._maxCols * 2);
485
- // Disable Submit unless there is data
486
- if (!this.allowEmptyRequest()) {
487
- setTimeout(function () {
488
- context._controls[0].disable(!context.allowEmptyRequest() && !context.inputs().some(function (w) {
489
- if (w._class.indexOf("WidgetArray") !== -1) {
490
- return w.content().some(function (wa) {
491
- return wa.hasValue();
492
- });
493
- }
494
- return w.hasValue();
495
- }));
496
- }, 100);
497
- }
498
- };
499
- Form.prototype.exit = function (domNode, element) {
500
- this.inputsForEach(function (input) { return input.target(null); });
501
- _super.prototype.exit.call(this, domNode, element);
502
- };
503
- Form.prototype.click = function (row, col, sel) {
504
- };
505
- return Form;
506
- }(HTMLWidget));
507
- Form.prototype._class += " form_Form";
508
- Form.prototype.publish("validate", true, "boolean", "Enable/Disable input validation");
509
- Form.prototype.publish("inputs", [], "widgetArray", "Array of input widgets", null, { render: false });
510
- Form.prototype.publish("showSubmit", true, "boolean", "Show Submit/Cancel Controls");
511
- Form.prototype.publish("omitBlank", false, "boolean", "Drop Blank Fields From Submit");
512
- Form.prototype.publish("allowEmptyRequest", false, "boolean", "Allow Blank Form to be Submitted");
513
-
514
- var Input = /** @class */ (function (_super) {
515
- __extends(Input, _super);
516
- function Input() {
517
- var _this = _super.call(this) || this;
518
- _this._inputElement = [];
519
- _this._labelElement = [];
520
- IInput.call(_this);
521
- _this._tag = "div";
522
- return _this;
523
- }
524
- Input.prototype.checked = function (_) {
525
- if (!arguments.length)
526
- return this._inputElement[0] ? this._inputElement[0].property("checked") : false;
527
- if (this._inputElement[0]) {
528
- this._inputElement[0].property("checked", _);
529
- }
530
- return this;
531
- };
532
- Input.prototype.enter = function (domNode, element) {
533
- _super.prototype.enter.call(this, domNode, element);
534
- this._labelElement[0] = element.append("label")
535
- .attr("for", this.id() + "_input")
536
- .style("visibility", this.inlineLabel_exists() ? "visible" : "hidden");
537
- var context = this;
538
- switch (this.type()) {
539
- case "button":
540
- this._inputElement[0] = element.append("button")
541
- .attr("id", this.id() + "_input");
542
- break;
543
- case "textarea":
544
- this._inputElement[0] = element.append("textarea")
545
- .attr("id", this.id() + "_input");
546
- break;
547
- default:
548
- this._inputElement[0] = element.append("input")
549
- .attr("id", this.id() + "_input")
550
- .attr("type", this.type());
551
- break;
552
- }
553
- this._inputElement.forEach(function (e, idx) {
554
- e.attr("name", context.name());
555
- e.on("click", function (w) {
556
- w.click(w);
557
- });
558
- e.on("blur", function (w) {
559
- w.blur(w);
560
- });
561
- e.on("change", function (w) {
562
- context.value([e.property("value")]);
563
- w.change(w, true);
564
- });
565
- e.on("keyup", function (w) {
566
- context.value([e.property("value")]);
567
- w.change(w, false);
568
- });
569
- });
570
- };
571
- Input.prototype.update = function (domNode, element) {
572
- _super.prototype.update.call(this, domNode, element);
573
- this._labelElement[0]
574
- .style("visibility", this.inlineLabel_exists() ? "visible" : "hidden")
575
- .text(this.inlineLabel());
576
- switch (this.type()) {
577
- case "button":
578
- this._inputElement[0].text(this.value());
579
- break;
580
- case "textarea":
581
- this._inputElement[0].property("value", this.value());
582
- break;
583
- default:
584
- this._inputElement[0].attr("type", this.type());
585
- this._inputElement[0].property("value", this.value());
586
- break;
587
- }
588
- };
589
- return Input;
590
- }(HTMLWidget));
591
- Input.prototype._class += " form_Input";
592
- Input.prototype.implements(IInput.prototype);
593
- Input.prototype.publish("type", "text", "set", "Input type", ["number", "button", "checkbox", "date", "text", "textarea", "search", "email", "time", "datetime", "hidden"]);
594
- Input.prototype.publish("inlineLabel", null, "string", "Input Label", null, { optional: true });
595
-
596
- var FieldForm = /** @class */ (function (_super) {
597
- __extends(FieldForm, _super);
598
- function FieldForm() {
599
- var _this = _super.call(this) || this;
600
- _this._tag = "form";
601
- return _this;
602
- }
603
- FieldForm.prototype.fields = function (_) {
604
- var retVal = _super.prototype.fields.apply(this, arguments);
605
- if (arguments.length) {
606
- var inpMap_1 = this.inputsMap();
607
- this.inputs(_.map(function (f) { return inpMap_1[f.id()] || new Input()
608
- .name(f.id())
609
- .label(f.label())
610
- .type(f.type()); }));
611
- }
612
- return retVal;
613
- };
614
- FieldForm.prototype.data = function (_) {
615
- if (!arguments.length)
616
- return _super.prototype.data.call(this);
617
- _super.prototype.data.call(this, _[0]);
618
- if (_[0]) {
619
- // Update input "name" with the __lparam ids ---
620
- var inputs = this.inputs();
621
- var __lparam = _[0][this.columns().length];
622
- var i = 0;
623
- for (var key in __lparam) {
624
- inputs[i].name(key);
625
- ++i;
626
- }
627
- }
628
- return this;
629
- };
630
- return FieldForm;
631
- }(Form));
632
- FieldForm.prototype._class += " form_FieldForm";
633
-
634
- var InputRange = /** @class */ (function (_super) {
635
- __extends(InputRange, _super);
636
- function InputRange() {
637
- var _this = _super.call(this) || this;
638
- _this._inputElement = [];
639
- _this._labelElement = [];
640
- _this._rangeData = [];
641
- IInput.call(_this);
642
- _this._tag = "div";
643
- return _this;
644
- }
645
- InputRange.prototype.enter = function (domNode, element) {
646
- _super.prototype.enter.call(this, domNode, element);
647
- this._labelElement[0] = element.append("label")
648
- .attr("for", this.id() + "_input")
649
- .style("visibility", this.inlineLabel_exists() ? "visible" : "hidden");
650
- this._inputElement.push(element.append("input")
651
- .attr("id", this.id() + "_input_min")
652
- .attr("type", this.type()));
653
- this._inputElement.push(element.append("input")
654
- .attr("id", this.id() + "_input_max")
655
- .attr("type", this.type()));
656
- var context = this;
657
- this._inputElement.forEach(function (e, idx) {
658
- e.attr("name", context.name());
659
- e.on("click", function (w) {
660
- w.click(w);
661
- });
662
- e.on("blur", function (w) {
663
- w.blur(w);
664
- });
665
- e.on("change", function (w) {
666
- context._rangeData[idx] = e.property("value");
667
- context.value(context._rangeData);
668
- w.change(w, true);
669
- });
670
- });
671
- };
672
- InputRange.prototype.update = function (domNode, element) {
673
- _super.prototype.update.call(this, domNode, element);
674
- this._labelElement[0]
675
- .style("visibility", this.inlineLabel_exists() ? "visible" : "hidden")
676
- .text(this.inlineLabel());
677
- this._rangeData = this.value();
678
- this._inputElement.forEach(function (e, idx) {
679
- e
680
- .attr("type", this.type())
681
- .property("value", this._rangeData.length > idx ? this._rangeData[idx] : "");
682
- }, this);
683
- };
684
- return InputRange;
685
- }(HTMLWidget));
686
- InputRange.prototype._class += " form_InputRange";
687
- InputRange.prototype.implements(IInput.prototype);
688
- InputRange.prototype.publish("type", "text", "set", "InputRange type", ["number", "date", "text", "time", "datetime", "hidden"]);
689
- InputRange.prototype.publish("inlineLabel", null, "string", "InputRange Label", null, { optional: true });
690
- InputRange.prototype.publish("value", ["", ""], "array", "Input Current Value", null, { override: true });
691
-
692
- var css_248z$1 = ".onoffswitch-checkbox{display:none}.onoffswitch{height:20px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;width:100px}.onoffswitch-label{border:1px solid #999;cursor:pointer;display:block;height:20px;overflow:hidden}.onoffswitch-inner{display:block;position:relative;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;text-align:right;transition:all .3s ease-in 0s;width:100%}.onoffswitch-inner>.onoffswitch-onText{font-weight:700;left:-100%;position:absolute;text-align:left;transition:all .3s ease-in 0s;width:100%}.onoffswitch-switch{background:#fff;border:1px solid #999;bottom:0;display:block;left:4px;margin:-1px;position:absolute;right:78px;top:0;transition:all .3s ease-in 0s;width:20px}.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)}";
693
- styleInject(css_248z$1);
694
-
695
- var OnOff = /** @class */ (function (_super) {
696
- __extends(OnOff, _super);
697
- function OnOff() {
698
- var _this = _super.call(this) || this;
699
- _this._inputElement = [];
700
- IInput.call(_this);
701
- _this._tag = "div";
702
- return _this;
703
- }
704
- OnOff.prototype.enter = function (domNode, element) {
705
- _super.prototype.enter.call(this, domNode, element);
706
- element.classed("onoffswitch", true);
707
- var context = this;
708
- this._input = element.append("input")
709
- .attr("class", "onoffswitch-checkbox")
710
- .attr("type", "checkbox")
711
- .attr("id", this.id() + "_onOff")
712
- .on("click", function (w) {
713
- w.click(w);
714
- })
715
- .on("blur", function (w) {
716
- w.blur(w);
717
- })
718
- .on("change", function (w) {
719
- var vals = [];
720
- context._inputElement.forEach(function (d, idx) {
721
- if (d.property("checked")) {
722
- vals.push(d.property("value"));
723
- }
724
- });
725
- context.value(vals);
726
- w.change(w, true);
727
- });
728
- var label = element.append("label")
729
- .attr("class", "onoffswitch-label")
730
- .attr("for", this.id() + "_onOff");
731
- var inner = label.append("div")
732
- .attr("class", "onoffswitch-inner");
733
- inner.append("div")
734
- .attr("class", "onoffswitch-offText")
735
- .style("padding-right", (this.containerRadius() / 2) + "px")
736
- .text(this.offText());
737
- inner.append("div")
738
- .attr("class", "onoffswitch-onText")
739
- .style("padding-left", (this.containerRadius() / 2) + "px")
740
- .style("width", "calc(100% - ".concat((this.containerRadius() / 2), "px)"))
741
- .text(this.onText());
742
- label.append("div")
743
- .attr("class", "onoffswitch-switch");
744
- };
745
- OnOff.prototype.update = function (domNode, element) {
746
- _super.prototype.update.call(this, domNode, element);
747
- this._input
748
- .attr("name", this.name());
749
- element
750
- .style("margin-left", this.marginLeft() + "px")
751
- .style("margin-bottom", this.marginBottom() + "px")
752
- .style("width", this.minWidth() + "px");
753
- var _switch_size = this.minHeight() - (this.gutter() * 4);
754
- element.select(".onoffswitch-switch")
755
- .style("height", _switch_size + "px")
756
- .style("width", _switch_size + "px")
757
- .style("top", (this.gutter() * 2) + 1 + "px")
758
- .style("border-radius", this.switchRadius() + "px");
759
- element.select(".onoffswitch-inner")
760
- .style("min-height", this.minHeight() + "px");
761
- element.select(".onoffswitch-label")
762
- .style("border-radius", this.containerRadius() + "px");
763
- element.select(".onoffswitch-offText")
764
- .style("color", this.offFontColor())
765
- .style("background-color", this.offColor());
766
- element.select(".onoffswitch-onText")
767
- .style("color", this.onFontColor())
768
- .style("background-color", this.onColor());
769
- };
770
- return OnOff;
771
- }(HTMLWidget));
772
- OnOff.prototype._class += " form_OnOff";
773
- OnOff.prototype.implements(IInput.prototype);
774
- OnOff.prototype.publish("marginLeft", 0, "number", "Margin left of OnOff");
775
- OnOff.prototype.publish("marginBottom", 0, "number", "Margin bottom of OnOff");
776
- OnOff.prototype.publish("minWidth", 100, "number", "Minimum width of OnOff (pixels)");
777
- OnOff.prototype.publish("minHeight", 20, "number", "Minimum height of OnOff (pixels)");
778
- OnOff.prototype.publish("gutter", 1, "number", "Space between switch and border of OnOff (pixels)");
779
- OnOff.prototype.publish("onText", "Save", "string", "Text to display when 'ON'");
780
- OnOff.prototype.publish("offText", "Properties", "string", "Text to display when 'OFF'");
781
- OnOff.prototype.publish("switchRadius", 10, "number", "Border radius of switch (pixels)");
782
- OnOff.prototype.publish("containerRadius", 10, "number", "Border radius of OnOff (pixels)");
783
- OnOff.prototype.publish("onColor", "#2ecc71", "html-color", "Background color when 'ON'");
784
- OnOff.prototype.publish("offColor", "#ecf0f1", "html-color", "Background color when 'OFF'");
785
- OnOff.prototype.publish("onFontColor", "#2c3e50", "html-color", "Font color when 'ON'");
786
- OnOff.prototype.publish("offFontColor", "#7f8c8d", "html-color", "Font color when 'OFF'");
787
-
788
- var Radio = /** @class */ (function (_super) {
789
- __extends(Radio, _super);
790
- function Radio() {
791
- var _this = _super.call(this) || this;
792
- _this._inputElement = [];
793
- IInput.call(_this);
794
- _this._tag = "div";
795
- return _this;
796
- }
797
- Radio.prototype.enter = function (domNode, element) {
798
- _super.prototype.enter.call(this, domNode, element);
799
- var context = this;
800
- var radioContainer = element.append("ul");
801
- if (!this.selectOptions().length) {
802
- this.selectOptions().push(""); // create an empty radio if we using .value and not selectOptions array
803
- }
804
- this.selectOptions().forEach(function (val, idx) {
805
- context._inputElement[idx] = radioContainer.append("li").append("input").attr("type", "radio");
806
- context._inputElement[idx].node().insertAdjacentHTML("afterend", "<text>" + val + "</text>");
807
- });
808
- this._inputElement.forEach(function (e, idx) {
809
- e.attr("name", context.name());
810
- e.on("click", function (w) {
811
- w.click(w);
812
- });
813
- e.on("blur", function (w) {
814
- w.blur(w);
815
- });
816
- e.on("change", function (w) {
817
- context.value([e.property("value")]);
818
- w.change(w, true);
819
- });
820
- });
821
- };
822
- Radio.prototype.update = function (domNode, element) {
823
- _super.prototype.update.call(this, domNode, element);
824
- var context = this;
825
- this._inputElement.forEach(function (e, idx) {
826
- e.property("value", context.selectOptions()[idx]);
827
- if (context.value().indexOf(context.selectOptions()[idx]) !== -1 && context.value() !== "false") {
828
- e.property("checked", true);
829
- }
830
- else {
831
- e.property("checked", false);
832
- }
833
- });
834
- };
835
- return Radio;
836
- }(HTMLWidget));
837
- Radio.prototype._class += " form_Radio";
838
- Radio.prototype.implements(IInput.prototype);
839
- Radio.prototype.publish("selectOptions", [], "array", "Array of options used to fill a dropdown list");
840
-
841
- var Range = /** @class */ (function (_super) {
842
- __extends(Range, _super);
843
- function Range() {
844
- var _this = _super.call(this) || this;
845
- _this._inputElement = [];
846
- IInput.call(_this);
847
- _this._tag = "div";
848
- return _this;
849
- }
850
- Range.prototype.enter = function (domNode, element) {
851
- _super.prototype.enter.call(this, domNode, element);
852
- var context = this;
853
- this._inputElement[0] = element.append("input").attr("type", "range");
854
- this._inputElement[1] = element.append("input").attr("type", "number");
855
- this._inputElement.forEach(function (e, idx) {
856
- e.attr("name", context.name());
857
- e.on("click", function (w) {
858
- w.click(w);
859
- });
860
- e.on("blur", function (w) {
861
- w.blur(w);
862
- });
863
- e.on("change", function (w) {
864
- if (idx === 0) {
865
- context._inputElement[1].property("value", rgb(context._inputElement[0].property("value")).toString());
866
- context.value(context._inputElement[0].property("value"));
867
- }
868
- else {
869
- context._inputElement[0].property("value", context._inputElement[1].property("value"));
870
- context.value(rgb(context._inputElement[1].property("value")).toString());
871
- }
872
- w.change(w, true);
873
- });
874
- });
875
- };
876
- Range.prototype.update = function (domNode, element) {
877
- _super.prototype.update.call(this, domNode, element);
878
- this._inputElement[0].attr("type", "range");
879
- this._inputElement[0].property("value", this.value());
880
- this._inputElement[0].attr("min", this.low());
881
- this._inputElement[0].attr("max", this.high());
882
- this._inputElement[0].attr("step", this.step());
883
- this._inputElement[1].attr("type", "number");
884
- this._inputElement[1].property("value", this.value());
885
- this._inputElement[1].attr("min", this.low());
886
- this._inputElement[1].attr("max", this.high());
887
- this._inputElement[1].attr("step", this.step());
888
- };
889
- Range.prototype.insertSelectOptions = function (optionsArr) {
890
- var optionHTML = "";
891
- if (optionsArr.length > 0) {
892
- optionsArr.forEach(function (opt) {
893
- var val = (opt instanceof Array ? opt[0] : opt);
894
- var text = (opt instanceof Array ? (opt[1] ? opt[1] : opt[0]) : opt);
895
- optionHTML += "<option value='" + val + "'>" + text + "</option>";
896
- });
897
- }
898
- else {
899
- optionHTML += "<option>selectOptions not set</option>";
900
- }
901
- this._inputElement[0].html(optionHTML);
902
- };
903
- return Range;
904
- }(HTMLWidget));
905
- Range.prototype._class += " form_Range";
906
- Range.prototype.implements(IInput.prototype);
907
- Range.prototype.publish("type", "text", "set", "Input type", ["html-color", "number", "checkbox", "button", "select", "textarea", "date", "text", "range", "search", "email", "time", "datetime"]);
908
- Range.prototype.publish("selectOptions", [], "array", "Array of options used to fill a dropdown list");
909
- Range.prototype.publish("low", null, "number", "Minimum value for Range input");
910
- Range.prototype.publish("high", null, "number", "Maximum value for Range input");
911
- Range.prototype.publish("step", null, "number", "Step value for Range input");
912
-
913
- var Select = /** @class */ (function (_super) {
914
- __extends(Select, _super);
915
- function Select() {
916
- var _this = _super.call(this) || this;
917
- _this._inputElement = [];
918
- IInput.call(_this);
919
- _this._tag = "div";
920
- return _this;
921
- }
922
- Select.prototype.enter = function (domNode, element) {
923
- _super.prototype.enter.call(this, domNode, element);
924
- var context = this;
925
- this._inputElement[0] = element.append("select")
926
- .attr("name", this.name())
927
- .on("click", function (w) {
928
- w.click(w);
929
- })
930
- .on("blur", function (w) {
931
- w.blur(w);
932
- })
933
- .on("change", function (w) {
934
- context.value([context._inputElement[0].property("value")]);
935
- w.change(w, true);
936
- });
937
- };
938
- Select.prototype.update = function (domNode, element) {
939
- _super.prototype.update.call(this, domNode, element);
940
- this.insertSelectOptions(this.selectOptions());
941
- this._inputElement[0]
942
- .property("value", this.value())
943
- .style("max-width", this.maxWidth_exists() ? this.maxWidth() + "px" : null);
944
- };
945
- Select.prototype.insertSelectOptions = function (optionsArr) {
946
- var optionHTML = "";
947
- if (optionsArr.length > 0) {
948
- optionsArr.forEach(function (opt) {
949
- var val = (opt instanceof Array ? opt[0] : opt);
950
- var text = (opt instanceof Array ? (opt[1] ? opt[1] : opt[0]) : opt);
951
- optionHTML += "<option value='" + val + "'>" + text + "</option>";
952
- });
953
- }
954
- else {
955
- optionHTML += "<option>selectOptions not set</option>";
956
- }
957
- this._inputElement[0].html(optionHTML);
958
- };
959
- return Select;
960
- }(HTMLWidget));
961
- Select.prototype._class += " form_Select";
962
- Select.prototype.implements(IInput.prototype);
963
- Select.prototype.publish("selectOptions", [], "array", "Array of options used to fill a dropdown list");
964
- Select.prototype.publish("maxWidth", 120, "number", "Width", null, { optional: true });
965
-
966
- var css_248z = ".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{stroke-width:50px;stroke:transparent;cursor:crosshair;pointer-events:stroke}.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}";
967
- styleInject(css_248z);
968
-
969
- var Slider = /** @class */ (function (_super) {
970
- __extends(Slider, _super);
971
- function Slider() {
972
- var _this = _super.call(this) || this;
973
- _this.handleLeftPos = 0;
974
- _this.handleRightPos = 0;
975
- _this.handlePath = function (d) {
976
- var e = +(d === "r");
977
- var x = e ? 1 : -1;
978
- var xOffset = this.allowRange() ? 0.5 : 0.0;
979
- var y = 18;
980
- var retVal = "M" + (xOffset * x) + "," + y +
981
- "A6,6 0 0 " + e + " " + (6.5 * x) + "," + (y + 6) +
982
- "V" + (2 * y - 6) +
983
- "A6,6 0 0 " + e + " " + (xOffset * x) + "," + (2 * y);
984
- if (this.allowRange()) {
985
- retVal += "Z" +
986
- "M" + (2.5 * x) + "," + (y + 8) +
987
- "V" + (2 * y - 8) +
988
- "M" + (4.5 * x) + "," + (y + 8) +
989
- "V" + (2 * y - 8);
990
- }
991
- else {
992
- retVal += "M" + (1 * x) + "," + (y + 8) +
993
- "V" + (2 * y - 8);
994
- }
995
- return retVal;
996
- };
997
- IInput.call(_this);
998
- return _this;
999
- }
1000
- Slider.prototype.enter = function (domNode, element) {
1001
- var _this = this;
1002
- _super.prototype.enter.call(this, domNode, element);
1003
- this.resize({ width: this.width(), height: 50 });
1004
- this.xScale = scaleLinear()
1005
- .clamp(true);
1006
- this.slider = element.append("g")
1007
- .attr("class", "slider");
1008
- if (this.low() === null && this.high() === null) {
1009
- if (this.lowDatetime() !== null && this.highDatetime() !== null) {
1010
- var time_parser = timeParse(this.timePattern() ? this.timePattern() : "%Q");
1011
- this.low(time_parser(this.lowDatetime()).getTime());
1012
- this.high(time_parser(this.highDatetime()).getTime());
1013
- }
1014
- }
1015
- this.slider.append("line")
1016
- .attr("class", "track")
1017
- .select(function () { return this.parentNode.appendChild(this.cloneNode(true)); })
1018
- .attr("class", "track-inset")
1019
- .select(function () { return this.parentNode.appendChild(this.cloneNode(true)); })
1020
- .attr("class", "track-overlay")
1021
- .call(drag()
1022
- .on("start", function () {
1023
- var event = d3Event();
1024
- _this.moveStartPos = event.x;
1025
- _this.handleLeftStartPos = _this.handleLeftPos;
1026
- _this.handleRightStartPos = _this.handleRightPos;
1027
- if (_this.allowRange() && _this.handleLeftPos <= event.x && event.x <= _this.handleRightPos) {
1028
- _this.moveMode = "both";
1029
- }
1030
- else if (Math.abs(event.x - _this.handleLeftPos) < Math.abs(event.x - _this.handleRightPos)) {
1031
- _this.moveMode = "left";
1032
- }
1033
- else {
1034
- _this.moveMode = "right";
1035
- }
1036
- _this.moveHandleTo(event.x);
1037
- })
1038
- .on("drag", function () {
1039
- _this.moveHandleTo(d3Event().x);
1040
- })
1041
- .on("end", function () {
1042
- _this.moveHandleTo(d3Event().x);
1043
- _this.data([[_this.xScale.invert(_this.handleLeftPos), _this.xScale.invert(_this.handleRightPos)]]);
1044
- _this.checkChangedValue();
1045
- }));
1046
- this.slider.insert("g", ".track-overlay")
1047
- .attr("class", "ticks")
1048
- .attr("transform", "translate(0, ".concat(this.fontSize() + (this.tickHeight() / 2), ")"));
1049
- this.handleRight = this.slider.insert("path", ".track-overlay")
1050
- .attr("class", "handle");
1051
- this.handleLeft = this.slider.insert("path", ".track-overlay")
1052
- .attr("class", "handle");
1053
- };
1054
- Slider.prototype.update = function (domNode, element) {
1055
- _super.prototype.update.call(this, domNode, element);
1056
- var context = this;
1057
- this.xScale
1058
- .domain([this.low(), this.high()])
1059
- .range([0, this.width() - this.padding() * 2]);
1060
- this.slider
1061
- .attr("transform", "translate(" + (-this.width() / 2 + this.padding()) + "," + 0 + ")");
1062
- this.slider.selectAll("line.track,line.track-inset,line.track-overlay")
1063
- .attr("x1", this.xScale.range()[0])
1064
- .attr("x2", this.xScale.range()[1]);
1065
- var x_distance = (this.width() - (this.padding() * 2)) / (this.tickCount() - 1);
1066
- var tick_text_arr = [];
1067
- if (this.tickDateFormat() !== null && this.timePattern() !== null) {
1068
- var Q_parser = timeParse("%Q");
1069
- var time_formatter = timeFormat(this.tickDateFormat());
1070
- var time_segment = (this.high() - this.low()) / (this.tickCount() - 1);
1071
- for (var i = 0; i < this.tickCount(); i++) {
1072
- var date_to_parse = "" + (this.low() + (time_segment * i));
1073
- var parsed_date = Q_parser(date_to_parse);
1074
- tick_text_arr.push(time_formatter(parsed_date));
1075
- }
1076
- }
1077
- else {
1078
- var value_formatter = format(this.tickValueFormat());
1079
- var value_segment = (this.high() - this.low()) / (this.tickCount() - 1);
1080
- for (var i = 0; i < this.tickCount(); i++) {
1081
- var tick_value = this.low() + (value_segment * i);
1082
- tick_text_arr.push(value_formatter(tick_value));
1083
- }
1084
- }
1085
- var tickText = this.slider.selectAll("g.tick").data(tick_text_arr);
1086
- var tickTextEnter = tickText.enter().append("g").attr("class", "tick");
1087
- tickTextEnter.append("text").attr("class", "tick-text");
1088
- tickTextEnter.append("line").attr("class", "tick-line");
1089
- tickTextEnter
1090
- .merge(tickText)
1091
- .each(function (d, i) {
1092
- var x = x_distance * i;
1093
- select(this).select("text.tick-text")
1094
- .style("font-size", context.fontSize())
1095
- .attr("x", function () {
1096
- if (i === 0)
1097
- return x - 2;
1098
- return i === context.tickCount() - 1 ? x + 2 : x;
1099
- })
1100
- .attr("y", context.tickHeight() + (context.tickOffset() / 2) + context.fontSize())
1101
- .attr("text-basline", "text-before-edge")
1102
- .attr("text-anchor", function () {
1103
- if (i === 0)
1104
- return "start";
1105
- return i === context.tickCount() - 1 ? "end" : "middle";
1106
- })
1107
- .text(function () { return d; });
1108
- select(this).select("line.tick-line")
1109
- .attr("x1", x)
1110
- .attr("x2", x)
1111
- .attr("y1", context.tickOffset() - 1)
1112
- .attr("y2", context.tickOffset() + context.tickHeight())
1113
- .style("stroke", "#000")
1114
- .style("stroke-width", 1);
1115
- });
1116
- this.slider.node().appendChild(this.handleRight.node());
1117
- this.slider.node().appendChild(this.handleLeft.node());
1118
- this.handleLeftPos = this.lowPos();
1119
- this.handleRightPos = this.highPos();
1120
- this.updateHandles();
1121
- this.checkChangedValue();
1122
- };
1123
- Slider.prototype.checkChangedValue = function () {
1124
- if (this.prevValue !== this.value() && typeof this.prevValue !== "undefined") {
1125
- this.change(this);
1126
- }
1127
- this.prevValue = this.value();
1128
- };
1129
- Slider.prototype.updateHandles = function () {
1130
- var _this = this;
1131
- this.handleLeft
1132
- .attr("transform", "translate(".concat(this.handleLeftPos, ", -28)"))
1133
- .attr("d", function (d) { return _this.handlePath("l"); });
1134
- this.handleRight
1135
- .attr("transform", "translate(".concat(this.handleRightPos, ", -28)"))
1136
- .attr("d", function (d) { return _this.handlePath("r"); });
1137
- };
1138
- Slider.prototype.lowPos = function () {
1139
- var data = [[this.low(), this.high()]];
1140
- if (this.data().length > 0 && typeof this.data()[0][0] === "number" && typeof this.data()[0][1] === "number") {
1141
- data = this.data();
1142
- }
1143
- return this.xScale(data[0][0]);
1144
- };
1145
- Slider.prototype.highPos = function () {
1146
- var data = [[this.low(), this.high()]];
1147
- if (this.data().length > 0 && typeof this.data()[0][0] === "number" && typeof this.data()[0][1] === "number") {
1148
- data = this.data();
1149
- }
1150
- return this.xScale(data[0][this.allowRange() ? 1 : 0]);
1151
- };
1152
- Slider.prototype.moveHandleTo = function (pos) {
1153
- if (this.allowRange()) {
1154
- switch (this.moveMode) {
1155
- case "both":
1156
- this.handleLeftPos = this.handleLeftStartPos + pos - this.moveStartPos;
1157
- this.handleRightPos = this.handleRightStartPos + pos - this.moveStartPos;
1158
- break;
1159
- case "left":
1160
- this.handleLeftPos = pos;
1161
- if (this.handleLeftPos > this.handleRightPos) {
1162
- this.handleRightPos = this.handleLeftPos;
1163
- }
1164
- break;
1165
- case "right":
1166
- this.handleRightPos = pos;
1167
- if (this.handleRightPos < this.handleLeftPos) {
1168
- this.handleLeftPos = this.handleRightPos;
1169
- }
1170
- break;
1171
- }
1172
- }
1173
- else {
1174
- this.handleLeftPos = this.handleRightPos = pos;
1175
- }
1176
- this.handleLeftPos = this.constrain(this.handleLeftPos);
1177
- this.handleRightPos = this.constrain(this.handleRightPos);
1178
- this.value(this.allowRange() ? [this.xScale.invert(this.handleLeftPos), this.xScale.invert(this.handleRightPos)] : this.xScale.invert(this.handleLeftPos));
1179
- this.updateHandles();
1180
- };
1181
- Slider.prototype.constrain = function (pos) {
1182
- var range = this.xScale.range();
1183
- if (pos < range[0])
1184
- pos = range[0];
1185
- if (pos > range[1])
1186
- pos = range[1];
1187
- return this.nearestStep(pos);
1188
- };
1189
- Slider.prototype.nearestStep = function (pos) {
1190
- var value = this.xScale.invert(pos);
1191
- return this.xScale(this.low() + Math.round((value - this.low()) / this.step()) * this.step());
1192
- };
1193
- return Slider;
1194
- }(SVGWidget));
1195
- Slider.prototype._class += " form_Slider";
1196
- Slider.prototype.implements(IInput.prototype);
1197
- Slider.prototype.publish("padding", 16, "number", "Outer Padding", null, { tags: ["Basic"] });
1198
- Slider.prototype.publish("fontSize", 12, "number", "Font Size", null, { tags: ["Basic"] });
1199
- Slider.prototype.publish("fontFamily", null, "string", "Font Name", null, { tags: ["Basic"] });
1200
- Slider.prototype.publish("fontColor", null, "html-color", "Font Color", null, { tags: ["Basic"] });
1201
- Slider.prototype.publish("allowRange", false, "boolean", "Allow Range Selection", null, { tags: ["Intermediate"] });
1202
- Slider.prototype.publish("low", null, "number", "Low", null, { tags: ["Intermediate"] });
1203
- Slider.prototype.publish("high", null, "number", "High", null, { tags: ["Intermediate"] });
1204
- Slider.prototype.publish("step", 10, "number", "Step", null, { tags: ["Intermediate"] });
1205
- Slider.prototype.publish("lowDatetime", null, "string", "Low", null, { tags: ["Intermediate"] });
1206
- Slider.prototype.publish("highDatetime", null, "string", "High", null, { tags: ["Intermediate"] });
1207
- Slider.prototype.publish("selectionLabel", "", "string", "Selection Label", null, { tags: ["Intermediate"] });
1208
- Slider.prototype.publish("timePattern", "%Y-%m-%d", "string");
1209
- Slider.prototype.publish("tickCount", 10, "number");
1210
- Slider.prototype.publish("tickOffset", 5, "number");
1211
- Slider.prototype.publish("tickHeight", 8, "number");
1212
- Slider.prototype.publish("tickDateFormat", null, "string");
1213
- Slider.prototype.publish("tickValueFormat", ",.0f", "string");
1214
- var name = Slider.prototype.name;
1215
- Slider.prototype.name = function (_) {
1216
- var retVal = name.apply(this, arguments);
1217
- if (arguments.length) {
1218
- var val = _ instanceof Array ? _ : [_];
1219
- SVGWidget.prototype.columns.call(this, val);
1220
- }
1221
- return retVal;
1222
- };
1223
- var value = Slider.prototype.value;
1224
- Slider.prototype.value = function (_) {
1225
- var retVal = value.apply(this, arguments);
1226
- if (!arguments.length) {
1227
- if (!this.allowRange()) {
1228
- return SVGWidget.prototype.data.call(this)[0][0];
1229
- }
1230
- return SVGWidget.prototype.data.call(this)[0];
1231
- }
1232
- else {
1233
- SVGWidget.prototype.data.call(this, [this.allowRange() ? _ : [_, _]]);
1234
- }
1235
- return retVal;
1236
- };
1237
-
1238
- var TextArea = /** @class */ (function (_super) {
1239
- __extends(TextArea, _super);
1240
- function TextArea() {
1241
- var _this = _super.call(this) || this;
1242
- _this._tag = "div";
1243
- _this.type("textarea");
1244
- return _this;
1245
- }
1246
- TextArea.prototype.enter = function (domNode, element) {
1247
- _super.prototype.enter.call(this, domNode, element);
1248
- };
1249
- TextArea.prototype.calcHeight = function () {
1250
- return Math.max(this.minHeight_exists() ? this.minHeight() : 0, this.height());
1251
- };
1252
- TextArea.prototype.update = function (domNode, element) {
1253
- _super.prototype.update.call(this, domNode, element);
1254
- this._inputElement[0]
1255
- .attr("rows", this.rows())
1256
- .attr("cols", this.cols())
1257
- .attr("wrap", this.wrap())
1258
- .attr("spellcheck", this.spellcheck())
1259
- .style("height", this.calcHeight() + "px");
1260
- };
1261
- return TextArea;
1262
- }(Input));
1263
- TextArea.prototype._class += " form_TextArea";
1264
- TextArea.prototype.publish("rows", null, "number", "Rows", null, { optional: true });
1265
- TextArea.prototype.publish("cols", null, "number", "Columns", null, { optional: true });
1266
- TextArea.prototype.publish("wrap", "off", "set", "Wrap", ["off", "on"]);
1267
- TextArea.prototype.publish("minHeight", null, "number", "Minimum Height", null, { optional: true });
1268
- TextArea.prototype.publish("spellcheck", null, "boolean", "Input spell checking", { optional: true });
1269
-
1270
- export { BUILD_VERSION, Button, CheckBox, ColorInput, FieldForm, Form, Input, InputRange, OnOff, PKG_NAME, PKG_VERSION, Radio, Range, Select, Slider, TextArea };
1271
- //# sourceMappingURL=index.es6.js.map