@hpcc-js/form 3.4.4 → 3.4.6

package/src/Button.ts

@@ -1,52 +1,52 @@
-import { IInput } from "@hpcc-js/api";
-import { HTMLWidget } from "@hpcc-js/common";
-
-import "../src/Input.css";
-
-export class Button 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("button")
-            .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._inputElement[0].text(this.value());
-    }
-}
-Button.prototype._class += " form_Button";
-Button.prototype.implements(IInput.prototype);
-
-export interface Button {
-    name(): string;
-    name(_: string): Button;
-    label(): string;
-    label(_: string): Button;
-    value(): any;
-    value(_: any): Button;
-    validate(): string;
-    validate(_: string): Button;
-}
+import { IInput } from "@hpcc-js/api";
+import { HTMLWidget } from "@hpcc-js/common";
+
+import "../src/Input.css";
+
+export class Button 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("button")
+            .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._inputElement[0].text(this.value());
+    }
+}
+Button.prototype._class += " form_Button";
+Button.prototype.implements(IInput.prototype);
+
+export interface Button {
+    name(): string;
+    name(_: string): Button;
+    label(): string;
+    label(_: string): Button;
+    value(): any;
+    value(_: any): Button;
+    validate(): string;
+    validate(_: string): Button;
+}

package/src/CheckBox.ts

@@ -1,103 +1,103 @@
-import { IInput } from "@hpcc-js/api";
-import { HTMLWidget } from "@hpcc-js/common";
-
-import "../src/Input.css";
-
-export class CheckBox extends HTMLWidget {
-    _inputElement = [];
-
-    constructor() {
-        super();
-        IInput.call(this);
-
-        this._tag = "div";
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        const context = this;
-
-        const checkboxContainer = element.append("ul");
-        if (!this.selectOptions().length) {
-            this.selectOptions().push(""); // create an empty radio if we using .value and not selectOptions array
-        }
-        this.selectOptions().forEach(function (val, idx) {
-            context._inputElement[idx] = checkboxContainer.append("li").append("input").attr("type", "checkbox");
-            context._inputElement[idx].node().insertAdjacentHTML("afterend", "<text>" + val + "</text>");
-        });
-
-        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) {
-                const vals = [];
-                context._inputElement.forEach(function (d) {
-                    if (d.property("checked")) {
-                        vals.push(d.property("value"));
-                    }
-                });
-                context.value(vals);
-                w.change(w, true);
-            });
-        });
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-
-        const context = this;
-
-        this._inputElement.forEach(function (e, idx) {
-            e.property("value", context.selectOptions()[idx]);
-            if (context.value().indexOf(context.selectOptions()[idx]) !== -1 && context.value() !== "false") {
-                e.property("checked", true);
-            } else {
-                e.property("checked", false);
-            }
-        });
-    }
-
-    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);
-    }
-}
-CheckBox.prototype._class += " form_CheckBox";
-CheckBox.prototype.implements(IInput.prototype);
-
-export interface CheckBox {
-    //  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;
-}
-
-CheckBox.prototype.publish("selectOptions", [], "array", "Array of options used to fill a dropdown list");
+import { IInput } from "@hpcc-js/api";
+import { HTMLWidget } from "@hpcc-js/common";
+
+import "../src/Input.css";
+
+export class CheckBox extends HTMLWidget {
+    _inputElement = [];
+
+    constructor() {
+        super();
+        IInput.call(this);
+
+        this._tag = "div";
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        const context = this;
+
+        const checkboxContainer = element.append("ul");
+        if (!this.selectOptions().length) {
+            this.selectOptions().push(""); // create an empty radio if we using .value and not selectOptions array
+        }
+        this.selectOptions().forEach(function (val, idx) {
+            context._inputElement[idx] = checkboxContainer.append("li").append("input").attr("type", "checkbox");
+            context._inputElement[idx].node().insertAdjacentHTML("afterend", "<text>" + val + "</text>");
+        });
+
+        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) {
+                const vals = [];
+                context._inputElement.forEach(function (d) {
+                    if (d.property("checked")) {
+                        vals.push(d.property("value"));
+                    }
+                });
+                context.value(vals);
+                w.change(w, true);
+            });
+        });
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+
+        const context = this;
+
+        this._inputElement.forEach(function (e, idx) {
+            e.property("value", context.selectOptions()[idx]);
+            if (context.value().indexOf(context.selectOptions()[idx]) !== -1 && context.value() !== "false") {
+                e.property("checked", true);
+            } else {
+                e.property("checked", false);
+            }
+        });
+    }
+
+    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);
+    }
+}
+CheckBox.prototype._class += " form_CheckBox";
+CheckBox.prototype.implements(IInput.prototype);
+
+export interface CheckBox {
+    //  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;
+}
+
+CheckBox.prototype.publish("selectOptions", [], "array", "Array of options used to fill a dropdown list");

