@hpcc-js/layout 2.51.3 → 2.51.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/layout",
-    "version": "2.51.3",
+    "version": "2.51.4",
     "description": "hpcc-js - Viz Layout",
     "main": "dist/index.js",
     "module": "dist/index.es6",
@@ -38,10 +38,10 @@
         "update": "npx --yes npm-check-updates -u -t minor"
     },
     "dependencies": {
-        "@hpcc-js/api": "^2.14.3",
+        "@hpcc-js/api": "^2.14.4",
         "@hpcc-js/chart": "^2.86.3",
-        "@hpcc-js/common": "^2.73.3",
-        "@hpcc-js/dgrid2": "^2.5.3"
+        "@hpcc-js/common": "^2.73.4",
+        "@hpcc-js/dgrid2": "^2.5.4"
     },
     "devDependencies": {
         "@hpcc-js/bundle": "^2.12.0",
@@ -65,5 +65,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "0907b8d15d369c89483954a1d96e2247ba020cb6"
+    "gitHead": "81822aa7c1ef1b1ad45ca4cf7769d13fdaf36fba"
 }

package/src/AbsoluteSurface.css

@@ -1,9 +1,9 @@
-.layout_AbsoluteSurface {
-    pointer-events: none !important;
-}
-
-.layout_AbsoluteSurface > .placeholder {
-    position: relative;
-    overflow: hidden;
-    pointer-events: all;
-}
+.layout_AbsoluteSurface {
+    pointer-events: none !important;
+}
+
+.layout_AbsoluteSurface > .placeholder {
+    position: relative;
+    overflow: hidden;
+    pointer-events: all;
+}

package/src/AbsoluteSurface.ts

