@hpcc-js/layout 2.50.2 → 3.1.0

package/src/Toolbar.ts

@@ -1,17 +1,118 @@
-import { HTMLWidget } from "@hpcc-js/common";
+import { HTMLWidget, Widget } from "@hpcc-js/common";
 import { select as d3Select } from "d3-selection";
 
 import "../src/Toolbar.css";
 
-function Toolbar() {
-    HTMLWidget.call(this);
+export class Toolbar extends HTMLWidget {
 
-    this._tag = "div";
+    constructor() {
+        super();
+        this._tag = "div";
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        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();
+    }
+
+    render(callback?: (w: Widget) => void): this {
+        const context = this;
+        return super.render(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);
+            }
+        });
+    }
+
+    exit(domNode, element) {
+        this.widgets().forEach(function (w) {
+            w.target(null);
+        });
+        super.exit(domNode, element);
+    }
 }
-Toolbar.prototype = Object.create(HTMLWidget.prototype);
-Toolbar.prototype.constructor = Toolbar;
 Toolbar.prototype._class += " layout_Toolbar";
 
+export interface Toolbar {
+    title(): string;
+    title(_: string): this;
+
+    fontSize(): number;
+    fontSize(_: number): this;
+    fontSize_exists(): boolean;
+    fontColor(): string;
+    fontColor(_: string): this;
+    fontColor_exists(): boolean;
+    fontFamily(): string;
+    fontFamily(_: string): this;
+    fontFamily_exists(): boolean;
+    fontBold(): boolean;
+    fontBold(_: boolean): this;
+    fontBold_exists(): boolean;
+    backgroundColor(): string;
+    backgroundColor(_: string): this;
+    backgroundColor_exists(): boolean;
+
+    responsive(): boolean;
+    responsive(_: boolean): this;
+
+    widgets(): any[];
+    widgets(_: any[]): this;
+    widgetClasses(): string[];
+    widgetClasses(_: string[]): this;
+}
+
 Toolbar.prototype.publish("title", "", "string", "Title", null, { tags: ["Intermediate"] });
 
 Toolbar.prototype.publish("fontSize", null, "number", "Title Font Size (px)", null, { tags: ["Advanced"], optional: true });
