@hpcc-js/form 3.3.7 → 3.3.9

package/src/OnOff.ts

@@ -1,159 +1,159 @@
-import { IInput } from "@hpcc-js/api";
-import { HTMLWidget } from "@hpcc-js/common";
-
-import "../src/OnOff.css";
-
-export class OnOff extends HTMLWidget {
-    _inputElement = [];
-    _input;
-
-    constructor() {
-        super();
-        IInput.call(this);
-
-        this._tag = "div";
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        element.classed("onoffswitch", true);
-        const context = this;
-        this._input = element.append("input")
-            .attr("class", "onoffswitch-checkbox")
-            .attr("type", "checkbox")
-            .attr("id", this.id() + "_onOff")
-            .on("click", function (w) {
-                w.click(w);
-            })
-            .on("blur", function (w) {
-                w.blur(w);
-            })
-            .on("change", function (w) {
-                const vals = [];
-                context._inputElement.forEach(function (d, idx) {
-                    if (d.property("checked")) {
-                        vals.push(d.property("value"));
-                    }
-                });
-                context.value(vals);
-                w.change(w, true);
-            })
-            ;
-        const label = element.append("label")
-            .attr("class", "onoffswitch-label")
-            .attr("for", this.id() + "_onOff")
-            ;
-        const inner = label.append("div")
-            .attr("class", "onoffswitch-inner")
-            ;
-        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")
-            ;
-    }
-
-    update(domNode, element) {
-        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")
-            ;
-
-        const _switch_size = this.minHeight() - (this.gutter() * 4);
-
-        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())
-            ;
-    }
-}
-OnOff.prototype._class += " form_OnOff";
-export interface OnOff {
-    //  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  ---
-    marginLeft(): number;
-    marginLeft(_: number): this;
-    marginBottom(): number;
-    marginBottom(_: number): this;
-    minWidth(): number;
-    minWidth(_: number): this;
-    minHeight(): number;
-    minHeight(_: number): this;
-    gutter(): number;
-    gutter(_: number): this;
-    offText(): string;
-    offText(_: string): this;
-    onText(): string;
-    onText(_: string): this;
-    switchRadius(): number;
-    switchRadius(_: number): this;
-    containerRadius(): number;
-    containerRadius(_: number): this;
-    offColor(): string;
-    offColor(_: string): this;
-    onColor(): string;
-    onColor(_: string): this;
-    offFontColor(): string;
-    offFontColor(_: string): this;
-    onFontColor(): string;
-    onFontColor(_: string): this;
-
-}
-OnOff.prototype.implements(IInput.prototype);
-
-OnOff.prototype.publish("marginLeft", 0, "number", "Margin left of OnOff");
-OnOff.prototype.publish("marginBottom", 0, "number", "Margin bottom of OnOff");
-OnOff.prototype.publish("minWidth", 100, "number", "Minimum width of OnOff (pixels)");
-OnOff.prototype.publish("minHeight", 20, "number", "Minimum height of OnOff (pixels)");
-OnOff.prototype.publish("gutter", 1, "number", "Space between switch and border of OnOff (pixels)");
-OnOff.prototype.publish("onText", "Save", "string", "Text to display when 'ON'");
-OnOff.prototype.publish("offText", "Properties", "string", "Text to display when 'OFF'");
-OnOff.prototype.publish("switchRadius", 10, "number", "Border radius of switch (pixels)");
-OnOff.prototype.publish("containerRadius", 10, "number", "Border radius of OnOff (pixels)");
-OnOff.prototype.publish("onColor", "#2ecc71", "html-color", "Background color when 'ON'");
-OnOff.prototype.publish("offColor", "#ecf0f1", "html-color", "Background color when 'OFF'");
-OnOff.prototype.publish("onFontColor", "#2c3e50", "html-color", "Font color when 'ON'");
-OnOff.prototype.publish("offFontColor", "#7f8c8d", "html-color", "Font color when 'OFF'");
+import { IInput } from "@hpcc-js/api";
+import { HTMLWidget } from "@hpcc-js/common";
+
+import "../src/OnOff.css";
+
+export class OnOff extends HTMLWidget {
+    _inputElement = [];
+    _input;
+
+    constructor() {
+        super();
+        IInput.call(this);
+
+        this._tag = "div";
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        element.classed("onoffswitch", true);
+        const context = this;
+        this._input = element.append("input")
+            .attr("class", "onoffswitch-checkbox")
+            .attr("type", "checkbox")
+            .attr("id", this.id() + "_onOff")
+            .on("click", function (w) {
+                w.click(w);
+            })
+            .on("blur", function (w) {
+                w.blur(w);
+            })
+            .on("change", function (w) {
+                const vals = [];
+                context._inputElement.forEach(function (d, idx) {
+                    if (d.property("checked")) {
+                        vals.push(d.property("value"));
+                    }
+                });
+                context.value(vals);
+                w.change(w, true);
+            })
+            ;
+        const label = element.append("label")
+            .attr("class", "onoffswitch-label")
+            .attr("for", this.id() + "_onOff")
+            ;
+        const inner = label.append("div")
+            .attr("class", "onoffswitch-inner")
+            ;
+        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")
+            ;
+    }
+
+    update(domNode, element) {
+        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")
+            ;
+
+        const _switch_size = this.minHeight() - (this.gutter() * 4);
+
+        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())
+            ;
+    }
+}
+OnOff.prototype._class += " form_OnOff";
+export interface OnOff {
+    //  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  ---
+    marginLeft(): number;
+    marginLeft(_: number): this;
+    marginBottom(): number;
+    marginBottom(_: number): this;
+    minWidth(): number;
+    minWidth(_: number): this;
+    minHeight(): number;
+    minHeight(_: number): this;
+    gutter(): number;
+    gutter(_: number): this;
+    offText(): string;
+    offText(_: string): this;
+    onText(): string;
+    onText(_: string): this;
+    switchRadius(): number;
+    switchRadius(_: number): this;
+    containerRadius(): number;
+    containerRadius(_: number): this;
+    offColor(): string;
+    offColor(_: string): this;
+    onColor(): string;
+    onColor(_: string): this;
+    offFontColor(): string;
+    offFontColor(_: string): this;
+    onFontColor(): string;
+    onFontColor(_: string): this;
+
+}
+OnOff.prototype.implements(IInput.prototype);
+
+OnOff.prototype.publish("marginLeft", 0, "number", "Margin left of OnOff");
+OnOff.prototype.publish("marginBottom", 0, "number", "Margin bottom of OnOff");
+OnOff.prototype.publish("minWidth", 100, "number", "Minimum width of OnOff (pixels)");
+OnOff.prototype.publish("minHeight", 20, "number", "Minimum height of OnOff (pixels)");
+OnOff.prototype.publish("gutter", 1, "number", "Space between switch and border of OnOff (pixels)");
+OnOff.prototype.publish("onText", "Save", "string", "Text to display when 'ON'");
+OnOff.prototype.publish("offText", "Properties", "string", "Text to display when 'OFF'");
+OnOff.prototype.publish("switchRadius", 10, "number", "Border radius of switch (pixels)");
+OnOff.prototype.publish("containerRadius", 10, "number", "Border radius of OnOff (pixels)");
+OnOff.prototype.publish("onColor", "#2ecc71", "html-color", "Background color when 'ON'");
+OnOff.prototype.publish("offColor", "#ecf0f1", "html-color", "Background color when 'OFF'");
+OnOff.prototype.publish("onFontColor", "#2c3e50", "html-color", "Font color when 'ON'");
+OnOff.prototype.publish("offFontColor", "#7f8c8d", "html-color", "Font color when 'OFF'");

