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