@@ -24,79 +125,3 @@ Toolbar.prototype.publish("responsive", true, "boolean", "Adapts to pixel width"
 
 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,4 +1,4 @@
-import { FlexGrid } from "./FlexGrid";
+import { FlexGrid } from "./FlexGrid.ts";
 
 export class VerticalList extends FlexGrid {
     constructor() {

package/src/__package__.ts

@@ -1,3 +1,3 @@
 export const PKG_NAME = "@hpcc-js/layout";
-export const PKG_VERSION = "2.50.2";
-export const BUILD_VERSION = "2.106.4";
+export const PKG_VERSION = "3.1.0";
+export const BUILD_VERSION = "3.2.0";

package/src/index.ts

@@ -1,19 +1,19 @@
-export * from "./__package__";
-export * from "./AbsoluteSurface";
-export * from "./Accordion";
-export * from "./Border";
-export * from "./Border2";
-export * from "./Carousel";
-export * from "./Cell";
-export * from "./ChartPanel";
-export * from "./FlexGrid";
-export * from "./Grid";
-export * from "./HorizontalList";
-export * from "./Layered";
-export * from "./Legend";
-export * from "./Modal";
-export * from "./Popup";
-export * from "./Surface";
-export * from "./Tabbed";
-export * from "./Toolbar";
-export * from "./VerticalList";
+export * from "./__package__.ts";
+export * from "./AbsoluteSurface.ts";
+export * from "./Accordion.ts";
+export * from "./Border.ts";
+export * from "./Border2.ts";
+export * from "./Carousel.ts";
+export * from "./Cell.ts";
+export * from "./ChartPanel.ts";
+export * from "./FlexGrid.ts";
+export * from "./Grid.ts";
+export * from "./HorizontalList.ts";
+export * from "./Layered.ts";
+export * from "./Legend.ts";
+export * from "./Modal.ts";
+export * from "./Popup.ts";
+export * from "./Surface.ts";
+export * from "./Tabbed.ts";
+export * from "./Toolbar.ts";
+export * from "./VerticalList.ts";

package/types/AbsoluteSurface.d.ts

@@ -5,33 +5,20 @@ export declare class AbsoluteSurface extends HTMLWidget {
     enter(domNode: any, element: any): void;
     update(domNode: any, element: any): void;
     exit(domNode: any, element: any): void;
-    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;
-    };
 }
-//# sourceMappingURL=AbsoluteSurface.d.ts.map
+export interface AbsoluteSurface {
+    units(): string;
+    units(_: string): this;
+    widgetX(): number;
+    widgetX(_: number): this;
+    widgetY(): number;
+    widgetY(_: number): this;
+    widgetWidth(): string;
+    widgetWidth(_: string): this;
+    widgetHeight(): string;
+    widgetHeight(_: string): this;
+    widget(): any;
+    widget(_: any): this;
+    opacity(): number;
+    opacity(_: number): this;
+}

package/types/Accordion.d.ts

@@ -13,33 +13,20 @@ export declare class Accordion extends HTMLWidget {
     enter(domNode: any, element: any): void;
     update(domNode: any, element: any): void;
     exit(domNode: any, element: any): void;
-    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;
-    };
 }
-//# sourceMappingURL=Accordion.d.ts.map
+export interface Accordion {
+    content(): any[];
+    content(_: any[]): this;
+    title(): string;
+    title(_: string): this;
+    openIcon(): string;
+    openIcon(_: string): this;
+    closedIcon(): string;
+    closedIcon(_: string): this;
+    titleFontColor(): string;
+    titleFontColor(_: string): this;
+    titleBackgroundColor(): string;
+    titleBackgroundColor(_: string): this;
+    defaultCollapsed(): boolean;
+    defaultCollapsed(_: boolean): this;
+}

package/types/Border.d.ts

@@ -42,73 +42,40 @@ export declare class Border extends HTMLWidget {
     getCellSizes(): void;
     postUpdate(domNode: any, element: any): void;
     exit(domNode: any, element: any): void;
-    designMode: {
-        (): boolean;
-        (_: boolean): Border;
-    };
-    content: {
-        (): any[];
-        (_: any[]): Border;
-    };
-    gutter: {
-        (): number;
-        (_: number): Border;
-    };
-    topShrinkWrap: {
-        (): boolean;
-        (_: boolean): Border;
-    };
-    leftShrinkWrap: {
-        (): boolean;
-        (_: boolean): Border;
-    };
-    rightShrinkWrap: {
-        (): boolean;
-        (_: boolean): Border;
-    };
-    bottomShrinkWrap: {
-        (): boolean;
-        (_: boolean): Border;
-    };
-    topSize: {
-        (): number;
-        (_: number): Border;
-    };
-    leftSize: {
-        (): number;
-        (_: number): Border;
-    };
-    rightSize: {
-        (): number;
-        (_: number): Border;
-    };
-    bottomSize: {
-        (): number;
-        (_: number): Border;
-    };
-    topPercentage: {
-        (): number;
-        (_: number): Border;
-    };
-    leftPercentage: {
-        (): number;
-        (_: number): Border;
-    };
-    rightPercentage: {
-        (): number;
-        (_: number): Border;
-    };
-    bottomPercentage: {
-        (): number;
-        (_: number): Border;
-    };
-    surfacePadding: {
-        (): number;
-        (_: number): Border;
-    };
-    sectionTypes: {
-        (): any[];
-        (_: any[]): Border;
-    };
 }
-//# sourceMappingURL=Border.d.ts.map
+export interface Border {
+    designMode(): boolean;
+    designMode(_: boolean): this;
+    content(): any[];
+    content(_: any[]): this;
+    gutter(): number;
+    gutter(_: number): this;
+    topShrinkWrap(): boolean;
+    topShrinkWrap(_: boolean): this;
+    leftShrinkWrap(): boolean;
+    leftShrinkWrap(_: boolean): this;
+    rightShrinkWrap(): boolean;
+    rightShrinkWrap(_: boolean): this;
+    bottomShrinkWrap(): boolean;
+    bottomShrinkWrap(_: boolean): this;
+    topSize(): number;
+    topSize(_: number): this;
+    leftSize(): number;
+    leftSize(_: number): this;
+    rightSize(): number;
+    rightSize(_: number): this;
+    bottomSize(): number;
+    bottomSize(_: number): this;
+    topPercentage(): number;
+    topPercentage(_: number): this;
+    leftPercentage(): number;
+    leftPercentage(_: number): this;
+    rightPercentage(): number;
+    rightPercentage(_: number): this;
+    bottomPercentage(): number;
+    bottomPercentage(_: number): this;
+    surfacePadding(): number;
+    surfacePadding(_: number): this;
+    sectionTypes(): any[];
+    sectionTypes(_: any[]): this;
+}

package/types/Border2.d.ts

@@ -99,4 +99,3 @@ export interface Border2 {
     leftOverflowY_default(_: OverflowT): any;
     centerOverflowY_default(_: OverflowT): any;
 }
-//# sourceMappingURL=Border2.d.ts.map

package/types/Carousel.d.ts

@@ -18,4 +18,3 @@ export interface Carousel {
     transitionDuration(): Widget[];
     transitionDuration(_: Widget[]): this;
 }
-//# sourceMappingURL=Carousel.d.ts.map

package/types/Cell.d.ts

@@ -1,5 +1,4 @@
-import { Widget } from "@hpcc-js/common";
-import { Surface } from "./Surface";
+import { Surface } from "./Surface.ts";
 import "../src/Cell.css";
 export declare class Cell extends Surface {
     _indicateTheseIds: any;
@@ -10,41 +9,20 @@ export declare class Cell extends Surface {
     update(domNode: any, element: any): void;
     onMouseEnter(): void;
     onMouseLeave(): void;
-    title: {
-        (): string;
-        (_: string): Cell;
-    };
-    widget: {
-        (): Widget;
-        (_: Widget): Cell;
-    };
-    gridRow: {
-        (): number;
-        (_: number): Cell;
-    };
-    gridCol: {
-        (): number;
-        (_: number): Cell;
-    };
-    gridRowSpan: {
-        (): number;
-        (_: number): Cell;
-    };
-    gridColSpan: {
-        (): number;
-        (_: number): Cell;
-    };
-    indicatorGlowColor: {
-        (): string;
-        (_: string): Cell;
-    };
-    indicatorBorderColor: {
-        (): string;
-        (_: string): Cell;
-    };
-    indicatorOpacity: {
-        (): number;
-        (_: number): Cell;
-    };
 }
-//# sourceMappingURL=Cell.d.ts.map
+export interface Cell {
+    gridRow(): number;
+    gridRow(_: number): this;
+    gridCol(): number;
+    gridCol(_: number): this;
+    gridRowSpan(): number;
+    gridRowSpan(_: number): this;
+    gridColSpan(): number;
+    gridColSpan(_: number): this;
+    indicatorGlowColor(): string;
+    indicatorGlowColor(_: string): this;
+    indicatorBorderColor(): string;
+    indicatorBorderColor(_: string): this;
+    indicatorOpacity(): number;
+    indicatorOpacity(_: number): this;
+}

package/types/ChartPanel.d.ts

@@ -1,11 +1,11 @@
 import { IHighlight } from "@hpcc-js/api";
 import { Database, ProgressBar, Spacer, TitleBar, Widget } from "@hpcc-js/common";
 import { Table } from "@hpcc-js/dgrid2";
-import { Border2 } from "./Border2";
-import { Carousel } from "./Carousel";
-import { Legend } from "./Legend";
+import { Border2 } from "./Border2.ts";
+import { Carousel } from "./Carousel.ts";
+import { Legend } from "./Legend.ts";
 import "../src/ChartPanel.css";
-export declare class ChartPanel extends Border2 implements IHighlight {
+export declare class ChartPanel<T extends Widget = Widget> extends Border2 implements IHighlight {
     protected _legend: Legend;
     protected _progressBar: ProgressBar;
     protected _autoScale: boolean;
@@ -32,7 +32,7 @@ export declare class ChartPanel extends Border2 implements IHighlight {
     _titleBar: TitleBar;
     protected _carousel: Carousel;
     protected _table: Table;
-    protected _widget: Widget;
+    protected _widget: T;
     protected _hideLegendToggleList: string[];
     constructor();
     fields(): Database.Field[];
@@ -78,7 +78,7 @@ export declare class ChartPanel extends Border2 implements IHighlight {
     edge_click(row: any, col: any, sel: any, more: any): void;
     edge_dblclick(row: any, col: any, sel: any, more: any): void;
 }
-export interface ChartPanel {
+export interface ChartPanel<T extends Widget = Widget> {
     title(): string;
     title(_: string): this;
     titleVisible(): boolean;
@@ -113,8 +113,8 @@ export interface ChartPanel {
     description(): string;
     description(_: string): this;
     description_exists(): boolean;
-    widget(): Widget;
-    widget(_: Widget): this;
+    widget(): T;
+    widget(_: T): this;
     widget_exists(): boolean;
     enableAutoscaling(): boolean;
     enableAutoscaling(_: boolean): this;
@@ -126,4 +126,3 @@ export interface ChartPanel {
     highlightColor(_: string): this;
     highlightColor_exists(): boolean;
 }
-//# sourceMappingURL=ChartPanel.d.ts.map

package/types/FlexGrid.d.ts

@@ -41,4 +41,3 @@ export interface FlexGrid {
     forceYScroll(): boolean;
     forceYScroll(_: boolean): this;
 }
-//# sourceMappingURL=FlexGrid.d.ts.map

package/types/Grid.d.ts

@@ -1,5 +1,5 @@
 import { HTMLWidget } from "@hpcc-js/common";
-import { Cell } from "./Cell";
+import { Cell } from "./Cell.ts";
 import "../src/Grid.css";
 export type ICellPosition = [number, number, number, number];
 export declare class Grid extends HTMLWidget {
@@ -85,4 +85,3 @@ export interface Grid {
     content(): Cell[];
     content(_: Cell[]): this;
 }
-//# sourceMappingURL=Grid.d.ts.map

package/types/HorizontalList.d.ts

@@ -1,4 +1,4 @@
-import { FlexGrid } from "./FlexGrid";
+import { FlexGrid } from "./FlexGrid.ts";
 export declare class HorizontalList extends FlexGrid {
     constructor();
 }
@@ -6,4 +6,3 @@ export interface HorizontalList {
     orientation_default(_: "horizontal" | "vertical"): any;
     flexWrap_default(_: "nowrap" | "wrap" | "wrap-reverse"): any;
 }
-//# sourceMappingURL=HorizontalList.d.ts.map

package/types/Layered.d.ts

@@ -17,13 +17,10 @@ export declare class Layered extends HTMLWidget {
         x: number;
         y: number;
     };
-    surfacePadding: {
-        (): number;
-        (_: string): Layered;
-    };
-    widgets: {
-        (): any[];
-        (_: any[]): Layered;
-    };
 }
-//# sourceMappingURL=Layered.d.ts.map
+export interface Layered {
+    surfacePadding(): number;
+    surfacePadding(_: number): this;
+    widgets(): any;
+    widgets(_: any): this;
+}

package/types/Legend.d.ts

@@ -1,5 +1,5 @@
 import { Database, Palette, SVGWidget, Widget } from "@hpcc-js/common";
-import { ChartPanel } from "./ChartPanel";
+import { ChartPanel } from "./ChartPanel.ts";
 export declare class Legend extends SVGWidget {
     _owner: ChartPanel;
     _targetWidget: Widget;
@@ -75,4 +75,3 @@ export interface Legend {
     labelAlign(): "start" | "middle" | "end";
     labelAlign(_: "start" | "middle" | "end"): this;
 }
-//# sourceMappingURL=Legend.d.ts.map

package/types/Modal.d.ts

@@ -62,4 +62,3 @@ export interface Modal {
     overflowY(): "hidden" | "scroll";
     overflowY(_: "hidden" | "scroll"): this;
 }
-//# sourceMappingURL=Modal.d.ts.map