@hpcc-js/layout 2.51.1 → 2.51.3

package/src/Carousel.css

@@ -1,8 +1,8 @@
-.layout_Carousel > div  {
-    position: relative;
-    overflow: hidden;
-}
-
-.layout_Carousel > div > .carouselItem {
-    position: absolute;
+.layout_Carousel > div  {
+    position: relative;
+    overflow: hidden;
+}
+
+.layout_Carousel > div > .carouselItem {
+    position: absolute;
 }

package/src/Carousel.ts

@@ -1,100 +1,100 @@
-import { HTMLWidget, Widget } from "@hpcc-js/common";
-import { select as d3Select } from "d3-selection";
-import "d3-transition";
-
-import "../src/Carousel.css";
-
-export class Carousel extends HTMLWidget {
-
-    protected _prevActive: number = 0;
-    protected _root;
-
-    activeWidget(): Widget {
-        return this.widgets()[this.active()];
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this._root = element.append("div")
-            .attr("id", `${this.id()}_root`)
-            ;
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        const active = this.active();
-        const width = this.width();
-        this._root
-            .style("width", `${width}px`)
-            .style("height", `${this.height()}px`)
-            ;
-        const widgetElements = this._root.selectAll(`#${this.id()}_root > .carouselItem`).data(this.widgets(), d => d.id());
-        const update = widgetElements.enter().append("div")
-            .attr("class", "carouselItem")
-            .each(function (w) {
-                w.target(this);
-            })
-            .merge(widgetElements)
-            .style("left", (d, i) => `${(i - this._prevActive) * width}px`)
-            .style("width", `${width}px`)
-            ;
-        if (this._prevActive !== active) {
-            update
-                .style("display", (d, i) => i === this._prevActive || i === active ? null : "none")  //  Must be called before render callback (not inside transition)
-                .transition().duration(this.transitionDuration())
-                .style("left", (d, i) => `${(i - active) * width}px`)
-                .on("end", function (d, i) {
-                    d3Select(this).style("display", () => i === active ? null : "none");
-                })
-                ;
-            this._prevActive = active;
-        }
-        widgetElements.exit()
-            .each(function (w) {
-                w.target(null);
-            })
-            .remove()
-            ;
-    }
-
-    exit(domNode, element) {
-        this.widgets().forEach(w => w.target(null));
-        super.exit(domNode, element);
-    }
-
-    render(callback): this {
-        return super.render(w => {
-            if (!this.visible() || this.isDOMHidden()) {
-                if (callback) {
-                    callback(w);
-                }
-            } else {
-                const aw = this.activeWidget();
-                if (aw) {
-                    aw
-                        .resize(this.size())
-                        .render(w2 => {
-                            if (callback) {
-                                callback(w);
-                            }
-                        })
-                        ;
-                }
-            }
-        });
-    }
-}
-Carousel.prototype._class += " layout_Carousel";
-
-export interface Carousel {
-    widgets(): Widget[];
-    widgets(_: Widget[]): this;
-    active(): number;
-    active(_: number): this;
-    transitionDuration(): Widget[];
-    transitionDuration(_: Widget[]): this;
-}
-
-Carousel.prototype.publish("widgets", [], "widgetArray", "Widgets", null, { render: false });
-Carousel.prototype.publish("active", 0, "number", "Active widget");
-Carousel.prototype.publish("transitionDuration", 500, "number", "Transition duration");
+import { HTMLWidget, Widget } from "@hpcc-js/common";
+import { select as d3Select } from "d3-selection";
+import "d3-transition";
+
+import "../src/Carousel.css";
+
+export class Carousel extends HTMLWidget {
+
+    protected _prevActive: number = 0;
+    protected _root;
+
+    activeWidget(): Widget {
+        return this.widgets()[this.active()];
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this._root = element.append("div")
+            .attr("id", `${this.id()}_root`)
+            ;
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        const active = this.active();
+        const width = this.width();
+        this._root
+            .style("width", `${width}px`)
+            .style("height", `${this.height()}px`)
+            ;
+        const widgetElements = this._root.selectAll(`#${this.id()}_root > .carouselItem`).data(this.widgets(), d => d.id());
+        const update = widgetElements.enter().append("div")
+            .attr("class", "carouselItem")
+            .each(function (w) {
+                w.target(this);
+            })
+            .merge(widgetElements)
+            .style("left", (d, i) => `${(i - this._prevActive) * width}px`)
+            .style("width", `${width}px`)
+            ;
+        if (this._prevActive !== active) {
+            update
+                .style("display", (d, i) => i === this._prevActive || i === active ? null : "none")  //  Must be called before render callback (not inside transition)
+                .transition().duration(this.transitionDuration())
+                .style("left", (d, i) => `${(i - active) * width}px`)
+                .on("end", function (d, i) {
+                    d3Select(this).style("display", () => i === active ? null : "none");
+                })
+                ;
+            this._prevActive = active;
+        }
+        widgetElements.exit()
+            .each(function (w) {
+                w.target(null);
+            })
+            .remove()
+            ;
+    }
+
+    exit(domNode, element) {
+        this.widgets().forEach(w => w.target(null));
+        super.exit(domNode, element);
+    }
+
+    render(callback): this {
+        return super.render(w => {
+            if (!this.visible() || this.isDOMHidden()) {
+                if (callback) {
+                    callback(w);
+                }
+            } else {
+                const aw = this.activeWidget();
+                if (aw) {
+                    aw
+                        .resize(this.size())
+                        .render(w2 => {
+                            if (callback) {
+                                callback(w);
+                            }
+                        })
+                        ;
+                }
+            }
+        });
+    }
+}
+Carousel.prototype._class += " layout_Carousel";
+
+export interface Carousel {
+    widgets(): Widget[];
+    widgets(_: Widget[]): this;
+    active(): number;
+    active(_: number): this;
+    transitionDuration(): Widget[];
+    transitionDuration(_: Widget[]): this;
+}
+
+Carousel.prototype.publish("widgets", [], "widgetArray", "Widgets", null, { render: false });
+Carousel.prototype.publish("active", 0, "number", "Active widget");
+Carousel.prototype.publish("transitionDuration", 500, "number", "Transition duration");

package/src/Cell.css

@@ -1,11 +1,11 @@
-.layout_Cell .update-indicator {
-    box-sizing: border-box;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    padding: 0px;
-    z-index: 1000;
-    border-width: 0px;
-    border-style: solid;
-    pointer-events: none;
-}
+.layout_Cell .update-indicator {
+    box-sizing: border-box;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    padding: 0px;
+    z-index: 1000;
+    border-width: 0px;
+    border-style: solid;
+    pointer-events: none;
+}

package/src/Cell.ts

@@ -1,89 +1,89 @@
-import { Widget } from "@hpcc-js/common";
-import { select as d3Select, selectAll as d3SelectAll } from "d3-selection";
-import { Surface } from "./Surface";
-
-import "../src/Cell.css";
-
-export class Cell extends Surface {
-    _indicateTheseIds;
-
-    constructor() {
-        super();
-        this._indicateTheseIds = [];
-    }
-
-    indicateTheseIds(): any[];
-    indicateTheseIds(_: any[]): Cell;
-    indicateTheseIds(_?: any[]): any[] | Cell {
-        if (!arguments.length) return this._indicateTheseIds;
-        this._indicateTheseIds = _;
-        return this;
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        const context = this;
-        element
-            .classed("layout_Surface", true)
-            .on("mouseenter", function () { context.onMouseEnter(); })
-            .on("mouseleave", function () { context.onMouseLeave(); })
-            ;
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-    }
-
-    onMouseEnter() {
-        const arr = this.indicateTheseIds();
-        const opacity = this.indicatorOpacity();
-        const indicatorBorderColor = this.indicatorBorderColor();
-        const indicatorGlowColor = this.indicatorGlowColor();
-        for (let i = 0; i < arr.length; i++) {
-            const otherElement = d3Select("#" + arr[i]);
-            const otherWidget: Widget = otherElement.datum() as Widget;
-            if (otherElement && otherWidget) {
-                otherElement.append("div")
-                    .attr("class", "update-indicator")
-                    .style("width", otherWidget.width() + "px")
-                    .style("height", otherWidget.height() + "px")
-                    .style("opacity", opacity)
-                    .style("border-color", indicatorBorderColor)
-                    .style("-webkit-box-shadow", "inset 0px 0px 30px 0px " + indicatorGlowColor)
-                    .style("-moz-box-shadow", "inset 0px 0px 30px 0px " + indicatorGlowColor)
-                    .style("box-shadow", "inset 0px 0px 30px 0px " + indicatorGlowColor)
-                    ;
-            }
-        }
-    }
-
-    onMouseLeave() {
-        const arr = this.indicateTheseIds();
-        for (let i = 0; i < arr.length; i++) {
-            d3SelectAll("#" + arr[i] + " > div.update-indicator").remove();
-        }
-    }
-
-    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; };
-
-}
-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"] });
-Cell.prototype.publish("gridRowSpan", 1, "number", "Grid Row Span", null, { tags: ["Private"] });
-Cell.prototype.publish("gridColSpan", 1, "number", "Grid Column Span", null, { tags: ["Private"] });
-
-Cell.prototype.publish("indicatorGlowColor", "#EEEE11", "html-color", "Glow color of update-indicator", null, { tags: ["Basic"] });
-Cell.prototype.publish("indicatorBorderColor", "#F48A00", "html-color", "Border color of update-indicator", null, { tags: ["Basic"] });
-Cell.prototype.publish("indicatorOpacity", 0.8, "number", "Opacity of update-indicator", null, { tags: ["Basic"] });
+import { Widget } from "@hpcc-js/common";
+import { select as d3Select, selectAll as d3SelectAll } from "d3-selection";
+import { Surface } from "./Surface";
+
+import "../src/Cell.css";
+
+export class Cell extends Surface {
+    _indicateTheseIds;
+
+    constructor() {
+        super();
+        this._indicateTheseIds = [];
+    }
+
+    indicateTheseIds(): any[];
+    indicateTheseIds(_: any[]): Cell;
+    indicateTheseIds(_?: any[]): any[] | Cell {
+        if (!arguments.length) return this._indicateTheseIds;
+        this._indicateTheseIds = _;
+        return this;
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        const context = this;
+        element
+            .classed("layout_Surface", true)
+            .on("mouseenter", function () { context.onMouseEnter(); })
+            .on("mouseleave", function () { context.onMouseLeave(); })
+            ;
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+    }
+
+    onMouseEnter() {
+        const arr = this.indicateTheseIds();
+        const opacity = this.indicatorOpacity();
+        const indicatorBorderColor = this.indicatorBorderColor();
+        const indicatorGlowColor = this.indicatorGlowColor();
+        for (let i = 0; i < arr.length; i++) {
+            const otherElement = d3Select("#" + arr[i]);
+            const otherWidget: Widget = otherElement.datum() as Widget;
+            if (otherElement && otherWidget) {
+                otherElement.append("div")
+                    .attr("class", "update-indicator")
+                    .style("width", otherWidget.width() + "px")
+                    .style("height", otherWidget.height() + "px")
+                    .style("opacity", opacity)
+                    .style("border-color", indicatorBorderColor)
+                    .style("-webkit-box-shadow", "inset 0px 0px 30px 0px " + indicatorGlowColor)
+                    .style("-moz-box-shadow", "inset 0px 0px 30px 0px " + indicatorGlowColor)
+                    .style("box-shadow", "inset 0px 0px 30px 0px " + indicatorGlowColor)
+                    ;
+            }
+        }
+    }
+
+    onMouseLeave() {
+        const arr = this.indicateTheseIds();
+        for (let i = 0; i < arr.length; i++) {
+            d3SelectAll("#" + arr[i] + " > div.update-indicator").remove();
+        }
+    }
+
+    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; };
+
+}
+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"] });
+Cell.prototype.publish("gridRowSpan", 1, "number", "Grid Row Span", null, { tags: ["Private"] });
+Cell.prototype.publish("gridColSpan", 1, "number", "Grid Column Span", null, { tags: ["Private"] });
+
+Cell.prototype.publish("indicatorGlowColor", "#EEEE11", "html-color", "Glow color of update-indicator", null, { tags: ["Basic"] });
+Cell.prototype.publish("indicatorBorderColor", "#F48A00", "html-color", "Border color of update-indicator", null, { tags: ["Basic"] });
+Cell.prototype.publish("indicatorOpacity", 0.8, "number", "Opacity of update-indicator", null, { tags: ["Basic"] });

package/src/ChartPanel.css

@@ -1,8 +1,8 @@
-.layout_ChartPanel .series.highlight {
-    stroke-width: 2px;
-    opacity: 1;
-}
-
-.layout_ChartPanel .series.lowlight {
-    opacity: 0.3!important;
-}
+.layout_ChartPanel .series.highlight {
+    stroke-width: 2px;
+    opacity: 1;
+}
+
+.layout_ChartPanel .series.lowlight {
+    opacity: 0.3!important;
+}