@hpcc-js/other 2.17.1 → 2.17.3

package/src/PropertyEditor.ts

@@ -1,750 +1,750 @@
-import { HTMLWidget, Platform, PropertyExt, Widget } from "@hpcc-js/common";
-import { Grid } from "@hpcc-js/layout";
-import { local as d3Local, select as d3Select, selectAll as d3SelectAll } from "d3-selection";
-import * as Persist from "./Persist";
-
-import "../src/PropertyEditor.css";
-
-function hasProperties(type) {
-    switch (type) {
-        case "widget":
-        case "widgetArray":
-        case "propertyArray":
-            return true;
-        default:
-    }
-    return false;
-}
-
-export class PropertyEditor extends HTMLWidget {
-    _widgetOrig;
-    _parentPropertyEditor;
-    _show_settings: boolean;
-    _selectedItems;
-    __meta_sorting;
-    _watch;
-    private _childPE = d3Local<PropertyEditor>();
-
-    constructor() {
-        super();
-        this._parentPropertyEditor = null;
-
-        this._tag = "div";
-        this._show_settings = false;
-    }
-
-    parentPropertyEditor(_?: PropertyEditor): PropertyEditor {
-        if (!arguments.length) return this._parentPropertyEditor;
-        this._parentPropertyEditor = _;
-        return this;
-    }
-
-    depth(): number {
-        let retVal = 0;
-        let parent = this.parentPropertyEditor();
-        while (parent) {
-            ++retVal;
-            parent = parent.parentPropertyEditor();
-        }
-        return retVal;
-    }
-
-    _show_header = true;
-    show_header(): boolean;
-    show_header(_: boolean): PropertyEditor;
-    show_header(_?: boolean): boolean | PropertyEditor {
-        if (!arguments.length) {
-            return this._show_header;
-        }
-        this._show_header = _;
-        return this;
-    }
-
-    show_settings(): boolean;
-    show_settings(_: boolean): PropertyEditor;
-    show_settings(_?: boolean): boolean | PropertyEditor {
-        if (!arguments.length) {
-            return this._show_settings;
-        }
-        this._show_settings = _;
-        return this;
-    }
-
-    rootWidgets() {
-        if (this._selectedItems && this._selectedItems.length) {
-            return this._selectedItems;
-        }
-        return this.show_settings() ? [this] : this.widget() ? [this.widget()] : [];
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-
-        const context = this;
-
-        const rootWidgets = this.rootWidgets().filter(function (w) {
-            if (w._owningWidget && w._owningWidget.excludeObjs instanceof Array) {
-                if (w._owningWidget.excludeObjs.indexOf(w.classID()) !== -1) {
-                    return false;
-                }
-            }
-            return true;
-        });
-
-        const table = element.selectAll(`table.property-table.table-${this.depth()}`).data(rootWidgets, function (d) {
-            //  We reuse the existing DOM Nodes and this node _might_ have been a regular Input previously  ---
-            if (typeof d.id !== "function") {
-                return `meta-${d.id}`;
-            }
-            return d.id();
-        });
-        table.enter().append("table")
-            .attr("class", `property-table table-${this.depth()}`)
-            .each(function () {
-                const tableElement = d3Select(this);
-
-                //  Header  ---
-                if (context._show_header && context.parentPropertyEditor() === null) {
-                    tableElement.append("thead").append("tr").append("th")// .datum(tableElement)
-                        .attr("colspan", "2")
-                        .each(function () {
-                            context.enterHeader(d3Select(this));
-                        })
-                        ;
-                }
-
-                //  Body  ---
-                tableElement.append("tbody");
-            })
-            .merge(table)
-            .each(function (tableData) {
-                const tableElement = d3Select(this);
-
-                //  Header  ---
-                if (context._show_header && context.parentPropertyEditor() === null) {
-                    context.updateHeader(tableElement.select("thead > tr > th"));
-                }
-
-                //  Body  ---
-                context.renderInputs(tableElement.select("tbody"), tableData);
-            })
-            ;
-        table.exit()
-            .each(function () {
-                context.renderInputs(element.select("tbody"), null);
-            })
-            .remove()
-            ;
-    }
-
-    exit(domNode, element) {
-        super.exit(domNode, element);
-        this.watchWidget(null);
-    }
-
-    private watchDepth = 0;
-    watchWidget(widget) {
-        if (this._watch) {
-            if ((window as any).__hpcc_debug) {
-                --this.watchDepth;
-                console.info("watchDepth:  " + this.watchDepth);
-            }
-            this._watch.remove();
-            delete this._watch;
-        }
-        if (widget) {
-            const context = this;
-            this._watch = widget.monitor(function (_paramId, newVal, oldVal) {
-                if (oldVal !== newVal) {
-                    const propEditor = context.parentPropertyEditor() || context;
-                    propEditor.lazyRender();
-                }
-            });
-            if ((window as any).__hpcc_debug) {
-                ++this.watchDepth;
-                console.info("watchDepth:  " + this.watchDepth);
-            }
-        }
-    }
-
-    enterHeader(th) {
-        const context = this;
-
-        th.append("span");
-        th.append("i")
-            .attr("class", "expandIcon fa")
-            .on("click", function () {
-                switch (context.peInputIcon()) {
-                    case "fa-caret-up":
-                    case "fa-caret-right":
-                        context.element().selectAll(`.table-${context.depth()} > tbody > tr > .headerRow > .peInput > .property-table-collapsed`)
-                            .classed("property-table-collapsed", false)
-                            ;
-                        context.element().selectAll(`.table-${context.depth()} > tbody > tr > .headerRow > .peInput > i`)
-                            .classed("fa-minus-square-o", true)
-                            .classed("fa-plus-square-o", false)
-                            ;
-                        break;
-                    case "fa-caret-down":
-                        context.element().selectAll(`.table-${context.depth()} > tbody > tr > .headerRow > .peInput > div`)
-                            .classed("property-table-collapsed", true)
-                            ;
-                        context.element().selectAll(`.table-${context.depth()} > tbody > tr > .headerRow > .peInput > i`)
-                            .classed("fa-minus-square-o", false)
-                            .classed("fa-plus-square-o", true)
-                            ;
-                        break;
-                }
-                context.refreshExpandIcon();
-            })
-            ;
-
-        const sortIcon = th.append("i")
-            .attr("class", "sortIcon fa")
-            .on("click", function () {
-                context.refreshSortIcon(sortIcon, true);
-            })
-            ;
-
-        th.append("i")
-            .attr("class", "hideParamsIcon fa")
-            .on("click", function () {
-                context.hideNonWidgets(!context.hideNonWidgets()).render();
-            })
-            ;
-    }
-
-    updateHeader(th) {
-        const widget: any = this.widget();
-        let spanText = "";
-        if (widget) {
-            if (widget.label) {
-                spanText += widget.label();
-            }
-            if (widget.classID) {
-                if (spanText) {
-                    spanText += " - ";
-                }
-                spanText += widget.classID();
-            }
-        }
-        th.select("span")
-            .text(spanText)
-            ;
-        this.refreshExpandIcon();
-        this.refreshSortIcon(th.select(".sortIcon"));
-        this.refreshHideParamsIcon(th.select(".hideParamsIcon"));
-    }
-
-    peInputCount() {
-        return this.element().selectAll(`.table-${this.depth()} > tbody > tr > .headerRow > .peInput > div`).size();
-    }
-
-    peInputCollapsedCount() {
-        return this.element().selectAll(`.table-${this.depth()} > tbody > tr > .headerRow > .peInput > div.property-table-collapsed`).size();
-    }
-
-    peInputIcon(): "fa-caret-down" | "fa-caret-up" | "fa-caret-right" {
-        const collapsed = this.peInputCollapsedCount();
-        if (collapsed === 0) {
-            return "fa-caret-down";
-        } else if (collapsed === this.peInputCount()) {
-            return "fa-caret-up";
-        }
-        return "fa-caret-right";
-    }
-
-    refreshExpandIcon() {
-        const newIcon = this.peInputIcon();
-        this.element().select(`.table-${this.depth()} > thead > tr > th > .expandIcon`)
-            .classed("fa-caret-up", false)
-            .classed("fa-caret-right", false)
-            .classed("fa-caret-down", false)
-            .classed(newIcon, true)
-            ;
-    }
-
-    refreshSortIcon(sortIcon, increment = false) {
-        const sort = this.sorting();
-        const types = this.sorting_options();
-        const icons = this.__meta_sorting.ext.icons;
-        if (increment) {
-            sortIcon.classed(icons[types.indexOf(sort)], false);
-            this.sorting(types[(types.indexOf(sort) + 1) % types.length]).render();
-        } else {
-            sortIcon
-                .classed(icons[(types.indexOf(sort)) % types.length], true)
-                .attr("title", sort)
-                ;
-        }
-    }
-
-    refreshHideParamsIcon(hideParamsIcon) {
-        hideParamsIcon
-            .classed("fa-eye", !this.hideNonWidgets())
-            .classed("fa-eye-slash", this.hideNonWidgets())
-            ;
-    }
-
-    gatherDataTree(widget) {
-        if (!widget) return null;
-        const retVal = {
-            label: widget.id() + " (" + widget.classID() + ")",
-            children: []
-        };
-        const arr2 = Persist.discover(widget);
-        arr2.forEach(function (prop) {
-            const node = {
-                label: prop.id,
-                children: []
-            };
-            switch (prop.type) {
-                case "widget":
-                    node.children.push(this.gatherDataTree(widget[prop.id]()));
-                    break;
-                case "widgetArray":
-                case "propertyArray":
-                    const arr = widget[prop.id]();
-                    if (arr) {
-                        arr.forEach(function (item) {
-                            node.children.push(this.gatherDataTree(item));
-                        }, this);
-                    }
-                    break;
-                default:
-            }
-            retVal.children.push(node);
-        }, this);
-        return retVal;
-    }
-
-    getDataTree() {
-        return this.gatherDataTree(this.widget());
-    }
-
-    _rowSorting(paramArr) {
-        if (this.sorting() === "type") {
-            const typeOrder = ["boolean", "number", "string", "html-color", "array", "object", "widget", "widgetArray", "propertyArray"];
-            paramArr.sort(function (a, b) {
-                if (a.type === b.type) {
-                    return a.id < b.id ? -1 : 1;
-                } else {
-                    return typeOrder.indexOf(a.type) < typeOrder.indexOf(b.type) ? -1 : 1;
-                }
-            });
-        } else if (this.sorting() === "A-Z") {
-            paramArr.sort(function (a, b) { return a.id < b.id ? -1 : 1; });
-        } else if (this.sorting() === "Z-A") {
-            paramArr.sort(function (a, b) { return a.id > b.id ? -1 : 1; });
-        }
-    }
-
-    filterInputs(d) {
-        const discArr = Persist.discover(d);
-        if ((this.filterTags() || this.excludeTags().length > 0 || this.excludeParams.length > 0) && d instanceof PropertyEditor === false) {
-            const context = this;
-            return discArr.filter(function (param, _idx) {
-                if (d[param.id + "_hidden"] && d[param.id + "_hidden"]()) return false;
-                for (const excludeParamItem of context.excludeParams()) {
-                    const arr = excludeParamItem.split(".");
-                    let widgetName;
-                    let excludeParam;
-                    if (arr.length > 2) {
-                        widgetName = arr[0];
-                        excludeParam = arr[2];
-                    } else {
-                        widgetName = arr[0];
-                        excludeParam = arr[1];
-                    }
-                    if (d.class().indexOf(widgetName) !== -1) {
-                        if (param.id === excludeParam) {
-                            return false;
-                        }
-                        return true;
-                    }
-                }
-                if (context.excludeTags().length > 0 && param.ext && param.ext.tags && param.ext.tags.some(function (item) { return (context.excludeTags().indexOf(item) > -1); })) {
-                    return false;
-                }
-                if ((context.filterTags() && param.ext && param.ext.tags && param.ext.tags.indexOf(context.filterTags()) !== -1) || !context.filterTags()) {
-                    return true;
-                }
-                return false;
-            });
-        }
-        return discArr;
-    }
-
-    renderInputs(element, d) {
-        const context = this;
-        let discArr = [];
-        const showFields = !this.show_settings() && this.showFields();
-        if (d) {
-            discArr = this.filterInputs(d).filter(function (prop) { return prop.id !== "fields" ? true : showFields; });
-            if (!this.show_settings() && this.showData() && d.data) {
-                discArr.push({ id: "data", type: "array" });
-            }
-            if (this.hideNonWidgets()) {
-                discArr = discArr.filter(function (n) {
-                    return hasProperties(n.type);
-                });
-            }
-            this._rowSorting(discArr);
-        }
-
-        const rows = element.selectAll("tr.prop" + this.id()).data(discArr, function (d2) { return d2.id; });
-        rows.enter().append("tr")
-            .attr("class", "property-wrapper prop" + this.id())
-            .each(function (param) {
-                const tr = d3Select(this);
-                if (hasProperties(param.type)) {
-                    tr.classed("property-widget-wrapper", true);
-                    tr.append("td")
-                        .attr("colspan", "2")
-                        ;
-                } else {
-                    tr.classed("property-input-wrapper", true);
-                    tr.append("td")
-                        .classed("property-label", true)
-                        .text(param.id)
-                        ;
-                    const inputCell = tr.append("td")
-                        .classed("property-input-cell", true)
-                        ;
-                    context.enterInputs(d, inputCell, param);
-                }
-            }).merge(rows)
-            .each(function (param) {
-                const tr = d3Select(this);
-                tr.classed("disabled", d[param.id + "_disabled"] && d[param.id + "_disabled"]());
-                tr.classed("invalid", d[param.id + "_valid"] && !d[param.id + "_valid"]());
-                tr.attr("title", param.description);
-                if (hasProperties(param.type)) {
-                    context.updateWidgetRow(d, tr.select("td"), param);
-                } else {
-                    context.updateInputs(d, param);
-                }
-            });
-        rows.exit().each(function (param) {
-            const tr = d3Select(this);
-            if (hasProperties(param.type)) {
-                context.updateWidgetRow(d, tr.select("td"), null);
-            }
-        }).remove();
-        rows.order();
-    }
-
-    updateWidgetRow(widget: PropertyExt, element, param) {
-        let tmpWidget = [];
-        if (widget && param) {
-            tmpWidget = widget[param.id]() || [];
-        }
-        let widgetArr = tmpWidget instanceof Array ? tmpWidget : [tmpWidget];
-        if (param && param.ext && param.ext.autoExpand) {
-            //  remove empties and ensure last row is an empty  ---
-            let lastModified = true;
-            const noEmpties = widgetArr.filter(function (row, idx) {
-                lastModified = row.valid();
-                row._owner = widget;
-                return lastModified || idx === widgetArr.length - 1;
-            }, this);
-            const widgetDisabled = widget[param.id + "_disabled"] && widget[param.id + "_disabled"]();
-            let changed = !!(widgetArr.length - noEmpties.length);
-            if (lastModified && !widgetDisabled) {
-                changed = true;
-                const autoExpandWidget = new param.ext.autoExpand()
-                    .owner(widget)
-                    ;
-                // autoExpandWidget.monitor((id, newVal, oldVal, source) => {
-                // widget.broadcast(param.id, newVal, oldVal, source);
-                // });
-                noEmpties.push(autoExpandWidget);
-            }
-            if (changed) {
-                widget[param.id](noEmpties);
-                widgetArr = noEmpties;
-            }
-        }
-
-        const context = this;
-        element.classed("headerRow", true);
-        const peInput = element.selectAll(`div.peInput-${this.depth()}`).data(widgetArr, function (d) { return d.id(); });
-        peInput.enter().append("div")
-            .attr("class", `peInput peInput-${this.depth()}`)
-            .each(function (w) {
-                const peInputElement = d3Select(this);
-
-                //  Header  ---
-                peInputElement.append("span");
-                peInputElement.append("i")
-                    .attr("class", "fa")
-                    .on("click", function (d) {
-                        const clickTarget = peInputElement.select("div");
-                        clickTarget
-                            .classed("property-table-collapsed", !clickTarget.classed("property-table-collapsed"))
-                            ;
-                        d3Select(this)
-                            .classed("fa-minus-square-o", !clickTarget.classed("property-table-collapsed"))
-                            .classed("fa-plus-square-o", clickTarget.classed("property-table-collapsed"))
-                            ;
-                        context.refreshExpandIcon();
-                    })
-                    ;
-
-                //  Body  ---
-                const peDiv = peInputElement.append("div")
-                    // .attr("class", `property- input - cell propEditor-${context.depth() }`)
-                    ;
-                context._childPE.set(this, new PropertyEditor().label(param.id).target(peDiv.node() as HTMLElement));
-            })
-            .merge(peInput)
-            .each(function (w) {
-                const peInputElement = d3Select(this);
-                const clickTarget = peInputElement.select("div");
-
-                //  Header  ---
-                d3Select(this).select("span")
-                    .text(`${param.id}`)
-                    ;
-
-                d3Select(this).select("i")
-                    .classed("fa-minus-square-o", !clickTarget.classed("property-table-collapsed"))
-                    .classed("fa-plus-square-o", clickTarget.classed("property-table-collapsed"))
-                    ;
-
-                //  Body  ---
-                context._childPE.get(this)
-                    .parentPropertyEditor(context)
-                    .showFields(context.showFields())
-                    .showData(context.showData())
-                    .sorting(context.sorting())
-                    .filterTags(context.filterTags())
-                    .excludeTags(context.excludeTags())
-                    .excludeParams(context.excludeParams())
-                    .hideNonWidgets(context.hideNonWidgets() && w._class.indexOf("layout_") >= 0)
-                    .widget(w)
-                    .render()
-                    ;
-            })
-            ;
-        peInput.exit()
-            .each(function (w) {
-                context._childPE.get(this)
-                    .widget(null)
-                    .render()
-                    .target(null)
-                    ;
-                context._childPE.remove(this);
-            })
-            .remove()
-            ;
-    }
-
-    setProperty(widget, id, value) {
-        //  With PropertyExt not all "widgets" have a render, if not use top most render...
-        let topWidget: Widget;
-        let topPropEditor: Widget;
-        let propEditor: PropertyEditor = this;
-        let oldValue;
-        while (propEditor && widget) {
-            if (propEditor === this) {
-                oldValue = widget[id]();
-                widget[id](value);
-            }
-            if (propEditor) {
-                topPropEditor = propEditor;
-                const w: PropertyExt = propEditor.widget();
-                if (w instanceof Widget) {
-                    topWidget = w;
-                }
-            }
-            propEditor = propEditor.parentPropertyEditor();
-        }
-        if (topWidget) {
-            topWidget.render();
-        }
-        if (topPropEditor) {
-            topPropEditor.broadcast(id, value, oldValue, widget);
-        }
-    }
-
-    enterInputs(widget, cell, param) {
-        cell.classed(param.type + "-cell", true);
-        const context = this;
-        if (typeof (param.ext.editor_input) === "function") {
-            param.ext.editor_input(this, widget, cell, param);
-        }
-        switch (param.type) {
-            case "boolean":
-                cell.append("input")
-                    .attr("id", this.id() + "_" + param.id)
-                    .classed("property-input", true)
-                    .attr("type", "checkbox")
-                    .on("change", function () {
-                        context.setProperty(widget, param.id, this.checked);
-                    })
-                    ;
-                break;
-            case "set":
-                cell.append("select")
-                    .attr("id", this.id() + "_" + param.id)
-                    .classed("property-input", true)
-                    .on("change", function () {
-                        context.setProperty(widget, param.id, this.value);
-                    })
-                    ;
-                break;
-            case "array":
-            case "object":
-                cell.append("textarea")
-                    .attr("id", this.id() + "_" + param.id)
-                    .classed("property-input", true)
-                    .attr("autocomplete", "off")
-                    .attr("autocorrect", "off")
-                    .attr("autocapitalize", "off")
-                    .attr("spellcheck", "false")
-                    .on("change", function () {
-                        let value;
-                        try {
-                            value = JSON.parse(this.value);
-                        } catch (e) {
-                            value = this.value;
-                        }
-                        context.setProperty(widget, param.id, value);
-                    })
-                    ;
-                break;
-            default:
-                if (param.ext && param.ext.range) {
-                    cell.append("span")
-                        .classed("property-input-span", true)
-                        .attr("id", this.id() + "_" + param.id + "_currentVal")
-                        .text(param.defaultValue)
-                        ;
-                    cell.append("input")
-                        .attr("type", "range")
-                        .attr("step", param.ext.range.step)
-                        .attr("min", param.ext.range.min)
-                        .attr("max", param.ext.range.max)
-                        .attr("id", this.id() + "_" + param.id)
-                        .classed("property-input", true)
-                        .on("input", function () {
-                            context.setProperty(widget, param.id, this.value);
-                            d3Select("#" + this.id + "_currentVal").text("Current Value: " + this.value);
-                        })
-                        .on("change", function () {
-                            context.setProperty(widget, param.id, this.value);
-                            d3Select("#" + this.id + "_currentVal").text("Current Value: " + this.value);
-                        })
-                        ;
-                } else {
-                    cell.append(param.ext && param.ext.multiline ? "textarea" : "input")
-                        .attr("id", this.id() + "_" + param.id)
-                        .classed("property-input", true)
-                        .attr("autocomplete", "off")
-                        .attr("autocorrect", "off")
-                        .attr("autocapitalize", "off")
-                        .attr("spellcheck", "false")
-                        .on("change", function () {
-                            context.setProperty(widget, param.id, this.value);
-                        })
-                        ;
-                    if (param.type === "html-color" && !Platform.isIE) {
-                        cell.append("input")
-                            .attr("id", this.id() + "_" + param.id + "_2")
-                            .classed("property-input", true)
-                            .attr("type", "color")
-                            .on("change", function () {
-                                context.setProperty(widget, param.id, this.value);
-                            })
-                            ;
-                    }
-                }
-                break;
-        }
-    }
-
-    updateInputs(widget, param) {
-        const element = d3SelectAll("#" + this.id() + "_" + param.id + ", #" + this.id() + "_" + param.id + "_2");
-        const val = widget ? widget[param.id]() : "";
-        element.property("disabled", widget[param.id + "_disabled"] && widget[param.id + "_disabled"]());
-        element.property("invalid", widget[param.id + "_valid"] && !widget[param.id + "_valid"]());
-        switch (param.type) {
-            case "boolean":
-                element.property("checked", val);
-                break;
-            case "set":
-                const options = element.selectAll("option").data<string | { value: string, text: string }>(widget[param.id + "_options"]());
-                options.enter().append("option")
-                    .merge(options as any)
-                    .attr("value", (d: any) => (d && d.value !== undefined) ? d.value : d)
-                    .text((d: any) => (d && d.text !== undefined) ? d.text : d)
-                    ;
-                options.exit().remove();
-                element.property("value", val);
-                break;
-            case "array":
-            case "object":
-                element.property("value", JSON.stringify(val, function replacer(_key, value) {
-                    if (value instanceof Widget) {
-                        return Persist.serialize(value);
-                    }
-                    return value;
-                }, "    "));
-                break;
-            default:
-                if (param.ext && param.ext.range) {
-                    d3Select("#" + this.id() + "_" + param.id + "_currentVal").text("Current Value: " + val);
-                }
-                element.property("value", val && val.length && val.length > 100000 ? "...too big to display..." : val);
-                break;
-        }
-    }
-
-    showFields: { (): boolean; (_: boolean): PropertyEditor; };
-    showData: { (): boolean; (_: boolean): PropertyEditor; };
-
-    sorting: { (): string; (_: string): PropertyEditor; };
-    sorting_options: () => string[];
-
-    hideNonWidgets: { (): boolean; (_: boolean): PropertyEditor; };
-
-    label: { (): string; (_: string): PropertyEditor; };
-    filterTags: { (): string; (_: string): PropertyEditor; };
-    excludeTags: { (): string[]; (_: string[]): PropertyEditor; };
-    excludeParams: { (): string[]; (_: string[]): PropertyEditor; };
-
-    widget: { (): PropertyExt; (_: PropertyExt): PropertyEditor };
-}
-PropertyEditor.prototype._class += " other_PropertyEditor";
-
-PropertyEditor.prototype.publish("showFields", false, "boolean", "If true, widget.fields() will display as if it was a publish parameter.", null, { tags: ["Basic"] });
-PropertyEditor.prototype.publish("showData", false, "boolean", "If true, widget.data() will display as if it was a publish parameter.", null, { tags: ["Basic"] });
-
-PropertyEditor.prototype.publish("sorting", "none", "set", "Specify the sorting type", ["none", "A-Z", "Z-A", "type"], { tags: ["Basic"], icons: ["fa-sort", "fa-sort-alpha-asc", "fa-sort-alpha-desc", "fa-sort-amount-asc"] });
-
-PropertyEditor.prototype.publish("hideNonWidgets", false, "boolean", "Hides non-widget params (at this tier only)", null, { tags: ["Basic"] });
-
-PropertyEditor.prototype.publish("label", "", "string", "Label to display in header of property editor table", null, { tags: ["Basic"] });
-PropertyEditor.prototype.publish("filterTags", "", "set", "Only show Publish Params of this type", ["Basic", "Intermediate", "Advance", ""], {});
-PropertyEditor.prototype.publish("excludeTags", ["Private"], "array", "Exclude this array of tags", null, {});
-PropertyEditor.prototype.publish("excludeParams", [], "array", "Exclude this array of params (widget.param)", null, {});
-
-PropertyEditor.prototype.publish("widget", null, "widget", "Widget", null, { tags: ["Basic"], render: false });
-
-const _widgetOrig = PropertyEditor.prototype.widget;
-(PropertyEditor.prototype as any).widget = function (_?: Widget): Widget | PropertyEditor {
-    if (arguments.length && _widgetOrig.call(this) === _) return this;
-    const retVal = _widgetOrig.apply(this, arguments);
-    if (arguments.length) {
-        this.watchWidget(_);
-        if (_ instanceof Grid) {
-            const context = this;
-            _.postSelectionChange = function () {
-                context._selectedItems = _._selectionBag.get().map(function (item) { return item.widget; });
-                context.lazyRender();
-            };
-        }
-    }
-    return retVal;
-};
+import { HTMLWidget, Platform, PropertyExt, Widget } from "@hpcc-js/common";
+import { Grid } from "@hpcc-js/layout";
+import { local as d3Local, select as d3Select, selectAll as d3SelectAll } from "d3-selection";
+import * as Persist from "./Persist";
+
+import "../src/PropertyEditor.css";
+
+function hasProperties(type) {
+    switch (type) {
+        case "widget":
+        case "widgetArray":
+        case "propertyArray":
+            return true;
+        default:
+    }
+    return false;
+}
+
+export class PropertyEditor extends HTMLWidget {
+    _widgetOrig;
+    _parentPropertyEditor;
+    _show_settings: boolean;
+    _selectedItems;
+    __meta_sorting;
+    _watch;
+    private _childPE = d3Local<PropertyEditor>();
+
+    constructor() {
+        super();
+        this._parentPropertyEditor = null;
+
+        this._tag = "div";
+        this._show_settings = false;
+    }
+
+    parentPropertyEditor(_?: PropertyEditor): PropertyEditor {
+        if (!arguments.length) return this._parentPropertyEditor;
+        this._parentPropertyEditor = _;
+        return this;
+    }
+
+    depth(): number {
+        let retVal = 0;
+        let parent = this.parentPropertyEditor();
+        while (parent) {
+            ++retVal;
+            parent = parent.parentPropertyEditor();
+        }
+        return retVal;
+    }
+
+    _show_header = true;
+    show_header(): boolean;
+    show_header(_: boolean): PropertyEditor;
+    show_header(_?: boolean): boolean | PropertyEditor {
+        if (!arguments.length) {
+            return this._show_header;
+        }
+        this._show_header = _;
+        return this;
+    }
+
+    show_settings(): boolean;
+    show_settings(_: boolean): PropertyEditor;
+    show_settings(_?: boolean): boolean | PropertyEditor {
+        if (!arguments.length) {
+            return this._show_settings;
+        }
+        this._show_settings = _;
+        return this;
+    }
+
+    rootWidgets() {
+        if (this._selectedItems && this._selectedItems.length) {
+            return this._selectedItems;
+        }
+        return this.show_settings() ? [this] : this.widget() ? [this.widget()] : [];
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+
+        const context = this;
+
+        const rootWidgets = this.rootWidgets().filter(function (w) {
+            if (w._owningWidget && w._owningWidget.excludeObjs instanceof Array) {
+                if (w._owningWidget.excludeObjs.indexOf(w.classID()) !== -1) {
+                    return false;
+                }
+            }
+            return true;
+        });
+
+        const table = element.selectAll(`table.property-table.table-${this.depth()}`).data(rootWidgets, function (d) {
+            //  We reuse the existing DOM Nodes and this node _might_ have been a regular Input previously  ---
+            if (typeof d.id !== "function") {
+                return `meta-${d.id}`;
+            }
+            return d.id();
+        });
+        table.enter().append("table")
+            .attr("class", `property-table table-${this.depth()}`)
+            .each(function () {
+                const tableElement = d3Select(this);
+
+                //  Header  ---
+                if (context._show_header && context.parentPropertyEditor() === null) {
+                    tableElement.append("thead").append("tr").append("th")// .datum(tableElement)
+                        .attr("colspan", "2")
+                        .each(function () {
+                            context.enterHeader(d3Select(this));
+                        })
+                        ;
+                }
+
+                //  Body  ---
+                tableElement.append("tbody");
+            })
+            .merge(table)
+            .each(function (tableData) {
+                const tableElement = d3Select(this);
+
+                //  Header  ---
+                if (context._show_header && context.parentPropertyEditor() === null) {
+                    context.updateHeader(tableElement.select("thead > tr > th"));
+                }
+
+                //  Body  ---
+                context.renderInputs(tableElement.select("tbody"), tableData);
+            })
+            ;
+        table.exit()
+            .each(function () {
+                context.renderInputs(element.select("tbody"), null);
+            })
+            .remove()
+            ;
+    }
+
+    exit(domNode, element) {
+        super.exit(domNode, element);
+        this.watchWidget(null);
+    }
+
+    private watchDepth = 0;
+    watchWidget(widget) {
+        if (this._watch) {
+            if ((window as any).__hpcc_debug) {
+                --this.watchDepth;
+                console.info("watchDepth:  " + this.watchDepth);
+            }
+            this._watch.remove();
+            delete this._watch;
+        }
+        if (widget) {
+            const context = this;
+            this._watch = widget.monitor(function (_paramId, newVal, oldVal) {
+                if (oldVal !== newVal) {
+                    const propEditor = context.parentPropertyEditor() || context;
+                    propEditor.lazyRender();
+                }
+            });
+            if ((window as any).__hpcc_debug) {
+                ++this.watchDepth;
+                console.info("watchDepth:  " + this.watchDepth);
+            }
+        }
+    }
+
+    enterHeader(th) {
+        const context = this;
+
+        th.append("span");
+        th.append("i")
+            .attr("class", "expandIcon fa")
+            .on("click", function () {
+                switch (context.peInputIcon()) {
+                    case "fa-caret-up":
+                    case "fa-caret-right":
+                        context.element().selectAll(`.table-${context.depth()} > tbody > tr > .headerRow > .peInput > .property-table-collapsed`)
+                            .classed("property-table-collapsed", false)
+                            ;
+                        context.element().selectAll(`.table-${context.depth()} > tbody > tr > .headerRow > .peInput > i`)
+                            .classed("fa-minus-square-o", true)
+                            .classed("fa-plus-square-o", false)
+                            ;
+                        break;
+                    case "fa-caret-down":
+                        context.element().selectAll(`.table-${context.depth()} > tbody > tr > .headerRow > .peInput > div`)
+                            .classed("property-table-collapsed", true)
+                            ;
+                        context.element().selectAll(`.table-${context.depth()} > tbody > tr > .headerRow > .peInput > i`)
+                            .classed("fa-minus-square-o", false)
+                            .classed("fa-plus-square-o", true)
+                            ;
+                        break;
+                }
+                context.refreshExpandIcon();
+            })
+            ;
+
+        const sortIcon = th.append("i")
+            .attr("class", "sortIcon fa")
+            .on("click", function () {
+                context.refreshSortIcon(sortIcon, true);
+            })
+            ;
+
+        th.append("i")
+            .attr("class", "hideParamsIcon fa")
+            .on("click", function () {
+                context.hideNonWidgets(!context.hideNonWidgets()).render();
+            })
+            ;
+    }
+
+    updateHeader(th) {
+        const widget: any = this.widget();
+        let spanText = "";
+        if (widget) {
+            if (widget.label) {
+                spanText += widget.label();
+            }
+            if (widget.classID) {
+                if (spanText) {
+                    spanText += " - ";
+                }
+                spanText += widget.classID();
+            }
+        }
+        th.select("span")
+            .text(spanText)
+            ;
+        this.refreshExpandIcon();
+        this.refreshSortIcon(th.select(".sortIcon"));
+        this.refreshHideParamsIcon(th.select(".hideParamsIcon"));
+    }
+
+    peInputCount() {
+        return this.element().selectAll(`.table-${this.depth()} > tbody > tr > .headerRow > .peInput > div`).size();
+    }
+
+    peInputCollapsedCount() {
+        return this.element().selectAll(`.table-${this.depth()} > tbody > tr > .headerRow > .peInput > div.property-table-collapsed`).size();
+    }
+
+    peInputIcon(): "fa-caret-down" | "fa-caret-up" | "fa-caret-right" {
+        const collapsed = this.peInputCollapsedCount();
+        if (collapsed === 0) {
+            return "fa-caret-down";
+        } else if (collapsed === this.peInputCount()) {
+            return "fa-caret-up";
+        }
+        return "fa-caret-right";
+    }
+
+    refreshExpandIcon() {
+        const newIcon = this.peInputIcon();
+        this.element().select(`.table-${this.depth()} > thead > tr > th > .expandIcon`)
+            .classed("fa-caret-up", false)
+            .classed("fa-caret-right", false)
+            .classed("fa-caret-down", false)
+            .classed(newIcon, true)
+            ;
+    }
+
+    refreshSortIcon(sortIcon, increment = false) {
+        const sort = this.sorting();
+        const types = this.sorting_options();
+        const icons = this.__meta_sorting.ext.icons;
+        if (increment) {
+            sortIcon.classed(icons[types.indexOf(sort)], false);
+            this.sorting(types[(types.indexOf(sort) + 1) % types.length]).render();
+        } else {
+            sortIcon
+                .classed(icons[(types.indexOf(sort)) % types.length], true)
+                .attr("title", sort)
+                ;
+        }
+    }
+
+    refreshHideParamsIcon(hideParamsIcon) {
+        hideParamsIcon
+            .classed("fa-eye", !this.hideNonWidgets())
+            .classed("fa-eye-slash", this.hideNonWidgets())
+            ;
+    }
+
+    gatherDataTree(widget) {
+        if (!widget) return null;
+        const retVal = {
+            label: widget.id() + " (" + widget.classID() + ")",
+            children: []
+        };
+        const arr2 = Persist.discover(widget);
+        arr2.forEach(function (prop) {
+            const node = {
+                label: prop.id,
+                children: []
+            };
+            switch (prop.type) {
+                case "widget":
+                    node.children.push(this.gatherDataTree(widget[prop.id]()));
+                    break;
+                case "widgetArray":
+                case "propertyArray":
+                    const arr = widget[prop.id]();
+                    if (arr) {
+                        arr.forEach(function (item) {
+                            node.children.push(this.gatherDataTree(item));
+                        }, this);
+                    }
+                    break;
+                default:
+            }
+            retVal.children.push(node);
+        }, this);
+        return retVal;
+    }
+
+    getDataTree() {
+        return this.gatherDataTree(this.widget());
+    }
+
+    _rowSorting(paramArr) {
+        if (this.sorting() === "type") {
+            const typeOrder = ["boolean", "number", "string", "html-color", "array", "object", "widget", "widgetArray", "propertyArray"];
+            paramArr.sort(function (a, b) {
+                if (a.type === b.type) {
+                    return a.id < b.id ? -1 : 1;
+                } else {
+                    return typeOrder.indexOf(a.type) < typeOrder.indexOf(b.type) ? -1 : 1;
+                }
+            });
+        } else if (this.sorting() === "A-Z") {
+            paramArr.sort(function (a, b) { return a.id < b.id ? -1 : 1; });
+        } else if (this.sorting() === "Z-A") {
+            paramArr.sort(function (a, b) { return a.id > b.id ? -1 : 1; });
+        }
+    }
+
+    filterInputs(d) {
+        const discArr = Persist.discover(d);
+        if ((this.filterTags() || this.excludeTags().length > 0 || this.excludeParams.length > 0) && d instanceof PropertyEditor === false) {
+            const context = this;
+            return discArr.filter(function (param, _idx) {
+                if (d[param.id + "_hidden"] && d[param.id + "_hidden"]()) return false;
+                for (const excludeParamItem of context.excludeParams()) {
+                    const arr = excludeParamItem.split(".");
+                    let widgetName;
+                    let excludeParam;
+                    if (arr.length > 2) {
+                        widgetName = arr[0];
+                        excludeParam = arr[2];
+                    } else {
+                        widgetName = arr[0];
+                        excludeParam = arr[1];
+                    }
+                    if (d.class().indexOf(widgetName) !== -1) {
+                        if (param.id === excludeParam) {
+                            return false;
+                        }
+                        return true;
+                    }
+                }
+                if (context.excludeTags().length > 0 && param.ext && param.ext.tags && param.ext.tags.some(function (item) { return (context.excludeTags().indexOf(item) > -1); })) {
+                    return false;
+                }
+                if ((context.filterTags() && param.ext && param.ext.tags && param.ext.tags.indexOf(context.filterTags()) !== -1) || !context.filterTags()) {
+                    return true;
+                }
+                return false;
+            });
+        }
+        return discArr;
+    }
+
+    renderInputs(element, d) {
+        const context = this;
+        let discArr = [];
+        const showFields = !this.show_settings() && this.showFields();
+        if (d) {
+            discArr = this.filterInputs(d).filter(function (prop) { return prop.id !== "fields" ? true : showFields; });
+            if (!this.show_settings() && this.showData() && d.data) {
+                discArr.push({ id: "data", type: "array" });
+            }
+            if (this.hideNonWidgets()) {
+                discArr = discArr.filter(function (n) {
+                    return hasProperties(n.type);
+                });
+            }
+            this._rowSorting(discArr);
+        }
+
+        const rows = element.selectAll("tr.prop" + this.id()).data(discArr, function (d2) { return d2.id; });
+        rows.enter().append("tr")
+            .attr("class", "property-wrapper prop" + this.id())
+            .each(function (param) {
+                const tr = d3Select(this);
+                if (hasProperties(param.type)) {
+                    tr.classed("property-widget-wrapper", true);
+                    tr.append("td")
+                        .attr("colspan", "2")
+                        ;
+                } else {
+                    tr.classed("property-input-wrapper", true);
+                    tr.append("td")
+                        .classed("property-label", true)
+                        .text(param.id)
+                        ;
+                    const inputCell = tr.append("td")
+                        .classed("property-input-cell", true)
+                        ;
+                    context.enterInputs(d, inputCell, param);
+                }
+            }).merge(rows)
+            .each(function (param) {
+                const tr = d3Select(this);
+                tr.classed("disabled", d[param.id + "_disabled"] && d[param.id + "_disabled"]());
+                tr.classed("invalid", d[param.id + "_valid"] && !d[param.id + "_valid"]());
+                tr.attr("title", param.description);
+                if (hasProperties(param.type)) {
+                    context.updateWidgetRow(d, tr.select("td"), param);
+                } else {
+                    context.updateInputs(d, param);
+                }
+            });
+        rows.exit().each(function (param) {
+            const tr = d3Select(this);
+            if (hasProperties(param.type)) {
+                context.updateWidgetRow(d, tr.select("td"), null);
+            }
+        }).remove();
+        rows.order();
+    }
+
+    updateWidgetRow(widget: PropertyExt, element, param) {
+        let tmpWidget = [];
+        if (widget && param) {
+            tmpWidget = widget[param.id]() || [];
+        }
+        let widgetArr = tmpWidget instanceof Array ? tmpWidget : [tmpWidget];
+        if (param && param.ext && param.ext.autoExpand) {
+            //  remove empties and ensure last row is an empty  ---
+            let lastModified = true;
+            const noEmpties = widgetArr.filter(function (row, idx) {
+                lastModified = row.valid();
+                row._owner = widget;
+                return lastModified || idx === widgetArr.length - 1;
+            }, this);
+            const widgetDisabled = widget[param.id + "_disabled"] && widget[param.id + "_disabled"]();
+            let changed = !!(widgetArr.length - noEmpties.length);
+            if (lastModified && !widgetDisabled) {
+                changed = true;
+                const autoExpandWidget = new param.ext.autoExpand()
+                    .owner(widget)
+                    ;
+                // autoExpandWidget.monitor((id, newVal, oldVal, source) => {
+                // widget.broadcast(param.id, newVal, oldVal, source);
+                // });
+                noEmpties.push(autoExpandWidget);
+            }
+            if (changed) {
+                widget[param.id](noEmpties);
+                widgetArr = noEmpties;
+            }
+        }
+
+        const context = this;
+        element.classed("headerRow", true);
+        const peInput = element.selectAll(`div.peInput-${this.depth()}`).data(widgetArr, function (d) { return d.id(); });
+        peInput.enter().append("div")
+            .attr("class", `peInput peInput-${this.depth()}`)
+            .each(function (w) {
+                const peInputElement = d3Select(this);
+
+                //  Header  ---
+                peInputElement.append("span");
+                peInputElement.append("i")
+                    .attr("class", "fa")
+                    .on("click", function (d) {
+                        const clickTarget = peInputElement.select("div");
+                        clickTarget
+                            .classed("property-table-collapsed", !clickTarget.classed("property-table-collapsed"))
+                            ;
+                        d3Select(this)
+                            .classed("fa-minus-square-o", !clickTarget.classed("property-table-collapsed"))
+                            .classed("fa-plus-square-o", clickTarget.classed("property-table-collapsed"))
+                            ;
+                        context.refreshExpandIcon();
+                    })
+                    ;
+
+                //  Body  ---
+                const peDiv = peInputElement.append("div")
+                    // .attr("class", `property- input - cell propEditor-${context.depth() }`)
+                    ;
+                context._childPE.set(this, new PropertyEditor().label(param.id).target(peDiv.node() as HTMLElement));
+            })
+            .merge(peInput)
+            .each(function (w) {
+                const peInputElement = d3Select(this);
+                const clickTarget = peInputElement.select("div");
+
+                //  Header  ---
+                d3Select(this).select("span")
+                    .text(`${param.id}`)
+                    ;
+
+                d3Select(this).select("i")
+                    .classed("fa-minus-square-o", !clickTarget.classed("property-table-collapsed"))
+                    .classed("fa-plus-square-o", clickTarget.classed("property-table-collapsed"))
+                    ;
+
+                //  Body  ---
+                context._childPE.get(this)
+                    .parentPropertyEditor(context)
+                    .showFields(context.showFields())
+                    .showData(context.showData())
+                    .sorting(context.sorting())
+                    .filterTags(context.filterTags())
+                    .excludeTags(context.excludeTags())
+                    .excludeParams(context.excludeParams())
+                    .hideNonWidgets(context.hideNonWidgets() && w._class.indexOf("layout_") >= 0)
+                    .widget(w)
+                    .render()
+                    ;
+            })
+            ;
+        peInput.exit()
+            .each(function (w) {
+                context._childPE.get(this)
+                    .widget(null)
+                    .render()
+                    .target(null)
+                    ;
+                context._childPE.remove(this);
+            })
+            .remove()
+            ;
+    }
+
+    setProperty(widget, id, value) {
+        //  With PropertyExt not all "widgets" have a render, if not use top most render...
+        let topWidget: Widget;
+        let topPropEditor: Widget;
+        let propEditor: PropertyEditor = this;
+        let oldValue;
+        while (propEditor && widget) {
+            if (propEditor === this) {
+                oldValue = widget[id]();
+                widget[id](value);
+            }
+            if (propEditor) {
+                topPropEditor = propEditor;
+                const w: PropertyExt = propEditor.widget();
+                if (w instanceof Widget) {
+                    topWidget = w;
+                }
+            }
+            propEditor = propEditor.parentPropertyEditor();
+        }
+        if (topWidget) {
+            topWidget.render();
+        }
+        if (topPropEditor) {
+            topPropEditor.broadcast(id, value, oldValue, widget);
+        }
+    }
+
+    enterInputs(widget, cell, param) {
+        cell.classed(param.type + "-cell", true);
+        const context = this;
+        if (typeof (param.ext.editor_input) === "function") {
+            param.ext.editor_input(this, widget, cell, param);
+        }
+        switch (param.type) {
+            case "boolean":
+                cell.append("input")
+                    .attr("id", this.id() + "_" + param.id)
+                    .classed("property-input", true)
+                    .attr("type", "checkbox")
+                    .on("change", function () {
+                        context.setProperty(widget, param.id, this.checked);
+                    })
+                    ;
+                break;
+            case "set":
+                cell.append("select")
+                    .attr("id", this.id() + "_" + param.id)
+                    .classed("property-input", true)
+                    .on("change", function () {
+                        context.setProperty(widget, param.id, this.value);
+                    })
+                    ;
+                break;
+            case "array":
+            case "object":
+                cell.append("textarea")
+                    .attr("id", this.id() + "_" + param.id)
+                    .classed("property-input", true)
+                    .attr("autocomplete", "off")
+                    .attr("autocorrect", "off")
+                    .attr("autocapitalize", "off")
+                    .attr("spellcheck", "false")
+                    .on("change", function () {
+                        let value;
+                        try {
+                            value = JSON.parse(this.value);
+                        } catch (e) {
+                            value = this.value;
+                        }
+                        context.setProperty(widget, param.id, value);
+                    })
+                    ;
+                break;
+            default:
+                if (param.ext && param.ext.range) {
+                    cell.append("span")
+                        .classed("property-input-span", true)
+                        .attr("id", this.id() + "_" + param.id + "_currentVal")
+                        .text(param.defaultValue)
+                        ;
+                    cell.append("input")
+                        .attr("type", "range")
+                        .attr("step", param.ext.range.step)
+                        .attr("min", param.ext.range.min)
+                        .attr("max", param.ext.range.max)
+                        .attr("id", this.id() + "_" + param.id)
+                        .classed("property-input", true)
+                        .on("input", function () {
+                            context.setProperty(widget, param.id, this.value);
+                            d3Select("#" + this.id + "_currentVal").text("Current Value: " + this.value);
+                        })
+                        .on("change", function () {
+                            context.setProperty(widget, param.id, this.value);
+                            d3Select("#" + this.id + "_currentVal").text("Current Value: " + this.value);
+                        })
+                        ;
+                } else {
+                    cell.append(param.ext && param.ext.multiline ? "textarea" : "input")
+                        .attr("id", this.id() + "_" + param.id)
+                        .classed("property-input", true)
+                        .attr("autocomplete", "off")
+                        .attr("autocorrect", "off")
+                        .attr("autocapitalize", "off")
+                        .attr("spellcheck", "false")
+                        .on("change", function () {
+                            context.setProperty(widget, param.id, this.value);
+                        })
+                        ;
+                    if (param.type === "html-color" && !Platform.isIE) {
+                        cell.append("input")
+                            .attr("id", this.id() + "_" + param.id + "_2")
+                            .classed("property-input", true)
+                            .attr("type", "color")
+                            .on("change", function () {
+                                context.setProperty(widget, param.id, this.value);
+                            })
+                            ;
+                    }
+                }
+                break;
+        }
+    }
+
+    updateInputs(widget, param) {
+        const element = d3SelectAll("#" + this.id() + "_" + param.id + ", #" + this.id() + "_" + param.id + "_2");
+        const val = widget ? widget[param.id]() : "";
+        element.property("disabled", widget[param.id + "_disabled"] && widget[param.id + "_disabled"]());
+        element.property("invalid", widget[param.id + "_valid"] && !widget[param.id + "_valid"]());
+        switch (param.type) {
+            case "boolean":
+                element.property("checked", val);
+                break;
+            case "set":
+                const options = element.selectAll("option").data<string | { value: string, text: string }>(widget[param.id + "_options"]());
+                options.enter().append("option")
+                    .merge(options as any)
+                    .attr("value", (d: any) => (d && d.value !== undefined) ? d.value : d)
+                    .text((d: any) => (d && d.text !== undefined) ? d.text : d)
+                    ;
+                options.exit().remove();
+                element.property("value", val);
+                break;
+            case "array":
+            case "object":
+                element.property("value", JSON.stringify(val, function replacer(_key, value) {
+                    if (value instanceof Widget) {
+                        return Persist.serialize(value);
+                    }
+                    return value;
+                }, "    "));
+                break;
+            default:
+                if (param.ext && param.ext.range) {
+                    d3Select("#" + this.id() + "_" + param.id + "_currentVal").text("Current Value: " + val);
+                }
+                element.property("value", val && val.length && val.length > 100000 ? "...too big to display..." : val);
+                break;
+        }
+    }
+
+    showFields: { (): boolean; (_: boolean): PropertyEditor; };
+    showData: { (): boolean; (_: boolean): PropertyEditor; };
+
+    sorting: { (): string; (_: string): PropertyEditor; };
+    sorting_options: () => string[];
+
+    hideNonWidgets: { (): boolean; (_: boolean): PropertyEditor; };
+
+    label: { (): string; (_: string): PropertyEditor; };
+    filterTags: { (): string; (_: string): PropertyEditor; };
+    excludeTags: { (): string[]; (_: string[]): PropertyEditor; };
+    excludeParams: { (): string[]; (_: string[]): PropertyEditor; };
+
+    widget: { (): PropertyExt; (_: PropertyExt): PropertyEditor };
+}
+PropertyEditor.prototype._class += " other_PropertyEditor";
+
+PropertyEditor.prototype.publish("showFields", false, "boolean", "If true, widget.fields() will display as if it was a publish parameter.", null, { tags: ["Basic"] });
+PropertyEditor.prototype.publish("showData", false, "boolean", "If true, widget.data() will display as if it was a publish parameter.", null, { tags: ["Basic"] });
+
+PropertyEditor.prototype.publish("sorting", "none", "set", "Specify the sorting type", ["none", "A-Z", "Z-A", "type"], { tags: ["Basic"], icons: ["fa-sort", "fa-sort-alpha-asc", "fa-sort-alpha-desc", "fa-sort-amount-asc"] });
+
+PropertyEditor.prototype.publish("hideNonWidgets", false, "boolean", "Hides non-widget params (at this tier only)", null, { tags: ["Basic"] });
+
+PropertyEditor.prototype.publish("label", "", "string", "Label to display in header of property editor table", null, { tags: ["Basic"] });
+PropertyEditor.prototype.publish("filterTags", "", "set", "Only show Publish Params of this type", ["Basic", "Intermediate", "Advance", ""], {});
+PropertyEditor.prototype.publish("excludeTags", ["Private"], "array", "Exclude this array of tags", null, {});
+PropertyEditor.prototype.publish("excludeParams", [], "array", "Exclude this array of params (widget.param)", null, {});
+
+PropertyEditor.prototype.publish("widget", null, "widget", "Widget", null, { tags: ["Basic"], render: false });
+
+const _widgetOrig = PropertyEditor.prototype.widget;
+(PropertyEditor.prototype as any).widget = function (_?: Widget): Widget | PropertyEditor {
+    if (arguments.length && _widgetOrig.call(this) === _) return this;
+    const retVal = _widgetOrig.apply(this, arguments);
+    if (arguments.length) {
+        this.watchWidget(_);
+        if (_ instanceof Grid) {
+            const context = this;
+            _.postSelectionChange = function () {
+                context._selectedItems = _._selectionBag.get().map(function (item) { return item.widget; });
+                context.lazyRender();
+            };
+        }
+    }
+    return retVal;
+};