@@ -1,84 +1,84 @@
-import { HTMLWidget } from "@hpcc-js/common";
-
-import "../src/AbsoluteSurface.css";
-
-export class AbsoluteSurface extends HTMLWidget {
-    constructor() {
-        super();
-
-        this._tag = "div";
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-
-        let xPos = 0;
-        let yPos = 0;
-        let width = this.clientWidth();
-        let height = this.clientHeight();
-        switch (this.units()) {
-            case "pixels":
-                xPos = this.widgetX();
-                yPos = this.widgetY();
-                width = this.widgetWidth() === "" ? width - xPos : Number(this.widgetWidth());
-                height = this.widgetHeight() === "" ? height - yPos : Number(this.widgetHeight());
-                break;
-            case "percent":
-                xPos = this.widgetX() * width / 100;
-                yPos = this.widgetY() * height / 100;
-                width = this.widgetWidth() === "" ? width - xPos : Number(this.widgetWidth()) * width / 100;
-                height = this.widgetHeight() === "" ? height - yPos : Number(this.widgetHeight()) * height / 100;
-                break;
-        }
-        element.style("opacity", this.opacity());
-
-        const widgets = element.selectAll("#" + this._id + " > .placeholder").data(this.widget() ? [this.widget()] : [], function (d) { return d._id; });
-        widgets.enter().append("div")
-            .attr("class", "placeholder")
-            .each(function (d) {
-                d.target(this);
-            })
-            .merge(widgets)
-            .style("left", xPos + "px")
-            .style("top", yPos + "px")
-            .style("width", width + "px")
-            .style("bottom", height + "px")
-            .each(function (d) {
-                d
-                    .resize({ width, height })
-                    ;
-            })
-            ;
-        widgets.exit().each(function (d) {
-            d.target(null);
-        }).remove();
-    }
-
-    exit(domNode, element) {
-        if (this.widget()) {
-            this.widget().target(null);
-        }
-        super.exit(domNode, element);
-    }
-
-    units: { (): string; (_: string): AbsoluteSurface; };
-    widgetX: { (): number; (_: number): AbsoluteSurface; };
-    widgetY: { (): number; (_: number): AbsoluteSurface; };
-    widgetWidth: { (): string; (_: string): AbsoluteSurface; };
-    widgetHeight: { (): string; (_: string): AbsoluteSurface; };
-    widget: { (): any; (_: any): AbsoluteSurface; };
-    opacity: { (): number; (_: number): AbsoluteSurface; };
-}
-AbsoluteSurface.prototype._class += " layout_AbsoluteSurface";
-
-AbsoluteSurface.prototype.publish("units", "percent", "set", "Units", ["pixels", "percent"]);
-AbsoluteSurface.prototype.publish("widgetX", 0, "number", "Widget XPos");
-AbsoluteSurface.prototype.publish("widgetY", 0, "number", "Widget YPos");
-AbsoluteSurface.prototype.publish("widgetWidth", "100", "string", "Widget Width, omit for full");
-AbsoluteSurface.prototype.publish("widgetHeight", "100", "string", "Widget Height, omit for full");
-AbsoluteSurface.prototype.publish("widget", null, "widget", "Widget", null, { tags: ["Private"] });
-AbsoluteSurface.prototype.publish("opacity", 1, "number", "Opacity");
+import { HTMLWidget } from "@hpcc-js/common";
+
+import "../src/AbsoluteSurface.css";
+
+export class AbsoluteSurface extends HTMLWidget {
+    constructor() {
+        super();
+
+        this._tag = "div";
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+
+        let xPos = 0;
+        let yPos = 0;
+        let width = this.clientWidth();
+        let height = this.clientHeight();
+        switch (this.units()) {
+            case "pixels":
+                xPos = this.widgetX();
+                yPos = this.widgetY();
+                width = this.widgetWidth() === "" ? width - xPos : Number(this.widgetWidth());
+                height = this.widgetHeight() === "" ? height - yPos : Number(this.widgetHeight());
+                break;
+            case "percent":
+                xPos = this.widgetX() * width / 100;
+                yPos = this.widgetY() * height / 100;
+                width = this.widgetWidth() === "" ? width - xPos : Number(this.widgetWidth()) * width / 100;
+                height = this.widgetHeight() === "" ? height - yPos : Number(this.widgetHeight()) * height / 100;
+                break;
+        }
+        element.style("opacity", this.opacity());
+
+        const widgets = element.selectAll("#" + this._id + " > .placeholder").data(this.widget() ? [this.widget()] : [], function (d) { return d._id; });
+        widgets.enter().append("div")
+            .attr("class", "placeholder")
+            .each(function (d) {
+                d.target(this);
+            })
+            .merge(widgets)
+            .style("left", xPos + "px")
+            .style("top", yPos + "px")
+            .style("width", width + "px")
+            .style("bottom", height + "px")
+            .each(function (d) {
+                d
+                    .resize({ width, height })
+                    ;
+            })
+            ;
+        widgets.exit().each(function (d) {
+            d.target(null);
+        }).remove();
+    }
+
+    exit(domNode, element) {
+        if (this.widget()) {
+            this.widget().target(null);
+        }
+        super.exit(domNode, element);
+    }
+
+    units: { (): string; (_: string): AbsoluteSurface; };
+    widgetX: { (): number; (_: number): AbsoluteSurface; };
+    widgetY: { (): number; (_: number): AbsoluteSurface; };
+    widgetWidth: { (): string; (_: string): AbsoluteSurface; };
+    widgetHeight: { (): string; (_: string): AbsoluteSurface; };
+    widget: { (): any; (_: any): AbsoluteSurface; };
+    opacity: { (): number; (_: number): AbsoluteSurface; };
+}
+AbsoluteSurface.prototype._class += " layout_AbsoluteSurface";
+
+AbsoluteSurface.prototype.publish("units", "percent", "set", "Units", ["pixels", "percent"]);
+AbsoluteSurface.prototype.publish("widgetX", 0, "number", "Widget XPos");
+AbsoluteSurface.prototype.publish("widgetY", 0, "number", "Widget YPos");
+AbsoluteSurface.prototype.publish("widgetWidth", "100", "string", "Widget Width, omit for full");
+AbsoluteSurface.prototype.publish("widgetHeight", "100", "string", "Widget Height, omit for full");
+AbsoluteSurface.prototype.publish("widget", null, "widget", "Widget", null, { tags: ["Private"] });
+AbsoluteSurface.prototype.publish("opacity", 1, "number", "Opacity");

package/src/Accordion.css

