@hpcc-js/form 2.12.3 → 2.12.5

package/src/Range.ts

@@ -1,104 +1,104 @@
-import { IInput } from "@hpcc-js/api";
-import { HTMLWidget } from "@hpcc-js/common";
-import { rgb as d3Rgb } from "d3-color";
-
-import "../src/Input.css";
-
-export class Range extends HTMLWidget {
-    _inputElement = [];
-
-    constructor() {
-        super();
-
-        IInput.call(this);
-
-        this._tag = "div";
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-
-        const context = this;
-
-        this._inputElement[0] = element.append("input").attr("type", "range");
-        this._inputElement[1] = element.append("input").attr("type", "number");
-
-        this._inputElement.forEach(function (e, idx) {
-            e.attr("name", context.name());
-            e.on("click", function (w) {
-                w.click(w);
-            });
-            e.on("blur", function (w) {
-                w.blur(w);
-            });
-            e.on("change", function (w) {
-                if (idx === 0) {
-                    context._inputElement[1].property("value", d3Rgb(context._inputElement[0].property("value")).toString());
-                    context.value(context._inputElement[0].property("value"));
-                } else {
-                    context._inputElement[0].property("value", context._inputElement[1].property("value"));
-                    context.value(d3Rgb(context._inputElement[1].property("value")).toString());
-                }
-                w.change(w, true);
-            });
-        });
-    }
-
-    update(domNode, element) {
-        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());
-    }
-
-    insertSelectOptions(optionsArr) {
-        let optionHTML = "";
-        if (optionsArr.length > 0) {
-            optionsArr.forEach(function (opt) {
-                const val = (opt instanceof Array ? opt[0] : opt);
-                const text = (opt instanceof Array ? (opt[1] ? opt[1] : opt[0]) : opt);
-                optionHTML += "<option value='" + val + "'>" + text + "</option>";
-            });
-        } else {
-            optionHTML += "<option>selectOptions not set</option>";
-        }
-        this._inputElement[0].html(optionHTML);
-    }
-
-    type: { (): string; (_: string): Range };
-    type_exists: () => boolean;
-    selectOptions: { (): any[]; (_: any[]): Range };
-    selectOptions_exists: () => boolean;
-    low: { (): number; (_: number): Range };
-    low_exists: () => boolean;
-    high: { (): number; (_: number): Range };
-    high_exists: () => boolean;
-    step: { (): number; (_: number): Range };
-    step_exists: () => boolean;
-
-    //  IInput  ---
-    name: { (): string; (_: string): Range };
-    name_exists: () => boolean;
-    label: { (): string; (_: string): Range };
-    label_exists: () => boolean;
-    value: { (): any; (_: any): Range };
-    value_exists: () => boolean;
-    validate: { (): string; (_: string): Range };
-    validate_exists: () => boolean;
-}
-Range.prototype._class += " form_Range";
-Range.prototype.implements(IInput.prototype);
-
-Range.prototype.publish("type", "text", "set", "Input type", ["html-color", "number", "checkbox", "button", "select", "textarea", "date", "text", "range", "search", "email", "time", "datetime"]);
-Range.prototype.publish("selectOptions", [], "array", "Array of options used to fill a dropdown list");
-Range.prototype.publish("low", null, "number", "Minimum value for Range input");
-Range.prototype.publish("high", null, "number", "Maximum value for Range input");
-Range.prototype.publish("step", null, "number", "Step value for Range input");
+import { IInput } from "@hpcc-js/api";
+import { HTMLWidget } from "@hpcc-js/common";
+import { rgb as d3Rgb } from "d3-color";
+
+import "../src/Input.css";
+
+export class Range extends HTMLWidget {
+    _inputElement = [];
+
+    constructor() {
+        super();
+
+        IInput.call(this);
+
+        this._tag = "div";
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+
+        const context = this;
+
+        this._inputElement[0] = element.append("input").attr("type", "range");
+        this._inputElement[1] = element.append("input").attr("type", "number");
+
+        this._inputElement.forEach(function (e, idx) {
+            e.attr("name", context.name());
+            e.on("click", function (w) {
+                w.click(w);
+            });
+            e.on("blur", function (w) {
+                w.blur(w);
+            });
+            e.on("change", function (w) {
+                if (idx === 0) {
+                    context._inputElement[1].property("value", d3Rgb(context._inputElement[0].property("value")).toString());
+                    context.value(context._inputElement[0].property("value"));
+                } else {
+                    context._inputElement[0].property("value", context._inputElement[1].property("value"));
+                    context.value(d3Rgb(context._inputElement[1].property("value")).toString());
+                }
+                w.change(w, true);
+            });
+        });
+    }
+
+    update(domNode, element) {
+        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());
+    }
+
+    insertSelectOptions(optionsArr) {
+        let optionHTML = "";
+        if (optionsArr.length > 0) {
+            optionsArr.forEach(function (opt) {
+                const val = (opt instanceof Array ? opt[0] : opt);
+                const text = (opt instanceof Array ? (opt[1] ? opt[1] : opt[0]) : opt);
+                optionHTML += "<option value='" + val + "'>" + text + "</option>";
+            });
+        } else {
+            optionHTML += "<option>selectOptions not set</option>";
+        }
+        this._inputElement[0].html(optionHTML);
+    }
+
+    type: { (): string; (_: string): Range };
+    type_exists: () => boolean;
+    selectOptions: { (): any[]; (_: any[]): Range };
+    selectOptions_exists: () => boolean;
+    low: { (): number; (_: number): Range };
+    low_exists: () => boolean;
+    high: { (): number; (_: number): Range };
+    high_exists: () => boolean;
+    step: { (): number; (_: number): Range };
+    step_exists: () => boolean;
+
+    //  IInput  ---
+    name: { (): string; (_: string): Range };
+    name_exists: () => boolean;
+    label: { (): string; (_: string): Range };
+    label_exists: () => boolean;
+    value: { (): any; (_: any): Range };
+    value_exists: () => boolean;
+    validate: { (): string; (_: string): Range };
+    validate_exists: () => boolean;
+}
+Range.prototype._class += " form_Range";
+Range.prototype.implements(IInput.prototype);
+
+Range.prototype.publish("type", "text", "set", "Input type", ["html-color", "number", "checkbox", "button", "select", "textarea", "date", "text", "range", "search", "email", "time", "datetime"]);
+Range.prototype.publish("selectOptions", [], "array", "Array of options used to fill a dropdown list");
+Range.prototype.publish("low", null, "number", "Minimum value for Range input");
+Range.prototype.publish("high", null, "number", "Maximum value for Range input");
+Range.prototype.publish("step", null, "number", "Step value for Range input");