package/src/Radio.ts

@@ -1,83 +1,83 @@
-import { IInput } from "@hpcc-js/api";
-import { HTMLWidget } from "@hpcc-js/common";
-
-import "../src/Input.css";
-
-export class Radio extends HTMLWidget {
-    _inputElement = [];
-    constructor() {
-        super();
-        IInput.call(this);
-
-        this._tag = "div";
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-
-        const context = this;
-
-        const radioContainer = 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] = radioContainer.append("li").append("input").attr("type", "radio");
-            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) {
-                context.value([e.property("value")]);
-                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);
-            }
-        });
-    }
-}
-Radio.prototype._class += " form_Radio";
-Radio.prototype.implements(IInput.prototype);
-
-export interface Radio {
-    //  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;
-}
-
-Radio.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 Radio extends HTMLWidget {
+    _inputElement = [];
+    constructor() {
+        super();
+        IInput.call(this);
+
+        this._tag = "div";
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+
+        const context = this;
+
+        const radioContainer = 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] = radioContainer.append("li").append("input").attr("type", "radio");
+            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) {
+                context.value([e.property("value")]);
+                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);
+            }
+        });
+    }
+}
+Radio.prototype._class += " form_Radio";
+Radio.prototype.implements(IInput.prototype);
+
+export interface Radio {
+    //  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;
+}
+
+Radio.prototype.publish("selectOptions", [], "array", "Array of options used to fill a dropdown list");