@@ -1,85 +1,85 @@
-.layout_Accordion > ul{
-    position:relative;
-}
-.layout_Accordion.open > span {
-    font-style:italic;
-}
-.layout_Accordion.closed > ul {
-    height: 0px;
-    overflow: hidden;
-}
-.layout_Accordion.open > ul{
-    display:block;
-}
-.layout_Accordion > .collapsible-icon,
-.layout_Accordion > .collapsible-title{
-    cursor:pointer;
-    box-sizing: border-box;
-}
-.layout_Accordion > .collapsible-title{
-    display:block;
-    width:100%;
-}
-.layout_Accordion > .collapsible-title{
-    font-size: 13px;
-    color:#FFF;
-    padding:4px 8px;
-    height:26px;
-    -webkit-box-shadow: inset 0px -1px 1px 0px rgba(0,0,0,0.2);
-    -moz-box-shadow: inset 0px -1px 1px 0px rgba(0,0,0,0.2);
-    box-shadow: inset 0px -1px 1px 0px rgba(0,0,0,0.2);
-}
-.layout_Accordion li{ 
-    background-color:#FFFFFF; 
-}
-.layout_Accordion > ul, 
-.layout_Accordion > .collapsible-title{ 
-    background-color:#333; 
-}
-.layout_Accordion .layout_Accordion > ul, 
-.layout_Accordion .layout_Accordion > .collapsible-title{ 
-    background-color:#555; 
-}
-.layout_Accordion .layout_Accordion .layout_Accordion > ul, 
-.layout_Accordion .layout_Accordion .layout_Accordion > .collapsible-title{ 
-    background-color:#777; 
-}
-.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion > ul, 
-.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion > .collapsible-title{ 
-    background-color:#999; 
-}
-.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion > ul, 
-.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion > .collapsible-title{ 
-    background-color:#BBB; 
-}
-.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion > ul, 
-.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion > .collapsible-title{ 
-    background-color:#CCC; 
-}
-.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion > ul, 
-.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion > .collapsible-title{ 
-    background-color:#DDD; 
-}
-.layout_Accordion > ul, 
-.layout_Accordion > span{ 
-    padding-left:0px;
-}
-.layout_Accordion .layout_Accordion > ul, 
-.layout_Accordion .layout_Accordion > span{ 
-    padding-left: 12px;
-}
-
-.layout_Accordion > .collapsible-title:before{
-    padding: 4px 8px 4px 8px;
-    position: absolute;
-    left: 0;
-    top: 0;
-}
-.layout_Accordion > .collapsible-icon{
-    position:absolute;
-    top:0px;
-    right:0px;
-    width:24px;
-    height:24px;
-    color:#FFF;
+.layout_Accordion > ul{
+    position:relative;
+}
+.layout_Accordion.open > span {
+    font-style:italic;
+}
+.layout_Accordion.closed > ul {
+    height: 0px;
+    overflow: hidden;
+}
+.layout_Accordion.open > ul{
+    display:block;
+}
+.layout_Accordion > .collapsible-icon,
+.layout_Accordion > .collapsible-title{
+    cursor:pointer;
+    box-sizing: border-box;
+}
+.layout_Accordion > .collapsible-title{
+    display:block;
+    width:100%;
+}
+.layout_Accordion > .collapsible-title{
+    font-size: 13px;
+    color:#FFF;
+    padding:4px 8px;
+    height:26px;
+    -webkit-box-shadow: inset 0px -1px 1px 0px rgba(0,0,0,0.2);
+    -moz-box-shadow: inset 0px -1px 1px 0px rgba(0,0,0,0.2);
+    box-shadow: inset 0px -1px 1px 0px rgba(0,0,0,0.2);
+}
+.layout_Accordion li{ 
+    background-color:#FFFFFF; 
+}
+.layout_Accordion > ul, 
+.layout_Accordion > .collapsible-title{ 
+    background-color:#333; 
+}
+.layout_Accordion .layout_Accordion > ul, 
+.layout_Accordion .layout_Accordion > .collapsible-title{ 
+    background-color:#555; 
+}
+.layout_Accordion .layout_Accordion .layout_Accordion > ul, 
+.layout_Accordion .layout_Accordion .layout_Accordion > .collapsible-title{ 
+    background-color:#777; 
+}
+.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion > ul, 
+.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion > .collapsible-title{ 
+    background-color:#999; 
+}
+.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion > ul, 
+.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion > .collapsible-title{ 
+    background-color:#BBB; 
+}
+.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion > ul, 
+.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion > .collapsible-title{ 
+    background-color:#CCC; 
+}
+.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion > ul, 
+.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion > .collapsible-title{ 
+    background-color:#DDD; 
+}
+.layout_Accordion > ul, 
+.layout_Accordion > span{ 
+    padding-left:0px;
+}
+.layout_Accordion .layout_Accordion > ul, 
+.layout_Accordion .layout_Accordion > span{ 
+    padding-left: 12px;
+}
+
+.layout_Accordion > .collapsible-title:before{
+    padding: 4px 8px 4px 8px;
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+.layout_Accordion > .collapsible-icon{
+    position:absolute;
+    top:0px;
+    right:0px;
+    width:24px;
+    height:24px;
+    color:#FFF;
 }

package/src/Accordion.ts

@@ -1,136 +1,136 @@
-import { FAChar, HTMLWidget } from "@hpcc-js/common";
-
-import "../src/Accordion.css";
-
-export class Accordion extends HTMLWidget {
-    protected _isClosed: boolean;
-    titleSpan;
-    iconDiv;
-    ul;
-    icon;
-
-    constructor() {
-        super();
-
-        this._tag = "div";
-        this._isClosed = false;
-    }
-
-    pushListItem(widget, prepend: boolean = false, protect: boolean = false) {
-        const contentArr = this.content();
-
-        widget._protected = protect;
-
-        if (prepend) {
-            contentArr.unshift(widget);
-        } else {
-            contentArr.push(widget);
-        }
-        this.content(contentArr);
-        return this;
-    }
-
-    clearListItems() {
-        const arr = [];
-        for (const i in this.content()) {
-            if (this.content()[i]._protected) {
-                arr.push(this.content()[i]);
-            }
-        }
-        this.content(arr);
-        return this;
-    }
-
-    collapseClick(element) {
-        if (element.classed("closed")) {
-            this._isClosed = false;
-            element.classed("open", true);
-            element.classed("closed", false);
-        } else {
-            this._isClosed = true;
-            element.classed("open", false);
-            element.classed("closed", true);
-        }
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        const context = this;
-        this._isClosed = this.defaultCollapsed();
-        element.classed(this._isClosed ? "closed" : "open", true);
-
-        this.titleSpan = element.append("span").classed("collapsible-title", true);
-        this.iconDiv = element.append("div").classed("collapsible-icon", true);
-        this.ul = element.append("ul");
-
-        this.icon = new FAChar()
-            .size({ height: 24, width: 24 })
-            .target(this.iconDiv.node());
-
-        this.iconDiv.on("click", function () {
-            context.collapseClick(element);
-            context.render();
-        });
-        this.titleSpan.on("click", function () {
-            context.collapseClick(element);
-            context.render();
-        });
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        const context = this;
-        const this_id = "";
-        this.titleSpan.text(context.title().length > 0 ? context.title() + this_id : "Accordion [" + context._id + "]" + this_id);
-        const rows = this.ul.selectAll("#" + context._id + " > ul > li").data(this.content(), function (d) {
-            return d._id;
-        });
-        rows.enter()
-            .append(function (widget) {
-                const li = document.createElement("li");
-                if (widget._target === null) {
-                    const wSize = widget.size();
-                    if (wSize.width === 0 || wSize.height === 0) {
-                        const cSize = context.size();
-                        widget.size({
-                            width: cSize.width,
-                            height: cSize.width
-                        });
-                    }
-                    widget.target(li);
-                } else {
-                    return widget._target;
-                }
-                return li;
-            })
-            ;
-        rows.exit().remove();
-
-        this.icon
-            .text_colorFill(this.titleFontColor())
-            .char(this._isClosed ? this.closedIcon() : this.openIcon()).render()
-            ;
-    }
-
-    exit(domNode, element) {
-        super.exit(domNode, element);
-    }
-
-    content: { (): any[]; (_: any[]): Accordion; };
-    title: { (): string; (_: string): Accordion; };
-    openIcon: { (): string; (_: string): Accordion; };
-    closedIcon: { (): string; (_: string): Accordion; };
-    titleFontColor: { (): string; (_: string): Accordion; };
-    titleBackgroundColor: { (): any; (_: any): Accordion; };
-    defaultCollapsed: { (): boolean; (_: boolean): Accordion; };
-}
-Accordion.prototype._class += " layout_Accordion";
-
-Accordion.prototype.publish("content", [], "widgetArray", "Array of widgets", null, { tags: ["Basic"] });
-Accordion.prototype.publish("title", "", "string", "Title of collapsible section", null, { tags: ["Private"] });
-Accordion.prototype.publish("openIcon", "\uf147", "string", "Icon to display when list is open", null, { tags: ["Private"] });
-Accordion.prototype.publish("closedIcon", "\uf196", "string", "Icon to display when list is closed", null, { tags: ["Private"] });
-Accordion.prototype.publish("titleFontColor", "#FFFFFF", "html-color", "Title font color", null, { tags: ["Private"] });
-Accordion.prototype.publish("titleBackgroundColor", "#333333", "html-color", "Title background color", null, { tags: ["Private"] });
-
-Accordion.prototype.publish("defaultCollapsed", false, "boolean", "Collapsed by default if true", null, { tags: ["Private"] });
+import { FAChar, HTMLWidget } from "@hpcc-js/common";
+
+import "../src/Accordion.css";
+
+export class Accordion extends HTMLWidget {
+    protected _isClosed: boolean;
+    titleSpan;
+    iconDiv;
+    ul;
+    icon;
+
+    constructor() {
+        super();
+
+        this._tag = "div";
+        this._isClosed = false;
+    }
+
+    pushListItem(widget, prepend: boolean = false, protect: boolean = false) {
+        const contentArr = this.content();
+
+        widget._protected = protect;
+
+        if (prepend) {
+            contentArr.unshift(widget);
+        } else {
+            contentArr.push(widget);
+        }
+        this.content(contentArr);
+        return this;
+    }
+
+    clearListItems() {
+        const arr = [];
+        for (const i in this.content()) {
+            if (this.content()[i]._protected) {
+                arr.push(this.content()[i]);
+            }
+        }
+        this.content(arr);
+        return this;
+    }
+
+    collapseClick(element) {
+        if (element.classed("closed")) {
+            this._isClosed = false;
+            element.classed("open", true);
+            element.classed("closed", false);
+        } else {
+            this._isClosed = true;
+            element.classed("open", false);
+            element.classed("closed", true);
+        }
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        const context = this;
+        this._isClosed = this.defaultCollapsed();
+        element.classed(this._isClosed ? "closed" : "open", true);
+
+        this.titleSpan = element.append("span").classed("collapsible-title", true);
+        this.iconDiv = element.append("div").classed("collapsible-icon", true);
+        this.ul = element.append("ul");
+
+        this.icon = new FAChar()
+            .size({ height: 24, width: 24 })
+            .target(this.iconDiv.node());
+
+        this.iconDiv.on("click", function () {
+            context.collapseClick(element);
+            context.render();
+        });
+        this.titleSpan.on("click", function () {
+            context.collapseClick(element);
+            context.render();
+        });
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        const context = this;
+        const this_id = "";
+        this.titleSpan.text(context.title().length > 0 ? context.title() + this_id : "Accordion [" + context._id + "]" + this_id);
+        const rows = this.ul.selectAll("#" + context._id + " > ul > li").data(this.content(), function (d) {
+            return d._id;
+        });
+        rows.enter()
+            .append(function (widget) {
+                const li = document.createElement("li");
+                if (widget._target === null) {
+                    const wSize = widget.size();
+                    if (wSize.width === 0 || wSize.height === 0) {
+                        const cSize = context.size();
+                        widget.size({
+                            width: cSize.width,
+                            height: cSize.width
+                        });
+                    }
+                    widget.target(li);
+                } else {
+                    return widget._target;
+                }
+                return li;
+            })
+            ;
+        rows.exit().remove();
+
+        this.icon
+            .text_colorFill(this.titleFontColor())
+            .char(this._isClosed ? this.closedIcon() : this.openIcon()).render()
+            ;
+    }
+
+    exit(domNode, element) {
+        super.exit(domNode, element);
+    }
+
+    content: { (): any[]; (_: any[]): Accordion; };
+    title: { (): string; (_: string): Accordion; };
+    openIcon: { (): string; (_: string): Accordion; };
+    closedIcon: { (): string; (_: string): Accordion; };
+    titleFontColor: { (): string; (_: string): Accordion; };
+    titleBackgroundColor: { (): any; (_: any): Accordion; };
+    defaultCollapsed: { (): boolean; (_: boolean): Accordion; };
+}
+Accordion.prototype._class += " layout_Accordion";
+
+Accordion.prototype.publish("content", [], "widgetArray", "Array of widgets", null, { tags: ["Basic"] });
+Accordion.prototype.publish("title", "", "string", "Title of collapsible section", null, { tags: ["Private"] });
+Accordion.prototype.publish("openIcon", "\uf147", "string", "Icon to display when list is open", null, { tags: ["Private"] });
+Accordion.prototype.publish("closedIcon", "\uf196", "string", "Icon to display when list is closed", null, { tags: ["Private"] });
+Accordion.prototype.publish("titleFontColor", "#FFFFFF", "html-color", "Title font color", null, { tags: ["Private"] });
+Accordion.prototype.publish("titleBackgroundColor", "#333333", "html-color", "Title background color", null, { tags: ["Private"] });
+
+Accordion.prototype.publish("defaultCollapsed", false, "boolean", "Collapsed by default if true", null, { tags: ["Private"] });