package/src/ColorInput.ts

@@ -1,81 +1,81 @@
-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 ColorInput 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", "text");
-        this._inputElement[0].classed("color-text", true);
-        this._inputElement[1] = element.append("input").attr("type", "color");
-
-        this._inputElement.forEach(function (e, idx) {
-            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);
-
-        const context = this;
-        this._inputElement.forEach(function (e) {
-            e.attr("name", context.name());
-        });
-
-        this._inputElement[0].attr("type", "text");
-        this._inputElement[1].attr("type", "color");
-        this._inputElement[0].property("value", this.value());
-        this._inputElement[1].property("value", d3Rgb(this.value()).toString());
-
-        const bbox = this._inputElement[0].node().getBoundingClientRect();
-        this._inputElement[1].style("height", (bbox.height - 2) + "px");
-
-    }
-}
-ColorInput.prototype._class += " form_ColorInput";
-ColorInput.prototype.implements(IInput.prototype);
-
-export interface ColorInput {
-    //  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;
-}
+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 ColorInput 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", "text");
+        this._inputElement[0].classed("color-text", true);
+        this._inputElement[1] = element.append("input").attr("type", "color");
+
+        this._inputElement.forEach(function (e, idx) {
+            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);
+
+        const context = this;
+        this._inputElement.forEach(function (e) {
+            e.attr("name", context.name());
+        });
+
+        this._inputElement[0].attr("type", "text");
+        this._inputElement[1].attr("type", "color");
+        this._inputElement[0].property("value", this.value());
+        this._inputElement[1].property("value", d3Rgb(this.value()).toString());
+
+        const bbox = this._inputElement[0].node().getBoundingClientRect();
+        this._inputElement[1].style("height", (bbox.height - 2) + "px");
+
+    }
+}
+ColorInput.prototype._class += " form_ColorInput";
+ColorInput.prototype.implements(IInput.prototype);
+
+export interface ColorInput {
+    //  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;
+}

package/src/FieldForm.ts

@@ -1,49 +1,49 @@
-import { Database } from "@hpcc-js/common";
-import { Form } from "./Form.ts";
-import { Input } from "./Input.ts";
-
-import "../src/Form.css";
-
-export class FieldForm extends Form {
-
-    constructor() {
-        super();
-
-        this._tag = "form";
-    }
-
-    fields(): Database.Field[];
-    fields(_: Database.Field[]): this;
-    fields(_?: Database.Field[]): Database.Field[] | this {
-        const retVal = super.fields.apply(this, arguments);
-        if (arguments.length) {
-            const inpMap = this.inputsMap();
-            this.inputs(_.map(f => inpMap[f.id()] || new Input()
-                .name(f.id())
-                .label(f.label())
-                .type(f.type())
-            ));
-        }
-        return retVal;
-    }
-
-    data(): any;
-    data(_: any): this;
-    data(_?: any): any | this {
-        if (!arguments.length) return super.data();
-        super.data(_[0]);
-        if (_[0]) {
-            //  Update input "name" with the __lparam ids  ---
-            const inputs = this.inputs();
-            const __lparam = _[0][this.columns().length];
-            let i = 0;
-            for (const key in __lparam) {
-                inputs[i].name(key);
-                ++i;
-            }
-        }
-        return this;
-    }
-
-}
-FieldForm.prototype._class += " form_FieldForm";
+import { Database } from "@hpcc-js/common";
+import { Form } from "./Form.ts";
+import { Input } from "./Input.ts";
+
+import "../src/Form.css";
+
+export class FieldForm extends Form {
+
+    constructor() {
+        super();
+
+        this._tag = "form";
+    }
+
+    fields(): Database.Field[];
+    fields(_: Database.Field[]): this;
+    fields(_?: Database.Field[]): Database.Field[] | this {
+        const retVal = super.fields.apply(this, arguments);
+        if (arguments.length) {
+            const inpMap = this.inputsMap();
+            this.inputs(_.map(f => inpMap[f.id()] || new Input()
+                .name(f.id())
+                .label(f.label())
+                .type(f.type())
+            ));
+        }
+        return retVal;
+    }
+
+    data(): any;
+    data(_: any): this;
+    data(_?: any): any | this {
+        if (!arguments.length) return super.data();
+        super.data(_[0]);
+        if (_[0]) {
+            //  Update input "name" with the __lparam ids  ---
+            const inputs = this.inputs();
+            const __lparam = _[0][this.columns().length];
+            let i = 0;
+            for (const key in __lparam) {
+                inputs[i].name(key);
+                ++i;
+            }
+        }
+        return this;
+    }
+
+}
+FieldForm.prototype._class += " form_FieldForm";