package/src/Select.ts

@@ -1,80 +1,80 @@
-import { IInput } from "@hpcc-js/api";
-import { HTMLWidget } from "@hpcc-js/common";
-
-import "../src/Input.css";
-
-export class Select extends HTMLWidget {
-    _inputElement = [];
-
-    constructor() {
-        super();
-
-        IInput.call(this);
-
-        this._tag = "div";
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-
-        const context = this;
-
-        this._inputElement[0] = element.append("select")
-            .attr("name", this.name())
-            .on("click", function (w) {
-                w.click(w);
-            })
-            .on("blur", function (w) {
-                w.blur(w);
-            })
-            .on("change", function (w) {
-                context.value([context._inputElement[0].property("value")]);
-                w.change(w, true);
-            })
-            ;
-    }
-
-    update(domNode, element) {
-        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)
-            ;
-    }
-
-    insertSelectOptions(optionsArr) {
-        let optionHTML = "";
-        if (optionsArr.length > 0) {
-            optionsArr.forEach(function (opt) {
-                const val = (opt instanceof Array ? opt[0] : opt);
-                const text = (opt instanceof Array ? (opt[1] ? opt[1] : opt[0]) : opt);
-                optionHTML += "<option value='" + val + "'>" + text + "</option>";
-            });
-        } else {
-            optionHTML += "<option>selectOptions not set</option>";
-        }
-        this._inputElement[0].html(optionHTML);
-    }
-
-    selectOptions: { (): any[]; (_: any[]): Select };
-    selectOptions_exists: () => boolean;
-    maxWidth: { (): number; (_: number): Select };
-    maxWidth_exists: () => boolean;
-
-    //  IInput  ---
-    name: { (): string; (_: string): Select };
-    name_exists: () => boolean;
-    label: { (): string; (_: string): Select };
-    label_exists: () => boolean;
-    value: { (): any; (_: any): Select };
-    value_exists: () => boolean;
-    validate: { (): string; (_: string): Select };
-    validate_exists: () => boolean;
-}
-Select.prototype._class += " form_Select";
-Select.prototype.implements(IInput.prototype);
-
-Select.prototype.publish("selectOptions", [], "array", "Array of options used to fill a dropdown list");
-Select.prototype.publish("maxWidth", 120, "number", "Width", null, { optional: true });
+import { IInput } from "@hpcc-js/api";
+import { HTMLWidget } from "@hpcc-js/common";
+
+import "../src/Input.css";
+
+export class Select extends HTMLWidget {
+    _inputElement = [];
+
+    constructor() {
+        super();
+
+        IInput.call(this);
+
+        this._tag = "div";
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+
+        const context = this;
+
+        this._inputElement[0] = element.append("select")
+            .attr("name", this.name())
+            .on("click", function (w) {
+                w.click(w);
+            })
+            .on("blur", function (w) {
+                w.blur(w);
+            })
+            .on("change", function (w) {
+                context.value([context._inputElement[0].property("value")]);
+                w.change(w, true);
+            })
+            ;
+    }
+
+    update(domNode, element) {
+        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)
+            ;
+    }
+
+    insertSelectOptions(optionsArr) {
+        let optionHTML = "";
+        if (optionsArr.length > 0) {
+            optionsArr.forEach(function (opt) {
+                const val = (opt instanceof Array ? opt[0] : opt);
+                const text = (opt instanceof Array ? (opt[1] ? opt[1] : opt[0]) : opt);
+                optionHTML += "<option value='" + val + "'>" + text + "</option>";
+            });
+        } else {
+            optionHTML += "<option>selectOptions not set</option>";
+        }
+        this._inputElement[0].html(optionHTML);
+    }
+
+    selectOptions: { (): any[]; (_: any[]): Select };
+    selectOptions_exists: () => boolean;
+    maxWidth: { (): number; (_: number): Select };
+    maxWidth_exists: () => boolean;
+
+    //  IInput  ---
+    name: { (): string; (_: string): Select };
+    name_exists: () => boolean;
+    label: { (): string; (_: string): Select };
+    label_exists: () => boolean;
+    value: { (): any; (_: any): Select };
+    value_exists: () => boolean;
+    validate: { (): string; (_: string): Select };
+    validate_exists: () => boolean;
+}
+Select.prototype._class += " form_Select";
+Select.prototype.implements(IInput.prototype);
+
+Select.prototype.publish("selectOptions", [], "array", "Array of options used to fill a dropdown list");
+Select.prototype.publish("maxWidth", 120, "number", "Width", null, { optional: true });

package/src/Slider.css

@@ -1,41 +1,41 @@
-.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: 0.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: 0.5;
-    stroke-width: 1.25px;
-  }
-  
-  .form_Slider .tick-line {
-    stroke: #000;
-    stroke-opacity: 0.5;
-    stroke-width: 1px;
-    shape-rendering: crispEdges;
+.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: 0.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: 0.5;
+    stroke-width: 1.25px;
+  }
+  
+  .form_Slider .tick-line {
+    stroke: #000;
+    stroke-opacity: 0.5;
+    stroke-width: 1px;
+    shape-rendering: crispEdges;
   }