@hpcc-js/form 3.3.7 → 3.3.9

package/src/Range.ts

@@ -1,116 +1,116 @@
-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);
-    }
-}
-Range.prototype._class += " form_Range";
-Range.prototype.implements(IInput.prototype);
-
-export interface Range {
-    //  IInput  ---
-    name(): string;
-    name(_: string): this;
-    name_exists(): boolean;
-    label(): string;
-    label(_: string): this;
-    label_exists(): boolean;
-    value(): any;
-    value(_: any): this;
-    value_exists(): boolean;
-    validate(): string;
-    validate(_: string): this;
-    validate_exists(): boolean;
-
-    //  Properties  ---
-    type(): string;
-    type(_: string): this;
-    type_exists(): boolean;
-    selectOptions(): any[];
-    selectOptions(_: any[]): this;
-    selectOptions_exists(): boolean;
-    low(): number;
-    low(_: number): this;
-    low_exists(): boolean;
-    high(): number;
-    high(_: number): this;
-    high_exists(): boolean;
-    step(): number;
-    step(_: number): this;
-    step_exists(): boolean;
-}
-
-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);
+    }
+}
+Range.prototype._class += " form_Range";
+Range.prototype.implements(IInput.prototype);
+
+export interface Range {
+    //  IInput  ---
+    name(): string;
+    name(_: string): this;
+    name_exists(): boolean;
+    label(): string;
+    label(_: string): this;
+    label_exists(): boolean;
+    value(): any;
+    value(_: any): this;
+    value_exists(): boolean;
+    validate(): string;
+    validate(_: string): this;
+    validate_exists(): boolean;
+
+    //  Properties  ---
+    type(): string;
+    type(_: string): this;
+    type_exists(): boolean;
+    selectOptions(): any[];
+    selectOptions(_: any[]): this;
+    selectOptions_exists(): boolean;
+    low(): number;
+    low(_: number): this;
+    low_exists(): boolean;
+    high(): number;
+    high(_: number): this;
+    high_exists(): boolean;
+    step(): number;
+    step(_: number): this;
+    step_exists(): boolean;
+}
+
+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,89 +1,89 @@
-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);
-    }
-}
-Select.prototype._class += " form_Select";
-Select.prototype.implements(IInput.prototype);
-
-export interface Select {
-    //  IInput  ---
-    name(): string;
-    name(_: string): this;
-    name_exists(): boolean;
-    label(): string;
-    label(_: string): this;
-    label_exists(): boolean;
-    value(): any;
-    value(_: any): this;
-    value_exists(): boolean;
-    validate(): string;
-    validate(_: string): this;
-    validate_exists(): boolean;
-
-    //  Properties  ---
-    selectOptions(): any[];
-    selectOptions(_: any[]): this;
-    selectOptions_exists(): boolean;
-    maxWidth(): number;
-    maxWidth(_: number): this;
-    maxWidth_exists(): boolean;
-}
-
-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);
+    }
+}
+Select.prototype._class += " form_Select";
+Select.prototype.implements(IInput.prototype);
+
+export interface Select {
+    //  IInput  ---
+    name(): string;
+    name(_: string): this;
+    name_exists(): boolean;
+    label(): string;
+    label(_: string): this;
+    label_exists(): boolean;
+    value(): any;
+    value(_: any): this;
+    value_exists(): boolean;
+    validate(): string;
+    validate(_: string): this;
+    validate_exists(): boolean;
+
+    //  Properties  ---
+    selectOptions(): any[];
+    selectOptions(_: any[]): this;
+    selectOptions_exists(): boolean;
+    maxWidth(): number;
+    maxWidth(_: number): this;
+    maxWidth_exists(): boolean;
+}
+
+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;
   }