@hpcc-js/layout 3.5.8 → 3.5.10

package/src/Accordion.ts

@@ -1,146 +1,146 @@
-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);
-    }
-}
-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"] });
-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);
+    }
+}
+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"] });
+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"] });

package/src/Border.css

@@ -1,149 +1,149 @@
-.layout_Border {
-    width: 100%;
-    height: 100%;
-}
-
-.layout_Border>.border-content {
-    width: 100%;
-    height: 100%;
-    position: relative;
-}
-
-.layout_Border>.borderHandle {
-    width: 6px;
-    height: 6px;
-    background-color: #444;
-    opacity: 0.3;
-    position: absolute;
-    visibility: hidden;
-}
-
-.layout_Border.design-mode>.borderHandle {
-    visibility: visible;
-}
-
-.layout_Border>.borderHandle:hover {
-    background-color: #666;
-}
-
-.layout_Border>.borderHandle.borderHandleDisabled {
-    display: none;
-}
-
-.layout_Border>.borderHandle_top,
-.layout_Border>.borderHandle_bottom {
-    cursor: ns-resize;
-}
-
-.layout_Border>.borderHandle_left,
-.layout_Border>.borderHandle_right {
-    cursor: ew-resize;
-}
-
-.layout_Border .cell {
-    border-radius: 5px;
-    border: 1px solid #e5e5e5;
-    display: inline-block;
-    overflow: hidden;
-}
-
-.layout_Border .cell h2 {
-    margin: 0px;
-    padding-top: 4px;
-    -webkit-margin: 0px;
-    text-align: center;
-}
-
-.layout_Border .layout_BorderCell.over {
-    border: 2px dashed #000;
-}
-
-.layout_Border .dragItem {
-    z-index: -1;
-    opacity: 0.33;
-}
-
-.layout_Border .notDragItem {
-    z-index: -1;
-    opacity: 1;
-}
-
-.layout_Border div[draggable=true] {
-    opacity: 0.75;
-    cursor: default;
-}
-
-.layout_Border div[draggable=true] .dragHandle {
-    opacity: 1.0;
-}
-
-.layout_Border div[draggable=true] .dragHandle_n,
-.layout_Border div[draggable=true] .dragHandle_e,
-.layout_Border div[draggable=true] .dragHandle_s,
-.layout_Border div[draggable=true] .dragHandle_w {
-    background-color: #AAA;
-}
-
-.layout_Border div[draggable=true] .dragHandle_nw,
-.layout_Border div[draggable=true] .dragHandle_ne,
-.layout_Border div[draggable=true] .dragHandle_se,
-.layout_Border div[draggable=true] .dragHandle_sw {
-    background-color: #333;
-}
-
-.layout_Border div[draggable=true] .dragHandle_nw {
-    cursor: nw-resize;
-}
-
-.layout_Border div[draggable=true] .dragHandle_n {
-    cursor: n-resize;
-}
-
-.layout_Border div[draggable=true] .dragHandle_ne {
-    cursor: ne-resize;
-}
-
-.layout_Border div[draggable=true] .dragHandle_e {
-    cursor: e-resize;
-}
-
-.layout_Border div[draggable=true] .dragHandle_se {
-    cursor: se-resize;
-}
-
-.layout_Border div[draggable=true] .dragHandle_s {
-    cursor: s-resize;
-}
-
-.layout_Border div[draggable=true] .dragHandle_sw {
-    cursor: sw-resize;
-}
-
-.layout_Border div[draggable=true] .dragHandle_w {
-    cursor: w-resize;
-}
-
-.layout_Border div[draggable=false]>div>.dragHandle {
-    display: none;
-}
-
-.layout_Border .grid-drop-target {
-    position: fixed;
-    box-sizing: border-box;
-    border: 2px dashed #7f8c8d;
-    border-radius: 0px;
-    background: repeating-linear-gradient(-45deg,
-            rgba(0, 0, 0, 0),
-            rgba(0, 0, 0, 0) 4px,
-            rgba(100, 100, 100, 0.1) 4px,
-            rgba(100, 100, 100, 0.1) 8px);
-}
-
-.layout_Border .grid-drop-target.drop-target-over {
-    border: 2px dashed #179BD7;
-    background: repeating-linear-gradient(-45deg,
-            rgba(0, 0, 0, 0),
-            rgba(0, 0, 0, 0) 6px,
-            rgba(17, 155, 215, 0.1) 6px,
-            rgba(17, 155, 215, 0.1) 12px);
+.layout_Border {
+    width: 100%;
+    height: 100%;
+}
+
+.layout_Border>.border-content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.layout_Border>.borderHandle {
+    width: 6px;
+    height: 6px;
+    background-color: #444;
+    opacity: 0.3;
+    position: absolute;
+    visibility: hidden;
+}
+
+.layout_Border.design-mode>.borderHandle {
+    visibility: visible;
+}
+
+.layout_Border>.borderHandle:hover {
+    background-color: #666;
+}
+
+.layout_Border>.borderHandle.borderHandleDisabled {
+    display: none;
+}
+
+.layout_Border>.borderHandle_top,
+.layout_Border>.borderHandle_bottom {
+    cursor: ns-resize;
+}
+
+.layout_Border>.borderHandle_left,
+.layout_Border>.borderHandle_right {
+    cursor: ew-resize;
+}
+
+.layout_Border .cell {
+    border-radius: 5px;
+    border: 1px solid #e5e5e5;
+    display: inline-block;
+    overflow: hidden;
+}
+
+.layout_Border .cell h2 {
+    margin: 0px;
+    padding-top: 4px;
+    -webkit-margin: 0px;
+    text-align: center;
+}
+
+.layout_Border .layout_BorderCell.over {
+    border: 2px dashed #000;
+}
+
+.layout_Border .dragItem {
+    z-index: -1;
+    opacity: 0.33;
+}
+
+.layout_Border .notDragItem {
+    z-index: -1;
+    opacity: 1;
+}
+
+.layout_Border div[draggable=true] {
+    opacity: 0.75;
+    cursor: default;
+}
+
+.layout_Border div[draggable=true] .dragHandle {
+    opacity: 1.0;
+}
+
+.layout_Border div[draggable=true] .dragHandle_n,
+.layout_Border div[draggable=true] .dragHandle_e,
+.layout_Border div[draggable=true] .dragHandle_s,
+.layout_Border div[draggable=true] .dragHandle_w {
+    background-color: #AAA;
+}
+
+.layout_Border div[draggable=true] .dragHandle_nw,
+.layout_Border div[draggable=true] .dragHandle_ne,
+.layout_Border div[draggable=true] .dragHandle_se,
+.layout_Border div[draggable=true] .dragHandle_sw {
+    background-color: #333;
+}
+
+.layout_Border div[draggable=true] .dragHandle_nw {
+    cursor: nw-resize;
+}
+
+.layout_Border div[draggable=true] .dragHandle_n {
+    cursor: n-resize;
+}
+
+.layout_Border div[draggable=true] .dragHandle_ne {
+    cursor: ne-resize;
+}
+
+.layout_Border div[draggable=true] .dragHandle_e {
+    cursor: e-resize;
+}
+
+.layout_Border div[draggable=true] .dragHandle_se {
+    cursor: se-resize;
+}
+
+.layout_Border div[draggable=true] .dragHandle_s {
+    cursor: s-resize;
+}
+
+.layout_Border div[draggable=true] .dragHandle_sw {
+    cursor: sw-resize;
+}
+
+.layout_Border div[draggable=true] .dragHandle_w {
+    cursor: w-resize;
+}
+
+.layout_Border div[draggable=false]>div>.dragHandle {
+    display: none;
+}
+
+.layout_Border .grid-drop-target {
+    position: fixed;
+    box-sizing: border-box;
+    border: 2px dashed #7f8c8d;
+    border-radius: 0px;
+    background: repeating-linear-gradient(-45deg,
+            rgba(0, 0, 0, 0),
+            rgba(0, 0, 0, 0) 4px,
+            rgba(100, 100, 100, 0.1) 4px,
+            rgba(100, 100, 100, 0.1) 8px);
+}
+
+.layout_Border .grid-drop-target.drop-target-over {
+    border: 2px dashed #179BD7;
+    background: repeating-linear-gradient(-45deg,
+            rgba(0, 0, 0, 0),
+            rgba(0, 0, 0, 0) 6px,
+            rgba(17, 155, 215, 0.1) 6px,
+            rgba(17, 155, 215, 0.1) 12px);
 }