@hpcc-js/layout 2.50.2 → 3.1.0

package/package.json

@@ -1,58 +1,55 @@
 {
     "name": "@hpcc-js/layout",
-    "version": "2.50.2",
+    "version": "3.1.0",
     "description": "hpcc-js - Viz Layout",
-    "main": "dist/index.js",
-    "module": "dist/index.es6",
-    "unpkg": "dist/index.min.js",
-    "jsdelivr": "dist/index.min.js",
-    "types": "types/index.d.ts",
-    "typesVersions": {
-        "<3.8": {
-            "*": [
-                "types-3.4/index.d.ts"
-            ]
-        }
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./types/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./dist/*": "./dist/*"
     },
+    "module": "./dist/index.js",
+    "browser": "./dist/index.js",
+    "types": "./types/index.d.ts",
     "files": [
         "dist/*",
-        "types/*",
-        "types-3.4/*",
-        "src/*"
+        "src/*",
+        "types/*"
     ],
     "scripts": {
-        "clean": "rimraf --glob lib* types dist *.tsbuildinfo",
-        "compile-es6": "tsc --module es6 --outDir ./lib-es6",
-        "compile-es6-watch": "npm run compile-es6 -- -w",
-        "compile-umd": "tsc --module umd --outDir ./lib-umd",
-        "compile-umd-watch": "npm run compile-umd -- -w",
-        "bundle": "rollup -c",
-        "bundle-watch": "npm run bundle -- -w",
-        "minimize": "terser dist/index.js -c -m --source-map \"content='dist/index.js.map',url='index.min.js.map'\" -o dist/index.min.js",
-        "gen-legacy-types": "downlevel-dts ./types ./types-3.4",
-        "build": "npm run compile-es6 && npm run bundle",
-        "watch": "npm-run-all compile-es6 -p compile-es6-watch bundle-watch",
-        "stamp": "node ../../node_modules/@hpcc-js/bundle/src/stamp.js",
+        "clean": "rimraf --glob lib* types dist *.tsbuildinfo .turbo",
+        "bundle": "node esbuild.js",
+        "bundle-watch": "npm run bundle -- --development --watch",
+        "gen-types": "tsc --project tsconfig.json",
+        "gen-types-watch": "npm run gen-types -- --watch",
+        "build": "run-p gen-types bundle",
         "lint": "eslint ./src",
+        "lint-fix": "eslint --fix src/**/*.ts",
         "docs": "typedoc --options tdoptions.json .",
-        "update": "npx --yes npm-check-updates -u -t minor"
+        "test-browser": "vitest run --project browser",
+        "test": "vitest run",
+        "coverage": "vitest run --coverage",
+        "update": "npx --yes npm-check-updates -u -t minor",
+        "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/api": "^2.13.0",
-        "@hpcc-js/chart": "^2.85.0",
-        "@hpcc-js/common": "^2.72.0",
-        "@hpcc-js/dgrid2": "^2.4.0"
+        "@hpcc-js/api": "^3.2.0",
+        "@hpcc-js/chart": "^3.2.0",
+        "@hpcc-js/common": "^3.2.0",
+        "@hpcc-js/dgrid2": "^3.1.0",
+        "@hpcc-js/util": "^3.2.0"
     },
     "devDependencies": {
-        "@hpcc-js/bundle": "^2.12.0",
-        "@types/d3-transition": "1.3.5",
+        "@hpcc-js/esbuild-plugins": "^1.3.0",
+        "@types/d3-transition": "1.3.6",
         "d3-drag": "^1",
         "d3-selection": "^1",
         "d3-shape": "^1",
         "d3-svg-legend": "2.25.6",
         "d3-transition": "^1",
-        "grid-list": "0.4.1",
-        "tslib": "2.6.3"
+        "grid-list": "0.4.1"
     },
     "repository": {
         "type": "git",
@@ -65,5 +62,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "9e1dd990858b6fb5dd0e46425def23c9609c147a"
+    "gitHead": "658c50fd965a7744ba8db675ba6878607c44d5e2"
 }

package/src/AbsoluteSurface.ts

@@ -64,17 +64,26 @@ export class AbsoluteSurface extends HTMLWidget {
         }
         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";
 
+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;
+}
+
 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");

