@hpcc-js/layout 2.51.3 → 2.51.5

package/src/Tabbed.ts

@@ -1,158 +1,158 @@
-import { HTMLWidget, Text } from "@hpcc-js/common";
-import { select as d3Select } from "d3-selection";
-import { Surface } from "./Surface";
-
-import "../src/Tabbed.css";
-
-export class Tabbed extends HTMLWidget {
-    _tabContainer;
-    _contentContainer;
-
-    constructor() {
-        super();
-
-        this._tag = "div";
-    }
-
-    clearTabs() {
-        this.labels([]);
-        this.widgets([]);
-        return this;
-    }
-
-    addTab(widget, label, isActive?, callback?) {
-        const widgetSize = widget.size();
-        if (widgetSize.width === 0 && widgetSize.height === 0) {
-            widget.size({ width: "100%", height: "100%" });
-        }
-        const labels = this.labels();
-        const widgets = this.widgets();
-        if (isActive) {
-            this.activeTabIdx(this.widgets().length);
-        }
-        labels.push(label);
-        const surface = new Surface().widget(widget ? widget : new Text().text("No widget defined for tab"));
-        widgets.push(surface);
-        this.labels(labels);
-        this.widgets(widgets);
-        if (callback) {
-            callback(surface);
-        }
-        return this;
-    }
-
-    widgetSize(widgetDiv) {
-        const width = this.clientWidth();
-        let height = this.clientHeight();
-
-        const tcBox = this._tabContainer.node().getBoundingClientRect();
-        if (typeof (tcBox.height) !== "undefined") {
-            height -= tcBox.height;
-        }
-        return { width, height };
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this._tabContainer = element.append("div");
-        this._contentContainer = element.append("div");
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        const context = this;
-
-        element.style("padding", this.surfacePadding_exists() ? this.surfacePadding() + "px" : null);
-
-        const tabs = this._tabContainer.selectAll(".tab-button.id" + this.id()).data(this.showTabs() ? this.labels() : [], function (d) { return d; });
-        tabs.enter().append("span")
-            .attr("class", "tab-button id" + this.id())
-            .style("cursor", "pointer")
-            .on("click", function (d, idx) {
-                context.click(context.widgets()[idx].widget(), d, idx);
-                context
-                    .activeTabIdx(idx)
-                    .render()
-                    ;
-            }).merge(tabs)
-            .classed("active", function (d, idx) { return context.activeTabIdx() === idx; })
-            .text(function (d) { return d; })
-            ;
-        tabs.exit().remove();
-
-        const content = this._contentContainer.selectAll(".tab-content.id" + this.id()).data(this.widgets(), function (d) { return d.id(); });
-        content.enter().append("div")
-            .attr("class", "tab-content id" + this.id())
-            .each(function (widget, idx) {
-                widget.target(this);
-            }).merge(content)
-            .classed("active", function (d, idx) { return context.activeTabIdx() === idx; })
-            .style("display", function (d, idx) { return context.activeTabIdx() === idx ? "block" : "none"; })
-            .each(function (surface, idx) {
-                surface.visible(context.activeTabIdx() === idx);
-                if (context.activeTabIdx() === idx) {
-                    const wSize = context.widgetSize(d3Select(this));
-                    surface
-                        .surfaceBorderWidth(context.showTabs() ? null : 0)
-                        .surfacePadding(context.showTabs() ? null : 0)
-                        .resize(wSize)
-                        ;
-                }
-            })
-            ;
-        content.exit()
-            .each(function (widget, idx) {
-                widget
-                    .target(null)
-                    ;
-            })
-            .remove();
-
-        switch (this.tabLocation()) {
-            case "bottom":
-                this._tabContainer
-                    .attr("class", "on_bottom")
-                    .style("top", (this._contentContainer.node().offsetHeight + this.surfacePadding()) + "px")
-                    .style("position", "absolute")
-                    ;
-                this._contentContainer
-                    .style("top", this.surfacePadding_exists() ? this.surfacePadding() + "px" : null)
-                    .style("position", "absolute")
-                    ;
-                break;
-            default:
-                this._tabContainer
-                    .attr("class", "on_top")
-                    .style("top", null)
-                    .style("position", "relative")
-                    ;
-                this._contentContainer
-                    .style("top", (this._tabContainer.node().offsetHeight + this.surfacePadding()) + "px")
-                    .style("position", "absolute")
-                    ;
-                break;
-        }
-    }
-
-    click(widget, column, idx) {
-    }
-
-    showTabs: { (): boolean; (_: boolean): Tabbed; };
-    surfacePadding: { (): number; (_: number): Tabbed; };
-    surfacePadding_default: { (): number; (_: number): Tabbed; };
-    surfacePadding_exists: () => boolean;
-    activeTabIdx: { (): number; (_: number): Tabbed; };
-
-    labels: { (): string[]; (_: string[]): Tabbed; };
-    tabLocation: { (): string; (_: string): Tabbed; };
-    widgets: { (): any[]; (_: any[]): Tabbed; };
-}
-Tabbed.prototype._class += " layout_Tabbed";
-
-Tabbed.prototype.publish("showTabs", true, "boolean", "Show Tabs", null, {});
-Tabbed.prototype.publish("surfacePadding", 4, "number", "Padding");
-Tabbed.prototype.publish("activeTabIdx", 0, "number", "Index of active tab", null, {});
-
-Tabbed.prototype.publish("labels", [], "array", "Array of tab labels sharing an index with ", null, { tags: ["Private"] });
-Tabbed.prototype.publish("tabLocation", "top", "set", "Position the tabs at the bottom of the widget", ["top", "bottom"], { tags: ["Private"] });
-Tabbed.prototype.publish("widgets", [], "widgetArray", "widgets", null, { tags: ["Private"] });
+import { HTMLWidget, Text } from "@hpcc-js/common";
+import { select as d3Select } from "d3-selection";
+import { Surface } from "./Surface";
+
+import "../src/Tabbed.css";
+
+export class Tabbed extends HTMLWidget {
+    _tabContainer;
+    _contentContainer;
+
+    constructor() {
+        super();
+
+        this._tag = "div";
+    }
+
+    clearTabs() {
+        this.labels([]);
+        this.widgets([]);
+        return this;
+    }
+
+    addTab(widget, label, isActive?, callback?) {
+        const widgetSize = widget.size();
+        if (widgetSize.width === 0 && widgetSize.height === 0) {
+            widget.size({ width: "100%", height: "100%" });
+        }
+        const labels = this.labels();
+        const widgets = this.widgets();
+        if (isActive) {
+            this.activeTabIdx(this.widgets().length);
+        }
+        labels.push(label);
+        const surface = new Surface().widget(widget ? widget : new Text().text("No widget defined for tab"));
+        widgets.push(surface);
+        this.labels(labels);
+        this.widgets(widgets);
+        if (callback) {
+            callback(surface);
+        }
+        return this;
+    }
+
+    widgetSize(widgetDiv) {
+        const width = this.clientWidth();
+        let height = this.clientHeight();
+
+        const tcBox = this._tabContainer.node().getBoundingClientRect();
+        if (typeof (tcBox.height) !== "undefined") {
+            height -= tcBox.height;
+        }
+        return { width, height };
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this._tabContainer = element.append("div");
+        this._contentContainer = element.append("div");
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        const context = this;
+
+        element.style("padding", this.surfacePadding_exists() ? this.surfacePadding() + "px" : null);
+
+        const tabs = this._tabContainer.selectAll(".tab-button.id" + this.id()).data(this.showTabs() ? this.labels() : [], function (d) { return d; });
+        tabs.enter().append("span")
+            .attr("class", "tab-button id" + this.id())
+            .style("cursor", "pointer")
+            .on("click", function (d, idx) {
+                context.click(context.widgets()[idx].widget(), d, idx);
+                context
+                    .activeTabIdx(idx)
+                    .render()
+                    ;
+            }).merge(tabs)
+            .classed("active", function (d, idx) { return context.activeTabIdx() === idx; })
+            .text(function (d) { return d; })
+            ;
+        tabs.exit().remove();
+
+        const content = this._contentContainer.selectAll(".tab-content.id" + this.id()).data(this.widgets(), function (d) { return d.id(); });
+        content.enter().append("div")
+            .attr("class", "tab-content id" + this.id())
+            .each(function (widget, idx) {
+                widget.target(this);
+            }).merge(content)
+            .classed("active", function (d, idx) { return context.activeTabIdx() === idx; })
+            .style("display", function (d, idx) { return context.activeTabIdx() === idx ? "block" : "none"; })
+            .each(function (surface, idx) {
+                surface.visible(context.activeTabIdx() === idx);
+                if (context.activeTabIdx() === idx) {
+                    const wSize = context.widgetSize(d3Select(this));
+                    surface
+                        .surfaceBorderWidth(context.showTabs() ? null : 0)
+                        .surfacePadding(context.showTabs() ? null : 0)
+                        .resize(wSize)
+                        ;
+                }
+            })
+            ;
+        content.exit()
+            .each(function (widget, idx) {
+                widget
+                    .target(null)
+                    ;
+            })
+            .remove();
+
+        switch (this.tabLocation()) {
+            case "bottom":
+                this._tabContainer
+                    .attr("class", "on_bottom")
+                    .style("top", (this._contentContainer.node().offsetHeight + this.surfacePadding()) + "px")
+                    .style("position", "absolute")
+                    ;
+                this._contentContainer
+                    .style("top", this.surfacePadding_exists() ? this.surfacePadding() + "px" : null)
+                    .style("position", "absolute")
+                    ;
+                break;
+            default:
+                this._tabContainer
+                    .attr("class", "on_top")
+                    .style("top", null)
+                    .style("position", "relative")
+                    ;
+                this._contentContainer
+                    .style("top", (this._tabContainer.node().offsetHeight + this.surfacePadding()) + "px")
+                    .style("position", "absolute")
+                    ;
+                break;
+        }
+    }
+
+    click(widget, column, idx) {
+    }
+
+    showTabs: { (): boolean; (_: boolean): Tabbed; };
+    surfacePadding: { (): number; (_: number): Tabbed; };
+    surfacePadding_default: { (): number; (_: number): Tabbed; };
+    surfacePadding_exists: () => boolean;
+    activeTabIdx: { (): number; (_: number): Tabbed; };
+
+    labels: { (): string[]; (_: string[]): Tabbed; };
+    tabLocation: { (): string; (_: string): Tabbed; };
+    widgets: { (): any[]; (_: any[]): Tabbed; };
+}
+Tabbed.prototype._class += " layout_Tabbed";
+
+Tabbed.prototype.publish("showTabs", true, "boolean", "Show Tabs", null, {});
+Tabbed.prototype.publish("surfacePadding", 4, "number", "Padding");
+Tabbed.prototype.publish("activeTabIdx", 0, "number", "Index of active tab", null, {});
+
+Tabbed.prototype.publish("labels", [], "array", "Array of tab labels sharing an index with ", null, { tags: ["Private"] });
+Tabbed.prototype.publish("tabLocation", "top", "set", "Position the tabs at the bottom of the widget", ["top", "bottom"], { tags: ["Private"] });
+Tabbed.prototype.publish("widgets", [], "widgetArray", "widgets", null, { tags: ["Private"] });