package/src/Accordion.ts

@@ -115,17 +115,27 @@ export class Accordion extends HTMLWidget {
     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";
 
+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;
+}
+
 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"] });

package/src/Border.ts

@@ -1,6 +1,6 @@
 import { d3Event, HTMLWidget, Platform, select as d3Select, selectAll as d3SelectAll, Utility } from "@hpcc-js/common";
 import { drag as d3Drag } from "d3-drag";
-import { Cell } from "./Cell";
+import { Cell } from "./Cell.ts";
 
 import "../src/Border.css";
 
@@ -563,34 +563,53 @@ export class Border extends HTMLWidget {
         this.content().forEach(w => w.target(null));
         super.exit(domNode, element);
     }
-
-    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; };
 }
 Border.prototype._class += " layout_Border";
 
+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;
+}
+
 Border.prototype.publish("designMode", false, "boolean", "Design Mode", null, { tags: ["Basic"] });
 
 Border.prototype.publish("content", [], "widgetArray", "widgets", null, { tags: ["Intermediate"] });

package/src/Cell.ts

@@ -1,6 +1,6 @@
 import { Widget } from "@hpcc-js/common";
 import { select as d3Select, selectAll as d3SelectAll } from "d3-selection";
-import { Surface } from "./Surface";
+import { Surface } from "./Surface.ts";
 
 import "../src/Cell.css";
 
@@ -63,21 +63,26 @@ export class Cell extends Surface {
             d3SelectAll("#" + arr[i] + " > div.update-indicator").remove();
         }
     }
+}
+Cell.prototype._class += " layout_Cell";
 
-    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; };
+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;
 }
-Cell.prototype._class += " layout_Cell";
 
 Cell.prototype.publish("gridRow", 0, "number", "Grid Row Position", null, { tags: ["Private"] });
 Cell.prototype.publish("gridCol", 0, "number", "Grid Column Position", null, { tags: ["Private"] });

package/src/ChartPanel.ts

@@ -3,14 +3,14 @@ import { Button, Database, IconBar, ProgressBar, Spacer, SVGWidget, Text, TitleB
 import type { XYAxis } from "@hpcc-js/chart";
 import { Table } from "@hpcc-js/dgrid2";
 import { select as d3Select } from "d3-selection";
-import { Border2 } from "./Border2";
-import { Carousel } from "./Carousel";
-import { Legend } from "./Legend";
-import { Modal } from "./Modal";
+import { Border2 } from "./Border2.ts";
+import { Carousel } from "./Carousel.ts";
+import { Legend } from "./Legend.ts";
+import { Modal } from "./Modal.ts";
 
 import "../src/ChartPanel.css";
 
-export class ChartPanel extends Border2 implements IHighlight {
+export class ChartPanel<T extends Widget = Widget> extends Border2 implements IHighlight {
 
     protected _legend = new Legend(this).enableOverflow(true);
     protected _progressBar = new ProgressBar();
@@ -98,7 +98,7 @@ export class ChartPanel extends Border2 implements IHighlight {
 
     protected _carousel = new Carousel();
     protected _table = new Table();
-    protected _widget: Widget;
+    protected _widget: T;
 
     protected _hideLegendToggleList = ["dgrid_Table"];
 
@@ -287,7 +287,7 @@ export class ChartPanel extends Border2 implements IHighlight {
     update(domNode, element) {
         super.update(domNode, element);
         if (this._table && this.widget_exists() && this.widget().class().indexOf("chart_XYAxis") >= 0) {
-            const chart = this.widget() as XYAxis;
+            const chart = this.widget() as unknown as XYAxis;
             this._table.columns().forEach((column, idx) => {
                 switch (idx === 0 ? chart.xAxisType() : chart.yAxisType()) {
                     case "linear":
@@ -533,7 +533,7 @@ export class ChartPanel extends Border2 implements IHighlight {
 }
 ChartPanel.prototype._class += " layout_ChartPanel";
 
-export interface ChartPanel {
+export interface ChartPanel<T extends Widget = Widget> {
     title(): string;
     title(_: string): this;
     titleVisible(): boolean;
@@ -568,8 +568,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;

package/src/Grid.ts

@@ -1,6 +1,6 @@
 import { d3Event, drag as d3Drag, HTMLWidget, Platform, select as d3Select, Utility } from "@hpcc-js/common";
 import * as _GridList from "grid-list";
-import { Cell } from "./Cell";
+import { Cell } from "./Cell.ts";
 
 import "../src/Grid.css";
 

package/src/HorizontalList.ts

@@ -1,4 +1,4 @@
-import { FlexGrid } from "./FlexGrid";
+import { FlexGrid } from "./FlexGrid.ts";
 
 export class HorizontalList extends FlexGrid {
     constructor() {

package/src/Layered.ts

@@ -118,11 +118,15 @@ export class Layered extends HTMLWidget {
                 };
         }
     }
-
-    surfacePadding: { (): number; (_: string): Layered; };
-    widgets: { (): any[]; (_: any[]): Layered; };
 }
 Layered.prototype._class += " layout_Layered";
 
+export interface Layered {
+    surfacePadding(): number;
+    surfacePadding(_: number): this;
+    widgets(): any;
+    widgets(_: any): this;
+}
+
 Layered.prototype.publish("surfacePadding", 0, "number", "Padding");
 Layered.prototype.publish("widgets", [], "widgetArray", "widgets", null, { tags: ["Private"] });

package/src/Legend.ts

@@ -13,7 +13,7 @@ import {
     symbolWye as d3SymbolWye
 } from "d3-shape";
 import { legendColor as d3LegendColor } from "d3-svg-legend";
-import { ChartPanel } from "./ChartPanel";
+import { ChartPanel } from "./ChartPanel.ts";
 
 export class Legend extends SVGWidget {
     _owner: ChartPanel;

package/src/Popup.ts

@@ -1,4 +1,4 @@
-import { HTMLWidget } from "@hpcc-js/common";
+import { HTMLWidget, Widget } from "@hpcc-js/common";
 
 export class Popup extends HTMLWidget {
     _surfaceButtons;
@@ -83,20 +83,31 @@ export class Popup extends HTMLWidget {
 
     click(obj) {
     }
-
-    popupState: { (): boolean; (_: boolean): Popup; };
-    shrinkWrap: { (): boolean; (_: boolean): Popup; };
-    centerPopup: { (): string; (_: string): Popup; };
-    top: { (): number; (_: number): Popup; };
-    bottom: { (): number; (_: number): Popup; };
-    left: { (): number; (_: number): Popup; };
-    right: { (): number; (_: number): Popup; };
-    position: { (): string; (_: string): Popup; };
-
-    widget: { (): any; (_: any): Popup; };
 }
 Popup.prototype._class += " layout_Popup";
 
+export interface Popup {
+    popupState(): boolean;
+    popupState(_: boolean): this;
+    shrinkWrap(): boolean;
+    shrinkWrap(_: boolean): this;
+    centerPopup(): "none" | "container" | "window";
+    centerPopup(_: "none" | "container" | "window"): this;
+    top(): number;
+    top(_: number): this;
+    bottom(): number;
+    bottom(_: number): this;
+    left(): number;
+    left(_: number): this;
+    right(): number;
+    right(_: number): this;
+    position(): string;
+    position(_: string): this;
+
+    widget(): Widget;
+    widget(_: Widget): this;
+}
+
 Popup.prototype.publish("popupState", false, "boolean", "State of the popup, visible (true) or hidden (false)", null, {});
 Popup.prototype.publish("shrinkWrap", false, "boolean", "The popup parent container either shrinks to the size of its contents (true) or expands to fit thge popup's parentDiv (false)", null, {});
 Popup.prototype.publish("centerPopup", "none", "set", "Center the widget in its container element (target) or in the window", ["none", "container", "window"], {});

package/src/Surface.ts

@@ -121,6 +121,14 @@ export class Surface extends HTMLWidget {
         super.exit(domNode, element);
     }
 
+    //  Events  ---
+    click(obj) {
+    }
+}
+Surface.prototype._class += " layout_Surface";
+
+export interface Surface {
+    /* 
     title: { (): string; (_: string): Surface; };
     altText: { (): string; (_: string): Surface; };
     altText_exists: () => boolean;
@@ -147,12 +155,51 @@ export class Surface extends HTMLWidget {
     buttonAnnotations: { (): any[]; (_: any[]): Surface; };
 
     widget: { (): Widget; (_: Widget): Surface; };
-
-    //  Events  ---
-    click(obj) {
-    }
+    */
+    title(): string;
+    title(_: string): this;
+    altText(): string;
+    altText(_: string): this;
+    altText_exists(): boolean;
+    surfaceTitlePadding(): number;
+    surfaceTitlePadding(_: number): this;
+    surfaceTitlePadding_exists(): boolean;
+    surfaceTitleFontSize(): number;
+    surfaceTitleFontSize(_: number): this;
+    surfaceTitleFontSize_exists(): boolean;
+    surfaceTitleFontColor(): string;
+    surfaceTitleFontColor(_: string): this;
+    surfaceTitleFontFamily(): string;
+    surfaceTitleFontFamily(_: string): this;
+    surfaceTitleFontBold(): boolean;
+    surfaceTitleFontBold(_: boolean): this;
+    surfaceTitleBackgroundColor(): string;
+    surfaceTitleBackgroundColor(_: string): this;
+    surfaceTitleAlignment(): string;
+    surfaceTitleAlignment(_: string): this;
+
+    surfaceShadow(): boolean;
+    surfaceShadow(_: boolean): this;
+    surfacePadding(): string;
+    surfacePadding(_: string): this;
+    surfacePadding_exists(): boolean;
+    surfaceBackgroundColor(): string;
+    surfaceBackgroundColor(_: string): this;
+    surfaceBorderWidth(): number;
+    surfaceBorderWidth(_: number): this;
+    surfaceBorderWidth_exists(): boolean;
+    surfaceBorderColor(): string;
+    surfaceBorderColor(_: string): this;
+    surfaceBorderRadius(): number;
+    surfaceBorderRadius(_: number): this;
+    surfaceBorderRadius_exists(): boolean;
+
+    buttonAnnotations(): any[];
+    buttonAnnotations(_: any[]): this;
+
+    widget(): Widget;
+    widget(_: Widget): this;
 }
-Surface.prototype._class += " layout_Surface";
 
 Surface.prototype.publish("title", "", "string", "Title", null, { tags: ["Intermediate"] });
 Surface.prototype.publish("altText", null, "string", "Alt text", null, { optional: true });

package/src/Tabbed.ts

@@ -1,6 +1,6 @@
-import { HTMLWidget, Text } from "@hpcc-js/common";
+import { HTMLWidget, Text, Widget } from "@hpcc-js/common";
 import { select as d3Select } from "d3-selection";
-import { Surface } from "./Surface";
+import { Surface } from "./Surface.ts";
 
 import "../src/Tabbed.css";
 
@@ -136,19 +136,26 @@ export class Tabbed extends HTMLWidget {
 
     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";
 
+export interface Tabbed {
+    showTabs(): boolean;
+    showTabs(_: boolean): this;
+    surfacePadding(): number;
+    surfacePadding(_: number): this;
+    surfacePadding_exists(): boolean;
+    activeTabIdx(): number;
+    activeTabIdx(_: number): this;
+
+    labels(): string[];
+    labels(_: string[]): this;
+    tabLocation(): "top" | "bottom";
+    tabLocation(_: "top" | "bottom"): this;
+    widgets(): any[];
+    widgets(_: any[]): this;
+}
+
 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, {});