package/src/Toolbar.css

@@ -1,32 +1,32 @@
-.layout_Toolbar {
-    height:100%;
-    background-color:#dddddd;
-    white-space: nowrap;
-    overflow: hidden;
-}
-.layout_Toolbar .toolbar-title {
-    display: inline-block;
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-
-    margin-left:4px;
-    font-weight:bold;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-}
-.layout_Toolbar .toolbar-title span {
-}
-.layout_Toolbar .toolbar-child {
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-
-    float:right;
-    margin-left:4px;
-    margin-right:4px;
-    line-height:16px;
-}
+.layout_Toolbar {
+    height:100%;
+    background-color:#dddddd;
+    white-space: nowrap;
+    overflow: hidden;
+}
+.layout_Toolbar .toolbar-title {
+    display: inline-block;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+
+    margin-left:4px;
+    font-weight:bold;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+.layout_Toolbar .toolbar-title span {
+}
+.layout_Toolbar .toolbar-child {
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+
+    float:right;
+    margin-left:4px;
+    margin-right:4px;
+    line-height:16px;
+}

package/src/Toolbar.ts

@@ -1,102 +1,102 @@
-import { HTMLWidget } from "@hpcc-js/common";
-import { select as d3Select } from "d3-selection";
-
-import "../src/Toolbar.css";
-
-function Toolbar() {
-    HTMLWidget.call(this);
-
-    this._tag = "div";
-}
-Toolbar.prototype = Object.create(HTMLWidget.prototype);
-Toolbar.prototype.constructor = Toolbar;
-Toolbar.prototype._class += " layout_Toolbar";
-
-Toolbar.prototype.publish("title", "", "string", "Title", null, { tags: ["Intermediate"] });
-
-Toolbar.prototype.publish("fontSize", null, "number", "Title Font Size (px)", null, { tags: ["Advanced"], optional: true });
-Toolbar.prototype.publish("fontColor", null, "html-color", "Title Font Color", null, { tags: ["Advanced"], optional: true });
-Toolbar.prototype.publish("fontFamily", null, "string", "Title Font Family", null, { tags: ["Advanced"], optional: true });
-Toolbar.prototype.publish("fontBold", true, "boolean", "Enable Bold Title Font", null, { tags: ["Advanced"], optional: true });
-Toolbar.prototype.publish("backgroundColor", null, "html-color", "Background Color", null, { tags: ["Intermediate"], optional: true });
-
-Toolbar.prototype.publish("responsive", true, "boolean", "Adapts to pixel width", null, { tags: ["Basic"] });
-
-Toolbar.prototype.publish("widgets", [], "widgetArray", "Child widgets of the toolbar", null, { tags: ["Basic"] });
-Toolbar.prototype.publish("widgetClasses", [], "array", "Array of Html Element classes to be assigned to the child widgets (shares index with widgets param)", null, { tags: ["Basic"] });
-
-Toolbar.prototype.enter = function (domNode, element) {
-    HTMLWidget.prototype.enter.apply(this, arguments);
-};
-
-Toolbar.prototype.update = function (domNode, element) {
-    HTMLWidget.prototype.update.apply(this, arguments);
-    const context = this;
-
-    element
-        .attr("title", context.title())
-        .style("background-color", this.backgroundColor())
-        ;
-
-    const title = element.selectAll("div.toolbar-title")
-        .data(this.title() ? [this.title()] : []);
-    title.enter().append("div")
-        .classed("toolbar-title", true)
-        .append("span")
-        ;
-    title.selectAll("div.toolbar-title > span")
-        .style("font-size", this.fontSize_exists() ? this.fontSize() + "px" : null)
-        .style("color", this.fontColor_exists() ? this.fontColor() : null)
-        .style("font-family", this.fontFamily_exists() ? this.fontFamily() : null)
-        .style("font-weight", this.fontBold_exists() ? (this.fontBold() ? "bold" : "normal") : null)
-        .style("background-color", this.backgroundColor_exists() ? this.backgroundColor() : null)
-        .text(context.title())
-        ;
-    title.exit().remove();
-
-    const childWidgets = element.selectAll("div.toolbar-child")
-        .data(this.widgets() !== null ? this.widgets() : [], function (d) { return d.id(); });
-
-    childWidgets.enter().insert("div", "div.toolbar-title")
-        .each(function (d, i) {
-            const widgetClass = context.widgetClasses()[i] ? context.widgetClasses()[i] + " toolbar-child" : "toolbar-child";
-            d3Select(this).classed(widgetClass, true);
-            d.target(this);
-        });
-    childWidgets.exit().each(function (d) {
-        d.target(null);
-    }).remove();
-    childWidgets.order();
-};
-
-Toolbar.prototype.render = function (callback) {
-    const context = this;
-    HTMLWidget.prototype.render.call(this, function (w) {
-        const toolbarBBox = context.element().node().getBoundingClientRect();
-        let minX = toolbarBBox.left + toolbarBBox.width;
-        context.element().selectAll("div.toolbar-child")
-            .each(function (d, i) {
-                const childBBox = this.getBoundingClientRect();
-                if (minX > childBBox.left)
-                    minX = childBBox.left;
-            })
-            ;
-        context.element().select(".toolbar-title")
-            .style("width", (minX - toolbarBBox.left - 4) + "px")
-            ;
-        if (callback) {
-            callback(w);
-        }
-    });
-};
-
-Toolbar.prototype.exit = function (domNode, element) {
-    HTMLWidget.prototype.exit.apply(this, arguments);
-    this.widgets().forEach(function (w) {
-        w.target(null);
-    });
-};
-
-export {
-    Toolbar
-};
+import { HTMLWidget } from "@hpcc-js/common";
+import { select as d3Select } from "d3-selection";
+
+import "../src/Toolbar.css";
+
+function Toolbar() {
+    HTMLWidget.call(this);
+
+    this._tag = "div";
+}
+Toolbar.prototype = Object.create(HTMLWidget.prototype);
+Toolbar.prototype.constructor = Toolbar;
+Toolbar.prototype._class += " layout_Toolbar";
+
+Toolbar.prototype.publish("title", "", "string", "Title", null, { tags: ["Intermediate"] });
+
+Toolbar.prototype.publish("fontSize", null, "number", "Title Font Size (px)", null, { tags: ["Advanced"], optional: true });
+Toolbar.prototype.publish("fontColor", null, "html-color", "Title Font Color", null, { tags: ["Advanced"], optional: true });
+Toolbar.prototype.publish("fontFamily", null, "string", "Title Font Family", null, { tags: ["Advanced"], optional: true });
+Toolbar.prototype.publish("fontBold", true, "boolean", "Enable Bold Title Font", null, { tags: ["Advanced"], optional: true });
+Toolbar.prototype.publish("backgroundColor", null, "html-color", "Background Color", null, { tags: ["Intermediate"], optional: true });
+
+Toolbar.prototype.publish("responsive", true, "boolean", "Adapts to pixel width", null, { tags: ["Basic"] });
+
+Toolbar.prototype.publish("widgets", [], "widgetArray", "Child widgets of the toolbar", null, { tags: ["Basic"] });
+Toolbar.prototype.publish("widgetClasses", [], "array", "Array of Html Element classes to be assigned to the child widgets (shares index with widgets param)", null, { tags: ["Basic"] });
+
+Toolbar.prototype.enter = function (domNode, element) {
+    HTMLWidget.prototype.enter.apply(this, arguments);
+};
+
+Toolbar.prototype.update = function (domNode, element) {
+    HTMLWidget.prototype.update.apply(this, arguments);
+    const context = this;
+
+    element
+        .attr("title", context.title())
+        .style("background-color", this.backgroundColor())
+        ;
+
+    const title = element.selectAll("div.toolbar-title")
+        .data(this.title() ? [this.title()] : []);
+    title.enter().append("div")
+        .classed("toolbar-title", true)
+        .append("span")
+        ;
+    title.selectAll("div.toolbar-title > span")
+        .style("font-size", this.fontSize_exists() ? this.fontSize() + "px" : null)
+        .style("color", this.fontColor_exists() ? this.fontColor() : null)
+        .style("font-family", this.fontFamily_exists() ? this.fontFamily() : null)
+        .style("font-weight", this.fontBold_exists() ? (this.fontBold() ? "bold" : "normal") : null)
+        .style("background-color", this.backgroundColor_exists() ? this.backgroundColor() : null)
+        .text(context.title())
+        ;
+    title.exit().remove();
+
+    const childWidgets = element.selectAll("div.toolbar-child")
+        .data(this.widgets() !== null ? this.widgets() : [], function (d) { return d.id(); });
+
+    childWidgets.enter().insert("div", "div.toolbar-title")
+        .each(function (d, i) {
+            const widgetClass = context.widgetClasses()[i] ? context.widgetClasses()[i] + " toolbar-child" : "toolbar-child";
+            d3Select(this).classed(widgetClass, true);
+            d.target(this);
+        });
+    childWidgets.exit().each(function (d) {
+        d.target(null);
+    }).remove();
+    childWidgets.order();
+};
+
+Toolbar.prototype.render = function (callback) {
+    const context = this;
+    HTMLWidget.prototype.render.call(this, function (w) {
+        const toolbarBBox = context.element().node().getBoundingClientRect();
+        let minX = toolbarBBox.left + toolbarBBox.width;
+        context.element().selectAll("div.toolbar-child")
+            .each(function (d, i) {
+                const childBBox = this.getBoundingClientRect();
+                if (minX > childBBox.left)
+                    minX = childBBox.left;
+            })
+            ;
+        context.element().select(".toolbar-title")
+            .style("width", (minX - toolbarBBox.left - 4) + "px")
+            ;
+        if (callback) {
+            callback(w);
+        }
+    });
+};
+
+Toolbar.prototype.exit = function (domNode, element) {
+    HTMLWidget.prototype.exit.apply(this, arguments);
+    this.widgets().forEach(function (w) {
+        w.target(null);
+    });
+};
+
+export {
+    Toolbar
+};

package/src/VerticalList.ts

@@ -1,15 +1,15 @@
-import { FlexGrid } from "./FlexGrid";
-
-export class VerticalList extends FlexGrid {
-    constructor() {
-        super();
-        this.orientation_default("vertical");
-        this.flexWrap_default("nowrap");
-    }
-}
-VerticalList.prototype._class += " layout_VerticalList";
-
-export interface VerticalList {
-    orientation_default(_: "horizontal" | "vertical");
-    flexWrap_default(_: "nowrap" | "wrap" | "wrap-reverse");
-}
+import { FlexGrid } from "./FlexGrid";
+
+export class VerticalList extends FlexGrid {
+    constructor() {
+        super();
+        this.orientation_default("vertical");
+        this.flexWrap_default("nowrap");
+    }
+}
+VerticalList.prototype._class += " layout_VerticalList";
+
+export interface VerticalList {
+    orientation_default(_: "horizontal" | "vertical");
+    flexWrap_default(_: "nowrap" | "wrap" | "wrap-reverse");
+}

package/src/__package__.ts

@@ -1,3 +1,3 @@
-export const PKG_NAME = "@hpcc-js/layout";
-export const PKG_VERSION = "2.51.2";
-export const BUILD_VERSION = "2.108.6";
+export const PKG_NAME = "@hpcc-js/layout";
+export const PKG_VERSION = "2.51.5";
+export const BUILD_VERSION = "2.108.9";