var PDJS;
(function (PDJS) {
    class Application extends Jade.Application {
        constructor(options) {
            super(options);
        }
        static get instance() {
            return Application.internalInstance;
        }
        get databaseId() {
            return Jade.String.format("PDDB_{0}_{1}", this.id, this.startUpData.currentUser.id.toString());
        }
        get startUpData() {
            return this.m_startUpData;
        }
        get isLocalAuth() {
            return this.startUpData.isLocalAuth;
        }
        onInit(options) {
            this.m_startUpData = options.startUpData;
            this.id = options.startUpData.applicationId;
            Jade.Database.create(this.databaseId);
            super.onInit(options);
        }
    }
    PDJS.Application = Application;
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    class JS {
        static get ProspectDirector() {
            return window["ProspectDirector"];
        }
        static get PD() {
            return window["PD"];
        }
        static get Plugins() {
            return window["Plugins"];
        }
    }
    PDJS.JS = JS;
    Jade.Application.onStart(() => {
        CanvasJS.GroupModel.componentTypeDefault = "ProspectDirector.Web.UI.Canvas.Group";
        Jade.IconSet.add({
            id: "pdjs",
            rootPath: "~/areas/shared/assets/external/pdjs/images"
        });
        Jade.IconSet.add({
            id: "canvasjs",
            rootPath: "~/areas/shared/assets/external/canvasjs/images"
        });
        Jade.IconSet.add({
            id: "jadejs",
            rootPath: "~/areas/shared/assets/external/jadejs/images"
        });
        Jade.IconSet.add({
            id: "pd",
            rootPath: "~/application/icons"
        });
        Jade.IconSet.add({
            id: "pdv2",
            rootPath: "~/areas/shared/assets/internal/icons"
        });
    });
    Jade.ContextManager.onContextChange((e) => {
        if (e.newContext != null && e.newContext.isDialogContext) {
            setTimeout(() => {
                e.newContext.node.find("input, textarea, button, select, a").each((index, el) => {
                    let node = $(el);
                    if (node.attr("tabIndex") == null) {
                        node.attr("tabIndex", (Jade.Application.instance.contexts.current.depth * 1000) + 999);
                    }
                });
            }, 1000);
        }
    });
    Jade.Application.onStart(() => {
        $(document).ready(() => {
            switch (Jade.Application.instance.name) {
                case "hub":
                    new PDJS.Hub.ApplicationBar({
                        container: $(".-pdjs-framework-application-bar")
                    });
                    break;
                case "manage":
                    break;
            }
        });
        $("BODY").on("click", "A[target]", (e) => {
            let node = $(e.target);
            let target = node.attr("target");
            if (Jade.String.isNullOrWhiteSpace(target)) {
                return;
            }
            let href = node.attr("href");
            let targetValues = [
                "_blank",
                "_self",
                "_parent",
                "_top"
            ];
            if (targetValues.indexOf(target) === -1) {
                window.open(href, target);
                return false;
            }
            if (target === "_blank") {
                window.open(href);
                return false;
            }
        });
        if (PDJS.Application.instance.startUpData.isLocalAuth) {
            Jade.Application
                .instance
                .contexts
                .global
                .events
                .subscribe(PDJS.Shared.SessionState.SESSION_EXPIRED_EVENT, () => {
                PDJS.Shared.Security.LoginDialog.open();
            });
            Jade.Application
                .instance
                .contexts
                .global
                .events
                .subscribe(PDJS.Shared.SessionState.SESSION_RESUME_EVENT, (reload) => {
                if (PDJS.Shared.Security.LoginDialog.opened) {
                    PDJS.Shared.Security.LoginDialog.instance.close();
                }
                if (reload === true) {
                    window.location.reload();
                }
            });
            PDJS.Shared.SessionState.instance.init();
        }
    });
})(PDJS || (PDJS = {}));
var plupload;
(function (plupload) {
    let FileStatus;
    (function (FileStatus) {
        FileStatus[FileStatus["QUEUED"] = 1] = "QUEUED";
        FileStatus[FileStatus["UPLOADING"] = 2] = "UPLOADING";
        FileStatus[FileStatus["FAILED"] = 4] = "FAILED";
        FileStatus[FileStatus["DONE"] = 5] = "DONE";
    })(FileStatus = plupload.FileStatus || (plupload.FileStatus = {}));
    let UploaderState;
    (function (UploaderState) {
        UploaderState[UploaderState["STARTED"] = 1] = "STARTED";
        UploaderState[UploaderState["STOPPED"] = 2] = "STOPPED";
    })(UploaderState = plupload.UploaderState || (plupload.UploaderState = {}));
    let UploaderEvent;
    (function (UploaderEvent) {
        UploaderEvent["BeforeUpload"] = "BeforeUpload";
        UploaderEvent["ChunkUploaded"] = "ChunkUploaded";
        UploaderEvent["Destroy"] = "Destroy";
        UploaderEvent["Error"] = "Error";
        UploaderEvent["FileFiltered"] = "FileFiltered";
        UploaderEvent["FilesAdded"] = "FilesAdded";
        UploaderEvent["FilesRemoved"] = "FilesRemoved";
        UploaderEvent["FileUploaded"] = "FileUploaded";
        UploaderEvent["FileRemoved"] = "FileRemoved";
        UploaderEvent["UploadProgress"] = "UploadProgress";
        UploaderEvent["UploadComplete"] = "UploadComplete";
        UploaderEvent["QueueChanged"] = "QueueChanged";
        UploaderEvent["StateChanged"] = "StateChanged";
    })(UploaderEvent = plupload.UploaderEvent || (plupload.UploaderEvent = {}));
})(plupload || (plupload = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        Jade.ContextManager.onContextChange((e) => {
            CanvasJS.Actual.Environment.reset();
            CanvasJS.Design.Environment.reset();
        });
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            class CanvasRefresh {
                static validate(e) {
                    CanvasJS.Actual.Environment
                        .document
                        .controls
                        .each((element) => {
                        if (element instanceof Actual.Forms.FormField) {
                            element.validationErrors.clear();
                        }
                    });
                    let formId = null;
                    _.each(e.validationErrors, (value, key) => {
                        let control = CanvasJS.Actual.Environment
                            .document
                            .controls
                            .getById(key);
                        if (control != null && control instanceof Actual.Forms.FormField) {
                            control.validationErrors.add(value);
                            formId = control.formId;
                        }
                    });
                    Canvas.Actual.Forms.FormFieldAnimation.start(formId, 1500, Canvas.Actual.Forms.FormFieldAnimationType.error);
                }
                static populate(e) {
                    if (e.document == null) {
                        return;
                    }
                    CanvasJS.Actual.Environment.document.controls.clear();
                    CanvasJS.Actual.Environment.document.source.elements.each((source) => {
                        let element = source.resolver.getView(CanvasJS.CanvasType.Actual);
                        CanvasJS.Actual.Environment
                            .document
                            .controls
                            .add(element);
                    });
                }
            }
            Actual.CanvasRefresh = CanvasRefresh;
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            class CanvasViewBox extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                    this.m_document = null;
                    if (this.createContext) {
                        Jade.Application.instance.contexts.destroyContext({
                            id: Jade.Application.instance.contexts.current.ID
                        });
                        Jade.Application.instance.contexts.createContext({
                            makeDefault: true
                        });
                    }
                }
                get createContext() {
                    return this.state.get("createContext", true);
                }
                get document() {
                    return this.m_document;
                }
                get documentId() {
                    return this.state.get("documentId");
                }
                get documentState() {
                    return this.state.get("documentState");
                }
                get entityId() {
                    return this.state.get("entityId");
                }
                get rowIds() {
                    return this.state.get("rowIds", []);
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.node.addClass("-canvasjs-actual");
                    this.node.css({
                        height: "100%",
                        width: "100%"
                    });
                    if (this.documentState == null) {
                        this.requestDocument();
                    }
                    else {
                        this.loadDocument(this.documentState);
                    }
                }
                requestDocument() {
                    let documentService = new PDJS.Services.Canvas.DocumentService();
                    documentService.loadActualDocument({
                        documentId: this.documentId,
                        entityId: this.entityId,
                        rowId: this.rowIds.length == 1 ? this.rowIds[0] : 0,
                        success: (e) => {
                            this.loadDocument(e.data);
                        }
                    });
                }
                loadDocument(state) {
                    this.m_document = new Actual.DocumentView({
                        $source: new Canvas.Core.Documents.ActualDocument(state),
                        documentId: this.documentId,
                        entityId: this.entityId,
                        isBatchMode: this.rowIds.length > 1
                    });
                    this.controls.add(this.m_document);
                    Actual.ElementFocus.setDefaultFocus(this.m_document);
                }
            }
            Actual.CanvasViewBox = CanvasViewBox;
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            class CanvasViewBoxOnCreate extends Jade.UI.Control {
                get documentState() {
                    return this.state.get("documentState");
                }
                get document() {
                    return this.state.get("document");
                }
                onActivate(e) {
                    this.node.addClass("-canvasjs-actual");
                    this.node.css({
                        height: "100%",
                        width: "100%"
                    });
                    if (this.documentState != null) {
                        let documentView = new Actual.DocumentView({
                            $source: new Canvas.Core.Documents.ActualDocument(this.documentState)
                        });
                        this.controls.add(documentView);
                        Actual.ElementFocus.setDefaultFocus(documentView);
                    }
                }
                getDocumentJSON() {
                    return CanvasJS.Actual.Environment.document.toJSON();
                }
            }
            Actual.CanvasViewBoxOnCreate = CanvasViewBoxOnCreate;
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            let CssClass;
            (function (CssClass) {
                CssClass["ElementError"] = "-pdjs-element-actual-error";
            })(CssClass = Actual.CssClass || (Actual.CssClass = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            class DocumentView extends CanvasJS.Actual.DocumentActualViewBase {
                constructor(options) {
                    super(options);
                    this.subscriptions.add("Explorer:Content:Unload", () => {
                        this.destroy();
                    });
                }
                get entityId() {
                    return this.state.get("entityId");
                }
                onStateChanged() {
                    this.node.css({
                        height: "100%",
                        width: "100%",
                        backgroundColor: this.source.backgroundColor,
                        overflow: "auto",
                        position: "relative"
                    });
                }
                onDestroy(e) {
                    super.onDestroy(e);
                    Jade.Application
                        .instance
                        .contexts
                        .current
                        .events
                        .publish("canvas/destroyed");
                }
            }
            Actual.DocumentView = DocumentView;
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            class ElementFocus {
                static setDefaultFocus(document) {
                    document.source.tabIndexes.each((id) => {
                        let element = document.controls.getById(id);
                        let focusable = null;
                        if (Jade.InterfaceGuard.is(element, Canvas.Core.IFocusableGuard)) {
                            focusable = element;
                        }
                        if (focusable != null && focusable.acceptsFocus) {
                            focusable.focus();
                            return false;
                        }
                    });
                }
            }
            Actual.ElementFocus = ElementFocus;
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            class ElementView extends CanvasJS.Actual.ElementActualViewBase {
            }
            Actual.ElementView = ElementView;
            class ElementViewBase extends ElementView {
                get source() {
                    return this.m_source;
                }
                onComplete(e) {
                    super.onComplete(e);
                    if (this.source.errors.length > 0) {
                        this.controls.clear();
                        this.node.empty();
                        this.controls.add(new Actual.ElementViewError({
                            componentName: this.source.componentName,
                            errors: this.source.errors,
                            height: this.height,
                            width: this.width
                        }));
                    }
                }
            }
            Actual.ElementViewBase = ElementViewBase;
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            class ElementViewError extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                }
                get errors() {
                    return this.state.get("errors");
                }
                get componentName() {
                    return this.state.get("componentName");
                }
                get messageNode() {
                    return this.node.find("div[role=message]");
                }
                get height() {
                    return this.state.get("height");
                }
                get width() {
                    return this.state.get("width");
                }
                template() {
                    return `<div class="${Actual.CssClass.ElementError}">
                        <table style="height:${this.height}px;width:${this.width}px;">
                            <tr>
                                <td>
                                    <div role="message" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:${this.width}px;padding:0 5px 0 5px;">
                                        ${this.getLabelContent(true)}
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>`;
                }
                onActivate(e) {
                    super.onComplete(e);
                    Tipped.create(this.node, this.getErrorMessage(), {
                        skin: "white"
                    });
                    if (this.height < 50 && this.width < 150) {
                        this.messageNode.html(this.getLabelContent());
                        this.messageNode.css({
                            paddingLeft: 0,
                            backgroundPosition: "center center",
                            backgroundRepeat: "no-repeat",
                            width: "100%",
                            boxSizing: "border-box"
                        });
                    }
                }
                getIcon() {
                    return Jade.IconSet.get("pdjs").resolve("error.png", Jade.IconSetSizeSpecificDirectory.x32);
                }
                getErrorMessage() {
                    let result = "";
                    result += `<div style="min-width: 150px;white-space:nowrap;font-size:13px;font-weight:bold;padding-bottom:5px;text-decoration:underline;">${this.componentName}</div>`;
                    _.each(this.errors, (error) => {
                        result += `<div style="padding:0 0 5px 0;min-width:150px;font-size:13px;color:red;">${error.message}</div>`;
                    });
                    result += `<div style="min-width: 150px;white-space:nowrap;font-size:13px;">Contact your system administrator if the issues persist.</div>`;
                    return `<div>${result}</div>`;
                }
                getLabelContent(text = false) {
                    return `<img src="${this.getIcon()}" style="vertical-align:middle;margin-bottom:3px;" /> ${text ? "&nbsp;" + this.componentName + " Error" : ""}`;
                }
            }
            Actual.ElementViewError = ElementViewError;
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Charts;
            (function (Charts) {
                class Chart extends Actual.ElementViewBase {
                    get kendo() {
                        return this.m_kendo;
                    }
                    set kendo(value) {
                        this.m_kendo = value;
                    }
                    get chartNode() {
                        return this.node.find("[role=chart]");
                        ;
                    }
                    template() {
                        return `<div role="chart"></div>`;
                    }
                    refresh() {
                        let chartOptions = null;
                        let shouldRefresh = this.kendo != null
                            && this.nodeHeight > 10
                            && this.nodeWidth > 10;
                        if (shouldRefresh) {
                            chartOptions = this.getChartOptions();
                            this.kendo.setOptions(chartOptions);
                            this.kendo.refresh();
                        }
                        this.hideLoadingMessage();
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.isBrowserResizeAware = true;
                        this.m_kendo = this.chartNode.kendoChart(this.getChartOptions()).data("kendoChart");
                        this.node.css({
                            overflow: "hidden"
                        });
                        if (this.source.data == null) {
                            this.showLoadingMessage();
                            this.source.getCachedData();
                        }
                        else {
                            setTimeout(() => {
                                this.refresh();
                            }, 100);
                        }
                        this.menu_init();
                        this.controls.add(new Canvas.Shared.ElementBar({
                            showRefresh: this.source.informationBarRefresh,
                            cacheLastUpdated: this.source.cacheLastUpdated,
                            visible: this.source.informationBarVisible,
                            onRefresh: () => {
                                this.showLoadingMessage();
                                this.source.getCachedData(true);
                            }
                        }));
                    }
                    onComplete(e) {
                        super.onComplete(e);
                        if (this.source.data == null) {
                            this.source.getCachedData();
                        }
                    }
                    onBrowserResize() {
                        if (this.anchorRight != null || this.anchorBottom != null) {
                            this.refresh();
                        }
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.chartNode.css({
                            position: "absolute",
                            top: 0,
                            right: 0,
                            bottom: 0,
                            left: 0,
                            boxSizing: "border-box",
                            padding: 0,
                            margin: 0
                        });
                        this.refresh();
                    }
                    getChartOptions() {
                        let result = null;
                        let chartState = $.extend(true, this.source.toJSON(), {
                            data: this.source.data
                        });
                        result = new Canvas.Shared.Charts.ChartOptions(chartState).getOptions();
                        result = $.extend(true, result, {
                            seriesDefaults: {
                                type: this.source.seriesType
                            },
                            chartArea: {
                                height: this.nodeHeight == 0 ? 10 : this.getChartHeight(),
                                width: this.nodeWidth == 0 ? 10 : this.nodeWidth,
                            }
                        });
                        return result;
                    }
                    getChartHeight() {
                        return this.nodeHeight - (this.source.informationBarVisible ? 25 : 0);
                    }
                    hideLoadingMessage() {
                        if (this.m_message != null && this.source.cacheRefreshStatus != Canvas.Core.CachedElementRefreshStatus.Pending) {
                            this.controls.remove(this.m_message);
                        }
                    }
                    showLoadingMessage() {
                        this.hideLoadingMessage();
                        this.m_message = new PDJS.Shared.UI.Controls.LoadingMessageControl({
                            message: "Loading..."
                        });
                        this.controls.add(this.m_message);
                    }
                    menu_init() {
                        if (!this.source.actionMenuVisible) {
                            return;
                        }
                        let boardContent = () => {
                            return `<div style="padding:10px;text-align:center;border-top: 1px solid #DDDDDD"><b>Last Updated:</b><br/>${kendo.toString(new Date(this.source.cacheLastUpdated), "g")}</div>`;
                        };
                        this.m_menu = new Canvas.Shared.ElementMenu({
                            position: Canvas.Shared.ElementMenuPosition.topRight,
                            visible: true
                        });
                        if (this.source.actionMenuRefresh) {
                            this.m_menu.items.add(new Canvas.Shared.ElementMenuItemAction({
                                icon: Jade.IconSet.get("pdjs").resolve("refresh.png", Jade.IconSetSizeSpecificDirectory.x16),
                                label: "Refresh",
                                click: () => {
                                    this.m_menu.popUp.hide();
                                    this.showLoadingMessage();
                                    this.source.getCachedData(true);
                                }
                            }));
                        }
                        this.m_menu.items.add(new Canvas.Shared.ElementMenuItemBoard({
                            content: boardContent(),
                            show: (e) => {
                                e.content = boardContent();
                            }
                        }));
                        this.controls.add(this.m_menu);
                    }
                }
                Charts.Chart = Chart;
            })(Charts = Actual.Charts || (Actual.Charts = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            class IFocusableGuard extends Jade.InterfaceGuard {
                get signature() {
                    return {
                        id: "628b891c-740c-4a70-9a05-bf8a3046ab48",
                        label: "IFocusableGuard"
                    };
                }
            }
            Core.IFocusableGuard = IFocusableGuard;
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Common;
            (function (Common) {
                let Button = class Button extends Actual.ElementViewBase {
                    get buttonNode() {
                        return this.node.find("button");
                    }
                    get acceptsFocus() {
                        return this.source.enabled;
                    }
                    template() {
                        return `<div style="position:absolute;top:0;left:0;right:0;bottom:0;">
                        <button style="height:100%;width:100%;box-sizing:border-box;" tabIndex="${this.source.activeTabIndex}"></button>
                    </div>`;
                    }
                    focus() {
                        this.buttonNode.focus();
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.buttonNode.text(this.source.label);
                        this.buttonNode.prop("disabled", !this.source.enabled);
                        this.buttonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.onClick, this));
                        if (this.source.hasTooltip) {
                            Tipped.create(this.node, this.source.tooltip, {
                                skin: "white",
                                showOn: "mouseenter",
                                hideOn: false,
                                hideAfter: 200,
                                hideDelay: 0,
                                maxWidth: 300
                            });
                        }
                    }
                    onClick(e) {
                        if (this.source.enabled && this.source.hasOnClickAction) {
                            Canvas.Shared.ActionInvoker.invoke(this.source.onClickAction);
                        }
                    }
                };
                Button = __decorate([
                    Jade.InterfaceGuard.implement(Canvas.Core.IFocusableGuard)
                ], Button);
                Common.Button = Button;
            })(Common = Actual.Common || (Actual.Common = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Common;
            (function (Common) {
                let Hyperlink = class Hyperlink extends Actual.ElementViewBase {
                    get linkNode() {
                        return this.node.find("A");
                    }
                    get acceptsFocus() {
                        return this.source.enabled;
                    }
                    template() {
                        return `<div style="display:flex;align-items:center;position:absolute;top:0;left:0;right:0;bottom:0;">
                        <a href='#' style='width:100%;' tabIndex="${this.source.activeTabIndex}"></a>
                    </div>`;
                    }
                    focus() {
                        this.linkNode.focus();
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.node.css({
                            opacity: this.source.enabled ? 1 : .4
                        });
                        this.linkNode.text(this.source.label);
                        this.linkNode.prop("disabled", !this.source.enabled);
                        this.linkNode.css({
                            color: this.source.foreColor,
                            fontName: this.source.fontName,
                            fontSize: this.source.fontSize,
                            textAlign: this.source.textAlignment
                        });
                        this.linkNode.on(Jade.BrowserEvent.MOUSEENTER, () => {
                            this.linkNode.css({ color: this.source.hoverForeColor });
                        });
                        this.linkNode.on(Jade.BrowserEvent.MOUSELEAVE, () => {
                            this.linkNode.css({ color: this.source.foreColor });
                        });
                        this.linkNode.on(Jade.BrowserEvent.CLICK, _.bind(this.onClick, this));
                        if (this.source.hasTooltip) {
                            Tipped.create(this.linkNode, this.source.tooltip, {
                                skin: "white",
                                showOn: "mouseenter",
                                hideOn: false,
                                hideAfter: 200,
                                hideDelay: 0,
                                maxWidth: 300
                            });
                        }
                    }
                    onClick(e) {
                        if (this.source.enabled && this.source.hasOnClickAction) {
                            Canvas.Shared.ActionInvoker.invoke(this.source.onClickAction);
                        }
                    }
                };
                Hyperlink = __decorate([
                    Jade.InterfaceGuard.implement(Canvas.Core.IFocusableGuard)
                ], Hyperlink);
                Common.Hyperlink = Hyperlink;
            })(Common = Actual.Common || (Actual.Common = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Common;
            (function (Common) {
                class ImageButton extends Actual.ElementViewBase {
                    get imageNode() {
                        return this.node.find("img");
                    }
                    template() {
                        return `<div style="position:absolute;top:0;left:0;right:0;bottom:0;text-align:center;">
                        <img style="height:100%;"/>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.imageNode.prop("src", this.getImageUrl());
                        this.imageNode.prop("disabled", this.source.enabled);
                        this.node.css({
                            opacity: this.source.enabled ? 1 : .5
                        });
                        this.imageNode.on(Jade.BrowserEvent.CLICK, _.bind(this.onClick, this));
                        if (this.source.hasTooltip) {
                            Tipped.create(this.imageNode, this.source.tooltip, {
                                skin: "white",
                                showOn: "mouseenter",
                                hideOn: false,
                                hideAfter: 200,
                                hideDelay: 0,
                                maxWidth: 300
                            });
                        }
                    }
                    onClick(e) {
                        if (this.source.enabled && this.source.hasOnClickAction) {
                            Canvas.Shared.ActionInvoker.invoke(this.source.onClickAction);
                        }
                    }
                    getImageUrl() {
                        let result = null;
                        if (this.source.imageUrl == null) {
                            result = Jade.Path.resolve("~/application/icons/misc/1024x1024/photo_portrait.png");
                        }
                        else {
                            if (this.source.imageUrl.indexOf("/") === 0) {
                                result = Jade.Path.resolve(`~${this.source.imageUrl}`);
                            }
                            else if (this.source.imageUrl.indexOf("~") === 0) {
                                result = Jade.Path.resolve(this.source.imageUrl);
                            }
                            else {
                                result = Jade.Path.resolve(`~/resources/${this.source.imageUrl}`);
                            }
                        }
                        return result;
                    }
                }
                Common.ImageButton = ImageButton;
            })(Common = Actual.Common || (Actual.Common = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Common;
            (function (Common) {
                class Markup extends Actual.ElementViewBase {
                    get contentNode() {
                        return this.node.find("[role=content]");
                    }
                    template() {
                        return `<div>
                        <div role="content"></div>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.contentNode.css({
                            position: "absolute",
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            backgroundColor: this.source.backgroundColor,
                            borderColor: this.source.borderColor,
                            borderStyle: this.source.borderStyle,
                            borderWidth: `${this.source.borderWidth}px`,
                            padding: `${this.source.padding}px`,
                            overflow: this.source.scrolling == "none" ? "none" : "auto",
                            overflowX: this.source.scrolling == "horizontal" ? "scroll" : "hidden",
                            overflowY: this.source.scrolling == "vertical" ? "scroll" : "hidden"
                        });
                        this.contentNode.html(this.source.markup);
                    }
                }
                Common.Markup = Markup;
            })(Common = Actual.Common || (Actual.Common = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Common;
            (function (Common) {
                class Report extends Actual.ElementViewBase {
                    get reportNode() {
                        return this.node.find("[role=report]");
                    }
                    get iframeNode() {
                        return this.node.find("iframe");
                    }
                    get iframeID() {
                        return `iframe-${this.ID}`;
                    }
                    get iframeElement() {
                        return document.getElementById(this.iframeID);
                    }
                    template() {
                        return `<div class="-pdjs-canvas-report">
                        <div role="report">
                            <iframe id="${this.iframeID}" style="height:100%;width:100%;border:0 transparent;" />
                        </div>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        if (this.source.data == null) {
                            this.showLoadingMessage();
                            this.source.getCachedData();
                        }
                        else {
                            this.loadReport();
                        }
                        this.menu_init();
                        this.informationBar_init();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.reportNode.css({
                            position: "absolute",
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: this.source.informationBarVisible ? "25px" : "0",
                            backgroundColor: "#FFFFFF",
                            borderColor: this.source.borderColor,
                            borderStyle: this.source.borderStyle,
                            borderWidth: this.source.borderWidth
                        });
                        this.loadReport();
                    }
                    loadReport() {
                        if (this.iframeElement != null && this.iframeElement.contentDocument != null) {
                            this.iframeElement.contentDocument.clear();
                            this.iframeElement.contentDocument.open();
                            this.iframeElement.contentDocument.write(this.source.data + "<script> function printContent() { window.print(); }</script>");
                            this.iframeElement.contentDocument.close();
                        }
                        this.hideLoadingMessage();
                    }
                    hideLoadingMessage() {
                        if (this.m_message != null && this.source.cacheRefreshStatus != Canvas.Core.CachedElementRefreshStatus.Pending) {
                            this.controls.remove(this.m_message);
                        }
                    }
                    showLoadingMessage() {
                        this.hideLoadingMessage();
                        this.m_message = new PDJS.Shared.UI.Controls.LoadingMessageControl({
                            message: "Loading...",
                            margin: parseInt(this.source.borderWidth)
                        });
                        this.controls.add(this.m_message);
                    }
                    menu_init() {
                        if (!this.source.actionMenuVisible) {
                            return;
                        }
                        this.m_menu = new Canvas.Shared.ElementMenu({
                            position: Canvas.Shared.ElementMenuPosition.topRight,
                            visible: true,
                            loaded: () => {
                                this.m_menu.node.css({
                                    backgroundColor: "#FFFFFF",
                                    height: "26px",
                                    width: "26px",
                                    right: 0,
                                    top: 0,
                                    border: "1px solid #CCCCCC"
                                });
                            }
                        });
                        if (this.source.actionMenuRefresh) {
                            this.m_menu.items.add(new Canvas.Shared.ElementMenuItemAction({
                                icon: Jade.IconSet.get("pdjs").resolve("refresh.png", Jade.IconSetSizeSpecificDirectory.x16),
                                label: "Refresh",
                                click: () => {
                                    this.m_menu.popUp.hide();
                                    this.showLoadingMessage();
                                    this.source.getCachedData(true);
                                }
                            }));
                        }
                        if (this.source.actionMenuPrint) {
                            this.m_menu.items.add(new Canvas.Shared.ElementMenuItemAction({
                                icon: Jade.IconSet.get("pdjs").resolve("print.png", Jade.IconSetSizeSpecificDirectory.x16),
                                label: "Print...",
                                click: () => {
                                    this.m_menu.popUp.hide();
                                    setTimeout(() => {
                                        var iframe = window.frames ? window.frames[this.iframeID] : document.getElementById(this.iframeID);
                                        var ifWin = iframe.contentWindow || iframe;
                                        ifWin.focus();
                                        ifWin.printContent();
                                    }, 200);
                                    return false;
                                }
                            }));
                        }
                        if (this.source.actionMenuOpen) {
                            this.m_menu.items.add(new Canvas.Shared.ElementMenuItemAction({
                                label: "Open in new window",
                                click: () => {
                                    this.m_menu.popUp.hide();
                                    setTimeout(() => {
                                        let reportWindow = window.open("", this.ID, "");
                                        reportWindow.document.clear();
                                        reportWindow.document.open();
                                        reportWindow.document.write(this.source.data);
                                        reportWindow.document.close();
                                    }, 100);
                                }
                            }));
                        }
                        this.m_menu.items.add(new Canvas.Shared.ElementMenuItemBoard({
                            content: `<div style="padding:10px;text-align:center;border-top: 1px solid #DDDDDD"><b>Last Updated:</b><br/>${kendo.toString(new Date(this.source.cacheLastUpdated), "g")}</div>`
                        }));
                        this.controls.add(this.m_menu);
                    }
                    informationBar_init() {
                        this.m_informationBar = new Canvas.Shared.ElementBar({
                            showRefresh: this.source.informationBarRefresh,
                            cacheLastUpdated: this.source.cacheLastUpdated,
                            visible: this.source.informationBarVisible,
                            onRefresh: () => {
                                this.showLoadingMessage();
                                this.source.getCachedData(true);
                            }
                        });
                        this.controls.add(this.m_informationBar);
                    }
                }
                Common.Report = Report;
            })(Common = Actual.Common || (Actual.Common = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Common;
            (function (Common) {
                class Text extends Actual.ElementViewBase {
                    get contentNode() {
                        return this.node.find("DIV[role=content]");
                    }
                    get containerNode() {
                        return this.node.find("DIV[role=container]");
                    }
                    template() {
                        return `<div class="${Canvas.Shared.CanvasCss.TextElement}">
                        <div role="container">
                            <div role="content"></div>
                        </div>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        let noBorder = this.source.borderStyle == "none";
                        this.contentNode.css({
                            width: "100%",
                            textAlign: this.source.horizontalAlignment
                        });
                        this.containerNode.css({
                            display: "flex",
                            flexWrap: "wrap",
                            alignItems: this.source.verticalAlignment,
                            position: "absolute",
                            boxSizing: "border-box",
                            maxWidth: "border-box",
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            borderColor: noBorder ? "#DDDDDD" : this.source.borderColor == null ? "transparent" : `${this.source.borderColor}`,
                            borderStyle: noBorder ? "none" : this.source.borderStyle,
                            borderWidth: noBorder ? "1px" : `${this.source.borderWidth}`,
                            paddingTop: this.source.paddingTop == 0 ? 0 : `${this.source.paddingTop}px`,
                            paddingRight: this.source.paddingRight == 0 ? 0 : `${this.source.paddingRight}px`,
                            paddingBottom: this.source.paddingBottom == 0 ? 0 : `${this.source.paddingBottom}px`,
                            paddingLeft: this.source.paddingLeft == 0 ? 0 : `${this.source.paddingLeft}px`,
                            backgroundColor: this.source.backgroundColor == null ? "transparent" : `${this.source.backgroundColor}`
                        });
                        this.contentNode.html(this.source.text);
                    }
                }
                Common.Text = Text;
            })(Common = Actual.Common || (Actual.Common = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                let FormElementBase = class FormElementBase extends Actual.ElementViewBase {
                    constructor(options) {
                        super(options);
                    }
                    get formId() {
                        return this.source.formId;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                    }
                };
                FormElementBase = __decorate([
                    Jade.InterfaceGuard.implement(Canvas.Core.IFocusableGuard)
                ], FormElementBase);
                Forms.FormElementBase = FormElementBase;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class Form {
                    static submit(args) {
                        let buttons = this.getFormButtons(args.document, args.formId);
                        if (buttons.length == 0) {
                            return;
                        }
                        this.setButtonsEnabled(buttons, false);
                        let oldState = CanvasJS.Actual.Environment.document.source.toJSON();
                        args.document.source.saveForm({
                            entityId: args.document.entityId,
                            formButtonId: _.first(buttons).ID,
                            onSuccess: (e) => {
                                Actual.CanvasRefresh.populate(_.extend(e, {
                                    formId: args.formId,
                                    document: e.document
                                }));
                                Forms.FormFieldAnimation.start(args.formId, 1500, Forms.FormFieldAnimationType.success);
                                this.reloadElementStatesAfterPost(oldState);
                                this.setButtonsEnabled(buttons);
                                this.resetFormFieldValueChangedState(args.document, args.formId);
                                if (e.hasScriptAlerts) {
                                    Jade.UI.MultiMessageDialog.open({
                                        dialogStyle: Jade.UI.MessageDialogStyle.Success,
                                        dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                                        title: "Request Success",
                                        header: "The request completed successfully with the following alerts generated by the application:",
                                        messages: e.scriptAlerts,
                                        select: (e) => {
                                            e.close();
                                        }
                                    });
                                }
                            },
                            onValidationError: (e) => {
                                Actual.CanvasRefresh.validate({
                                    validationErrors: e.validationErrors
                                });
                                Forms.FormFieldAnimation.start(args.formId, 1500, Forms.FormFieldAnimationType.error);
                                this.reloadElementStatesAfterPost(oldState);
                                this.setButtonsEnabled(buttons);
                            },
                            onScriptError: (e) => {
                                Forms.FormFieldAnimation.start(args.formId, 1500, Forms.FormFieldAnimationType.error);
                                Jade.UI.MultiMessageDialog.open({
                                    dialogStyle: Jade.UI.MessageDialogStyle.Error,
                                    dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                                    title: "Request Failure",
                                    header: "The request could not be completed due to the following errors:",
                                    messages: e.scriptErrors,
                                    select: (e) => {
                                        e.close();
                                    }
                                });
                                this.setButtonsEnabled(buttons);
                            },
                            onError: () => {
                                Forms.FormFieldAnimation.stop(args.formId);
                                this.setButtonsEnabled(buttons);
                            }
                        });
                    }
                    static getFormButtons(document, formId) {
                        let result = [];
                        document.controls.each((control) => {
                            if (control instanceof Forms.FormButton && control.formId === formId) {
                                result[result.length] = control;
                            }
                        });
                        return result;
                    }
                    static setButtonsEnabled(buttons, enabled = null) {
                        _.each(buttons, (view) => {
                            view.buttonNode.prop("disabled", enabled !== null ? !enabled : !view.source.activeEnabledState);
                        });
                    }
                    static resetFormFieldValueChangedState(document, formId) {
                        document.controls.each((control) => {
                            if (control instanceof Forms.FormField && control.formId === formId) {
                                control.source.valueChanged = false;
                            }
                        });
                        Jade.Application
                            .instance
                            .contexts
                            .current
                            .events
                            .publish("canvas/form/reset", {
                            formId: formId
                        });
                    }
                    static reloadElementStatesAfterPost(oldState) {
                        let oldDocument = new Canvas.Core.Documents.ActualDocument(oldState);
                        let newDocument = CanvasJS.Actual.Environment.document.source;
                        let oldModels = {};
                        oldDocument.elements.each((oldModel) => {
                            if (oldModel.reloadModelAfterPost) {
                                oldModels[oldModel.id] = oldModel;
                            }
                        });
                        newDocument.elements.each((newModel) => {
                            if (newModel.reloadModelAfterPost) {
                                let oldModel = oldModels[newModel.id];
                                if (oldModel != null) {
                                    newModel.reloadModel(oldModel);
                                }
                            }
                        });
                    }
                }
                Forms.Form = Form;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class FormButton extends Forms.FormElementBase {
                    get buttonNode() {
                        return this.node.find("button");
                    }
                    get acceptsFocus() {
                        return this.source.activeEnabledState;
                    }
                    template() {
                        return `<button style="height:100%;width:100%;box-sizing:border-box;" tabIndex="${this.source.activeTabIndex}">${this.source.label}</button>`;
                    }
                    focus() {
                        this.buttonNode.focus();
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.buttonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.onClick, this));
                        if (this.source.hasTooltip) {
                            Tipped.create(this.node, this.source.tooltip, {
                                skin: "white",
                                showOn: "mouseenter",
                                hideOn: false,
                                hideAfter: 200,
                                hideDelay: 0,
                                maxWidth: 300
                            });
                        }
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.buttonNode.prop("disabled", !this.source.activeEnabledState);
                    }
                    onDestroy(e) {
                        super.onDestroy(e);
                        Tipped.remove(this.node);
                    }
                    onClick(e) {
                        Tipped.hide(this.node.get(0));
                        this.signalSubmit();
                        this.submit();
                    }
                    signalSubmit() {
                        CanvasJS.Actual.Environment
                            .document
                            .controls
                            .each((element) => {
                            if (element instanceof Forms.FormField && element.formId == this.formId) {
                                element.onSubmit();
                            }
                        });
                        Forms.FormFieldAnimation.start(this.source.formId, 0, Forms.FormFieldAnimationType.pending);
                    }
                    submit() {
                        Forms.Form.submit({
                            document: CanvasJS.Actual.Environment.document,
                            formId: this.formId
                        });
                    }
                }
                Forms.FormButton = FormButton;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class FormField extends Forms.FormElementBase {
                    constructor() {
                        super(...arguments);
                        this.m_validationErrors = new Jade.ObservableCollection(null, {
                            onAfterAdd: (e) => {
                                this.onValidationErrorChange();
                            },
                            onAfterRemove: (e) => {
                                this.onValidationErrorChange();
                            }
                        });
                    }
                    get formId() {
                        return this.source.formId;
                    }
                    get validationErrors() {
                        return this.m_validationErrors;
                    }
                    get labelNode() {
                        return this.formFieldNode.children("div[role=label]");
                    }
                    get controlNode() {
                        return this.formFieldNode.children("div[role=control]");
                    }
                    get deck() {
                        return this.m_deck;
                    }
                    get formFieldNode() {
                        return this.node.find(`.${Canvas.Shared.CanvasCss.FormField}`);
                    }
                    get acceptsFocus() {
                        return this.source.activeEnabledState;
                    }
                    focus() {
                    }
                    onSubmit() {
                    }
                    template() {
                        return `<div class="${Canvas.Shared.CanvasCss.FormField}">
                        <div role="label">${this.source.activeLabel}:</div>
                        <div role="control" data-controls>
                        </div>
                    </div>`;
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.deck_init();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.labelNode.text(`${this.source.activeLabel}:`);
                        this.labelNode.css({
                            color: this.source.activeLabelColor
                        });
                        if (this.source.activeEnabledState) {
                            this.formFieldNode.removeClass(PDJS.Shared.UI.CssClass.Disabled);
                        }
                        else {
                            this.formFieldNode.addClass(PDJS.Shared.UI.CssClass.Disabled);
                        }
                    }
                    onValidationErrorChange() {
                        if (this.validationErrors.count > 0) {
                            let errors = `<div>${this.validationErrors.toArray().join("<br/>")}</div>`;
                            Tipped.create(this.labelNode, errors, {
                                skin: "validation-error"
                            });
                            this.node.addClass("-pdjs-validation-errors");
                            this.labelNode.css({
                                backgroundImage: `url(${Jade.IconSet.get("pdjs").resolve("sign_warning.png", Jade.IconSetSizeSpecificDirectory.x16)})`
                            });
                        }
                        else {
                            Tipped.remove(this.labelNode);
                            this.node.removeClass("-pdjs-validation-errors");
                            this.labelNode.css({
                                backgroundImage: ""
                            });
                        }
                    }
                    deck_init() {
                        this.m_deck = new Forms.FormFieldDeck({
                            insertAt: `.${Canvas.Shared.CanvasCss.FormField}`
                        });
                        this.controls.add(this.m_deck);
                        this.deck.controls.add(new Forms.FormFieldToolTip({
                            formField: this
                        }));
                    }
                }
                Forms.FormField = FormField;
                class FormFieldBase extends FormField {
                    get source() {
                        return this.m_source;
                    }
                }
                Forms.FormFieldBase = FormFieldBase;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class BuiltInField extends Forms.FormFieldBase {
                }
                Forms.BuiltInField = BuiltInField;
                class BuildInFieldBase extends BuiltInField {
                    get source() {
                        return this.m_source;
                    }
                }
                Forms.BuildInFieldBase = BuildInFieldBase;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class ExtensionField extends Forms.FormFieldBase {
                    onActivate(e) {
                        super.onActivate(e);
                        this.source.inBatchMode = CanvasJS
                            .Actual
                            .Environment
                            .document
                            .state
                            .get("isBatchMode");
                        this.deck.controls.add(new Forms.FormFieldBatchEdit({
                            extensionField: this
                        }));
                    }
                }
                Forms.ExtensionField = ExtensionField;
                class ExtensionFieldBase extends ExtensionField {
                    get source() {
                        return this.m_source;
                    }
                }
                Forms.ExtensionFieldBase = ExtensionFieldBase;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class EntityDescriptionField extends Forms.BuildInFieldBase {
                    get inputNode() {
                        return this.node.find("textarea");
                    }
                    onAttach(e) {
                        super.onAttach(e);
                        this.formFieldNode.addClass(Canvas.Shared.CanvasCss.StringField);
                        this.controlNode.append(`<textarea 
                                        tabIndex="${this.source.activeTabIndex}"
                                        class="${Canvas.Shared.CanvasCss.FormFieldAnimationTarget}" 
                                        style="overflow-y:scroll;">
                                        ${this.source.value}
                                    </textarea>`);
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.inputNode.on(Jade.BrowserEvent.BLUR, _.bind(this.input_onBlur, this));
                        this.inputNode.val(this.source.value);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        if (this.source.activeEnabledState) {
                            this.inputNode.removeAttr("disabled");
                        }
                        else {
                            this.inputNode.attr("disabled", "disabled");
                        }
                    }
                    focus() {
                        this.inputNode.focus();
                    }
                    input_onBlur(e) {
                        this.source.value = this.inputNode.val();
                    }
                }
                Forms.EntityDescriptionField = EntityDescriptionField;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class EntityIconField extends Forms.BuildInFieldBase {
                    get comboBox() {
                        return this.m_comboBox;
                    }
                    focus() {
                        this.comboBox.focusMask();
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.comboBox_init();
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        if (this.source.value != null) {
                            this.comboBox.selection = {
                                icon: this.source.value,
                                name: this.source.value.replace("_", " ")
                            };
                        }
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.comboBox.enabled = this.source.activeEnabledState;
                        this.comboBox.tabIndex = this.source.activeTabIndex;
                    }
                    comboBox_init() {
                        this.m_comboBox = new Canvas.Shared.Forms.EntityIconFieldComboBox({
                            defaultMask: "Select...",
                            mode: PDJS.Shared.UI.Controls.ComboBoxMode.PopUp,
                            onSelectionChanged: (e) => {
                                this.source.value = e != null ? e.icon : null;
                            }
                        });
                        this.controls.add(this.m_comboBox);
                    }
                }
                Forms.EntityIconField = EntityIconField;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class EntityNameField extends Forms.BuildInFieldBase {
                    get inputNode() {
                        return this.node.find("input[type=text]");
                    }
                    focus() {
                        this.inputNode.focus();
                    }
                    onAttach(e) {
                        super.onAttach(e);
                        this.formFieldNode.addClass(Canvas.Shared.CanvasCss.StringField);
                        this.controlNode.append(`<input 
                                        type="text"
                                        value="${this.source.value}" 
                                        tabIndex="${this.source.activeTabIndex}"
                                        class="${Canvas.Shared.CanvasCss.FormFieldAnimationTarget}" />`);
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.inputNode.on(Jade.BrowserEvent.BLUR, _.bind(this.input_onBlur, this));
                        this.inputNode.val(this.source.value);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        if (this.source.activeEnabledState) {
                            this.inputNode.removeAttr("disabled");
                        }
                        else {
                            this.inputNode.attr("disabled", "disabled");
                        }
                    }
                    input_onBlur(e) {
                        this.source.value = this.inputNode.val();
                    }
                }
                Forms.EntityNameField = EntityNameField;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class EntityParentField extends Forms.BuildInFieldBase {
                    get comboBox() {
                        return this.m_comboBox;
                    }
                    get navigate() {
                        return this.m_navigate;
                    }
                    focus() {
                        this.comboBox.showText();
                        this.comboBox.focusText();
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.comboBox_init();
                        this.navigate_init();
                        this.subscriptions.add("entityParentRequested", () => {
                            this.publishEntityParentChangedEvent();
                        });
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        if (this.source.parentId != null) {
                            this.comboBox.selection = {
                                entityID: this.source.parentId,
                                entityName: this.source.parentName,
                                entityTypeIcon: this.source.parentTypeIcon,
                                entityTypeName: this.source.parentTypeName,
                                entityTypeId: null
                            };
                        }
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.comboBox.enabled = this.source.activeEnabledState;
                        this.navigate.entityId = this.source.parentId;
                        this.navigate.entityName = this.source.parentName;
                        this.comboBox.tabIndex = this.source.activeTabIndex;
                    }
                    comboBox_init() {
                        this.m_comboBox = new Canvas.Shared.Forms.EntityParentFieldComboBox({
                            defaultMask: "Select...",
                            entityTypeId: this.source.entityTypeId,
                            mode: PDJS.Shared.UI.Controls.ComboBoxMode.PopUp,
                            onSelectionChanged: (selection) => {
                                this.source.parentId = selection != null ? selection.entityID : null;
                                this.source.parentName = selection != null ? selection.entityName : "";
                                this.publishEntityParentChangedEvent();
                            }
                        });
                        this.controls.add(this.m_comboBox);
                    }
                    navigate_init() {
                        this.m_navigate = new Canvas.Shared.Forms.NavigateLink({});
                        this.controls.add(this.m_navigate);
                    }
                    publishEntityParentChangedEvent() {
                        CanvasJS
                            .Actual
                            .Environment
                            .events
                            .publish("entityParentChanged", {
                            parentId: this.source.parentId,
                            entityTypeId: this.source.entityTypeId
                        });
                    }
                }
                Forms.EntityParentField = EntityParentField;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class EntityProcessField extends Forms.BuildInFieldBase {
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_assignment = new Canvas.Shared.Forms.EntityProcessField({
                            tabIndex: this.source.activeTabIndex,
                            entityTypeId: this.source.entityTypeId,
                            keyIcon: this.source.keyIcon,
                            keyName: this.source.keyName,
                            processName: this.source.processName,
                            stageId: this.source.stageId,
                            stageName: this.source.stageName,
                            stageIcon: this.source.stageIcon,
                            statusId: this.source.statusId,
                            statusName: this.source.statusName,
                            statusIcon: this.source.statusIcon,
                            showKey: this.source.showKey,
                            showProcess: this.source.showProcess,
                            showStage: this.source.showStage,
                            showStatus: this.source.showStatus,
                            onChange: () => {
                                this.source.stageId = this.m_assignment.stageId;
                                this.source.statusId = this.m_assignment.statusId;
                            }
                        });
                        this.controls.add(this.m_assignment);
                    }
                }
                Forms.EntityProcessField = EntityProcessField;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class BooleanField extends Forms.ExtensionFieldBase {
                    get itemLabelNode() {
                        return this.controlNode.find("div[role=input-label]");
                    }
                    get checkboxNode() {
                        return this.controlNode.find("input[type=checkbox]");
                    }
                    focus() {
                        this.checkboxNode.focus();
                    }
                    onAttach(e) {
                        super.onAttach(e);
                        this.formFieldNode.addClass(Canvas.Shared.CanvasCss.BooleanField);
                        this.controlNode.append(`<label class="${Canvas.Shared.CanvasCss.FormFieldAnimationTarget}">
                                        <input type="checkbox" tabIndex="${this.source.activeTabIndex}" />
                                        <div role="input-label">
                                            ${this.source.itemLabel}
                                        </div>
                                    </label>`);
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        let iconPath = null;
                        if (this.source.itemIcon != null) {
                            iconPath = Jade.IconSet.get("pd")
                                .resolve(this.source.itemIcon, Jade.IconSetSizeSpecificDirectory.x16);
                            this.itemLabelNode.css({
                                paddingLeft: "24px",
                                backgroundImage: `url(${iconPath})`,
                                backgroundRepeat: "no-repeat",
                                backgroundPosition: "3px 3px"
                            });
                        }
                        else {
                            this.itemLabelNode.css({
                                paddingLeft: "4px"
                            });
                        }
                        this.checkboxNode.prop("checked", this.source.value);
                        this.checkboxNode.on(Jade.BrowserEvent.CLICK, (e) => {
                            this.source.value = this.checkboxNode.prop("checked");
                        });
                        this.checkboxNode.on(Jade.BrowserEvent.FOCUS, (e) => {
                            this.controlNode.addClass(Canvas.Shared.CanvasCss.FormFieldFocus);
                        });
                        this.checkboxNode.on(Jade.BrowserEvent.BLUR, (e) => {
                            this.controlNode.removeClass(Canvas.Shared.CanvasCss.FormFieldFocus);
                        });
                        this.formFieldNode.addClass(Canvas.Shared.CanvasCss.BooleanField);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.checkboxNode.prop("disabled", !this.source.activeEnabledState);
                    }
                }
                Forms.BooleanField = BooleanField;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class DateField extends Forms.ExtensionFieldBase {
                    get format() {
                        return this.source.format || this.source.columnFormat;
                    }
                    focus() {
                        this.m_dateTextBox.maskNode.focus();
                    }
                    onSubmit() {
                        this.validationErrors.clear();
                        this.source.value = this.m_dateTextBox.value;
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.m_dateTextBox = new PDJS.Shared.UI.Controls.DateTextBox({
                            insertAt: "[role=control]",
                            format: this.format,
                            onChange: (e) => {
                                this.source.value = e.value;
                            }
                        });
                        this.controls.add(this.m_dateTextBox);
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_dateTextBox.setValue(this.source.value);
                        this.m_dateTextBox.tabIndex = this.source.activeTabIndex;
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.m_dateTextBox.enabled = this.source.activeEnabledState;
                    }
                }
                Forms.DateField = DateField;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class DecimalField extends Forms.ExtensionFieldBase {
                    get textBox() {
                        return this.m_numericTextBox;
                    }
                    focus() {
                        this.m_numericTextBox.focusText();
                        this.m_numericTextBox.showText();
                    }
                    onSubmit() {
                        this.validationErrors.clear();
                        this.source.value = this.textBox.getValue();
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.m_numericTextBox = new PDJS.Shared.UI.Controls.NumericTextBox({
                            insertAt: "[role=control]",
                            numericType: PDJS.Shared.UI.Controls.NumericTextBoxType.decimal,
                            format: this.source.activeFormat,
                            onValidate: _.bind((isValid) => {
                                this.onSubmit();
                            }, this)
                        });
                        this.controls.add(this.m_numericTextBox);
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.textBox.setValue(this.source.value);
                        this.textBox.tabIndex = this.source.activeTabIndex;
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.textBox.enabled = this.source.activeEnabledState;
                    }
                }
                Forms.DecimalField = DecimalField;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class EntityField extends Forms.ExtensionFieldBase {
                    get comboBox() {
                        return this.m_comboBox;
                    }
                    get navigate() {
                        return this.m_navigate;
                    }
                    focus() {
                        this.comboBox.focusMask();
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.comboBox_init();
                        this.navigate_init();
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        if (this.source.entityId != null) {
                            this.comboBox.selection = {
                                entityID: this.source.entityId,
                                entityName: this.source.entityName,
                                entityTypeIcon: this.source.entityTypeIcon,
                                entityTypeName: this.source.entityTypeName
                            };
                        }
                        this.comboBox.tabIndex = this.source.activeTabIndex;
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.comboBox.enabled = this.source.activeEnabledState;
                        this.navigate.entityId = this.source.entityId;
                        this.navigate.entityName = this.source.entityName;
                    }
                    comboBox_init() {
                        this.m_comboBox = new Canvas.Shared.Forms.EntityFieldComboBox({
                            defaultMaskText: "Select...",
                            viewId: this.source.viewId,
                            viewStateId: this.source.viewStateId,
                            mode: PDJS.Shared.UI.Controls.ComboBoxMode.PopUp,
                            onSelectionChanged: (selection) => {
                                this.source.entityId = selection != null ? selection.entityID : null;
                                this.source.entityName = selection != null ? selection.entityName : "";
                            }
                        });
                        this.controls.add(this.m_comboBox);
                    }
                    navigate_init() {
                        this.m_navigate = new Canvas.Shared.Forms.NavigateLink({});
                        this.controls.add(this.m_navigate);
                    }
                }
                Forms.EntityField = EntityField;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class Int32Field extends Forms.ExtensionFieldBase {
                    get format() {
                        return this.source.format || this.source.columnFormat;
                    }
                    get originalValue() {
                        return this.state.get("originalValue");
                    }
                    set originalValue(value) {
                        this.state.set("originalValue", value);
                    }
                    focus() {
                        this.m_numericTextBox.focusText();
                        this.m_numericTextBox.showText();
                    }
                    onSubmit() {
                        this.validationErrors.clear();
                        this.source.value = this.m_numericTextBox.getValue();
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.m_numericTextBox = new PDJS.Shared.UI.Controls.NumericTextBox({
                            insertAt: "[role=control]",
                            numericType: PDJS.Shared.UI.Controls.NumericTextBoxType.integer,
                            format: this.format,
                            onValidate: _.bind((isValid) => {
                                this.onSubmit();
                            }, this)
                        });
                        this.controls.add(this.m_numericTextBox);
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_numericTextBox.setValue(this.source.value);
                        this.m_numericTextBox.tabIndex = this.source.activeTabIndex;
                        this.originalValue = this.source.value;
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.m_numericTextBox.enabled = this.source.activeEnabledState;
                    }
                }
                Forms.Int32Field = Int32Field;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class Int64Field extends Forms.ExtensionFieldBase {
                    focus() {
                        this.m_numericTextBox.focusText();
                        this.m_numericTextBox.showText();
                    }
                    onSubmit() {
                        this.validationErrors.clear();
                        this.source.value = this.m_numericTextBox.getValue();
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.m_numericTextBox = new PDJS.Shared.UI.Controls.NumericTextBox({
                            insertAt: "[role=control]",
                            numericType: PDJS.Shared.UI.Controls.NumericTextBoxType.integer,
                            format: this.source.activeFormat,
                            onValidate: _.bind((isValid) => {
                                this.onSubmit();
                            }, this)
                        });
                        this.controls.add(this.m_numericTextBox);
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_numericTextBox.setValue(this.source.value);
                        this.m_numericTextBox.tabIndex = this.source.activeTabIndex;
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.m_numericTextBox.enabled = this.source.activeEnabledState;
                    }
                }
                Forms.Int64Field = Int64Field;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class MultiSelectField extends Forms.ExtensionFieldBase {
                    get multiSelect() {
                        return this.m_multiSelect;
                    }
                    focus() {
                        this.multiSelect.focus();
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.init_multiSelect();
                    }
                    onAttach(e) {
                        this.controlNode.addClass(Canvas.Shared.CanvasCss.FormFieldAnimationTarget);
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.controlNode.on(Jade.BrowserEvent.FOCUS, (e) => {
                            this.controlNode.addClass(Canvas.Shared.CanvasCss.FormFieldFocus);
                        });
                        this.controlNode.on(Jade.BrowserEvent.BLUR, (e) => {
                            this.controlNode.removeClass(Canvas.Shared.CanvasCss.FormFieldFocus);
                        });
                        this.multiSelect.items.each((item) => {
                            item.checked = this.source.value.indexOf(item.itemId) > -1;
                        });
                        this.multiSelect.node.addClass(Canvas.Shared.CanvasCss.FormFieldAnimationTarget);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.multiSelect.enabled = this.source.activeEnabledState;
                        this.multiSelect.tabIndex = this.source.activeTabIndex;
                    }
                    init_multiSelect() {
                        this.m_multiSelect = new PDJS.Shared.UI.Controls.MultiSelect({
                            onItemChecked: (e) => {
                                this.source.value = [];
                                this.multiSelect.items.each((item) => {
                                    if (item.checked) {
                                        this.source.value[this.source.value.length] = item.itemId;
                                    }
                                });
                            }
                        });
                        this.controls.add(this.m_multiSelect);
                        _.each(this.source.items, (item) => {
                            this.multiSelect.controls.add(new PDJS.Shared.UI.Controls.MultiSelectItem({
                                itemId: item.id,
                                label: item.label,
                                icon: item.icon
                            }));
                        });
                    }
                }
                Forms.MultiSelectField = MultiSelectField;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class SingleSelectField extends Forms.ExtensionFieldBase {
                    focus() {
                        this.m_comboBox.focusMask();
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.comboBox_init();
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        let selectedItem = this.source.getSelectedItem();
                        this.m_comboBox.selection = selectedItem;
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.m_comboBox.enabled = this.source.activeEnabledState;
                        this.m_comboBox.tabIndex = this.source.activeTabIndex;
                    }
                    comboBox_init() {
                        this.m_comboBox = new PDJS.Shared.UI.Controls.SingleSelectList({
                            defaultMask: "Select...",
                            data: this.source.items,
                            onCreateListItem(e) {
                                return new PDJS.Shared.UI.Controls.SingleSelectListItem({
                                    data: e
                                });
                            },
                            onSelectionChanged: (selection) => {
                                if (selection != null) {
                                    this.source.selectedId = selection.id;
                                }
                                else {
                                    this.source.selectedId = null;
                                }
                            }
                        });
                        this.controls.add(this.m_comboBox);
                    }
                }
                Forms.SingleSelectField = SingleSelectField;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class StringField extends Forms.ExtensionFieldBase {
                    get inputNode() {
                        return this.source.multiLine ? this.textareaNode : this.textNode;
                    }
                    get textareaNode() {
                        return this.controlNode.children("textarea[role=text]");
                    }
                    get textNode() {
                        return this.controlNode.children("input[role=text]");
                    }
                    focus() {
                        this.inputNode.focus();
                    }
                    onAttach(e) {
                        super.onAttach(e);
                        this.formFieldNode.addClass(Canvas.Shared.CanvasCss.StringField);
                        this.controlNode.append(`
                <textarea
                    role="text"
                    tabIndex="${this.source.activeTabIndex}"
                    class="${Canvas.Shared.CanvasCss.FormFieldAnimationTarget}"
                    style="overflow-y:scroll;">
                    </textarea>
                <input
                    role="text"
                    type="text"
                    tabIndex="${this.source.activeTabIndex}"
                    class="${Canvas.Shared.CanvasCss.FormFieldAnimationTarget}" />
            `);
                        if (this.source.multiLine) {
                            this.textNode.hide();
                        }
                        else {
                            this.textareaNode.hide();
                        }
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.controlNode.on(Jade.BrowserEvent.BLUR, "[role=text]", _.bind(this.input_onBlur, this));
                        this.controlNode.on(Jade.BrowserEvent.FOCUS, "[role=text]", _.bind(this.input_onFocus, this));
                        this.inputNode.val(this.source.value);
                    }
                    onSubmit() {
                        this.source.value = this.inputNode.val();
                        this.validationErrors.clear();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.controlNode.addClass(this.source.multiLine ? "multiline" : "singleline");
                        this.controlNode.removeClass(this.source.multiLine ? "singleline" : "multiline");
                        this.inputNode.val(this.source.value);
                        if (this.source.activeEnabledState) {
                            this.inputNode.removeAttr("disabled");
                        }
                        else {
                            this.inputNode.attr("disabled", "disabled");
                        }
                    }
                    input_onBlur(e) {
                        this.source.value = this.inputNode.val();
                        this.inputNode.removeClass(Canvas.Shared.CanvasCss.FormFieldFocus);
                    }
                    input_onFocus(e) {
                        this.inputNode.addClass(Canvas.Shared.CanvasCss.FormFieldFocus);
                    }
                }
                Forms.StringField = StringField;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class UserField extends Forms.ExtensionFieldBase {
                    get comboBox() {
                        return this.m_comboBox;
                    }
                    focus() {
                        this.comboBox.focusMask();
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.comboBox_init();
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        if (this.source.userId != null) {
                            this.comboBox.selection = {
                                userID: this.source.userId,
                                userName: this.source.userName
                            };
                        }
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.m_comboBox.enabled = this.source.activeEnabledState;
                        this.m_comboBox.tabIndex = this.source.activeTabIndex;
                    }
                    comboBox_init() {
                        this.m_comboBox = new Canvas.Shared.Forms.UserFieldComboBox({
                            defaultMaskText: "Select...",
                            viewId: this.source.viewId,
                            viewStateId: this.source.viewStateId,
                            mode: PDJS.Shared.UI.Controls.ComboBoxMode.PopUp,
                            onSelectionChanged: (selection) => {
                                this.source.userId = selection != null ? this.m_comboBox.selection.userID : null;
                            }
                        });
                        this.controls.add(this.m_comboBox);
                    }
                }
                Forms.UserField = UserField;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                let FormFieldAnimationType;
                (function (FormFieldAnimationType) {
                    FormFieldAnimationType["none"] = "";
                    FormFieldAnimationType["pending"] = "-pdjs-form-submit-pending";
                    FormFieldAnimationType["error"] = "-pdjs-form-submit-error";
                    FormFieldAnimationType["success"] = "-pdjs-form-submit-success";
                })(FormFieldAnimationType = Forms.FormFieldAnimationType || (Forms.FormFieldAnimationType = {}));
                class FormFieldAnimation {
                    static start(formId, autoStop, animation = FormFieldAnimationType.none) {
                        this.iterateFormFields(formId, (field) => {
                            field.node.removeClass(FormFieldAnimationType.error);
                            field.node.removeClass(FormFieldAnimationType.success);
                            field.node.removeClass(FormFieldAnimationType.pending);
                            if (animation != FormFieldAnimationType.none) {
                                field.node.addClass(animation);
                            }
                        });
                        if (autoStop > 0) {
                            Jade.ContextManager.setTimeout(() => {
                                this.stop(formId, animation);
                            }, autoStop);
                        }
                    }
                    static stop(formId, animation = FormFieldAnimationType.none) {
                        if (animation == FormFieldAnimationType.pending) {
                            return;
                        }
                        this.iterateFormFields(formId, (element) => {
                            element.node.removeClass(FormFieldAnimationType.error);
                            element.node.removeClass(FormFieldAnimationType.success);
                            element.node.removeClass(FormFieldAnimationType.pending);
                        });
                    }
                    static iterateFormFields(formId, callback) {
                        if (CanvasJS.Actual.Environment.document == null) {
                            return;
                        }
                        CanvasJS.Actual.Environment.document.controls.each((element) => {
                            if (element instanceof Forms.FormField && element.formId == formId) {
                                if (_.isFunction(callback)) {
                                    callback(element);
                                }
                            }
                        });
                    }
                }
                Forms.FormFieldAnimation = FormFieldAnimation;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class FormFieldDeckItem extends Jade.UI.Control {
                }
                Forms.FormFieldDeckItem = FormFieldDeckItem;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class FormFieldBatchEdit extends Forms.FormFieldDeckItem {
                    constructor(options) {
                        super(options);
                    }
                    get extensionField() {
                        return this.state.get("extensionField");
                    }
                    get checkBoxNode() {
                        return this.node.find("input");
                    }
                    get inBatch() {
                        return this.checkBoxNode.is(":checked");
                    }
                    get isVisible() {
                        return !this.extensionField.source.isDisabled
                            && !this.extensionField.source.isReadOnly
                            && this.extensionField.source.inBatchMode;
                    }
                    template() {
                        return `<div class="-pd-form-field-deck-item" style="padding-top:7px;cursor:pointer;"><input type='checkbox'/></div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        if (this.isVisible) {
                            this.node.show();
                        }
                        else {
                            this.node.hide();
                        }
                        this.checkBoxNode.on("click", _.bind(this.checkBox_onClick, this));
                    }
                    checkBox_onClick(e) {
                        this.extensionField.source.inBatch = this.inBatch;
                    }
                }
                Forms.FormFieldBatchEdit = FormFieldBatchEdit;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class FormFieldDeck extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    template() {
                        return `<div class="-pd-form-field-deck"></div>`;
                    }
                }
                Forms.FormFieldDeck = FormFieldDeck;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class FormFieldToolTip extends Forms.FormFieldDeckItem {
                    constructor(options) {
                        super(options);
                    }
                    get formField() {
                        return this.state.get("formField");
                    }
                    template() {
                        let tooltipIcon = Jade.IconSet.get("pdjs")
                            .resolve("question.png", Jade.IconSetSizeSpecificDirectory.x16);
                        return `<div class="-pd-form-field-deck-item" style="padding: 5px 1px 2px 1px;cursor:pointer;"><img src='${tooltipIcon}'/></div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        if (this.formField.source.hasTooltip) {
                            this.node.show();
                            Tipped.create(this.node, this.formField.source.tooltip, {
                                skin: "white",
                                showOn: "mouseenter",
                                hideOn: false,
                                hideAfter: 200,
                                hideDelay: 0,
                                maxWidth: 300
                            });
                        }
                        else {
                            this.node.hide();
                        }
                    }
                    onDestroy(e) {
                        super.onDestroy(e);
                        Tipped.remove(this.node);
                    }
                }
                Forms.FormFieldToolTip = FormFieldToolTip;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class FormFieldValidation {
                    static start(formId, autoStop, animation = Forms.FormFieldAnimationType.none) {
                        this.iterateFormFields(formId, (element) => {
                            element.node.removeClass(Forms.FormFieldAnimationType.error);
                            element.node.removeClass(Forms.FormFieldAnimationType.success);
                            element.node.removeClass(Forms.FormFieldAnimationType.pending);
                            if (animation != Forms.FormFieldAnimationType.none) {
                                element.node.addClass(animation);
                            }
                        });
                        if (autoStop > 0) {
                            setTimeout(() => {
                                this.stop(formId, animation);
                            }, autoStop);
                        }
                    }
                    static stop(formId, animation = Forms.FormFieldAnimationType.none) {
                        if (animation == Forms.FormFieldAnimationType.pending) {
                            return;
                        }
                        this.iterateFormFields(formId, (element) => {
                            element.node.removeClass(Forms.FormFieldAnimationType.error);
                            element.node.removeClass(Forms.FormFieldAnimationType.success);
                            element.node.removeClass(Forms.FormFieldAnimationType.pending);
                        });
                    }
                    static iterateFormFields(formId, callback) {
                        CanvasJS.Actual.Environment.document.controls.each((element) => {
                            if (element instanceof Forms.FormField && element.formId == formId) {
                                if (_.isFunction(callback)) {
                                    callback(element);
                                }
                            }
                        });
                    }
                }
                Forms.FormFieldValidation = FormFieldValidation;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class BatchField extends Forms.FormFieldBase {
                    get batch() {
                        return this.m_batch;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.formFieldNode.addClass(Canvas.Shared.CanvasCss.BatchField);
                        this.batch_init();
                    }
                    focus() {
                        this.batch.focus();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        if (!Jade.String.isNullOrWhiteSpace(this.source.filterTerm)) {
                            this.batch.filter.mask.showText();
                        }
                        if (this.source.isReloadingModel) {
                            this.batch.reload(this.source.listItems, this.source.filterTerm);
                        }
                    }
                    batch_init() {
                        let filters = [];
                        if (this.source.entityId != null) {
                            filters[filters.length] = PDJS.Core.Views.EntityFilter.descendantsOnly(this.source.entityId);
                        }
                        this.m_batch = new PDJS.Shared.UI.Controls.BatchField({
                            dialogViewStateId: this.source.viewStateId,
                            dialogTitle: this.source.dialogTitle,
                            dialogHeight: this.source.dialogHeight,
                            dialogWidth: this.source.dialogWidth,
                            dialogFilters: filters,
                            showCheckboxes: this.source.showCheckboxes,
                            change: (items) => {
                                this.source.listItems.splice(0, this.source.listItems.length);
                                items.forEach((item) => {
                                    this.source.listItems[this.source.listItems.length] = item;
                                });
                                this.source.filterTerm = this.batch.filter.value;
                            }
                        });
                        this.controls.add(this.batch);
                    }
                }
                Forms.BatchField = BatchField;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class BatchFieldDialog extends Jade.UI.Dialog {
                    get filters() {
                        return this.state.get("filters", []);
                    }
                    get viewStateId() {
                        return this.state.get("viewStateId", null);
                    }
                    set viewStateId(value) {
                        this.state.set("viewStateId", value);
                    }
                    get okButtonNode() {
                        return this.node.find("button[data-command=ok]");
                    }
                    get cancelButtonNode() {
                        return this.node.find("button[data-command=cancel]");
                    }
                    get selections() {
                        return this.m_grid.getSelections().toArray();
                    }
                    template() {
                        return `
            <div style="position:absolute;top:10px;left:10px;right:10px;bottom:10px;box-sizing:border-box;">
                <div data-role="grid" style="position:absolute;top:0;left:0;right:0;bottom:34px;border:1px solid #AAAAAA;">
                    
                </div>
                <div style="position:absolute;height:26px;bottom:0;left:0;right:0;text-align:right;">
                    <button data-command="ok" class="-jadejs-button">OK</button>
                    <button data-command="cancel" class="-jadejs-button">Cancel</button>
                </div>
            </div>
            `;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.grid_init();
                        this.okButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.okButton_onClick, this));
                        this.cancelButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.cancelButton_onClick, this));
                    }
                    static open(options, windowOptions) {
                        return new BatchFieldDialog(options, windowOptions);
                    }
                    grid_init() {
                        this.m_grid = new PD.Web.UI.Controls.ViewGrid({
                            container: this.node.find("[data-role=grid]"),
                            selectionMode: "multiple",
                            viewStateId: this.viewStateId,
                            selectOnRightClick: false,
                            defaultSelectionEnabled: true,
                            selection: {
                                map: (e) => {
                                    return _.map(e.selections.toArray(), (item, index) => {
                                        return {
                                            id: item.ObjectId,
                                            name: item.ObjectName,
                                            type: item.ObjectType
                                        };
                                    });
                                }
                            },
                            dblclick: (e) => {
                                this.closeAndReturn();
                            },
                            needContext: (e) => {
                                _.each(this.filters, (item) => {
                                    e.filters[e.filters.length] = item.toJSON();
                                });
                            }
                        });
                    }
                    okButton_onClick(e) {
                        this.closeAndReturn();
                    }
                    cancelButton_onClick(e) {
                        this.close();
                    }
                    closeAndReturn() {
                        if (this.selections.length > -1) {
                            this.close({
                                command: "ok",
                                data: this.selections
                            });
                        }
                        else {
                            Jade.UI.MessageDialog.open({
                                dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                                dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                                title: "No Item Selected",
                                message: "No item has been selected. Select an item and try again.",
                                select: (e) => {
                                    e.close();
                                }
                            });
                        }
                    }
                }
                Forms.BatchFieldDialog = BatchFieldDialog;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Forms;
            (function (Forms) {
                class TextField extends Forms.FormFieldBase {
                    get inputNode() {
                        return this.node.find("[role=text]");
                    }
                    onAttach(e) {
                        super.onAttach(e);
                        this.controlNode.append(this.createInput());
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.formFieldNode.addClass(Canvas.Shared.CanvasCss.StringField);
                        this.inputNode.val(this.source.value);
                    }
                    focus() {
                        this.inputNode.focus();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.controlNode.html(this.createInput());
                        this.controlNode.addClass(this.source.multiLine ? "multiline" : "singleline");
                        this.controlNode.removeClass(this.source.multiLine ? "singleline" : "multiline");
                        if (this.source.activeEnabledState) {
                            this.inputNode.removeAttr("disabled");
                        }
                        else {
                            this.inputNode.attr("disabled", "disabled");
                        }
                        if (!Jade.String.isNullOrWhiteSpace(this.source.value)) {
                            this.inputNode.val(this.source.value);
                        }
                    }
                    createInput() {
                        let result = "";
                        let cssClass = Canvas.Shared.CanvasCss.FormFieldAnimationTarget;
                        if (this.source.multiLine) {
                            result = `<textarea role="text" tabIndex="${this.source.activeTabIndex}" class="${cssClass}" style="overflow-y:scroll;"></textarea>`;
                        }
                        else {
                            result = `<input role="text" type="text"  tabIndex="${this.source.activeTabIndex}" class="${cssClass}" />`;
                        }
                        return result;
                    }
                    onSubmit() {
                        this.source.value = this.inputNode.val();
                        this.validationErrors.clear();
                    }
                }
                Forms.TextField = TextField;
            })(Forms = Actual.Forms || (Actual.Forms = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Process;
            (function (Process) {
                class ProcessDecisions extends Actual.ElementViewBase {
                    template() {
                        return `<div class="-pdjs-canvas-process-decisions" style="position:absolute;top:0;left:0;right:0;bottom:0;" data-controls></div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_view = new PDJS.Canvas.Shared.Process.ProcessDecisions({});
                        this.controls.add(this.m_view);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.m_view.load(this.source.toJSON());
                    }
                }
                Process.ProcessDecisions = ProcessDecisions;
            })(Process = Actual.Process || (Actual.Process = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Process;
            (function (Process) {
                let ProcessState = class ProcessState extends Actual.ElementViewBase {
                    template() {
                        return `<div class="-pdjs-canvas-process-state" style="position:absolute;top:0;left:0;right:0;bottom:0;" data-controls></div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        if (this.source.currentStage == null) {
                            this.message_init();
                        }
                        else {
                            this.processState_init();
                        }
                    }
                    processState_init() {
                        this.m_view = new PDJS.Canvas.Shared.Process.ProcessState({});
                        this.controls.add(this.m_view);
                        this.m_view.load(this.source);
                    }
                    message_init() {
                        this.controls.add(new PDJS.Shared.UI.Controls.Message({
                            message: "Process has not been assigned."
                        }));
                        this.node.css({
                            border: "1px solid #CCCCCC"
                        });
                    }
                };
                ProcessState = __decorate([
                    CanvasJS.Design.allowedSizingHandles(CanvasJS.Design.GeometryBoxHandle.e, CanvasJS.Design.GeometryBoxHandle.w)
                ], ProcessState);
                Process.ProcessState = ProcessState;
            })(Process = Actual.Process || (Actual.Process = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Process;
            (function (Process) {
                let ProcessView = class ProcessView extends Actual.ElementViewBase {
                    get acceptsFocus() {
                        return true;
                    }
                    template() {
                        return `<div style="position:absolute;top:0;left:0;right:0;bottom:0;" data-controls></div>`;
                    }
                    focus() {
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        if (this.source.currentStage == null) {
                            this.message_init();
                        }
                        else {
                            this.processView_init();
                        }
                    }
                    processView_init() {
                        this.m_view = new PDJS.Canvas.Shared.Process.ProcessView({});
                        this.controls.add(this.m_view);
                        this.m_view.load(this.source);
                    }
                    message_init() {
                        this.controls.add(new PDJS.Shared.UI.Controls.Message({
                            message: "Process has not been assigned."
                        }));
                        this.node.css({
                            border: "1px solid #CCCCCC"
                        });
                    }
                };
                ProcessView = __decorate([
                    Jade.InterfaceGuard.implement(Canvas.Core.IFocusableGuard)
                ], ProcessView);
                Process.ProcessView = ProcessView;
            })(Process = Actual.Process || (Actual.Process = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Shapes;
            (function (Shapes) {
                class Shape extends Actual.ElementViewBase {
                }
                Shapes.Shape = Shape;
                class ShapeBase extends Shape {
                    get source() {
                        return this.m_source;
                    }
                    template() {
                        return `<div style="position:absolute;top:0;left:0;right:0;bottom:0;"></div>`;
                    }
                }
                Shapes.ShapeBase = ShapeBase;
            })(Shapes = Actual.Shapes || (Actual.Shapes = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Shapes;
            (function (Shapes) {
                class Ellipse extends Shapes.ShapeBase {
                    onInit(e) {
                        super.onInit(e);
                        let shape = new Canvas.Shared.Shapes.Ellipse({
                            backgroundColor: this.source.backgroundColor,
                            borderColor: this.source.borderColor,
                            borderStyle: this.source.borderStyle,
                            borderWidth: this.source.borderWidth
                        });
                        this.controls.add(shape);
                    }
                }
                Shapes.Ellipse = Ellipse;
            })(Shapes = Actual.Shapes || (Actual.Shapes = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Shapes;
            (function (Shapes) {
                class Line extends Actual.ElementViewBase {
                    onInit(e) {
                        super.onInit(e);
                        let shape = new Canvas.Shared.Shapes.Line({
                            endCapShape: this.source.endCapShape,
                            endCapColor: this.source.endCapColor,
                            endCapHeight: this.source.endCapHeight,
                            endCapWidth: this.source.endCapWidth,
                            lineColor: this.source.lineColor,
                            lineWeight: this.source.lineWeight,
                            startCapColor: this.source.startCapColor,
                            startCapHeight: this.source.startCapHeight,
                            startCapShape: this.source.startCapShape,
                            startCapWidth: this.source.startCapWidth
                        });
                        this.controls.add(shape);
                    }
                }
                Shapes.Line = Line;
            })(Shapes = Actual.Shapes || (Actual.Shapes = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Shapes;
            (function (Shapes) {
                class Rectangle extends Shapes.ShapeBase {
                    onInit(e) {
                        super.onInit(e);
                        let shape = new Canvas.Shared.Shapes.Rectangle({
                            backgroundColor: this.source.backgroundColor,
                            borderColor: this.source.borderColor,
                            borderStyle: this.source.borderStyle,
                            borderWidth: this.source.borderWidth
                        });
                        this.controls.add(shape);
                    }
                }
                Shapes.Rectangle = Rectangle;
            })(Shapes = Actual.Shapes || (Actual.Shapes = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Shapes;
            (function (Shapes) {
                class Triangle extends Shapes.ShapeBase {
                }
                Shapes.Triangle = Triangle;
                class TriangleBase extends Triangle {
                    get source() {
                        return this.source;
                    }
                }
                Shapes.TriangleBase = TriangleBase;
            })(Shapes = Actual.Shapes || (Actual.Shapes = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Shapes;
            (function (Shapes) {
                class IsoscelesTriangle extends Shapes.ShapeBase {
                    onInit(e) {
                        super.onInit(e);
                        let shape = new Canvas.Shared.Shapes.IsoscelesTriangle({
                            backgroundColor: this.source.backgroundColor,
                            borderColor: this.source.borderColor,
                            borderStyle: this.source.borderStyle,
                            borderWidth: this.source.borderWidth,
                            rotation: this.source.rotation,
                            height: this.source.height,
                            width: this.source.width
                        });
                        this.controls.add(shape);
                    }
                }
                Shapes.IsoscelesTriangle = IsoscelesTriangle;
            })(Shapes = Actual.Shapes || (Actual.Shapes = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Shapes;
            (function (Shapes) {
                class RightTriangle extends Shapes.ShapeBase {
                    onInit(e) {
                        super.onInit(e);
                        let shape = new Canvas.Shared.Shapes.RightTriangle({
                            backgroundColor: this.source.backgroundColor,
                            borderColor: this.source.borderColor,
                            borderStyle: this.source.borderStyle,
                            borderWidth: this.source.borderWidth,
                            rotation: this.source.rotation,
                            height: this.source.height,
                            width: this.source.width
                        });
                        this.controls.add(shape);
                    }
                }
                Shapes.RightTriangle = RightTriangle;
            })(Shapes = Actual.Shapes || (Actual.Shapes = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Actual;
        (function (Actual) {
            var Views;
            (function (Views) {
                class EventHistoryView extends Actual.ElementViewBase {
                    template() {
                        return `<div style="position:absolute;top:0;left:0;right:0;bottom:0;border:1px solid #CCCCCC;" role="grid"></div>`;
                    }
                    onBrowserResize() {
                        super.onBrowserResize();
                        this.m_grid.redraw();
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.grid_init();
                    }
                    grid_init() {
                        this.m_grid = new PD.Web.UI.Controls.ViewGrid({
                            container: this.node.children("[role=grid]"),
                            height: "100%",
                            viewStateId: this.source.viewStateId,
                            selectionMode: "none",
                            needContext: (e) => {
                                e.filters = this.source.contextFilters;
                            }
                        });
                    }
                }
                Views.EventHistoryView = EventHistoryView;
            })(Views = Actual.Views || (Actual.Views = {}));
        })(Actual = Canvas.Actual || (Canvas.Actual = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            class ElementModel extends CanvasJS.ElementModel {
                get document() {
                    return this.getDocument();
                }
                get reloadModelAfterPost() {
                    return this.m_reloadModelAfterPost;
                }
                set reloadModelAfterPost(value) {
                    this.m_reloadModelAfterPost = value;
                }
                get isReloadingModel() {
                    return this.m_isReloadingModel;
                }
                set isReloadingModel(value) {
                    this.m_isReloadingModel = value;
                }
                reloadModel(model) {
                    if (this.reloadModelAfterPost) {
                        this.suspendStateChanged = true;
                        this.isReloadingModel = true;
                        this.onReloadModel(model);
                        this.onStateChangeCallback();
                        this.isReloadingModel = false;
                        this.suspendStateChanged = false;
                    }
                }
                onReloadModel(model) {
                }
            }
            Core.ElementModel = ElementModel;
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            let CachedElementRefreshStatus;
            (function (CachedElementRefreshStatus) {
                CachedElementRefreshStatus[CachedElementRefreshStatus["None"] = 0] = "None";
                CachedElementRefreshStatus[CachedElementRefreshStatus["Pending"] = 2] = "Pending";
                CachedElementRefreshStatus[CachedElementRefreshStatus["Success"] = 3] = "Success";
                CachedElementRefreshStatus[CachedElementRefreshStatus["Failure"] = 4] = "Failure";
            })(CachedElementRefreshStatus = Core.CachedElementRefreshStatus || (Core.CachedElementRefreshStatus = {}));
            class CachedElement extends Core.ElementModel {
                constructor(options) {
                    super(options);
                }
                get cacheAgeMinutes() {
                    return this.state.get("cacheAgeMins");
                }
                set cacheAgeMinutes(value) {
                    this.state.set("cacheAgeMins", value);
                }
                get cacheExpiration() {
                    return this.state.get("cacheExpiration");
                }
                set cacheExpiration(value) {
                    this.state.set("cacheExpiration", value);
                }
                get cacheLastUpdated() {
                    return this.state.get("cacheLastUpdated");
                }
                set cacheLastUpdated(value) {
                    this.state.set("cacheLastUpdated", value);
                }
                get cacheDocumentId() {
                    return this.state.get("cacheDocumentId");
                }
                set cacheDocumentId(value) {
                    this.state.set("cacheDocumentId", value);
                }
                get cacheEntityId() {
                    return this.state.get("cacheEntityId");
                }
                set cacheEntityId(value) {
                    this.state.set("cacheEntityId", value);
                }
                get minutesElapsedSinceCached() {
                    return (((Date.now() - this.cacheLastUpdated) / 1000) / 60);
                }
                get hasCacheExpired() {
                    return this.isCachingEnabled && this.cacheAgeMinutes < this.minutesElapsedSinceCached;
                }
                get isCachingEnabled() {
                    return this.cacheAgeMinutes != null && this.cacheAgeMinutes > 0;
                }
                get cacheRefreshStatus() {
                    return this.state.get("cacheRefreshStatus", CachedElementRefreshStatus.None);
                }
                set cacheRefreshStatus(value) {
                    this.state.set("cacheRefreshStatus", value);
                }
                getCachedData(force = false) {
                    let shouldRefresh = force == true ||
                        (this.cacheRefreshStatus == CachedElementRefreshStatus.None) ||
                        (this.isCachingEnabled && this.hasCacheExpired);
                    if (!shouldRefresh) {
                        return;
                    }
                    this.cacheRefreshStatus = CachedElementRefreshStatus.Pending;
                    let elementService = new PDJS.Services.Canvas.ElementService();
                    elementService.getCachedData({
                        entityId: this.cacheEntityId,
                        documentId: this.cacheDocumentId,
                        elementId: this.id,
                        refresh: shouldRefresh,
                        success: (e) => {
                            this.onCacheRefresh(e.data);
                            this.cacheRefreshStatus = CachedElementRefreshStatus.Success;
                        },
                        error: (e) => {
                            this.cacheRefreshStatus = CachedElementRefreshStatus.Failure;
                        }
                    });
                }
                onCacheRefresh(state) {
                }
            }
            Core.CachedElement = CachedElement;
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            let CanvasType;
            (function (CanvasType) {
                CanvasType[CanvasType["Explorer"] = 0] = "Explorer";
                CanvasType[CanvasType["Global"] = 1] = "Global";
                CanvasType[CanvasType["Create"] = 2] = "Create";
                CanvasType[CanvasType["Properties"] = 3] = "Properties";
                CanvasType[CanvasType["List"] = 4] = "List";
                CanvasType[CanvasType["DocumentType"] = 5] = "DocumentType";
            })(CanvasType = Core.CanvasType || (Core.CanvasType = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            class IIndexableGuard extends Jade.InterfaceGuard {
                get signature() {
                    return {
                        id: "5721ed84-9eab-4a6c-bb7b-92c8c5d8ef11",
                        label: "IIndexableGuard"
                    };
                }
            }
            Core.IIndexableGuard = IIndexableGuard;
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Charts;
            (function (Charts) {
                class Chart extends Core.CachedElement {
                    constructor(state) {
                        super(state);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Charts.Chart",
                            designScript: "PDJS.Canvas.Design.Charts.Chart",
                            element: this
                        });
                    }
                    get templateId() {
                        return this.state.get("templateId");
                    }
                    set templateId(value) {
                        this.state.set("templateId", value);
                    }
                    get seriesType() {
                        return this.state.get("seriesType");
                    }
                    set seriesType(value) {
                        this.state.set("seriesType", value);
                    }
                    get anchor() {
                        return this.state.get("anchor");
                    }
                    set anchor(value) {
                        this.state.set("anchor", value);
                    }
                    get condition() {
                        return this.state.get("condition");
                    }
                    set condition(value) {
                        this.state.set("condition", value);
                    }
                    get categoryFields() {
                        return this.state.get("categoryFields");
                    }
                    set categoryFields(value) {
                        this.state.set("categoryFields", value);
                    }
                    get legendFields() {
                        return this.state.get("legendFields");
                    }
                    set legendFields(value) {
                        this.state.set("legendFields", value);
                    }
                    get valueFields() {
                        return this.state.get("valueFields");
                    }
                    set valueFields(value) {
                        this.state.set("valueFields", value);
                    }
                    get cacheAgeMins() {
                        return this.state.get("cacheAgeMins");
                    }
                    set cacheAgeMins(value) {
                        this.state.set("cacheAgeMins", value);
                    }
                    get cacheExpiration() {
                        return this.state.get("cacheAgeMins");
                    }
                    set cacheExpiration(value) {
                        this.state.set("cacheExpiration", value);
                    }
                    get enforceSecurity() {
                        return this.state.get("enforceSecurity");
                    }
                    set enforceSecurity(value) {
                        this.state.set("enforceSecurity", value);
                    }
                    get useEntityContext() {
                        return this.state.get("useEntityContext");
                    }
                    set useEntityContext(value) {
                        this.state.set("useEntityContext", value);
                    }
                    get style() {
                        return this.state.get("style");
                    }
                    set style(value) {
                        this.state.set("style", value);
                    }
                    get data() {
                        return this.state.get("data");
                    }
                    set data(value) {
                        this.state.set("data", value);
                    }
                    get context() {
                        return this.state.get("context");
                    }
                    set context(value) {
                        this.state.set("context", value);
                    }
                    get actionMenuVisible() {
                        return this.state.get("actionMenuVisible");
                    }
                    set actionMenuVisible(value) {
                        this.state.set("actionMenuVisible", value);
                    }
                    get actionMenuRefresh() {
                        return this.state.get("actionMenuRefresh");
                    }
                    set actionMenuRefresh(value) {
                        this.state.set("actionMenuRefresh", value);
                    }
                    get informationBarVisible() {
                        return this.state.get("informationBarVisible");
                    }
                    set informationBarVisible(value) {
                        this.state.set("informationBarVisible", value);
                    }
                    get informationBarRefresh() {
                        return this.state.get("informationBarRefresh");
                    }
                    set informationBarRefresh(value) {
                        this.state.set("informationBarRefresh", value);
                    }
                    onCacheRefresh(state) {
                        this.data = state.data;
                    }
                }
                Charts.Chart = Chart;
            })(Charts = Core.Charts || (Core.Charts = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Common;
            (function (Common) {
                let Button = class Button extends Core.ElementModel {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Common.Button",
                            designScript: "PDJS.Canvas.Design.Common.Button",
                            element: this
                        });
                    }
                    get onClickAction() {
                        return this.state.get("onClick");
                    }
                    set onClickAction(value) {
                        this.state.set("onClick", value);
                    }
                    get enabled() {
                        return this.state.get("enabled.value");
                    }
                    set enabled(value) {
                        this.state.set("enabled.value", value);
                    }
                    get label() {
                        return this.state.get("label");
                    }
                    set label(value) {
                        this.state.set("label", value);
                    }
                    get hasOnClickAction() {
                        return this.onClickAction != null
                            && this.onClickAction.id != null;
                    }
                    get tabIndex() {
                        return this.document.tabIndexes.indexOf(this.id);
                    }
                    get activeTabIndex() {
                        return this.tabIndex < 0 ? -1 : this.tabIndex + (Jade.Application.instance.contexts.current.depth * 1000);
                    }
                    get tooltip() {
                        return this.state.get("tooltip");
                    }
                    set tooltip(value) {
                        this.state.set("tooltip", value);
                    }
                    get hasTooltip() {
                        return !Jade.String.isNullOrWhiteSpace(this.tooltip);
                    }
                };
                Button = __decorate([
                    Jade.InterfaceGuard.implement(Core.IIndexableGuard)
                ], Button);
                Common.Button = Button;
            })(Common = Core.Common || (Core.Common = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Common;
            (function (Common) {
                let Hyperlink = class Hyperlink extends Core.ElementModel {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Common.Hyperlink",
                            designScript: "PDJS.Canvas.Design.Common.Hyperlink",
                            element: this
                        });
                    }
                    get onClickAction() {
                        return this.state.get("onClick");
                    }
                    set onClickAction(value) {
                        this.state.set("onClick", value);
                    }
                    get enabled() {
                        return this.state.get("enabled.value");
                    }
                    set enabled(value) {
                        this.state.set("enabled.value", value);
                    }
                    get label() {
                        return this.state.get("label");
                    }
                    set label(value) {
                        this.state.set("label", value);
                    }
                    get foreColor() {
                        return this.state.get("foreColor");
                    }
                    set foreColor(value) {
                        this.state.set("foreColor", value);
                    }
                    get fontSize() {
                        return this.state.get("fontSize");
                    }
                    set fontSize(value) {
                        this.state.set("fontSize", value);
                    }
                    get fontName() {
                        return this.state.get("fontName");
                    }
                    set fontName(value) {
                        this.state.set("fontName", value);
                    }
                    get hoverForeColor() {
                        return this.state.get("hoverForeColor");
                    }
                    set hoverForeColor(value) {
                        this.state.set("hoverForeColor", value);
                    }
                    get textAlignment() {
                        return this.state.get("textAlignment");
                    }
                    set textAlignment(value) {
                        this.state.set("textAlignment", value);
                    }
                    get hasOnClickAction() {
                        return this.onClickAction != null
                            && this.onClickAction.id != null;
                    }
                    get tabIndex() {
                        return this.document.tabIndexes.indexOf(this.id);
                    }
                    get activeTabIndex() {
                        return this.tabIndex < 0 ? -1 : this.tabIndex + (Jade.Application.instance.contexts.current.depth * 1000);
                    }
                    get tooltip() {
                        return this.state.get("tooltip");
                    }
                    set tooltip(value) {
                        this.state.set("tooltip", value);
                    }
                    get hasTooltip() {
                        return !Jade.String.isNullOrWhiteSpace(this.tooltip);
                    }
                };
                Hyperlink = __decorate([
                    Jade.InterfaceGuard.implement(Core.IIndexableGuard)
                ], Hyperlink);
                Common.Hyperlink = Hyperlink;
            })(Common = Core.Common || (Core.Common = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Common;
            (function (Common) {
                class ImageButton extends Core.ElementModel {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Common.ImageButton",
                            designScript: "PDJS.Canvas.Design.Common.ImageButton",
                            element: this
                        });
                    }
                    get onClickAction() {
                        return this.state.get("onClick");
                    }
                    set onClickAction(value) {
                        this.state.set("onClick", value);
                    }
                    get enabled() {
                        return this.state.get("enabled.value");
                    }
                    set enabled(value) {
                        this.state.set("enabled.value", value);
                    }
                    get imageUrl() {
                        return this.state.get("imageUrl");
                    }
                    set imageUrl(value) {
                        this.state.set("imageUrl", value);
                    }
                    get hasOnClickAction() {
                        return this.onClickAction != null
                            && this.onClickAction.id != null;
                    }
                    get tooltip() {
                        return this.state.get("tooltip");
                    }
                    set tooltip(value) {
                        this.state.set("tooltip", value);
                    }
                    get hasTooltip() {
                        return !Jade.String.isNullOrWhiteSpace(this.tooltip);
                    }
                }
                Common.ImageButton = ImageButton;
            })(Common = Core.Common || (Core.Common = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Common;
            (function (Common) {
                class Markup extends Core.ElementModel {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Common.Markup",
                            designScript: "PDJS.Canvas.Design.Common.Markup",
                            element: this
                        });
                    }
                    get markup() {
                        return this.state.get("markup");
                    }
                    set markup(value) {
                        this.state.set("markup", value);
                    }
                    get scrolling() {
                        return this.state.get("scrolling");
                    }
                    set scrolling(value) {
                        this.state.set("scrolling", value);
                    }
                    get padding() {
                        return this.state.get("padding");
                    }
                    set padding(value) {
                        this.state.set("padding", value);
                    }
                    get backgroundColor() {
                        return this.state.get("backgroundColor");
                    }
                    set backgroundColor(value) {
                        this.state.set("backgroundColor", value);
                    }
                    get borderColor() {
                        return this.state.get("borderColor");
                    }
                    set borderColor(value) {
                        this.state.set("borderColor", value);
                    }
                    get borderStyle() {
                        return this.state.get("borderStyle");
                    }
                    set borderStyle(value) {
                        this.state.set("borderStyle", value);
                    }
                    get borderWidth() {
                        return this.state.get("borderWidth");
                    }
                    set borderWidth(value) {
                        this.state.set("borderWidth", value);
                    }
                }
                Common.Markup = Markup;
            })(Common = Core.Common || (Core.Common = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Common;
            (function (Common) {
                class Report extends Core.CachedElement {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Common.Report",
                            designScript: "PDJS.Canvas.Design.Common.Report",
                            element: this
                        });
                    }
                    get reportId() {
                        return this.state.get("reportId");
                    }
                    set reportId(value) {
                        this.state.set("reportId", value);
                    }
                    get entityId() {
                        return this.state.get("entityId.value");
                    }
                    set entityId(value) {
                        this.state.set("entityId.value", value);
                    }
                    get reportName() {
                        return this.state.get("reportName");
                    }
                    set reportName(value) {
                        this.state.set("reportName", value);
                    }
                    get borderColor() {
                        return this.state.get("borderColor");
                    }
                    set borderColor(value) {
                        this.state.set("borderColor", value);
                    }
                    get borderStyle() {
                        return this.state.get("borderStyle");
                    }
                    set borderStyle(value) {
                        this.state.set("borderStyle", value);
                    }
                    get borderWidth() {
                        return this.state.get("borderWidth");
                    }
                    set borderWidth(value) {
                        this.state.set("borderWidth", value);
                    }
                    get data() {
                        return this.state.get("data");
                    }
                    set data(value) {
                        this.state.set("data", value);
                    }
                    get actionMenuVisible() {
                        return this.state.get("actionMenuVisible");
                    }
                    set actionMenuVisible(value) {
                        this.state.set("actionMenuVisible", value);
                    }
                    get actionMenuRefresh() {
                        return this.state.get("actionMenuRefresh");
                    }
                    set actionMenuRefresh(value) {
                        this.state.set("actionMenuRefresh", value);
                    }
                    get actionMenuPrint() {
                        return this.state.get("actionMenuPrint");
                    }
                    set actionMenuPrint(value) {
                        this.state.set("actionMenuPrint", value);
                    }
                    get actionMenuOpen() {
                        return this.state.get("actionMenuOpen");
                    }
                    set actionMenuOpen(value) {
                        this.state.set("actionMenuOpen", value);
                    }
                    get informationBarVisible() {
                        return this.state.get("informationBarVisible");
                    }
                    set informationBarVisible(value) {
                        this.state.set("informationBarVisible", value);
                    }
                    get informationBarRefresh() {
                        return this.state.get("informationBarRefresh");
                    }
                    set informationBarRefresh(value) {
                        this.state.set("informationBarRefresh", value);
                    }
                    onCacheRefresh(state) {
                        this.data = state.data;
                    }
                }
                Common.Report = Report;
            })(Common = Core.Common || (Core.Common = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Common;
            (function (Common) {
                let VerticalAlign;
                (function (VerticalAlign) {
                    VerticalAlign["top"] = "flex-start";
                    VerticalAlign["middle"] = "center";
                    VerticalAlign["bottom"] = "flex-end";
                })(VerticalAlign || (VerticalAlign = {}));
                let HorizontalAlign;
                (function (HorizontalAlign) {
                    HorizontalAlign["left"] = "left";
                    HorizontalAlign["center"] = "center";
                    HorizontalAlign["right"] = "right";
                })(HorizontalAlign || (HorizontalAlign = {}));
                class Text extends Core.ElementModel {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Common.Text",
                            designScript: "PDJS.Canvas.Design.Common.Text",
                            element: this
                        });
                    }
                    get text() {
                        return this.state.get("text");
                    }
                    set text(value) {
                        this.state.set("text", value);
                    }
                    get verticalAlignment() {
                        return this.state.get("verticalAlignment");
                    }
                    set verticalAlignment(value) {
                        this.state.set("verticalAlignment", value);
                    }
                    get horizontalAlignment() {
                        return this.state.get("horizontalAlignment");
                    }
                    set horizontalAlignment(value) {
                        this.state.set("horizontalAlignment", value);
                    }
                    get backgroundColor() {
                        return this.state.get("backgroundColor");
                    }
                    set backgroundColor(value) {
                        this.state.set("backgroundColor", value);
                    }
                    get borderColor() {
                        return this.state.get("borderColor");
                    }
                    set borderColor(value) {
                        this.state.set("borderColor", value);
                    }
                    get borderStyle() {
                        return this.state.get("borderStyle");
                    }
                    set borderStyle(value) {
                        this.state.set("borderStyle", value);
                    }
                    get borderWidth() {
                        return this.state.get("borderWidth");
                    }
                    set borderWidth(value) {
                        this.state.set("borderWidth", value);
                    }
                    get paddingTop() {
                        return this.state.get("paddingTop");
                    }
                    set paddingTop(value) {
                        this.state.set("paddingTop", value);
                    }
                    get paddingRight() {
                        return this.state.get("paddingRight");
                    }
                    set paddingRight(value) {
                        this.state.set("paddingRight", value);
                    }
                    get paddingBottom() {
                        return this.state.get("paddingBottom");
                    }
                    set paddingBottom(value) {
                        this.state.set("paddingBottom", value);
                    }
                    get paddingLeft() {
                        return this.state.get("paddingLeft");
                    }
                    set paddingLeft(value) {
                        this.state.set("paddingLeft", value);
                    }
                }
                Common.Text = Text;
            })(Common = Core.Common || (Core.Common = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Documents;
            (function (Documents) {
                class DocumentModel extends CanvasJS.DocumentModel {
                    constructor(options) {
                        super(options);
                        if (_.isArray(options.tabIndexes)) {
                            this.m_tabIndexes = new Jade.Collection(options.tabIndexes);
                        }
                        else {
                            this.m_tabIndexes = new Jade.Collection();
                        }
                    }
                    get backgroundColor() {
                        return this.state.get("backgroundColor");
                    }
                    set backgroundColor(value) {
                        this.state.set("backgroundColor");
                    }
                    get canvasType() {
                        return this.state.get("canvasType");
                    }
                    set canvasType(value) {
                        this.state.set("canvasType");
                    }
                    get entityId() {
                        return this.state.get("entityId");
                    }
                    get tabIndexes() {
                        return this.m_tabIndexes;
                    }
                    toJSON() {
                        let result = super.toJSON();
                        _.each(this.tabIndexes.toArray(), (id) => {
                            if (this.elements.get(id) == null) {
                                this.tabIndexes.remove(id);
                            }
                        });
                        result.tabIndexes = this.tabIndexes.toArray();
                        return result;
                    }
                }
                Documents.DocumentModel = DocumentModel;
            })(Documents = Core.Documents || (Core.Documents = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Documents;
            (function (Documents) {
                class ActualDocument extends Documents.DocumentModel {
                    saveForm(options) {
                        let formService = new PDJS.Services.Canvas.Forms.FormService();
                        formService.submit({
                            document: this.toJSON(),
                            entityId: options.entityId,
                            formButtonId: options.formButtonId,
                            success: (e) => {
                                setTimeout(() => {
                                    switch (true) {
                                        case e.data.hasValidationErrors:
                                            if (_.isFunction(options.onValidationError)) {
                                                options.onValidationError(e.data);
                                            }
                                            break;
                                        case e.data.hasScriptErrors:
                                            if (_.isFunction(options.onScriptError)) {
                                                options.onScriptError(e.data);
                                            }
                                            break;
                                        default:
                                            if (_.isFunction(options.onSuccess)) {
                                                this.fill(e.data.document);
                                                options.onSuccess(e.data);
                                            }
                                            break;
                                    }
                                }, 750);
                            },
                            error: (e) => {
                                if (_.isFunction(options.onError)) {
                                    options.onError(e);
                                }
                            }
                        });
                    }
                }
                Documents.ActualDocument = ActualDocument;
            })(Documents = Core.Documents || (Core.Documents = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Documents;
            (function (Documents) {
                class DesignDocument extends Documents.DocumentModel {
                    constructor(options) {
                        super(options);
                        this.m_variables = new PDJS.Canvas.Core.Dynamics.VariableCollection(options.variables);
                    }
                    get sessionId() {
                        return this.state.get("sessionId");
                    }
                    get width() {
                        return this.state.get("width", this.getDefaultWidth());
                    }
                    get height() {
                        return this.state.get("height", "10000px");
                    }
                    get variables() {
                        return this.m_variables;
                    }
                    toJSON() {
                        let result = super.toJSON();
                        result.variables = this.variables.toDictionary();
                        return result;
                    }
                    getDefaultWidth() {
                        let result = "10000px";
                        switch (this.canvasType) {
                            case PDJS.Canvas.Core.CanvasType.Create:
                                result = "680px";
                                break;
                            case PDJS.Canvas.Core.CanvasType.Properties:
                                result = "680px";
                                break;
                            case PDJS.Canvas.Core.CanvasType.List:
                                result = "680px";
                                break;
                            case PDJS.Canvas.Core.CanvasType.DocumentType:
                                result = "680px";
                                break;
                        }
                        return result;
                    }
                }
                Documents.DesignDocument = DesignDocument;
            })(Documents = Core.Documents || (Core.Documents = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Documents;
            (function (Documents) {
                class ExplorerDocument extends Document {
                    static load() {
                    }
                    save(options) {
                    }
                }
                Documents.ExplorerDocument = ExplorerDocument;
            })(Documents = Core.Documents || (Core.Documents = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Dynamics;
            (function (Dynamics) {
                let CanvasVariableType;
                (function (CanvasVariableType) {
                    CanvasVariableType[CanvasVariableType["Boolean"] = 0] = "Boolean";
                    CanvasVariableType[CanvasVariableType["Date"] = 1] = "Date";
                    CanvasVariableType[CanvasVariableType["Number"] = 2] = "Number";
                    CanvasVariableType[CanvasVariableType["String"] = 3] = "String";
                })(CanvasVariableType = Dynamics.CanvasVariableType || (Dynamics.CanvasVariableType = {}));
            })(Dynamics = Core.Dynamics || (Core.Dynamics = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Dynamics;
            (function (Dynamics) {
                class VariableCollection {
                    constructor(data) {
                        this.m_dictionary = {};
                        if (data != null) {
                            this.m_dictionary = JSON.parse(JSON.stringify(data));
                        }
                    }
                    get keys() {
                        let result;
                        _.forOwn(this.m_dictionary, (value, key) => {
                            result[result.length] = key;
                        });
                        return result;
                    }
                    add(variable) {
                        if (variable.name == null) {
                            return;
                        }
                        this.m_dictionary[variable.name] = variable;
                    }
                    remove(variableName) {
                        if (this.contains(variableName)) {
                            delete this.m_dictionary[variableName];
                        }
                    }
                    get(variableName) {
                        let result = null;
                        if (this.contains(variableName)) {
                            result = this.m_dictionary[variableName];
                        }
                        return result;
                    }
                    contains(variableName) {
                        return this.m_dictionary[variableName] != null;
                    }
                    toDictionary() {
                        return JSON.parse(JSON.stringify(this.m_dictionary));
                    }
                    toList() {
                        let result = [];
                        _.forOwn(this.m_dictionary, (value) => {
                            result[result.length] = value;
                        });
                        return result;
                    }
                }
                Dynamics.VariableCollection = VariableCollection;
            })(Dynamics = Core.Dynamics || (Core.Dynamics = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                let FormElement = class FormElement extends Core.ElementModel {
                    get formId() {
                        return this.state.get("formId");
                    }
                    set formId(value) {
                        this.state.set("formId", value);
                    }
                    get isDisabled() {
                        return this.state.get("isDisabled");
                    }
                    set isDisabled(value) {
                        this.state.set("isDisabled", value);
                    }
                    get label() {
                        return this.state.get("label");
                    }
                    set label(value) {
                        this.state.set("label", value);
                    }
                    get tooltip() {
                        return this.state.get("tooltip");
                    }
                    set tooltip(value) {
                        this.state.set("tooltip", value);
                    }
                    get hasTooltip() {
                        return !Jade.String.isNullOrWhiteSpace(this.tooltip);
                    }
                    get activeEnabledState() {
                        return !this.isDisabled;
                    }
                    get tabIndex() {
                        return this.document.tabIndexes.indexOf(this.id);
                    }
                    get activeTabIndex() {
                        return this.tabIndex < 0 ? -1 : this.tabIndex + (Jade.Application.instance.contexts.current.depth * 1000);
                    }
                };
                FormElement = __decorate([
                    Jade.InterfaceGuard.implement(Core.IIndexableGuard)
                ], FormElement);
                Forms.FormElement = FormElement;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class FormButton extends Forms.FormElement {
                    constructor(state) {
                        super(state);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Forms.FormButton",
                            designScript: "PDJS.Canvas.Design.Forms.FormButton",
                            element: this
                        });
                    }
                    get activeEnabledState() {
                        return !this.isDisabled && this.enabled.value;
                    }
                    get enabled() {
                        return this.state.get("enabled");
                    }
                    set enabled(value) {
                        this.state.set("enabled", value);
                    }
                    get enforceSecurity() {
                        return this.state.get("enforceSecurity");
                    }
                    set enforceSecurity(value) {
                        this.state.set("enforceSecurity", value);
                    }
                    get ruleScript() {
                        return this.state.get("ruleScript");
                    }
                    set ruleScript(value) {
                        this.state.set("ruleScript", value);
                    }
                }
                Forms.FormButton = FormButton;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class FormField extends Forms.FormElement {
                    constructor(options) {
                        super(options);
                    }
                    get defaultLabel() {
                        return this.state.get("defaultLabel");
                    }
                    set defaultLabel(value) {
                        this.state.set("defaultLabel", value);
                    }
                    get isRequired() {
                        return this.state.get("isRequired.value");
                    }
                    set isRequired(value) {
                        this.state.set("isRequired.value", value);
                    }
                    get isRequiredTag() {
                        return this.state.get("required.text");
                    }
                    set isRequiredTag(value) {
                        this.state.set("required.text", value);
                    }
                    get labelColor() {
                        return this.state.get("labelColor");
                    }
                    set labelColor(value) {
                        this.state.set("labelColor", value);
                    }
                    get label() {
                        return this.state.get("label");
                    }
                    set label(value) {
                        this.state.set("label", value);
                    }
                    get activeLabel() {
                        return this.label || this.defaultLabel;
                    }
                    get activeLabelColor() {
                        return this.activeEnabledState ? (this.isRequired ? "#FF0000" : this.labelColor) : "#AAAAAA";
                    }
                    get value() {
                        return null;
                    }
                    set value(value) {
                    }
                    get input() {
                        return this.state.get("input");
                    }
                    set input(value) {
                        this.state.set("input", value);
                    }
                    get valueChanged() {
                        return this.m_valueChanged;
                    }
                    set valueChanged(value) {
                        this.m_valueChanged = value;
                    }
                    copyInputTo(field) {
                    }
                    isEquivalentTo(field) {
                        return false;
                    }
                    hasValue() {
                        return (_.isString(this.value) && !Jade.String.isNullOrWhiteSpace(this.value)) ||
                            (_.isArray(this.value) && this.value.length > 0) ||
                            (!_.isString(this.value) && !_.isArray(this.value) && !_.isNull(this.value));
                    }
                    checkValueChanged(currentValue, newValue) {
                        if (newValue != null && _.isString(newValue) && Jade.String.isNullOrWhiteSpace(newValue)) {
                            newValue = null;
                        }
                        if (currentValue != null && _.isString(currentValue) && Jade.String.isNullOrWhiteSpace(currentValue)) {
                            currentValue = null;
                        }
                        if (currentValue != newValue) {
                            this.valueChanged = true;
                            Jade.Application
                                .instance
                                .contexts
                                .current
                                .events
                                .publish("canvas/form/changed", {
                                formId: this.formId
                            });
                        }
                    }
                }
                Forms.FormField = FormField;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class BuiltInField extends Forms.FormField {
                    constructor(options) {
                        super(options);
                    }
                    get isReadOnly() {
                        return this.state.get("isReadOnly.value");
                    }
                    set isReadOnly(value) {
                        this.state.set("isReadOnly.value", value);
                    }
                    get isReadOnlyTag() {
                        return this.state.get("isReadOnly.text");
                    }
                    set isReadOnlyTag(value) {
                        this.state.set("isReadOnly.text", value);
                    }
                    get activeEnabledState() {
                        return !this.isDisabled && !this.isReadOnly;
                    }
                }
                Forms.BuiltInField = BuiltInField;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class ExtensionField extends Forms.FormField {
                    constructor(options) {
                        super(options);
                    }
                    get columnId() {
                        return this.state.get("columnId");
                    }
                    set columnId(value) {
                        this.state.set("columnId", value);
                    }
                    get columnIsReadOnly() {
                        return this.state.get("columnIsReadOnly");
                    }
                    set columnIsReadOnly(value) {
                        this.state.set("columnIsReadOnly", value);
                    }
                    get inBatch() {
                        return this.state.get("inBatch");
                    }
                    set inBatch(value) {
                        this.state.set("inBatch", value);
                    }
                    get isReadOnly() {
                        return this.state.get("isReadOnly.value");
                    }
                    set isReadOnly(value) {
                        this.state.set("isReadOnly.value", value);
                    }
                    get isReadOnlyTag() {
                        return this.state.get("isReadOnly.text");
                    }
                    set isReadOnlyTag(value) {
                        this.state.set("isReadOnly.text", value);
                    }
                    get inBatchMode() {
                        return this.state.get("isBatchMode");
                    }
                    set inBatchMode(value) {
                        this.state.set("isBatchMode", value);
                    }
                    get activeEnabledState() {
                        return !this.isDisabled
                            && !this.isReadOnly && !this.columnIsReadOnly
                            && (!this.inBatchMode || (this.inBatchMode && this.inBatch));
                    }
                }
                Forms.ExtensionField = ExtensionField;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class FormFields {
                    static getField(args) {
                        let result = null;
                        args.document.elements.getByType(Forms.FormField).each((field) => {
                            if (field instanceof args.type) {
                                let isEquivalentExtensionField = field instanceof Forms.ExtensionField &&
                                    field.columnId == args.columnId;
                                let isNotExtensionField = !(field instanceof Forms.ExtensionField);
                                switch (true) {
                                    case isEquivalentExtensionField:
                                        result = field;
                                        return false;
                                    case isNotExtensionField:
                                        result = field;
                                        return false;
                                }
                            }
                        });
                        return result;
                    }
                    static getFields(args) {
                        let result = new Jade.Collection();
                        args.document.elements.getByType(Forms.FormField).each((field) => {
                            if (field instanceof args.type) {
                                let isEquivalentExtensionField = field instanceof Forms.ExtensionField &&
                                    field.columnId == args.columnId;
                                let isNotExtensionField = !(field instanceof Forms.ExtensionField);
                                switch (true) {
                                    case isEquivalentExtensionField:
                                        result.add(field);
                                        return false;
                                    case isNotExtensionField:
                                        result.add(field);
                                        return false;
                                }
                            }
                        });
                        return result;
                    }
                    static getInput(args) {
                        let result = null;
                        let field = this.getField(args);
                        if (field != null) {
                            result = field.input;
                        }
                        return result;
                    }
                    static getRequiredFields(source) {
                        let result = new Jade.Collection();
                        this.getFormFields(source).each((field) => {
                            if (field.isRequired) {
                                result.add(field);
                            }
                        });
                        return result;
                    }
                    static getValue(args) {
                        let result = null;
                        let field = this.getField(args);
                        if (field != null) {
                            result = field.value;
                        }
                        return result;
                    }
                    static map(source, destination) {
                        let srcFields = source.elements.getByType(Forms.FormField);
                        let dstFields = destination.elements.getByType(Forms.FormField);
                        dstFields.each((dstField) => {
                            srcFields.each((srcField) => {
                                let shouldMap = !(srcField instanceof Forms.TextField)
                                    && dstField.isEquivalentTo(srcField);
                                if (shouldMap) {
                                    dstField.input = srcField.input;
                                }
                            });
                        });
                    }
                    static setEntityNameFieldValue(source, value) {
                        this.getFields({
                            document: source,
                            type: PDJS.Canvas.Core.Forms.EntityNameField
                        })
                            .each((field) => {
                            if (field.value == null) {
                                field.value = value;
                            }
                        });
                    }
                    static getEntityNameFieldValue(source) {
                        return PDJS.Canvas.Core.Forms.FormFields.getValue({
                            document: source,
                            type: PDJS.Canvas.Core.Forms.EntityNameField
                        });
                    }
                    static iterateRequiredFields(source, callback) {
                        FormFields
                            .getRequiredFields(source)
                            .each((field) => {
                            callback(field);
                        });
                    }
                    static getFormFields(source) {
                        return source.elements.getByType(Canvas.Core.Forms.FormField);
                    }
                }
                Forms.FormFields = FormFields;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class EntityDescriptionField extends Forms.BuiltInField {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Forms.EntityDescriptionField",
                            designScript: "PDJS.Canvas.Design.Forms.EntityDescriptionField",
                            element: this
                        });
                    }
                    get value() {
                        return this.state.get("value");
                    }
                    set value(value) {
                        this.checkValueChanged(this.value, value);
                        this.state.set("value", value);
                    }
                    get input() {
                        return {
                            value: this.value
                        };
                    }
                    set input(value) {
                        this.state.set(value);
                    }
                    isEquivalentTo(field) {
                        return field instanceof EntityDescriptionField;
                    }
                }
                Forms.EntityDescriptionField = EntityDescriptionField;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class EntityIconField extends Forms.BuiltInField {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Forms.EntityIconField",
                            designScript: "PDJS.Canvas.Design.Forms.EntityIconField",
                            element: this
                        });
                    }
                    get value() {
                        return this.state.get("value");
                    }
                    set value(value) {
                        this.checkValueChanged(this.value, value);
                        this.state.set("value", value);
                    }
                    get input() {
                        return {
                            value: this.value
                        };
                    }
                    set input(value) {
                        this.state.set(value);
                    }
                    isEquivalentTo(field) {
                        return field instanceof EntityIconField;
                    }
                }
                Forms.EntityIconField = EntityIconField;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class EntityNameField extends Forms.BuiltInField {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Forms.EntityNameField",
                            designScript: "PDJS.Canvas.Design.Forms.EntityNameField",
                            element: this
                        });
                    }
                    get value() {
                        return this.state.get("value");
                    }
                    set value(value) {
                        this.checkValueChanged(this.value, value);
                        this.state.set("value", value);
                    }
                    get input() {
                        return {
                            value: this.value
                        };
                    }
                    set input(value) {
                        this.state.set(value);
                    }
                    isEquivalentTo(field) {
                        return field instanceof EntityNameField;
                    }
                }
                Forms.EntityNameField = EntityNameField;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class EntityParentField extends Forms.BuiltInField {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Forms.EntityParentField",
                            designScript: "PDJS.Canvas.Design.Forms.EntityParentField",
                            element: this
                        });
                    }
                    get entityTypeId() {
                        return this.state.get("entityTypeId");
                    }
                    set entityTypeId(value) {
                        this.state.set("entityTypeId", value);
                    }
                    get parentId() {
                        return this.state.get("parentId");
                    }
                    set parentId(value) {
                        this.checkValueChanged(this.parentId, value);
                        this.state.set("parentId", value);
                    }
                    get parentName() {
                        return this.state.get("parentName");
                    }
                    set parentName(value) {
                        this.state.set("parentName", value);
                    }
                    get parentTypeName() {
                        return this.state.get("parentTypeName");
                    }
                    set parentTypeName(value) {
                        this.state.set("parentTypeName", value);
                    }
                    get parentTypeIcon() {
                        return this.state.get("parentTypeIcon");
                    }
                    set parentTypeIcon(value) {
                        this.state.set("parentTypeIcon", value);
                    }
                    get isRequiredByType() {
                        return this.state.get("isRequiredByType");
                    }
                    set isRequiredByType(value) {
                        this.state.set("isRequiredByType", value);
                    }
                    get input() {
                        return {
                            parentId: this.parentId,
                            parentName: this.parentName,
                            parentTypeName: this.parentTypeName,
                            parentTypeIcon: this.parentTypeIcon
                        };
                    }
                    set input(value) {
                        this.state.set(value);
                    }
                    isEquivalentTo(field) {
                        return field instanceof EntityParentField;
                    }
                }
                Forms.EntityParentField = EntityParentField;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class EntityProcessField extends Forms.BuiltInField {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Forms.EntityProcessField",
                            designScript: "PDJS.Canvas.Design.Forms.EntityProcessField",
                            element: this
                        });
                    }
                    get entityTypeId() {
                        return this.state.get("entityTypeId");
                    }
                    get keyIcon() {
                        return this.state.get("keyIcon");
                    }
                    set keyIcon(value) {
                        this.state.set("keyIcon", value);
                    }
                    get keyName() {
                        return this.state.get("keyName");
                    }
                    set keyName(value) {
                        this.state.set("keyName", value);
                    }
                    get processName() {
                        return this.state.get("processName");
                    }
                    set processName(value) {
                        this.state.set("processName", value);
                    }
                    get stageId() {
                        return this.state.get("stageId");
                    }
                    set stageId(value) {
                        this.checkValueChanged(this.stageId, value);
                        this.state.set("stageId", value);
                    }
                    get stageIcon() {
                        return this.state.get("stageIcon");
                    }
                    set stageIcon(value) {
                        this.state.set("stageIcon", value);
                    }
                    get stageName() {
                        return this.state.get("stageName");
                    }
                    set stageName(value) {
                        this.state.set("stageName", value);
                    }
                    get statusId() {
                        return this.state.get("statusId");
                    }
                    set statusId(value) {
                        this.state.set("statusId", value);
                    }
                    get statusIcon() {
                        return this.state.get("statusIcon");
                    }
                    set statusIcon(value) {
                        this.state.set("statusIcon", value);
                    }
                    get statusName() {
                        return this.state.get("statusName");
                    }
                    set statusName(value) {
                        this.state.set("statusName", value);
                    }
                    get showKey() {
                        return this.state.get("showKey");
                    }
                    get showProcess() {
                        return this.state.get("showProcess");
                    }
                    get showStage() {
                        return this.state.get("showStage");
                    }
                    get showStatus() {
                        return this.state.get("showStatus");
                    }
                }
                Forms.EntityProcessField = EntityProcessField;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class BooleanField extends Forms.ExtensionField {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Forms.BooleanField",
                            designScript: "PDJS.Canvas.Design.Forms.BooleanField",
                            element: this
                        });
                    }
                    get itemIcon() {
                        return this.state.get("itemIcon");
                    }
                    set itemIcon(value) {
                        this.state.set("itemIcon", value);
                    }
                    get itemLabel() {
                        return this.state.get("itemLabel");
                    }
                    set itemLabel(value) {
                        this.state.set("itemLabel", value);
                    }
                    get value() {
                        return this.state.get("value");
                    }
                    set value(value) {
                        this.checkValueChanged(this.value, value);
                        this.state.set("value", value);
                    }
                    get input() {
                        return {
                            value: this.value
                        };
                    }
                    set input(value) {
                        this.state.set(value);
                    }
                    isEquivalentTo(field) {
                        return field instanceof BooleanField &&
                            field.columnId === this.columnId;
                    }
                }
                Forms.BooleanField = BooleanField;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class DateField extends Forms.ExtensionField {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Forms.DateField",
                            designScript: "PDJS.Canvas.Design.Forms.DateField",
                            element: this
                        });
                    }
                    get format() {
                        return this.state.get("format");
                    }
                    set format(value) {
                        this.state.set("format", value);
                    }
                    get columnFormat() {
                        return this.state.get("columnFormat");
                    }
                    set columnFormat(value) {
                        this.state.set("columnFormat", value);
                    }
                    get value() {
                        return this.state.get("value");
                    }
                    set value(value) {
                        this.checkValueChanged(this.value, value);
                        this.state.set("value", value);
                    }
                    get input() {
                        return {
                            value: this.value
                        };
                    }
                    set input(value) {
                        this.state.set(value);
                    }
                    get activeFormat() {
                        return this.format || this.columnFormat;
                    }
                    isEquivalentTo(field) {
                        return field instanceof DateField &&
                            field.columnId === this.columnId;
                    }
                }
                Forms.DateField = DateField;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class DecimalField extends Forms.ExtensionField {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Forms.DecimalField",
                            designScript: "PDJS.Canvas.Design.Forms.DecimalField",
                            element: this
                        });
                    }
                    get format() {
                        return this.state.get("format");
                    }
                    set format(value) {
                        this.state.set("format", value);
                    }
                    get columnFormat() {
                        return this.state.get("columnFormat");
                    }
                    set columnFormat(value) {
                        this.state.set("columnFormat", value);
                    }
                    get value() {
                        return this.state.get("value");
                    }
                    set value(value) {
                        this.checkValueChanged(this.value, value);
                        this.state.set("value", value);
                    }
                    get input() {
                        return {
                            value: this.value
                        };
                    }
                    set input(value) {
                        this.state.set(value);
                    }
                    get activeFormat() {
                        return this.format || this.columnFormat;
                    }
                    isEquivalentTo(field) {
                        return field instanceof DecimalField &&
                            field.columnId === this.columnId;
                    }
                }
                Forms.DecimalField = DecimalField;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class EntityField extends Forms.ExtensionField {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Forms.EntityField",
                            designScript: "PDJS.Canvas.Design.Forms.EntityField",
                            element: this
                        });
                    }
                    get entityId() {
                        return this.state.get("entityId");
                    }
                    set entityId(value) {
                        this.checkValueChanged(this.entityId, value);
                        this.state.set("entityId", value);
                    }
                    get entityName() {
                        return this.state.get("entityName");
                    }
                    set entityName(value) {
                        this.state.set("entityName", value);
                    }
                    get entityTypeName() {
                        return this.state.get("entityTypeName");
                    }
                    set entityTypeName(value) {
                        this.state.set("entityTypeName", value);
                    }
                    get entityTypeIcon() {
                        return this.state.get("entityTypeIcon");
                    }
                    set entityTypeIcon(value) {
                        this.state.set("entityTypeIcon", value);
                    }
                    get viewId() {
                        return this.state.get("viewId");
                    }
                    set viewId(value) {
                        this.state.set("viewId", value);
                    }
                    get viewStateId() {
                        return this.state.get("viewStateId");
                    }
                    set viewStateId(value) {
                        this.state.set("viewStateId", value);
                    }
                    get input() {
                        return {
                            entityId: this.entityId,
                            entityName: this.entityName,
                            entityTypeName: this.entityTypeName,
                            entityTypeIcon: this.entityTypeIcon
                        };
                    }
                    set input(value) {
                        this.state.set(value);
                    }
                    isEquivalentTo(field) {
                        return field instanceof EntityField &&
                            field.columnId === this.columnId;
                    }
                }
                Forms.EntityField = EntityField;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class Int32Field extends Forms.ExtensionField {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Forms.Int32Field",
                            designScript: "PDJS.Canvas.Design.Forms.Int32Field",
                            element: this
                        });
                    }
                    get format() {
                        return this.state.get("format");
                    }
                    set format(value) {
                        this.state.set("format", value);
                    }
                    get columnFormat() {
                        return this.state.get("columnFormat");
                    }
                    set columnFormat(value) {
                        this.state.set("columnFormat", value);
                    }
                    get value() {
                        return this.state.get("value");
                    }
                    set value(value) {
                        this.checkValueChanged(this.value, value);
                        this.state.set("value", value);
                    }
                    get input() {
                        return {
                            value: this.value
                        };
                    }
                    set input(value) {
                        this.state.set(value);
                    }
                    get activeFormat() {
                        return this.format || this.columnFormat;
                    }
                    isEquivalentTo(field) {
                        return field instanceof Int32Field &&
                            field.columnId === this.columnId;
                    }
                }
                Forms.Int32Field = Int32Field;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class Int64Field extends Forms.ExtensionField {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Forms.Int64Field",
                            designScript: "PDJS.Canvas.Design.Forms.Int64Field",
                            element: this
                        });
                    }
                    get format() {
                        return this.state.get("format");
                    }
                    set format(value) {
                        this.state.set("format", value);
                    }
                    get columnFormat() {
                        return this.state.get("columnFormat");
                    }
                    set columnFormat(value) {
                        this.state.set("columnFormat", value);
                    }
                    get value() {
                        return this.state.get("value");
                    }
                    set value(value) {
                        this.checkValueChanged(this.value, value);
                        this.state.set("value", value);
                    }
                    get input() {
                        return {
                            value: this.value
                        };
                    }
                    set input(value) {
                        this.state.set(value);
                    }
                    get activeFormat() {
                        return this.format || this.columnFormat;
                    }
                    isEquivalentTo(field) {
                        return field instanceof Int64Field &&
                            field.columnId === this.columnId;
                    }
                }
                Forms.Int64Field = Int64Field;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class MultiSelectField extends Forms.ExtensionField {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Forms.MultiSelectField",
                            designScript: "PDJS.Canvas.Design.Forms.MultiSelectField",
                            element: this
                        });
                    }
                    get items() {
                        return this.state.get("items");
                    }
                    set items(value) {
                        this.state.set("items", value);
                    }
                    get value() {
                        return this.state.get("selectedIds");
                    }
                    set value(value) {
                        this.checkValueChanged(this.value, value);
                        this.state.set("selectedIds", value);
                    }
                    get input() {
                        return {
                            value: this.value
                        };
                    }
                    set input(value) {
                        this.state.set(value);
                    }
                    isEquivalentTo(field) {
                        return field instanceof MultiSelectField &&
                            field.columnId === this.columnId;
                    }
                }
                Forms.MultiSelectField = MultiSelectField;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class SingleSelectField extends Forms.ExtensionField {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Forms.SingleSelectField",
                            designScript: "PDJS.Canvas.Design.Forms.SingleSelectField",
                            element: this
                        });
                    }
                    get items() {
                        return this.state.get("items", []);
                    }
                    set items(value) {
                        this.state.set("items", value);
                    }
                    get selectedId() {
                        return this.state.get("selectedId");
                    }
                    set selectedId(value) {
                        this.checkValueChanged(this.selectedId, value);
                        this.state.set("selectedId", value);
                    }
                    isEquivalentTo(field) {
                        return field instanceof SingleSelectField &&
                            field.columnId === this.columnId;
                    }
                    getSelectedItem() {
                        let result = null;
                        _.each(this.items, (item) => {
                            if (item.id == this.selectedId) {
                                result = item;
                                return false;
                            }
                        });
                        return result;
                    }
                }
                Forms.SingleSelectField = SingleSelectField;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class StringField extends Forms.ExtensionField {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Forms.StringField",
                            designScript: "PDJS.Canvas.Design.Forms.StringField",
                            element: this
                        });
                    }
                    get multiLine() {
                        return this.height > 50;
                    }
                    get value() {
                        return this.state.get("value");
                    }
                    set value(value) {
                        this.checkValueChanged(this.value, value);
                        this.state.set("value", value);
                    }
                    get input() {
                        return {
                            value: this.value
                        };
                    }
                    set input(value) {
                        this.state.set(value);
                    }
                    isEquivalentTo(field) {
                        return field instanceof StringField &&
                            field.columnId === this.columnId;
                    }
                }
                Forms.StringField = StringField;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class UserField extends Forms.ExtensionField {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Forms.UserField",
                            designScript: "PDJS.Canvas.Design.Forms.UserField",
                            element: this
                        });
                    }
                    get userId() {
                        return this.state.get("userId");
                    }
                    set userId(value) {
                        this.checkValueChanged(this.userId, value);
                        this.state.set("userId", value);
                    }
                    get userName() {
                        return this.state.get("userName");
                    }
                    set userName(value) {
                        this.state.set("userName", value);
                    }
                    get viewId() {
                        return this.state.get("viewId");
                    }
                    set viewId(value) {
                        this.state.set("viewId", value);
                    }
                    get viewStateId() {
                        return this.state.get("viewStateId");
                    }
                    set viewStateId(value) {
                        this.state.set("viewStateId", value);
                    }
                    get input() {
                        return {
                            userId: this.userId,
                            userName: this.userName
                        };
                    }
                    set input(value) {
                        this.state.set(value);
                    }
                    isEquivalentTo(field) {
                        return field instanceof UserField &&
                            field.columnId === this.columnId;
                    }
                }
                Forms.UserField = UserField;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class BatchField extends Forms.FormField {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Forms.BatchField",
                            designScript: "PDJS.Canvas.Design.Forms.BatchField",
                            element: this
                        });
                        this.reloadModelAfterPost = true;
                        if (this.listItems == null) {
                            this.listItems = [];
                        }
                    }
                    get contextId() {
                        return this.state.get("contextId");
                    }
                    set contextId(value) {
                        this.state.set("contextId", value);
                    }
                    get entityId() {
                        return this.state.get("entityId.value");
                    }
                    set entityId(value) {
                        this.state.set("entityId.value", value);
                    }
                    get enforceSecurity() {
                        return this.state.get("enforceSecurity");
                    }
                    set enforceSecurity(value) {
                        this.state.set("enforceSecurity", value);
                    }
                    get filterTerm() {
                        return this.state.get("filterTerm", "");
                    }
                    set filterTerm(value) {
                        this.state.set("filterTerm", value, { silent: true });
                    }
                    get isReadOnly() {
                        return this.state.get("isReadOnly.value");
                    }
                    set isReadOnly(value) {
                        this.state.set("isReadOnly.value", value);
                    }
                    get isReadOnlyTag() {
                        return this.state.get("isReadOnly.text");
                    }
                    set isReadOnlyTag(value) {
                        this.state.set("isReadOnly.text", value);
                    }
                    get selectIdentities() {
                        return this.state.get("selectIdentities");
                    }
                    set selectIdentities(value) {
                        this.state.set("selectIdentities", value);
                    }
                    get isRequired() {
                        return this.state.get("isRequired.value");
                    }
                    set isRequired(value) {
                        this.state.set("isRequired.value", value);
                    }
                    get isRequiredTag() {
                        return this.state.get("isRequired.text");
                    }
                    set isRequiredTag(value) {
                        this.state.set("isRequired.text", value);
                    }
                    get selectedIds() {
                        return this.state.get("selectedIds");
                    }
                    set selectedIds(value) {
                        this.state.set("selectedIds", value, { silent: true });
                    }
                    get value() {
                        return this.state.get("value");
                    }
                    set value(value) {
                        this.checkValueChanged(this.value, value);
                        this.state.set("value", value);
                    }
                    get viewId() {
                        return this.state.get("viewId");
                    }
                    get viewStateId() {
                        return this.state.get("viewStateId");
                    }
                    get input() {
                        return {
                            value: this.value
                        };
                    }
                    set input(value) {
                        this.state.set(value);
                    }
                    get activeEnabledState() {
                        return !this.isDisabled && !this.isReadOnly;
                    }
                    get listItems() {
                        return this.state.get("listItems");
                    }
                    set listItems(value) {
                        this.state.set("listItems", value, { silent: true });
                    }
                    get dialogTitle() {
                        return this.state.get("dialogTitle", "Batch Field Selection");
                    }
                    get dialogHeight() {
                        return this.state.get("dialogHeight", 400);
                    }
                    get dialogWidth() {
                        return this.state.get("dialogWidth", 600);
                    }
                    get showCheckboxes() {
                        return this.state.get("showCheckboxes", 600);
                    }
                    onReloadModel(model) {
                        super.onReloadModel(model);
                        if (model instanceof BatchField) {
                            this.listItems = model.listItems;
                            this.filterTerm = model.filterTerm;
                        }
                    }
                    toJSON() {
                        this.selectedIds = [];
                        _.each(this.listItems, (item) => {
                            if (item.active) {
                                this.selectedIds[this.selectedIds.length] = item.id;
                            }
                        });
                        return super.toJSON();
                    }
                    isEquivalentTo(field) {
                        return field instanceof BatchField;
                    }
                }
                Forms.BatchField = BatchField;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Forms;
            (function (Forms) {
                class TextField extends Forms.FormField {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Forms.TextField",
                            designScript: "PDJS.Canvas.Design.Forms.TextField",
                            element: this
                        });
                    }
                    get contextId() {
                        return this.state.get("contextId");
                    }
                    set contextId(value) {
                        this.state.set("contextId", value);
                    }
                    get enforceSecurity() {
                        return this.state.get("enforceSecurity");
                    }
                    set enforceSecurity(value) {
                        this.state.set("enforceSecurity", value);
                    }
                    get isReadOnly() {
                        return this.state.get("isReadOnly.value");
                    }
                    set isReadOnly(value) {
                        this.state.set("isReadOnly.value", value);
                    }
                    get isReadOnlyTag() {
                        return this.state.get("isReadOnly.text");
                    }
                    set isReadOnlyTag(value) {
                        this.state.set("isReadOnly.text", value);
                    }
                    get isRequired() {
                        return this.state.get("isRequired.value");
                    }
                    set isRequired(value) {
                        this.state.set("isRequired.value", value);
                    }
                    get isRequiredTag() {
                        return this.state.get("isRequired.text");
                    }
                    set isRequiredTag(value) {
                        this.state.set("isRequired.text", value);
                    }
                    get value() {
                        return this.state.get("value");
                    }
                    set value(value) {
                        this.checkValueChanged(this.value, value);
                        this.state.set("value", value);
                    }
                    get multiLine() {
                        return this.height > 50;
                    }
                    get input() {
                        return {
                            value: this.value
                        };
                    }
                    set input(value) {
                        this.state.set(value);
                    }
                    get activeEnabledState() {
                        return !this.isDisabled && !this.isReadOnly;
                    }
                    isEquivalentTo(field) {
                        return field instanceof TextField;
                    }
                }
                Forms.TextField = TextField;
            })(Forms = Core.Forms || (Core.Forms = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Process;
            (function (Process) {
                let ProcessDecisions = class ProcessDecisions extends Core.ElementModel {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Process.ProcessDecisions",
                            designScript: "PDJS.Canvas.Design.Process.ProcessDecisions",
                            element: this
                        });
                    }
                    get entityId() {
                        return this.document.entityId;
                    }
                    get showKey() {
                        return this.state.get("showKeys");
                    }
                    get showStage() {
                        return this.state.get("showStages");
                    }
                    get showStatus() {
                        return this.state.get("showStatus");
                    }
                    get currentKey() {
                        return this.state.get("currentKey");
                    }
                    get currentStage() {
                        return this.state.get("currentStage");
                    }
                    get currentStatus() {
                        return this.state.get("currentStatus");
                    }
                    get decisions() {
                        return this.state.get("decisions", []);
                    }
                    toJSON() {
                        return _.extend(super.toJSON(), {
                            entityId: this.entityId
                        });
                    }
                };
                ProcessDecisions = __decorate([
                    Jade.InterfaceGuard.implement(Core.IIndexableGuard)
                ], ProcessDecisions);
                Process.ProcessDecisions = ProcessDecisions;
            })(Process = Core.Process || (Core.Process = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Process;
            (function (Process) {
                let ProcessStateOrientation;
                (function (ProcessStateOrientation) {
                    ProcessStateOrientation["Horizontal"] = "horizontal";
                    ProcessStateOrientation["Vertical"] = "vertical";
                })(ProcessStateOrientation = Process.ProcessStateOrientation || (Process.ProcessStateOrientation = {}));
                let ProcessState = class ProcessState extends Core.ElementModel {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Process.ProcessState",
                            designScript: "PDJS.Canvas.Design.Process.ProcessState",
                            element: this
                        });
                    }
                    get showProcess() {
                        return this.state.get("showProcess");
                    }
                    get showKey() {
                        return this.state.get("showKey");
                    }
                    get showStage() {
                        return this.state.get("showStage");
                    }
                    get showStatus() {
                        return this.state.get("showStatus");
                    }
                    get showLabels() {
                        return this.state.get("showLabels");
                    }
                    get currentKey() {
                        return this.state.get("currentKey");
                    }
                    get currentStage() {
                        return this.state.get("currentStage");
                    }
                    get currentStatus() {
                        return this.state.get("currentStatus");
                    }
                    get fontSize() {
                        return this.state.get("fontSize");
                    }
                    get itemHeight() {
                        return this.fontSize + 10 + (5 - (this.fontSize % 5));
                    }
                    get orientation() {
                        return this.state.get("orientation", ProcessStateOrientation.Horizontal);
                    }
                    get processName() {
                        return this.state.get("processName");
                    }
                    get displayedSectionCount() {
                        return (this.showProcess ? 1 : 0) +
                            (this.showKey ? 1 : 0) +
                            (this.showStage ? 1 : 0) +
                            (this.showStatus ? 1 : 0);
                    }
                    get absoluteHeight() {
                        let isHorizontal = this.orientation == ProcessStateOrientation.Horizontal;
                        let multiplier = isHorizontal ? 2 : this.displayedSectionCount * 2;
                        return this.itemHeight * multiplier;
                    }
                    toJSON() {
                        return _.extend(super.toJSON(), {
                            itemHeight: this.itemHeight,
                            displayedSectionCount: this.displayedSectionCount,
                            absoluteHeight: this.absoluteHeight
                        });
                    }
                };
                ProcessState = __decorate([
                    Jade.InterfaceGuard.implement(Core.IIndexableGuard)
                ], ProcessState);
                Process.ProcessState = ProcessState;
            })(Process = Core.Process || (Core.Process = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Process;
            (function (Process) {
                let ProcessView = class ProcessView extends Core.ElementModel {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Process.ProcessView",
                            designScript: "PDJS.Canvas.Design.Process.ProcessView",
                            element: this
                        });
                        this.calculateRowCount();
                    }
                    get tabIndex() {
                        return this.document.tabIndexes.indexOf(this.id);
                    }
                    get activeTabIndex() {
                        return this.tabIndex < 0 ? -1 : this.tabIndex + (Jade.Application.instance.contexts.current.depth * 1000);
                    }
                    get entityId() {
                        return this.document.attributes["entityId"];
                    }
                    get showKeys() {
                        return this.state.get("showKeys");
                    }
                    get showStages() {
                        return this.state.get("showStages");
                    }
                    get showState() {
                        return this.state.get("showState");
                    }
                    get showDecisions() {
                        return this.state.get("showDecisions");
                    }
                    get showCurrentKey() {
                        return this.state.get("showCurrentKey");
                    }
                    get showVisitedKeys() {
                        return this.state.get("showVisitedKeys");
                    }
                    get showCurrentStage() {
                        return this.state.get("showCurrentStage");
                    }
                    get showVisitedStages() {
                        return this.state.get("showVisitedStages");
                    }
                    get currentKey() {
                        return this.state.get("currentKey");
                    }
                    get currentStage() {
                        return this.state.get("currentStage");
                    }
                    get currentStatus() {
                        return this.state.get("currentStatus");
                    }
                    get keys() {
                        return this.state.get("keys");
                    }
                    get stages() {
                        return this.state.get("stages");
                    }
                    get keyHeight() {
                        return this.state.get("keyHeight");
                    }
                    get keyFontSize() {
                        return this.state.get("keyFontSize");
                    }
                    get stageHeight() {
                        return this.state.get("stageHeight", 120);
                    }
                    get stageFontSize() {
                        return this.state.get("stageFontSize", 12);
                    }
                    get gridColumnWidth() {
                        return this.state.get("gridColumnWidth", 120);
                    }
                    get currentStageBackColor() {
                        return this.state.get("currentStageBackColor");
                    }
                    get currentStageBorderColor() {
                        return this.state.get("currentStageBorderColor");
                    }
                    get currentStageBorderWidth() {
                        return this.state.get("currentStageBorderWidth");
                    }
                    get currentStageForeColor() {
                        return this.state.get("currentStageForeColor");
                    }
                    get selectedStageBackColor() {
                        return this.state.get("selectedStageBackColor");
                    }
                    get selectedStageBorderColor() {
                        return this.state.get("selectedStageBorderColor");
                    }
                    get selectedStageBorderWidth() {
                        return this.state.get("selectedStageBorderWidth");
                    }
                    get selectedStageForeColor() {
                        return this.state.get("selectedStageForeColor");
                    }
                    get showDecisionDestinations() {
                        return this.state.get("showDecisionDestinations");
                    }
                    get visitedStageBackColor() {
                        return this.state.get("visitedStageBackColor");
                    }
                    get visitedStageBorderColor() {
                        return this.state.get("visitedStageBorderColor");
                    }
                    get visitedStageBorderWidth() {
                        return this.state.get("visitedStageBorderWidth");
                    }
                    get visitedStageForeColor() {
                        return this.state.get("visitedStageForeColor");
                    }
                    get currentKeyBackColor() {
                        return this.state.get("currentKeyBackColor");
                    }
                    get currentKeyBorderColor() {
                        return this.state.get("currentKeyBorderColor");
                    }
                    get currentKeyBorderWidth() {
                        return this.state.get("currentKeyBorderWidth");
                    }
                    get currentKeyForeColor() {
                        return this.state.get("currentKeyForeColor");
                    }
                    get visitedKeyBackColor() {
                        return this.state.get("visitedKeyBackColor");
                    }
                    get visitedKeyBorderColor() {
                        return this.state.get("visitedKeyBorderColor");
                    }
                    get visitedKeyBorderWidth() {
                        return this.state.get("visitedKeyBorderWidth");
                    }
                    get visitedKeyForeColor() {
                        return this.state.get("visitedKeyForeColor");
                    }
                    get rowCount() {
                        return this.m_rowCount;
                    }
                    calculateRowCount() {
                        let count = 0;
                        this.keys.forEach(key => {
                            let stageCount = this.stages.filter(stage => {
                                return stage.keyId == key.id;
                            }).length;
                            count = stageCount > count ? stageCount : count;
                        });
                        this.m_rowCount = count;
                    }
                };
                ProcessView = __decorate([
                    Jade.InterfaceGuard.implement(Core.IIndexableGuard)
                ], ProcessView);
                Process.ProcessView = ProcessView;
            })(Process = Core.Process || (Core.Process = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Shapes;
            (function (Shapes) {
                class Shape extends Core.ElementModel {
                    constructor(options) {
                        super(options);
                    }
                    get backgroundColor() {
                        return this.state.get("backgroundColor");
                    }
                    set backgroundColor(value) {
                        this.state.set("backgroundColor", value);
                    }
                    get borderColor() {
                        return this.state.get("borderColor");
                    }
                    set borderColor(value) {
                        this.state.set("borderColor", value);
                    }
                    get borderStyle() {
                        return this.state.get("borderStyle");
                    }
                    set borderStyle(value) {
                        this.state.set("borderStyle", value);
                    }
                    get borderWidth() {
                        return this.state.get("borderWidth");
                    }
                    set borderWidth(value) {
                        this.state.set("borderWidth", value);
                    }
                }
                Shapes.Shape = Shape;
            })(Shapes = Core.Shapes || (Core.Shapes = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Shapes;
            (function (Shapes) {
                class Ellipse extends Shapes.Shape {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Shapes.Ellipse",
                            designScript: "PDJS.Canvas.Design.Shapes.Ellipse",
                            element: this
                        });
                    }
                }
                Shapes.Ellipse = Ellipse;
            })(Shapes = Core.Shapes || (Core.Shapes = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Shapes;
            (function (Shapes) {
                let LineCapShape;
                (function (LineCapShape) {
                    LineCapShape[LineCapShape["none"] = 0] = "none";
                    LineCapShape[LineCapShape["circle"] = 1] = "circle";
                    LineCapShape[LineCapShape["square"] = 2] = "square";
                    LineCapShape[LineCapShape["triangle"] = 3] = "triangle";
                })(LineCapShape = Shapes.LineCapShape || (Shapes.LineCapShape = {}));
                class Line extends Shapes.Shape {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Shapes.Line",
                            designScript: "PDJS.Canvas.Design.Shapes.Line",
                            element: this
                        });
                    }
                    get backgroundColor() {
                        return this.lineColor;
                    }
                    set backgroundColor(value) {
                        this.endCapColor = value;
                        this.startCapColor = value;
                        this.lineColor = value;
                    }
                    get lineColor() {
                        return this.state.get("lineColor");
                    }
                    set lineColor(value) {
                        this.state.set("lineColor", value);
                    }
                    get lineWeight() {
                        return this.state.get("lineWeight");
                    }
                    set lineWeight(value) {
                        this.state.set("lineWeight", value);
                    }
                    get startCapShape() {
                        return this.state.get("startCapShape");
                    }
                    set startCapShape(value) {
                        this.state.set("startCapShape", value);
                    }
                    get startCapHeight() {
                        return this.state.get("startCapHeight");
                    }
                    set startCapHeight(value) {
                        this.state.set("startCapHeight", value);
                    }
                    get startCapWidth() {
                        return this.state.get("startCapWidth");
                    }
                    set startCapWidth(value) {
                        this.state.set("startCapWidth", value);
                    }
                    get startCapColor() {
                        return this.state.get("startCapColor");
                    }
                    set startCapColor(value) {
                        this.state.set("startCapColor", value);
                    }
                    get endCapShape() {
                        return this.state.get("endCapShape");
                    }
                    set endCapShape(value) {
                        this.state.set("endCapShape", value);
                    }
                    get endCapHeight() {
                        return this.state.get("endCapHeight");
                    }
                    set endCapHeight(value) {
                        this.state.set("endCapHeight", value);
                    }
                    get endCapWidth() {
                        return this.state.get("endCapWidth");
                    }
                    set endCapWidth(value) {
                        this.state.set("endCapWidth", value);
                    }
                    get endCapColor() {
                        return this.state.get("endCapColor");
                    }
                    set endCapColor(value) {
                        this.state.set("endCapColor", value);
                    }
                    get currentMaxHeight() {
                        let result = 0;
                        if (this.startCapHeight > result)
                            result = this.startCapHeight;
                        if (this.endCapHeight > result)
                            result = this.endCapHeight;
                        if (this.lineWeight > result)
                            result = this.lineWeight;
                        return result;
                    }
                }
                Shapes.Line = Line;
            })(Shapes = Core.Shapes || (Core.Shapes = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Shapes;
            (function (Shapes) {
                class Rectangle extends Shapes.Shape {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Shapes.Rectangle",
                            designScript: "PDJS.Canvas.Design.Shapes.Rectangle",
                            element: this
                        });
                    }
                }
                Shapes.Rectangle = Rectangle;
            })(Shapes = Core.Shapes || (Core.Shapes = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Shapes;
            (function (Shapes) {
                let TriangleRotation;
                (function (TriangleRotation) {
                    TriangleRotation[TriangleRotation["rotate0"] = 0] = "rotate0";
                    TriangleRotation[TriangleRotation["rotate90"] = 1] = "rotate90";
                    TriangleRotation[TriangleRotation["rotate180"] = 2] = "rotate180";
                    TriangleRotation[TriangleRotation["rotate270"] = 3] = "rotate270";
                })(TriangleRotation = Shapes.TriangleRotation || (Shapes.TriangleRotation = {}));
                class Triangle extends Shapes.Shape {
                    constructor(options) {
                        super(options);
                    }
                    get rotation() {
                        return this.state.get("rotation", TriangleRotation.rotate0);
                    }
                    set rotation(value) {
                        this.state.set("rotation", value);
                    }
                }
                Shapes.Triangle = Triangle;
            })(Shapes = Core.Shapes || (Core.Shapes = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Shapes;
            (function (Shapes) {
                class IsoscelesTriangle extends Shapes.Triangle {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Shapes.IsoscelesTriangle",
                            designScript: "PDJS.Canvas.Design.Shapes.IsoscelesTriangle",
                            element: this
                        });
                    }
                }
                Shapes.IsoscelesTriangle = IsoscelesTriangle;
            })(Shapes = Core.Shapes || (Core.Shapes = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Shapes;
            (function (Shapes) {
                class RightTriangle extends Shapes.Triangle {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Shapes.RightTriangle",
                            designScript: "PDJS.Canvas.Design.Shapes.RightTriangle",
                            element: this
                        });
                    }
                }
                Shapes.RightTriangle = RightTriangle;
            })(Shapes = Core.Shapes || (Core.Shapes = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Core;
        (function (Core) {
            var Views;
            (function (Views) {
                let EventHistoryView = class EventHistoryView extends Core.ElementModel {
                    constructor(options) {
                        super(options);
                        this.resolver = new CanvasJS.TypeResolver({
                            actualScript: "PDJS.Canvas.Actual.Views.EventHistoryView",
                            designScript: "PDJS.Canvas.Design.Views.EventHistoryView",
                            element: this
                        });
                    }
                    get isDestroyable() {
                        return this.state.get("isDestroyable");
                    }
                    get entityId() {
                        return this.state.get("entityId");
                    }
                    get viewId() {
                        return this.state.get("viewId");
                    }
                    get viewStateId() {
                        return this.state.get("viewStateId");
                    }
                    get contextFilters() {
                        return this.state.get("contextFilters", []);
                    }
                };
                EventHistoryView = __decorate([
                    Jade.InterfaceGuard.implement(Core.IIndexableGuard)
                ], EventHistoryView);
                Views.EventHistoryView = EventHistoryView;
            })(Views = Core.Views || (Core.Views = {}));
        })(Core = Canvas.Core || (Canvas.Core = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            Jade.Database.onCreate((e) => {
                e.db.createObjectStore("settings", {
                    keyPath: "id"
                });
            });
            Jade.Application.onStart(() => {
                CanvasJS.Design.ClipboardPasteEvent.handler = (e) => {
                    let svc = new PDJS.Services.Canvas.ElementService();
                    let doc = CanvasJS.Design.Environment.document.source;
                    svc.createDesignElements({
                        documentId: doc.id,
                        sessionId: doc.sessionId,
                        elements: e.states,
                        reset: e.reset,
                        success: (response) => {
                            e.commit(response.data);
                        },
                        error: () => {
                            e.cancel();
                        }
                    });
                };
                CanvasJS.Design.DeleteElementEvent.handler = (e) => {
                    let svc = new PDJS.Services.Canvas.ElementService();
                    let doc = CanvasJS.Design.Environment.document.source;
                    svc.deleteDesignElements({
                        documentId: doc.id,
                        sessionId: doc.sessionId,
                        elements: e.states,
                        success: (response) => {
                            e.commit();
                        },
                        error: () => {
                            e.cancel();
                        }
                    });
                };
            });
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var ContextMenu;
            (function (ContextMenu) {
                Jade.Application.onStart(() => {
                    Jade.UI.Controls.ContextMenuGroups.add(new ContextMenu.ColorPaletteContextMenuGroup());
                    Jade.UI.Controls.ContextMenuGroups.add(new ContextMenu.ShapeBorderContextMenuGroup());
                    Jade.UI.Controls.ContextMenuGroups.add(new ContextMenu.BorderStyleContextMenuGroup());
                    Jade.UI.Controls.ContextMenuGroups.add(new ContextMenu.BorderWeightContextMenuGroup());
                    Jade.UI.Controls.ContextMenuGroups.add(new ContextMenu.AlignmentContextMenuGroup());
                    Jade.UI.Controls.ContextMenuGroups.add(new ContextMenu.LineStartCapShapeMenuGroup());
                    Jade.UI.Controls.ContextMenuGroups.add(new ContextMenu.LineEndCapShapeMenuGroup());
                    Jade.UI.Controls.ContextMenuGroups.add(new ContextMenu.ElementContextMenuGroup());
                    Jade.UI.Controls.ContextMenuGroups.add(new ContextMenu.TabIndexContextMenuGroup());
                    Jade.UI.Controls.ContextMenuGroups.add(new ContextMenu.ViewContextMenuGroup());
                });
            })(ContextMenu = Design.ContextMenu || (Design.ContextMenu = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var RibbonBar;
            (function (RibbonBar) {
                Jade.Application.onStart(() => {
                    Jade.UI.Controls.RibbonBarSections.add(new RibbonBar.HomeRibbonSection());
                    Jade.UI.Controls.RibbonBarSections.add(new RibbonBar.ShapeRibbonSection());
                    Jade.UI.Controls.RibbonBarSections.add(new RibbonBar.FormFieldRibbonSection());
                    Jade.UI.Controls.RibbonBarSections.add(new RibbonBar.ViewRibbonSection());
                });
            })(RibbonBar = Design.RibbonBar || (Design.RibbonBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            let CssClass;
            (function (CssClass) {
                CssClass["ElementError"] = "-pdjs-element-design-error";
            })(CssClass = Design.CssClass || (Design.CssClass = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class DesignerDialog extends Jade.UI.Dialog {
                constructor(options) {
                    super(options);
                }
                get documentId() {
                    return this.state.get("documentId");
                }
                get canvasType() {
                    return this.state.get("canvasType");
                }
                get entityTypeId() {
                    return this.state.get("entityTypeId");
                }
                get documentTypeId() {
                    return this.state.get("documentTypeId");
                }
                get extensionId() {
                    return this.state.get("extensionId");
                }
                get isListBased() {
                    return this.state.get("isListBased");
                }
                get isFileBased() {
                    return this.state.get("isFileBased");
                }
                template() {
                    return `<div class="${CanvasJS.Design.CanvasCss.Design}"></div>`;
                }
                onInit(e) {
                    this.m_documentService = new PDJS.Services.Canvas.DocumentService();
                    CanvasJS.Design.Environment.store.set("dialog", this);
                    this.controls.add(new CanvasJS.Design.Workspace({}));
                }
                onActivate(e) {
                    CanvasJS.Design.Environment.statusBar.controls.add(new Design.StatusBar.Errors({}));
                    this.loadDocument();
                    this.loadToolBox();
                    CanvasJS.Design.Environment.surface.node.css({
                        backgroundColor: "#F8F8F8"
                    });
                    this.loadHotKeys();
                    this.window.kendo.onEscKey = (e) => {
                        (new Design.DocumentCloseCommand()).execute();
                    };
                }
                onCreateContext(e) {
                    super.onCreateContext(e);
                    let context = Jade.Application.instance.contexts.getContextById(e.contextId);
                    if (context != null) {
                        context.tags.push("canvas");
                    }
                }
                getWindowOptions() {
                    return {
                        title: false,
                        maximized: true,
                        height: 500,
                        width: 700
                    };
                }
                loadToolBox() {
                    let service = new PDJS.Services.Canvas.ToolBoxService();
                    let loadingMessage = new PDJS.Shared.UI.Controls.Message({
                        message: `<span style="font-size: 20px;">Loading Items...</span>`
                    });
                    CanvasJS.Design.Environment.toolBox.controls.add(loadingMessage);
                    service.load({
                        canvasType: this.canvasType,
                        success: (e) => {
                            CanvasJS.Design.Environment.toolBox.loadToolBoxItems(e.data);
                            CanvasJS.Design.Environment.toolBox.controls.remove(loadingMessage);
                        }
                    });
                }
                loadDocument() {
                    let loadingMessage = new PDJS.Shared.UI.Controls.Message({
                        message: `<span style="font-size: 20px;">Loading Document...</span>`
                    });
                    CanvasJS.Design.Environment.surface.controls.add(loadingMessage);
                    this.m_documentService.loadDesignDocument({
                        documentId: this.documentId,
                        success: (e) => {
                            let model = new Canvas.Core.Documents.DesignDocument(e.data);
                            CanvasJS.Design.Environment.surface.loadDocument(new Design.DocumentView({
                                $source: model,
                                canvasType: this.canvasType,
                                entityTypeId: this.entityTypeId,
                                extensionId: this.extensionId,
                                documentTypeId: this.documentTypeId,
                                isFileBased: this.isFileBased,
                                isListBased: this.isListBased
                            }));
                            if (loadingMessage != null) {
                                CanvasJS.Design.Environment.surface.controls.remove(loadingMessage);
                            }
                        }
                    });
                }
                loadHotKeys() {
                    CanvasJS.Design.Environment.context.hotkeys.register_combo({
                        keys: "ctrl e",
                        on_keydown: () => {
                            CanvasJS.Design.Environment
                                .context
                                .commands
                                .execute("pdjs/canvas/standard:document/close", null);
                        },
                        prevent_default: true,
                        prevent_repeat: true
                    });
                    CanvasJS.Design.Environment.context.hotkeys.register_combo({
                        keys: "ctrl s",
                        on_keydown: () => {
                            CanvasJS.Design.Environment
                                .context
                                .commands
                                .execute("pdjs/canvas/standard:document/save", null);
                        },
                        prevent_default: true,
                        prevent_repeat: true
                    });
                    CanvasJS.Design.Environment.context.hotkeys.register_combo({
                        keys: "alt f s",
                        on_keydown: () => {
                            CanvasJS.Design.Environment
                                .context
                                .commands
                                .execute("pdjs/canvas/standard:document/save", null);
                        },
                        prevent_default: true,
                        prevent_repeat: true
                    });
                }
                static open(options) {
                    let result = new DesignerDialog(options);
                    return result;
                    return null;
                }
            }
            Design.DesignerDialog = DesignerDialog;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class DocumentView extends CanvasJS.Design.DocumentDesignViewBase {
                constructor(options) {
                    super(options);
                    CanvasJS.Design.Environment.store.set("document", this);
                }
                get documentId() {
                    return this.state.get("documentId");
                }
                get canvasType() {
                    return this.state.get("canvasType");
                }
                get entityTypeId() {
                    return this.state.get("entityTypeId");
                }
                get documentTypeId() {
                    return this.state.get("documentTypeId");
                }
                get extensionId() {
                    return this.state.get("extensionId");
                }
                get isListBased() {
                    return this.state.get("isListBased", false);
                }
                get isFileBased() {
                    return this.state.get("isFileBased", false);
                }
                load() {
                    this.source.elements.each((item) => {
                        let element = item.resolver.getViewOf(CanvasJS.CanvasType.Design);
                        if (element != null) {
                            this.controls.add(element);
                        }
                    });
                    CanvasJS.Design.Environment
                        .events
                        .publish(CanvasJS.Design.CanvasEvent.DOCUMENT_LOAD);
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.load();
                }
                addSelectionBox() {
                    this.controls.add(new Design.SelectionBox({}));
                }
                onStateChanged() {
                    this.node.css({
                        backgroundColor: this.source.backgroundColor,
                        width: this.source.width,
                        height: this.source.height
                    });
                }
            }
            Design.DocumentView = DocumentView;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            let ElementEditorLayoutType;
            (function (ElementEditorLayoutType) {
                ElementEditorLayoutType["PanelBar"] = "PDJS.JS.ProspectDirector.Web.UI.FeatureSets.Layouts.PanelBarLayout";
                ElementEditorLayoutType["SideBar"] = "PDJS.JS.ProspectDirector.Web.UI.FeatureSets.Layouts.SideBarLayout";
                ElementEditorLayoutType["TabStrip"] = "PDJS.JS.ProspectDirector.Web.UI.FeatureSets.Layouts.TabStripLayout";
                ElementEditorLayoutType["Simple"] = "PDJS.JS.ProspectDirector.Web.UI.FeatureSets.Layouts.SimpleLayout";
            })(ElementEditorLayoutType = Design.ElementEditorLayoutType || (Design.ElementEditorLayoutType = {}));
            class ElementEditorAttribute {
                static convertEnumToType(type) {
                    let result = null;
                    let typeName = type;
                    if (typeName == null) {
                        result = ElementEditorLayoutType.TabStrip;
                    }
                    result = Jade.Type.getType(typeName);
                    return result;
                }
                static read(element) {
                    let result = _.extend({
                        layout: ElementEditorLayoutType.TabStrip,
                        height: 500,
                        width: 500
                    }, element[ElementEditorAttribute.ATTRIBUTE_KEY] || {});
                    return _.extend(result, {
                        layoutType: ElementEditorAttribute.convertEnumToType(result.layout)
                    });
                }
            }
            ElementEditorAttribute.ATTRIBUTE_KEY = "___elementEditor___";
            Design.ElementEditorAttribute = ElementEditorAttribute;
            function elementEditor(layout, height = 500, width = 400) {
                return function attribute(constr) {
                    return class extends constr {
                        constructor(...args) {
                            super(...args);
                            this[ElementEditorAttribute.ATTRIBUTE_KEY] = {
                                layout: layout,
                                height: height,
                                width: width
                            };
                        }
                    };
                };
            }
            Design.elementEditor = elementEditor;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class ElementLayoutSettings extends CanvasJS.ElementModel {
                static get columnCount() {
                    this.ensurelocalStorage();
                    return this.m_data.columnCount || 1;
                }
                static set columnCount(value) {
                    this.ensurelocalStorage();
                    this.m_data.columnCount = value;
                }
                static get columnWidth() {
                    this.ensurelocalStorage();
                    return this.m_data.columnWidth || 300;
                }
                static set columnWidth(value) {
                    this.ensurelocalStorage();
                    this.m_data.columnWidth = value;
                }
                static get columnSpacing() {
                    this.ensurelocalStorage();
                    return this.m_data.columnSpacing || 20;
                }
                static set columnSpacing(value) {
                    this.ensurelocalStorage();
                    this.m_data.columnSpacing = value;
                }
                static get rowSpacing() {
                    this.ensurelocalStorage();
                    return this.m_data.rowSpacing || 5;
                }
                static set rowSpacing(value) {
                    this.ensurelocalStorage();
                    this.m_data.rowSpacing = value;
                }
                static get data() {
                    this.ensurelocalStorage();
                    return this.m_data;
                }
                static save() {
                    localStorage.setItem(this.LOCAL_STORAGE_KEY, JSON.stringify(this.m_data));
                }
                static applyLayout(args) {
                    let colIndex = 0;
                    let rowHeight = 0;
                    let currentX = args.xOrigin;
                    let currentY = args.yOrigin;
                    _.each(args.elements, (element) => {
                        if (element.height > rowHeight) {
                            rowHeight = element.height;
                        }
                        element.width = this.columnWidth;
                        element.x = currentX;
                        element.y = currentY;
                        if (colIndex < (this.columnCount - 1)) {
                            currentX += element.width + this.columnSpacing;
                            colIndex += 1;
                        }
                        else {
                            currentX = args.xOrigin;
                            currentY += rowHeight + this.rowSpacing;
                            colIndex = 0;
                            rowHeight = 0;
                        }
                    });
                }
                static ensurelocalStorage() {
                    if (this.m_data != null) {
                        return;
                    }
                    let data = localStorage.getItem(this.LOCAL_STORAGE_KEY);
                    try {
                        this.m_data = JSON.parse(data);
                    }
                    catch (_a) {
                        data = null;
                    }
                    if (data == null) {
                        this.m_data = {
                            columnCount: 1,
                            columnSpacing: 20,
                            columnWidth: 300,
                            rowSpacing: 5
                        };
                    }
                }
            }
            ElementLayoutSettings.LOCAL_STORAGE_KEY = "ElementLayoutSettings";
            Design.ElementLayoutSettings = ElementLayoutSettings;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class ElementView extends CanvasJS.Design.ElementDesignViewBase {
                onComplete(e) {
                    super.onComplete(e);
                    this.handleErrors();
                }
                onStateChanged() {
                    super.onStateChanged();
                    this.handleErrors();
                }
                handleErrors() {
                    let currentError = this.controls.getByType(Design.ElementViewError).first();
                    if (currentError != null) {
                        this.controls.remove(currentError);
                    }
                    if (this.source.hasErrors) {
                        this.controls.add(new Design.ElementViewError({
                            insertAt: `.-canvasjs-overlay`,
                            element: this
                        }));
                        let highlight = this.node.find(".-canvasjs-highlight").detach();
                        let overlay = this.node.find(".-canvasjs-overlay");
                        overlay.append(highlight);
                    }
                }
            }
            Design.ElementView = ElementView;
            class ElementViewBase extends ElementView {
                get source() {
                    return this.m_source;
                }
            }
            Design.ElementViewBase = ElementViewBase;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class ElementViewError extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                }
                get element() {
                    return this.state.get("element");
                }
                template() {
                    let result = $(`<div class="${Design.CssClass.ElementError}"></div>`);
                    if (this.element.source.hasNonRecoverableErrors) {
                        result.append(this.getOverlay());
                        result.append(this.getIcon("error.png"));
                    }
                    else {
                        result.append(this.getIcon());
                        result.css({
                            backgroundImage: "none"
                        });
                    }
                    return result;
                }
                getIcon(icon) {
                    let result = $(`<div role="icon"></div>`);
                    result.css({
                        backgroundImage: `url(${this.getIconPath(icon)})`,
                        backgroundPosition: "center center",
                        height: "32px",
                        width: "32px",
                        position: "absolute",
                        top: -8,
                        right: -8,
                        borderRadius: "32px",
                        backgroundColor: "#FFFFFF"
                    });
                    return result;
                }
                getOverlay() {
                    return $(`<table>
                    <tr>
                        <td>
                            <div style="padding-left: 37px;background-image:url(${this.getIconPath()})">
                                ${this.element.source.componentName}
                            </div>
                        </td>
                    </tr>
                </table>`);
                }
                getIconPath(icon) {
                    let iconName = this.element.source.hasNonRecoverableErrors ? "skull.png" : "error.png";
                    if (icon != null) {
                        iconName = icon;
                    }
                    return Jade.IconSet.get("pdjs")
                        .resolve(iconName, Jade.IconSetSizeSpecificDirectory.x32);
                }
            }
            Design.ElementViewError = ElementViewError;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class FeatureEditor {
                static showForDocument(document) {
                    let contextId = UUID.genV4().toString();
                    Jade.Application.instance.contexts.createContext({
                        id: contextId,
                        makeDefault: true,
                        name: `Canvas Properties`
                    });
                    PDJS.JS.ProspectDirector.Web.UI.FeatureSets.JsonTargetEditorDialog.open({
                        config: {
                            title: `Document Editor`,
                            height: 450,
                            width: 500
                        },
                        data: {
                            target: document,
                            targetType: "ProspectDirector.Web.UI.Canvas.Document",
                            targetData: document.source.toJSON(),
                            layoutType: Design.ElementEditorAttribute.convertEnumToType(Design.ElementEditorLayoutType.TabStrip)
                        },
                        callbacks: {
                            ok: (sender, e) => {
                                Jade.Application.instance.contexts.destroyContext({
                                    id: contextId,
                                });
                                document.source.state.clear({
                                    silent: true
                                });
                                document.source.state.set(e.target);
                                CanvasJS.Design.Environment.selection.box.hide();
                                CanvasJS.Design.Environment.selection.box.show();
                                CanvasJS.Design.Environment.events.publish(CanvasJS.Design.CanvasEvent.ELEMENT_EDIT);
                            },
                            cancel: (sender, e) => {
                                Jade.Application.instance.contexts.destroyContext({
                                    id: contextId,
                                });
                            }
                        }
                    });
                }
                static showForElement(element) {
                    let contextId = UUID.genV4().toString();
                    let editorSettings = Design.ElementEditorAttribute.read(element);
                    Jade.Application.instance.contexts.createContext({
                        id: contextId,
                        makeDefault: true,
                        name: `${element.source.componentName} Properties`
                    });
                    PDJS.JS.ProspectDirector.Web.UI.FeatureSets.ElementEditorDialog.open({
                        config: {
                            title: `${element.source.componentName} Editor`,
                            height: editorSettings.height,
                            width: editorSettings.width
                        },
                        data: {
                            target: element,
                            targetType: element.source.componentType,
                            targetData: element.source.toJSON(),
                            layoutType: editorSettings.layoutType
                        },
                        callbacks: {
                            ok: (sender, e) => {
                                Jade.Application.instance.contexts.destroyContext({
                                    id: contextId,
                                });
                                element.source.state.clear({
                                    silent: true
                                });
                                element.source.state.set(e.target);
                                CanvasJS.Design.Environment.selection.box.hide();
                                CanvasJS.Design.Environment.selection.box.show();
                                CanvasJS.Design.Environment.events.publish(CanvasJS.Design.CanvasEvent.ELEMENT_EDIT);
                            },
                            cancel: (sender, e) => {
                                Jade.Application.instance.contexts.destroyContext({
                                    id: contextId,
                                });
                            }
                        }
                    });
                }
            }
            Design.FeatureEditor = FeatureEditor;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class SelectionBox extends CanvasJS.Design.SelectionBox {
                onElementInspect(e) {
                    Design.FeatureEditor.showForElement(e.element);
                }
            }
            Design.SelectionBox = SelectionBox;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class AutoArrangeCommand extends Jade.Command {
                constructor(options) {
                    super(options);
                }
                getDefaultValuesForProps() {
                    return {
                        id: "elements/auto-arrange",
                        label: "Auto Arrange",
                        icon: "layout_vertical.png",
                        enabled: true,
                        display: "label icon",
                        iconSetId: "pdjs"
                    };
                }
                onExecute(e) {
                    PDJS.Canvas.Design.Dialogs.AutoArrangeDialog.open({
                        callbacks: {
                            ok: () => {
                                Design.ElementLayoutSettings.applyLayout({
                                    xOrigin: CanvasJS.Design.Environment.selectionBox.dimensions.left,
                                    yOrigin: CanvasJS.Design.Environment.selectionBox.dimensions.top,
                                    elements: CanvasJS.Design.Environment.selection.toArray()
                                });
                                CanvasJS.Design.Environment.selectionBox.draw();
                            }
                        }
                    });
                }
                onStateChanged(e) {
                    this.enabled = CanvasJS.Design.Environment.selection.count > 0;
                }
            }
            Design.AutoArrangeCommand = AutoArrangeCommand;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class AutoTabIndexCommand extends Jade.Command {
                get document() {
                    return CanvasJS.Design.Environment.document.source;
                }
                getDefaultValuesForProps() {
                    return {
                        id: "form-field/auto-tab-indexes",
                        label: "Auto Tab Indexes",
                        icon: "rubber_stamp.png",
                        enabled: true,
                        display: "label",
                        iconSetId: "pdjs"
                    };
                }
                onStateChanged(state) {
                    let models = new Jade.Collection();
                    CanvasJS.Design.Environment.selection.each((item) => {
                        if (item.source instanceof PDJS.Canvas.Core.ElementModel) {
                            models.add(item.source);
                        }
                    });
                    this.enabled = Jade.InterfaceGuard.anyImplement(models.toArray(), Canvas.Core.IIndexableGuard);
                }
                onExecute(e) {
                    let inColumns = e === "columns";
                    if (this.document.tabIndexes.count > 0) {
                        this.continuePreviousPrompt(inColumns);
                    }
                    else {
                        this.autoTabIndex(false, inColumns);
                    }
                }
                continuePreviousPrompt(inColumns) {
                    Jade.UI.MessageDialog.open({
                        dialogButtons: Jade.UI.MessageDialogButtonStyle.YesNoCancel,
                        dialogStyle: Jade.UI.MessageDialogStyle.Information,
                        title: "Auto Tab Indexes",
                        message: "A previous tab order has been detected.<br/>Do you want to add to the existing tab order?",
                        select: (e) => {
                            e.close();
                            switch (e.button) {
                                case Jade.UI.MessageDialogButton.yes:
                                    this.autoTabIndex(true, inColumns);
                                    break;
                                case Jade.UI.MessageDialogButton.no:
                                    this.autoTabIndex(false, inColumns);
                                    break;
                            }
                        }
                    });
                }
                autoTabIndex(append = false, columns = false) {
                    let map = this.createMap(columns);
                    let keys = this.sortKeys(map);
                    if (!append) {
                        this.document.tabIndexes.clear();
                    }
                    _.each(keys, (key) => {
                        let id = map[key];
                        if (append) {
                            if (this.document.tabIndexes.contains(id)) {
                                this.document.tabIndexes.remove(id);
                            }
                        }
                        this.document.tabIndexes.add(id);
                    });
                    this.updateTabIndexLabels();
                }
                createMap(columns) {
                    let minX = Number.MAX_VALUE;
                    let minY = Number.MAX_VALUE;
                    CanvasJS.Design.Environment.selection.each((element) => {
                        if (Jade.InterfaceGuard.is(element.source, Canvas.Core.IIndexableGuard)) {
                            if (element.x < minX)
                                minX = element.x;
                            if (element.y < minY)
                                minY = element.y;
                        }
                    });
                    let map = {};
                    CanvasJS.Design.Environment.selection.each((element) => {
                        if (Jade.InterfaceGuard.is(element.source, Canvas.Core.IIndexableGuard)) {
                            let x = this.round(element.x - minX, 100) + minX;
                            let y = this.round(element.y - minY, 25) + minY;
                            if (columns) {
                                map[this.formatKey(x, y)] = element.ID;
                            }
                            else {
                                map[this.formatKey(y, x)] = element.ID;
                            }
                        }
                    });
                    return map;
                }
                formatKey(val1, val2) {
                    return this.pad(val1) + this.pad(val2);
                }
                pad(value) {
                    return ("000000" + value.toString()).slice(-5);
                }
                round(value, factor) {
                    return Math.round(value / factor) * factor;
                }
                sortKeys(map) {
                    let keys = [];
                    _.each(map, (value, key) => {
                        keys[keys.length] = key;
                    });
                    keys.sort();
                    return keys;
                }
                updateTabIndexLabels() {
                    Jade.Application
                        .instance
                        .contexts
                        .current
                        .commands
                        .setState({
                        "pdjs/canvas/standard": {}
                    }, {
                        force: true,
                        overwrite: false
                    });
                    Jade.Application
                        .instance
                        .contexts
                        .current
                        .commands
                        .execute("pdjs/canvas/standard:form-field/tab-index-toggle", {
                        preventToggle: true
                    });
                }
            }
            Design.AutoTabIndexCommand = AutoTabIndexCommand;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            let ICustomColorCommandTarget;
            (function (ICustomColorCommandTarget) {
                ICustomColorCommandTarget["backgroundColor"] = "backgroundColor";
                ICustomColorCommandTarget["borderColor"] = "borderColor";
            })(ICustomColorCommandTarget = Design.ICustomColorCommandTarget || (Design.ICustomColorCommandTarget = {}));
            class CustomColorCommand extends Jade.Command {
                onExecute(target) {
                    PDJS.JS.ProspectDirector.Web.UI.FeatureSets.Editors.ColorEditorDialog.open({
                        config: {
                            title: target === ICustomColorCommandTarget.backgroundColor ? "Background Color" : "Border Color"
                        },
                        data: {
                            hex: "#FFFFFF"
                        },
                        callbacks: {
                            ok: (sender, e) => {
                                this.setColor(target, e);
                            }
                        }
                    });
                }
                getDefaultValuesForProps() {
                    return {
                        id: "element/custom-color",
                        label: "More colors...",
                        icon: "painters_palette.png",
                        enabled: true,
                        display: "label icon",
                        iconSetId: "pdjs"
                    };
                }
                setColor(target, color) {
                    CanvasJS.Design.Environment.selection.each((element) => {
                        if (element.source.has(target)) {
                            element.source[target] = color;
                        }
                    });
                }
            }
            Design.CustomColorCommand = CustomColorCommand;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class Commands extends Jade.CommandGroup {
                constructor() {
                    super("pdjs/canvas/standard");
                }
                registerCommands(e) {
                    e.commands.add(new Design.DocumentSaveCommand());
                    e.commands.add(new Design.DocumentCloseCommand());
                    e.commands.add(new Design.DocumentSettingsCommand());
                    e.commands.add(new Design.DocumentVariablesCommand());
                    e.commands.add(new Design.FormFieldRequiredCommand({
                        id: "form-field/required/enable",
                        label: "Required",
                        icon: "breakpoint.png",
                        isRequired: true
                    }));
                    e.commands.add(new Design.FormFieldRequiredCommand({
                        id: "form-field/required/disable",
                        label: "Not Required",
                        icon: "not-required.png",
                        isRequired: false
                    }));
                    e.commands.add(new Design.AutoArrangeCommand());
                    e.commands.add(new Design.AutoTabIndexCommand());
                    e.commands.add(new Design.TabIndexCommand());
                    e.commands.add(new Design.TabIndexToggleCommand());
                    e.commands.add(new Design.LineScaleCommand({
                        id: "line/shape/scale-up",
                        label: "Scale Up",
                        icon: "navigate_plus.png",
                        scaling: Design.LineScaleType.increase,
                        target: Design.LineScaleTarget.shape
                    }));
                    e.commands.add(new Design.LineScaleCommand({
                        id: "line/shape/scale-up",
                        label: "Scale Up",
                        icon: "navigate_plus.png",
                        scaling: Design.LineScaleType.increase,
                        target: Design.LineScaleTarget.shape
                    }));
                    e.commands.add(new Design.LineScaleCommand({
                        id: "line/shape/scale-down",
                        label: "Scale Down",
                        icon: "navigate_minus.png",
                        scaling: Design.LineScaleType.decrease,
                        target: Design.LineScaleTarget.shape
                    }));
                    e.commands.add(new Design.LineCapShapeCommand({
                        id: "line/start/shape",
                        label: "Shape",
                        target: Design.LineCapShapeTarget.startCap
                    }));
                    e.commands.add(new Design.LineCapShapeCommand({
                        id: "line/end/shape",
                        label: "Shape",
                        target: Design.LineCapShapeTarget.endCap
                    }));
                    e.commands.add(new Design.RotateShapeCommand());
                    e.commands.add(new Design.ElementPropertiesCommand());
                    e.commands.add(new Design.CustomColorCommand());
                    e.commands.add(new Design.GridlinesToggleCommand());
                    e.commands.add(new Canvas.Shared.Views.ViewDesignerCommand());
                }
            }
            Design.Commands = Commands;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
Jade.Application.onStart(function () {
    Jade.CommandGroups.add(PDJS.Canvas.Design.Commands);
});
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class DocumentCloseCommand extends Jade.Command {
                getDefaultValuesForProps() {
                    return {
                        id: "document/close",
                        label: "Close",
                        icon: "close.png",
                        enabled: true,
                        display: "label",
                        iconSetId: "pdjs"
                    };
                }
                onExecute(e) {
                    if (CanvasJS.Design.Environment.document.source.hasChanges) {
                        Jade.UI.MessageDialog.open({
                            dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                            dialogButtons: Jade.UI.MessageDialogButtonStyle.OKCancel,
                            title: "Close",
                            message: `Close without saving changes?`,
                            select: (e) => {
                                e.close();
                                if (e.button == Jade.UI.MessageDialogButton.ok) {
                                    this.closeDocument();
                                }
                            }
                        });
                    }
                    else {
                        this.closeDocument();
                    }
                }
                closeDocument() {
                    let service = new PDJS.Services.Canvas.DocumentService();
                    let document = CanvasJS.Design.Environment.document.source;
                    service.closeDesignDocument({
                        sessionId: document.sessionId,
                        success: () => {
                            CanvasJS.Design.Environment.dialog.close();
                        }
                    });
                }
            }
            Design.DocumentCloseCommand = DocumentCloseCommand;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class DocumentSaveCommand extends Jade.Command {
                getDefaultValuesForProps() {
                    return {
                        id: "document/save",
                        label: "Save",
                        icon: "floppy_disk.png",
                        enabled: true,
                        display: "label",
                        iconSetId: "pdjs"
                    };
                }
                onExecute(e) {
                    let countOfErroredElements = 0;
                    let elements = CanvasJS.Design.Environment.document.controls.getByType(Design.ElementView);
                    elements.each((element) => {
                        countOfErroredElements += element.source.hasErrors ? 1 : 0;
                    });
                    if (countOfErroredElements > 0) {
                        Jade.UI.MessageDialog.open({
                            dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                            dialogButtons: Jade.UI.MessageDialogButtonStyle.YesNo,
                            title: "Save With Errors?",
                            message: `This document contains ${countOfErroredElements} element(s) with errors,
                                these elements may not display correctly while in an errored state. <br/><br/>
                                Continue with save despite these errors?`,
                            select: (e) => {
                                e.close();
                                if (e.button == Jade.UI.MessageDialogButton.yes) {
                                    this.commitSave();
                                }
                            }
                        });
                    }
                    else {
                        this.commitSave();
                    }
                }
                commitSave() {
                    CanvasJS.Design.Environment.document.saveSource();
                    let documentService = new PDJS.Services.Canvas.DocumentService();
                    documentService.saveDesignDocument({
                        document: CanvasJS.Design.Environment.document.source.toJSON(),
                        success: (e) => {
                            if (e.data.hasSaveErrors) {
                                Jade.UI.MultiMessageDialog.open({
                                    header: "The following errors prevents the document from being saved:",
                                    messages: e.data.saveErrors
                                });
                                return;
                            }
                            CanvasJS.Design.Environment.dialog.close({
                                command: "ok",
                                data: e.data
                            });
                        }
                    });
                }
            }
            Design.DocumentSaveCommand = DocumentSaveCommand;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class DocumentSettingsCommand extends Jade.Command {
                getDefaultValuesForProps() {
                    return {
                        id: "document/settings",
                        label: "Settings",
                        icon: "clipboard_checks.png",
                        enabled: true,
                        display: "label icon",
                        iconSetId: "pdjs"
                    };
                }
                onExecute(e) {
                    Design.FeatureEditor.showForDocument(CanvasJS.Design.Environment.document);
                }
            }
            Design.DocumentSettingsCommand = DocumentSettingsCommand;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class DocumentVariablesCommand extends Jade.Command {
                getDefaultValuesForProps() {
                    return {
                        id: "document/variables",
                        label: "Variables",
                        icon: "function.png",
                        enabled: true,
                        display: "label icon",
                        iconSetId: "pdjs"
                    };
                }
                onExecute(e) {
                    Design.Dialogs.VariablesDialog.open({
                        callbacks: {
                            ok: () => {
                            }
                        }
                    });
                }
            }
            Design.DocumentVariablesCommand = DocumentVariablesCommand;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class ElementPropertiesCommand extends Jade.Command {
                getDefaultValuesForProps() {
                    return {
                        id: "element/properties",
                        label: "Edit",
                        icon: "edit.png",
                        enabled: false,
                        display: "label icon",
                        iconSetId: "pdjs"
                    };
                }
                onStateChanged(e) {
                    this.enabled = CanvasJS.Design.Environment.selection.count == 1
                        && !(CanvasJS.Design.Environment.selection.first() instanceof CanvasJS.Design.GroupDesignView);
                }
                onExecute() {
                    let element = CanvasJS.Design.Environment.selection.first();
                    Design.FeatureEditor.showForElement(element);
                }
            }
            Design.ElementPropertiesCommand = ElementPropertiesCommand;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class FormFieldRequiredCommand extends Jade.Command {
                constructor(options) {
                    super(options);
                }
                get isRequired() {
                    return this.props.get("isRequired", false);
                }
                getDefaultValuesForProps() {
                    return {
                        enabled: true,
                        iconSetId: "pdjs"
                    };
                }
                onExecute(e) {
                    CanvasJS.Design.Environment.selection.each((element) => {
                        if (element instanceof Design.Forms.FormField) {
                            element.source.isRequired = this.isRequired;
                        }
                    });
                }
            }
            Design.FormFieldRequiredCommand = FormFieldRequiredCommand;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class GridlinesToggleCommand extends Jade.Command {
                get isVisible() {
                    return this.state.get("isVisible", false);
                }
                set isVisible(value) {
                    this.state.set("isVisible", value);
                }
                getDefaultValuesForProps() {
                    return {
                        id: "gridlines/toggle",
                        label: "Show Gridlines",
                        icon: "layout.png",
                        enabled: true,
                        display: "label icon",
                        iconSetId: "pdjs"
                    };
                }
                onExecute(e) {
                    this.isVisible = !this.isVisible;
                    this.label = this.isVisible ? "Hide Gridlines" : "Show Gridlines";
                    if (this.isVisible) {
                        CanvasJS.Design.Environment.document.node.css({
                            backgroundImage: `url(${Jade.IconSet.get("pdjs").resolve("grid-background.png", Jade.IconSetSizeSpecificDirectory.misc)})`
                        });
                    }
                    else {
                        CanvasJS.Design.Environment.document.node.css({
                            backgroundImage: "none"
                        });
                    }
                }
            }
            Design.GridlinesToggleCommand = GridlinesToggleCommand;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            let LineCapShapeTarget;
            (function (LineCapShapeTarget) {
                LineCapShapeTarget[LineCapShapeTarget["shape"] = 1] = "shape";
                LineCapShapeTarget[LineCapShapeTarget["startCap"] = 2] = "startCap";
                LineCapShapeTarget[LineCapShapeTarget["endCap"] = 3] = "endCap";
            })(LineCapShapeTarget = Design.LineCapShapeTarget || (Design.LineCapShapeTarget = {}));
            class LineCapShapeCommand extends Jade.Command {
                constructor(options) {
                    super(options);
                }
                get target() {
                    return this.props.get("target");
                }
                getDefaultValuesForProps() {
                    return {
                        enabled: false,
                        iconSetId: "pdjs"
                    };
                }
                onStateChanged(state) {
                    this.enabled = CanvasJS.Design.Environment.selection.count > 0;
                }
                onExecute(e) {
                    CanvasJS.Design.Environment.selection.each((element) => {
                        if (element instanceof Design.Shapes.Line) {
                            switch (this.target) {
                                case LineCapShapeTarget.startCap:
                                    element.source.startCapShape = e.shape;
                                    break;
                                case LineCapShapeTarget.endCap:
                                    element.source.endCapShape = e.shape;
                                    break;
                            }
                        }
                    });
                }
            }
            Design.LineCapShapeCommand = LineCapShapeCommand;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            let LineScaleType;
            (function (LineScaleType) {
                LineScaleType[LineScaleType["increase"] = 1] = "increase";
                LineScaleType[LineScaleType["decrease"] = 2] = "decrease";
            })(LineScaleType = Design.LineScaleType || (Design.LineScaleType = {}));
            let LineScaleTarget;
            (function (LineScaleTarget) {
                LineScaleTarget[LineScaleTarget["shape"] = 1] = "shape";
                LineScaleTarget[LineScaleTarget["line"] = 2] = "line";
                LineScaleTarget[LineScaleTarget["startCap"] = 3] = "startCap";
                LineScaleTarget[LineScaleTarget["endCap"] = 4] = "endCap";
            })(LineScaleTarget = Design.LineScaleTarget || (Design.LineScaleTarget = {}));
            class LineScaleCommand extends Jade.Command {
                constructor(options) {
                    super(options);
                }
                get scaling() {
                    return this.props.get("scaling");
                }
                getDefaultValuesForProps() {
                    return {
                        id: "line/line-scale",
                        enabled: false,
                        iconSetId: "pdjs"
                    };
                }
                onStateChanged(state) {
                    this.enabled = CanvasJS.Design.Environment.selection.count > 0;
                }
                onExecute(e) {
                    CanvasJS.Design.Environment.selection.each((element) => {
                        if (element instanceof Design.Shapes.Line) {
                            let unit = this.scaling == LineScaleType.decrease ? -1 : 1;
                            this.scaleStartCap(element, unit);
                            this.scaleLine(element, unit);
                            this.scaleEndCap(element, unit);
                        }
                    });
                    CanvasJS.Design.Environment.selectionBox.draw();
                }
                scaleShape(element, unit) {
                    let stop = (element.source.lineWeight <= unit
                        || element.source.startCapHeight <= unit
                        || element.source.startCapWidth <= unit
                        || element.source.endCapHeight <= unit
                        || element.source.endCapWidth <= unit)
                        && this.scaling == LineScaleType.decrease;
                    if (!stop) {
                        element.source.state.set({
                            lineWeight: element.source.lineWeight + unit,
                            startCapHeight: element.source.startCapHeight + unit,
                            startCapWidth: element.source.startCapWidth + unit,
                            endCapHeight: element.source.endCapHeight + unit,
                            endCapWidth: element.source.endCapWidth + unit
                        });
                    }
                }
                scaleLine(element, unit) {
                    if (this.scaling == LineScaleType.decrease && (element.source.lineWeight <= 1)) {
                        element.source.state.set({
                            lineWeight: 1
                        });
                    }
                    else {
                        element.source.state.set({
                            lineWeight: element.source.lineWeight + unit
                        });
                    }
                }
                scaleStartCap(element, unit) {
                    let stop = (element.source.startCapHeight <= unit
                        || element.source.startCapWidth <= unit)
                        && this.scaling == LineScaleType.decrease;
                    if (!stop) {
                        element.source.state.set({
                            startCapHeight: element.source.startCapHeight + unit,
                            startCapWidth: element.source.startCapWidth + unit
                        });
                    }
                }
                scaleEndCap(element, unit) {
                    let stop = (element.source.endCapHeight <= unit
                        || element.source.endCapWidth <= unit)
                        && this.scaling == LineScaleType.decrease;
                    if (!stop) {
                        element.source.state.set({
                            endCapHeight: element.source.endCapHeight + unit,
                            endCapWidth: element.source.endCapWidth + unit
                        });
                    }
                }
            }
            Design.LineScaleCommand = LineScaleCommand;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class RotateShapeCommand extends Jade.Command {
                getDefaultValuesForProps() {
                    return {
                        id: "shape/rotate",
                        tooltip: "Rotate Shape",
                        label: "Rotate Shape",
                        enabled: false,
                        iconSetId: "pdjs"
                    };
                }
                onStateChanged(state) {
                    this.enabled = CanvasJS.Design.Environment.selection.count > 0;
                }
                onExecute(e) {
                    CanvasJS.Design.Environment
                        .selection
                        .each((element) => {
                        if (element instanceof Design.Shapes.Triangle) {
                            if (e == 0) {
                                this.rotateLeft(element);
                            }
                            else {
                                this.rotateRight(element);
                            }
                        }
                    });
                }
                rotateLeft(triangle) {
                    let rotation = triangle.source.rotation;
                    if (triangle.source.rotation < 1) {
                        rotation = 3;
                    }
                    else {
                        rotation -= 1;
                    }
                    triangle.source.rotation = rotation;
                }
                rotateRight(triangle) {
                    let rotation = triangle.source.rotation;
                    if (triangle.source.rotation > 2) {
                        rotation = 0;
                    }
                    else {
                        rotation += 1;
                    }
                    triangle.source.rotation = rotation;
                }
            }
            Design.RotateShapeCommand = RotateShapeCommand;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class TabIndexCommand extends Jade.Command {
                get document() {
                    return CanvasJS.Design.Environment.document.source;
                }
                getDefaultValuesForProps() {
                    return {
                        id: "form-field/tab-indexes",
                        label: "Set Tab Indexes",
                        icon: "rubber_stamp.png",
                        enabled: true,
                        display: "label",
                        iconSetId: "pdjs"
                    };
                }
                onStateChanged(state) {
                    let models = new Jade.Collection();
                    CanvasJS.Design.Environment.selection.each((item) => {
                        if (item.source instanceof PDJS.Canvas.Core.ElementModel) {
                            models.add(item.source);
                        }
                    });
                    this.enabled = Jade.InterfaceGuard.anyImplement(models.toArray(), Canvas.Core.IIndexableGuard);
                }
                onExecute(e) {
                    if (this.document.tabIndexes.count > 0) {
                        this.continuePreviousOrderMessage();
                    }
                    else {
                        this.startNewTabOrder();
                    }
                }
                continuePreviousOrderMessage() {
                    Jade.UI.MessageDialog.open({
                        dialogButtons: Jade.UI.MessageDialogButtonStyle.YesNoCancel,
                        dialogStyle: Jade.UI.MessageDialogStyle.Information,
                        title: "Set Tab Indexes",
                        message: `A previous tab order has been detected. Do you want to add to the existing tab order?`,
                        select: (e) => {
                            e.close();
                            switch (e.button) {
                                case Jade.UI.MessageDialogButton.yes:
                                    this.addToExistingTabOrder();
                                    break;
                                case Jade.UI.MessageDialogButton.no:
                                    this.startNewTabOrder();
                                    break;
                            }
                        }
                    });
                }
                addToExistingTabOrder() {
                    CanvasJS.Design.Environment.selection.each((element, index) => {
                        if (Jade.InterfaceGuard.is(element.source, Canvas.Core.IIndexableGuard)) {
                            if (this.document.tabIndexes.contains(element.ID)) {
                                this.document.tabIndexes.remove(element.ID);
                            }
                            this.document.tabIndexes.add(element.ID);
                        }
                    });
                    this.updateTabIndexLabels();
                }
                startNewTabOrder() {
                    this.document.tabIndexes.clear();
                    CanvasJS.Design.Environment.selection.each((element, index) => {
                        if (Jade.InterfaceGuard.is(element.source, Canvas.Core.IIndexableGuard)) {
                            this.document.tabIndexes.add(element.ID);
                        }
                    });
                    this.updateTabIndexLabels();
                }
                updateTabIndexLabels() {
                    Jade.Application
                        .instance
                        .contexts
                        .current
                        .commands
                        .setState({
                        "pdjs/canvas/standard": {}
                    }, {
                        force: true,
                        overwrite: false
                    });
                }
            }
            Design.TabIndexCommand = TabIndexCommand;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class TabIndexToggleCommand extends Jade.Command {
                get tabOrderVisible() {
                    return this.state.get("tabOrderVisible", false);
                }
                set tabOrderVisible(value) {
                    this.state.set("tabOrderVisible", value);
                }
                get document() {
                    return CanvasJS.Design.Environment.document;
                }
                onStateChanged(state) {
                    super.onStateChanged(state);
                    this.enabled = this.document.source.tabIndexes.count > 0;
                    this.updateLabelAndIcon();
                }
                onExecute(e) {
                    if (e == null || e.preventToggle == false) {
                        this.tabOrderVisible = !this.tabOrderVisible;
                    }
                    this.updateLabelAndIcon();
                    this.document.controls.each((element) => {
                        if (Jade.InterfaceGuard.is(element.source, Canvas.Core.IIndexableGuard)) {
                            let indexable = element.source;
                            let index = indexable.tabIndex;
                            if (this.tabOrderVisible && index != -1) {
                                this.addTabIndexMarker(element, index);
                            }
                            else {
                                this.removeTabIndexMarker(element);
                            }
                        }
                    });
                }
                getDefaultValuesForProps() {
                    return {
                        id: "form-field/tab-index-toggle",
                        label: "Show Tab Order",
                        icon: "tags.png",
                        enabled: true,
                        display: "label",
                        iconSetId: "pdjs"
                    };
                }
                addTabIndexMarker(element, index) {
                    let label = element.node.find("[role=tab-index]");
                    if (label.length == 0) {
                        element.node.children(":first").append(`<div role="tab-index">${index + 1}</div>`);
                    }
                    else {
                        label.text(index + 1);
                    }
                }
                removeTabIndexMarker(element) {
                    element.node.find("[role=tab-index]").remove();
                }
                updateLabelAndIcon() {
                    this.label = this.tabOrderVisible ? "Hide Tab Order" : "Show Tab Order";
                    this.icon = this.tabOrderVisible ? "tags_delete.png" : "tags.png";
                }
            }
            Design.TabIndexToggleCommand = TabIndexToggleCommand;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Charts;
            (function (Charts) {
                let Chart = class Chart extends Design.ElementViewBase {
                    get kendo() {
                        return this.m_kendo;
                    }
                    set kendo(value) {
                        this.m_kendo = value;
                    }
                    get chartNode() {
                        return this.node.find("[role=chart]");
                        ;
                    }
                    get status() {
                        return this.m_status;
                    }
                    template() {
                        return `<div data-controls>
                <div role="chart"></div>
            </div>`;
                    }
                    refresh() {
                        let chartOptions = null;
                        if (this.kendo != null && this.nodeWidth > 0 && this.nodeHeight > 0) {
                            chartOptions = this.getChartOptions();
                            this.kendo.setOptions(chartOptions);
                            this.kendo.refresh();
                        }
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.isBrowserResizeAware = true;
                        this.m_kendo = this.chartNode.kendoChart(this.getChartOptions()).data("kendoChart");
                        this.m_status = new Canvas.Shared.ElementBar({
                            showRefresh: this.source.informationBarRefresh,
                            cacheLastUpdated: this.source.cacheLastUpdated,
                            visible: this.source.informationBarVisible,
                            onRefresh: () => {
                                this.source.getCachedData();
                            }
                        });
                        this.controls.add(this.m_status);
                    }
                    onBrowserResize() {
                        if (this.anchorRight != null || this.anchorBottom != null) {
                            this.refresh();
                        }
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.addActionMenu();
                        this.status.visible = this.source.informationBarVisible;
                        this.status.showRefresh = this.source.informationBarRefresh;
                        this.refresh();
                    }
                    getChartHeight() {
                        return this.nodeHeight - (this.source.informationBarVisible ? 25 : 0);
                    }
                    getChartOptions() {
                        let result = null;
                        let chartState = $.extend(true, this.source.toJSON(), {
                            data: {
                                series: [
                                    { name: "Series 1", data: [3, 7, 8, 2] },
                                    { name: "Series 2", data: [-2, 4, 7, 5] },
                                    { name: "Series 3", data: [2, 12, -5, 9] },
                                    { name: "Series 4", data: [8, -4, 15, 7] }
                                ],
                                categories: [[], ["Cat 1", "Cat 2", "Cat 3"]]
                            }
                        });
                        result = new Canvas.Shared.Charts.ChartOptions(chartState).getOptions();
                        result = $.extend(true, result, {
                            seriesDefaults: {
                                type: this.source.seriesType
                            },
                            chartArea: {
                                height: this.getChartHeight(),
                                width: this.nodeWidth
                            }
                        });
                        return result;
                    }
                    addActionMenu() {
                        if (this.m_menu != null) {
                            this.controls.remove(this.m_menu);
                        }
                        if (!this.source.actionMenuVisible) {
                            return;
                        }
                        this.m_menu = new Canvas.Shared.ElementMenu({
                            position: Canvas.Shared.ElementMenuPosition.topRight,
                            visible: this.source.actionMenuVisible
                        });
                        this.controls.add(this.m_menu);
                    }
                };
                Chart = __decorate([
                    Design.elementEditor(Design.ElementEditorLayoutType.SideBar, 500, 700)
                ], Chart);
                Charts.Chart = Chart;
            })(Charts = Design.Charts || (Design.Charts = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Common;
            (function (Common) {
                let Button = class Button extends Design.ElementViewBase {
                    get buttonNode() {
                        return this.node.find("button");
                    }
                    template() {
                        return `<div style="position:absolute;top:0;left:0;right:0;bottom:0;">
                        <button style="height:100%;width:100%;box-sizing:border-box;"></button>
                    </div>`;
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.buttonNode.text(this.source.label);
                        this.buttonNode.prop("disabled", !this.source.enabled);
                    }
                };
                Button = __decorate([
                    Jade.UI.Controls.toolingTags("button")
                ], Button);
                Common.Button = Button;
            })(Common = Design.Common || (Design.Common = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Common;
            (function (Common) {
                let Hyperlink = class Hyperlink extends Design.ElementViewBase {
                    get linkNode() {
                        return this.node.find("A");
                    }
                    template() {
                        return `<div style="display:flex;align-items:center;position:absolute;top:0;left:0;right:0;bottom:0;">
                        <a href='#' style='width:100%;'></a>
                    </div>`;
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.node.css({
                            opacity: this.source.enabled ? 1 : .4
                        });
                        this.linkNode.text(this.source.label);
                        this.linkNode.css({
                            color: this.source.foreColor,
                            fontName: this.source.fontName,
                            fontSize: this.source.fontSize,
                            textAlign: this.source.textAlignment
                        });
                        this.node.css({
                            borderColor: "#DDDDDD",
                            borderStyle: "dashed",
                            borderWidth: "1px"
                        });
                    }
                };
                Hyperlink = __decorate([
                    Jade.UI.Controls.toolingTags("hyperlink")
                ], Hyperlink);
                Common.Hyperlink = Hyperlink;
            })(Common = Design.Common || (Design.Common = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Common;
            (function (Common) {
                let ImageButton = class ImageButton extends Design.ElementViewBase {
                    get imageNode() {
                        return this.node.find("img");
                    }
                    template() {
                        return `<div style="position:absolute;top:0;left:0;right:0;bottom:0;text-align:center;">
                        <img style="height:100%;"/>
                    </div>`;
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.imageNode.prop("src", this.getImageUrl());
                        this.node.css({
                            opacity: this.source.enabled ? 1 : .5
                        });
                        this.setArea({
                            height: this.source.height,
                            width: this.source.width
                        });
                        this.setPosition({
                            top: this.source.y,
                            left: this.source.x
                        });
                    }
                    getImageUrl() {
                        let result = null;
                        let imageUrl = this.source.imageUrl;
                        if (imageUrl == null) {
                            result = Jade.Path.resolve("~/application/icons/misc/1024x1024/photo_portrait.png");
                        }
                        else {
                            if (imageUrl.indexOf("/") === 0) {
                                result = Jade.Path.resolve(`~${imageUrl}`);
                            }
                            else if (imageUrl.indexOf("~") === 0) {
                                result = Jade.Path.resolve(imageUrl);
                            }
                            else {
                                result = Jade.Path.resolve(`~/resources/${imageUrl}`);
                            }
                        }
                        return result;
                    }
                };
                ImageButton = __decorate([
                    Jade.UI.Controls.toolingTags("image-button")
                ], ImageButton);
                Common.ImageButton = ImageButton;
            })(Common = Design.Common || (Design.Common = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Common;
            (function (Common) {
                let Markup = class Markup extends Design.ElementViewBase {
                    get contentNode() {
                        return this.node.find("[role=content]");
                    }
                    template() {
                        return `<div>
                        <div role="content"></div>
                    </div>`;
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        let noBorder = this.source.borderStyle == "none";
                        let markup = "";
                        this.contentNode.css({
                            position: "absolute",
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            backgroundColor: this.source.backgroundColor,
                            borderColor: noBorder ? "#DDDDDD" : this.source.borderColor,
                            borderStyle: noBorder ? "dashed" : this.source.borderStyle,
                            borderWidth: noBorder ? "1px" : `${this.source.borderWidth}px`,
                            padding: `${this.source.padding}px`,
                            overflow: this.source.scrolling == "none" ? "none" : "auto",
                            overflowX: this.source.scrolling == "horizontal" ? "scroll" : "hidden",
                            overflowY: this.source.scrolling == "vertical" ? "scroll" : "hidden"
                        });
                        if (this.source.markup == "" || this.source.markup == null) {
                            this.contentNode.html(this.noContentMessage());
                        }
                        else {
                            this.contentNode.html(this.source.markup.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, ""));
                        }
                        this.setArea({
                            height: this.height,
                            width: this.width
                        });
                        this.setPosition({
                            top: this.y,
                            left: this.x
                        });
                    }
                    noContentMessage() {
                        return `<table style="box-sizing:border-box;height:100%;width:100%;">
                        <tr>
                            <td style="text-align:center;">
                                <div style="font-size:16px;font-weight:bold;font-family:arial;margin-bottom:5px;">Markup</div>
                                <div style="font-size:12px;font-family:arial;color:#AAAAAA;">Double click to add content.</div>
                            </td>
                        </tr>
                    </table>`;
                    }
                };
                Markup = __decorate([
                    Jade.UI.Controls.toolingTags("text", "style"),
                    Design.elementEditor(Design.ElementEditorLayoutType.TabStrip, 600, 800)
                ], Markup);
                Common.Markup = Markup;
            })(Common = Design.Common || (Design.Common = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Common;
            (function (Common) {
                let Report = class Report extends Design.ElementViewBase {
                    get reportNode() {
                        return this.node.find("[role=report]");
                    }
                    get status() {
                        return this.m_status;
                    }
                    template() {
                        return `<div data-controls>
                        <div role="report">
                            ${this.getReportSummaryText()}
                        </div>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_status = new Canvas.Shared.ElementBar({
                            showRefresh: this.source.informationBarRefresh,
                            cacheLastUpdated: Date.now(),
                            visible: this.source.informationBarVisible,
                            onRefresh: () => {
                                this.source.getCachedData();
                            }
                        });
                        this.controls.add(this.m_status);
                        this.m_menu = new Canvas.Shared.ElementMenu({
                            position: Canvas.Shared.ElementMenuPosition.topRight,
                            visible: this.source.actionMenuVisible
                        });
                        this.controls.add(this.m_menu);
                        this.onStateChanged();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        let noBorder = this.source.borderStyle === "none" ||
                            this.source.borderStyle == null;
                        this.reportNode.html(this.getReportSummaryText());
                        this.reportNode.css({
                            position: "absolute",
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: this.source.informationBarVisible ? "25px" : "0",
                            backgroundColor: "#FFFFFF",
                            borderColor: noBorder ? "#DDDDDD" : this.source.borderColor,
                            borderStyle: noBorder ? "dashed" : this.source.borderStyle,
                            borderWidth: noBorder ? "1px" : this.source.borderWidth
                        });
                        this.setArea({
                            height: this.source.height,
                            width: this.source.width
                        });
                        this.setPosition({
                            top: this.source.y,
                            left: this.source.x
                        });
                        this.m_menu.visible = this.source.actionMenuVisible;
                        this.m_status.visible = this.source.informationBarVisible;
                        this.m_status.showRefresh = this.source.informationBarRefresh;
                    }
                    getReportSummaryText() {
                        let name = this.source.reportName == null ? "No Report Selected" : this.source.reportName;
                        let reportName = `<div style=font-size:16px;font-family:arial;color:${this.source.reportName ? "blue" : "red"};">${name}</div>`;
                        return `<table style="box-sizing:border-box;height:100%;width:100%;">
                        <tr>
                            <td style="text-align:center;">
                                <div style="font-size:20px;font-weight:bold;margin-bottom:5px;">${this.source.componentName}</div>
                                ${reportName}
                            </td>
                        </tr>
                    </table>`;
                    }
                };
                Report = __decorate([
                    Jade.UI.Controls.toolingTags("report")
                ], Report);
                Common.Report = Report;
            })(Common = Design.Common || (Design.Common = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Common;
            (function (Common) {
                let Text = class Text extends Design.ElementViewBase {
                    get contentNode() {
                        return this.node.find("DIV[role=content]");
                    }
                    get containerNode() {
                        return this.node.find("DIV[role=container]");
                    }
                    template() {
                        return `<div class="${Canvas.Shared.CanvasCss.TextElement}">
                        <div role="container">
                            <div role="content"></div>
                        </div>
                    </div>`;
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        let noBorder = this.source.borderStyle == "none";
                        if (this.source.text == "" || this.source.text == null) {
                            this.contentNode.html(this.noContentMessage());
                        }
                        else {
                            this.contentNode.html(this.source.text);
                        }
                        this.contentNode.css({
                            width: `100%`,
                            textAlign: this.source.horizontalAlignment
                        });
                        this.containerNode.css({
                            display: "flex",
                            flexWrap: "wrap",
                            alignItems: this.source.verticalAlignment,
                            position: "absolute",
                            boxSizing: "border-box",
                            maxWidth: "border-box",
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            borderColor: noBorder ? "#DDDDDD" : this.source.borderColor == null ? "transparent" : `${this.source.borderColor}`,
                            borderStyle: noBorder ? "dashed" : this.source.borderStyle,
                            borderWidth: noBorder ? "1px" : `${this.source.borderWidth}`,
                            paddingTop: this.source.paddingTop == 0 ? 0 : `${this.source.paddingTop}px`,
                            paddingRight: this.source.paddingRight == 0 ? 0 : `${this.source.paddingRight}px`,
                            paddingBottom: this.source.paddingBottom == 0 ? 0 : `${this.source.paddingBottom}px`,
                            paddingLeft: this.source.paddingLeft == 0 ? 0 : `${this.source.paddingLeft}px`,
                            backgroundColor: this.source.backgroundColor == null ? "transparent" : `${this.source.backgroundColor}`
                        });
                        this.setArea({
                            height: this.height,
                            width: this.width
                        });
                        this.setPosition({
                            top: this.y,
                            left: this.x
                        });
                    }
                    noContentMessage() {
                        return `<table style="box-sizing:border-box;height:100%;width:100%;">
                        <tr>
                            <td style="text-align:center;">
                                <div style="font-size:16px;font-weight:bold;font-family:arial;margin-bottom:5px;">Text</div>
                                <div style="font-size:12px;font-family:arial;color:#AAAAAA;">Double click to add content.</div>
                            </td>
                        </tr>
                    </table>`;
                    }
                };
                Text = __decorate([
                    Jade.UI.Controls.toolingTags("text", "style")
                ], Text);
                Common.Text = Text;
            })(Common = Design.Common || (Design.Common = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            let ContextMenuType;
            (function (ContextMenuType) {
                ContextMenuType["ColorPalette"] = "color-palette";
                ContextMenuType["View"] = "view";
            })(ContextMenuType = Design.ContextMenuType || (Design.ContextMenuType = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var ContextMenu;
            (function (ContextMenu) {
                class AlignmentContextMenuGroup extends Jade.UI.Controls.ContextMenuGroup {
                    constructor() {
                        super({ id: "element-alignment" });
                    }
                    onPopulate() {
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:selection/align-left"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:selection/align-center"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:selection/align-right"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuDivider());
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:selection/align-top"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:selection/align-middle"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:selection/align-bottom"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuDivider());
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:selection/distribute-horizontally"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:selection/distribute-vertically"
                        }));
                    }
                }
                ContextMenu.AlignmentContextMenuGroup = AlignmentContextMenuGroup;
            })(ContextMenu = Design.ContextMenu || (Design.ContextMenu = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var ContextMenu;
            (function (ContextMenu) {
                class ColorPaletteContextMenuGroup extends Jade.UI.Controls.ContextMenuGroup {
                    constructor() {
                        super({ id: Design.ContextMenuType.ColorPalette });
                    }
                    onPopulate() {
                        this.items.add(new Jade.UI.Controls.ContextMenuItemHeader({
                            label: "Theme Colors"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItemColorPalette({
                            commandId: "canvas/standard:element/background-color",
                            palette: Jade.UI.Controls.ContextMenuItemColorPalettes.themeColors,
                            closeOnClick: true
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItemHeader({
                            label: "Standard Colors"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItemColorPalette({
                            commandId: "canvas/standard:element/background-color",
                            palette: Jade.UI.Controls.ContextMenuItemColorPalettes.standardColors,
                            closeOnClick: true
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "pdjs/canvas/standard:element/custom-color",
                            value: Design.ICustomColorCommandTarget.backgroundColor
                        }));
                    }
                }
                ContextMenu.ColorPaletteContextMenuGroup = ColorPaletteContextMenuGroup;
            })(ContextMenu = Design.ContextMenu || (Design.ContextMenu = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var ContextMenu;
            (function (ContextMenu) {
                class ElementContextMenuGroup extends Jade.UI.Controls.ContextMenuGroup {
                    constructor() {
                        super({ id: "element" });
                    }
                    onPopulate() {
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:selection/group"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:selection/ungroup"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:selection/send-back"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:selection/bring-forward"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuDivider());
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/clipboard:clipboard/copy"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/clipboard:clipboard/cut"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/clipboard:clipboard/duplicate"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuDivider());
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:selection/delete"
                        }));
                    }
                }
                ContextMenu.ElementContextMenuGroup = ElementContextMenuGroup;
            })(ContextMenu = Design.ContextMenu || (Design.ContextMenu = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var ContextMenu;
            (function (ContextMenu) {
                class LineEndCapShapeMenuGroup extends Jade.UI.Controls.ContextMenuGroup {
                    constructor() {
                        super({ id: "end-cap-shape" });
                    }
                    onPopulate() {
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "pdjs/canvas/standard:line/end/shape",
                            label: "None",
                            value: { shape: PDJS.Canvas.Core.Shapes.LineCapShape.none }
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "pdjs/canvas/standard:line/end/shape",
                            label: "Circle",
                            icon: "shape_circle.png",
                            value: { shape: PDJS.Canvas.Core.Shapes.LineCapShape.circle }
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "pdjs/canvas/standard:line/end/shape",
                            label: "Square",
                            icon: "shape_square.png",
                            value: { shape: PDJS.Canvas.Core.Shapes.LineCapShape.square }
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "pdjs/canvas/standard:line/end/shape",
                            label: "Triangle",
                            icon: "shape_triangle_2.png",
                            value: { shape: PDJS.Canvas.Core.Shapes.LineCapShape.triangle }
                        }));
                    }
                }
                ContextMenu.LineEndCapShapeMenuGroup = LineEndCapShapeMenuGroup;
            })(ContextMenu = Design.ContextMenu || (Design.ContextMenu = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var ContextMenu;
            (function (ContextMenu) {
                class LineStartCapShapeMenuGroup extends Jade.UI.Controls.ContextMenuGroup {
                    constructor() {
                        super({ id: "start-cap-shape" });
                    }
                    onPopulate() {
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "pdjs/canvas/standard:line/start/shape",
                            label: "None",
                            value: { shape: Canvas.Core.Shapes.LineCapShape.none }
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "pdjs/canvas/standard:line/start/shape",
                            label: "Circle",
                            icon: "circle.png",
                            value: { shape: Canvas.Core.Shapes.LineCapShape.circle }
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "pdjs/canvas/standard:line/start/shape",
                            label: "Square",
                            icon: "square.png",
                            value: { shape: Canvas.Core.Shapes.LineCapShape.square }
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "pdjs/canvas/standard:line/start/shape",
                            label: "Triangle",
                            icon: "triangle.png",
                            value: { shape: Canvas.Core.Shapes.LineCapShape.triangle }
                        }));
                    }
                }
                ContextMenu.LineStartCapShapeMenuGroup = LineStartCapShapeMenuGroup;
            })(ContextMenu = Design.ContextMenu || (Design.ContextMenu = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var ContextMenu;
            (function (ContextMenu) {
                class ShapeBorderContextMenuGroup extends Jade.UI.Controls.ContextMenuGroup {
                    constructor() {
                        super({ id: "shape-border" });
                    }
                    onPopulate() {
                        this.items.add(new Jade.UI.Controls.ContextMenuItemHeader({
                            label: "Theme Colors"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItemColorPalette({
                            commandId: "canvas/standard:element/border-color",
                            palette: Jade.UI.Controls.ContextMenuItemColorPalettes.themeColors
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItemHeader({
                            label: "Standard Colors"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItemColorPalette({
                            commandId: "canvas/standard:element/border-color",
                            palette: Jade.UI.Controls.ContextMenuItemColorPalettes.standardColors
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "pdjs/canvas/standard:element/custom-color",
                            value: Design.ICustomColorCommandTarget.borderColor
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuDivider());
                        this.items.add(new Jade.UI.Controls.ContextMenuItemSubMenu({
                            label: "Border Style",
                            menu: ["border-style"]
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItemSubMenu({
                            label: "Border Weight",
                            menu: ["border-weight"]
                        }));
                    }
                }
                ContextMenu.ShapeBorderContextMenuGroup = ShapeBorderContextMenuGroup;
                class BorderStyleContextMenuGroup extends Jade.UI.Controls.ContextMenuGroup {
                    constructor() {
                        super({ id: "border-style" });
                    }
                    onPopulate() {
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:element/border-style",
                            label: "None",
                            value: "none"
                        }));
                        this.items.add(new Design.BorderStyleContextMenuItem({
                            commandId: "canvas/standard:element/border-style",
                            value: "solid"
                        }));
                        this.items.add(new Design.BorderStyleContextMenuItem({
                            commandId: "canvas/standard:element/border-style",
                            value: "dotted"
                        }));
                        this.items.add(new Design.BorderStyleContextMenuItem({
                            commandId: "canvas/standard:element/border-style",
                            value: "dashed"
                        }));
                        this.items.add(new Design.BorderStyleContextMenuItem({
                            commandId: "canvas/standard:element/border-style",
                            value: "double"
                        }));
                    }
                }
                ContextMenu.BorderStyleContextMenuGroup = BorderStyleContextMenuGroup;
                class BorderWeightContextMenuGroup extends Jade.UI.Controls.ContextMenuGroup {
                    constructor() {
                        super({ id: "border-weight" });
                    }
                    onPopulate() {
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:element/border-width",
                            label: "1px",
                            value: 1
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:element/border-width",
                            label: "2px",
                            value: 2
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:element/border-width",
                            label: "3px",
                            value: 3
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:element/border-width",
                            label: "4px",
                            value: 4
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "canvas/standard:element/border-width",
                            label: "5px",
                            value: 5
                        }));
                    }
                }
                ContextMenu.BorderWeightContextMenuGroup = BorderWeightContextMenuGroup;
            })(ContextMenu = Design.ContextMenu || (Design.ContextMenu = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var ContextMenu;
            (function (ContextMenu) {
                class TabIndexContextMenuGroup extends Jade.UI.Controls.ContextMenuGroup {
                    constructor() {
                        super({ id: "tab-index" });
                    }
                    onPopulate() {
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            label: "In Order Selected",
                            commandId: "pdjs/canvas/standard:form-field/tab-indexes"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            label: "In Rows",
                            commandId: "pdjs/canvas/standard:form-field/auto-tab-indexes",
                            value: "rows"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            label: "In Columns",
                            commandId: "pdjs/canvas/standard:form-field/auto-tab-indexes",
                            value: "columns"
                        }));
                        this.items.add(new Jade.UI.Controls.ContextMenuDivider());
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "pdjs/canvas/standard:form-field/tab-index-toggle"
                        }));
                    }
                }
                ContextMenu.TabIndexContextMenuGroup = TabIndexContextMenuGroup;
            })(ContextMenu = Design.ContextMenu || (Design.ContextMenu = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var ContextMenu;
            (function (ContextMenu) {
                class ViewContextMenuGroup extends Jade.UI.Controls.ContextMenuGroup {
                    constructor() {
                        super({ id: "view" });
                    }
                    get view() {
                        return CanvasJS.Design.Environment.selection.first();
                    }
                    onPopulate() {
                        this.items.add(new Jade.UI.Controls.ContextMenuDivider());
                        this.items.add(new Jade.UI.Controls.ContextMenuItem({
                            commandId: "pdjs/canvas/standard:view/designer"
                        }));
                    }
                    meetsLoadConditions() {
                        return CanvasJS.Design.Environment.selection.count == 1
                            && Jade.InterfaceGuard.is(this.view, Canvas.Shared.Views.IViewComponentGuard);
                    }
                }
                ContextMenu.ViewContextMenuGroup = ViewContextMenuGroup;
            })(ContextMenu = Design.ContextMenu || (Design.ContextMenu = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class BorderStyleContextMenuItem extends Jade.UI.Controls.ContextMenuItemTemplate {
                template() {
                    return `<div class="-jadejs-contextmenu-item">
                        <div style="border-color:black;border-width:3px 0 0 0;border-style:${this.value};height:0;margin-top:5px;"></div>
                    </div>`;
                }
            }
            Design.BorderStyleContextMenuItem = BorderStyleContextMenuItem;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Dialogs;
            (function (Dialogs) {
                class AutoArrangeDialog extends Jade.UI.Dialog {
                    constructor(options) {
                        super(options);
                    }
                    get cancelButton() {
                        return this.node.find("button[data-command=cancel]");
                    }
                    get okButton() {
                        return this.node.find("button[data-command=ok]");
                    }
                    template() {
                        return `<div style="position:absolute;top:10px;right:10px;bottom:10px;left:10px;">
                        <div data-controls style="position:absolute;top:0;right:0;bottom:36px;left:0;overflow-y:auto;overflow-x:hidden;">
                        </div>
                        <div style="position:absolute;height:26px;bottom:0;left:0;right:0;text-align:right;">
                            <button data-command="ok" class="-jadejs-button">OK</button>
                            <button data-command="cancel" class="-jadejs-button">Cancel</button>
                        </div>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.cancelButton.on(Jade.BrowserEvent.CLICK, _.bind(this.cancelButton_onClick, this));
                        this.okButton.on(Jade.BrowserEvent.CLICK, _.bind(this.okButton_onClick, this));
                        this.columnCount_init();
                        this.columnWidth_init();
                        this.columnSpacing_init();
                        this.rowSpacing_init();
                        this.node.on(Jade.BrowserEvent.KEYPRESS, "input", (e) => {
                            if (e.which === Jade.KeyCode.Enter) {
                                this.okAndClose();
                            }
                        });
                    }
                    onComplete(e) {
                        super.onComplete(e);
                        this.m_columnCount.value = Design.ElementLayoutSettings.columnCount;
                        this.m_columnWidth.value = Design.ElementLayoutSettings.columnWidth;
                        this.m_columnSpacing.value = Design.ElementLayoutSettings.columnSpacing;
                        this.m_rowSpacing.value = Design.ElementLayoutSettings.rowSpacing;
                        this.m_columnCount.focus();
                    }
                    getWindowOptions() {
                        return {
                            title: "Auto Arrange",
                            height: 260,
                            width: 300
                        };
                    }
                    static open(options) {
                        return new AutoArrangeDialog(options);
                    }
                    okButton_onClick(e) {
                        this.okAndClose();
                    }
                    cancelButton_onClick(e) {
                        this.close();
                    }
                    columnCount_init() {
                        this.m_columnCount =
                            new PDJS.Shared.UI.Controls.Fields.IntegerField({
                                label: "Column Count",
                                numericType: PDJS.Shared.UI.Controls.NumericTextBoxType.integer
                            });
                        this.controls.add(this.m_columnCount);
                    }
                    columnWidth_init() {
                        this.m_columnWidth =
                            new PDJS.Shared.UI.Controls.Fields.IntegerField({
                                label: "Column Width",
                                numericType: PDJS.Shared.UI.Controls.NumericTextBoxType.integer
                            });
                        this.m_columnWidth.validators
                            .add(new PDJS.Shared.UI.Controls.Fields.FieldValidatorMultipleOf({
                            multipleOf: 5
                        }));
                        this.controls.add(this.m_columnWidth);
                    }
                    columnSpacing_init() {
                        this.m_columnSpacing =
                            new PDJS.Shared.UI.Controls.Fields.IntegerField({
                                label: "Column Spacing",
                                numericType: PDJS.Shared.UI.Controls.NumericTextBoxType.integer
                            });
                        this.m_columnSpacing.validators
                            .add(new PDJS.Shared.UI.Controls.Fields.FieldValidatorMultipleOf({
                            multipleOf: 5
                        }));
                        this.controls.add(this.m_columnSpacing);
                    }
                    rowSpacing_init() {
                        this.m_rowSpacing =
                            new PDJS.Shared.UI.Controls.Fields.IntegerField({
                                label: "Row Spacing",
                                numericType: PDJS.Shared.UI.Controls.NumericTextBoxType.integer
                            });
                        this.m_rowSpacing.validators
                            .add(new PDJS.Shared.UI.Controls.Fields.FieldValidatorMultipleOf({
                            multipleOf: 5
                        }));
                        this.controls.add(this.m_rowSpacing);
                    }
                    validate() {
                        this.controls.each((control) => {
                            if (control instanceof PDJS.Shared.UI.Controls.Fields.Field) {
                                control.validate();
                            }
                        });
                    }
                    isValid() {
                        let result = true;
                        this.controls.each((control) => {
                            if (control instanceof PDJS.Shared.UI.Controls.Fields.Field && result) {
                                result = control.isValid;
                            }
                        });
                        return result;
                    }
                    okAndClose() {
                        this.validate();
                        if (!this.isValid()) {
                            return;
                        }
                        Design.ElementLayoutSettings.columnCount = this.m_columnCount.value;
                        Design.ElementLayoutSettings.columnWidth = this.m_columnWidth.value;
                        Design.ElementLayoutSettings.columnSpacing = this.m_columnSpacing.value;
                        Design.ElementLayoutSettings.rowSpacing = this.m_rowSpacing.value;
                        Design.ElementLayoutSettings.save();
                        this.window.destroyContext();
                        this.close({
                            command: "ok"
                        });
                    }
                }
                Dialogs.AutoArrangeDialog = AutoArrangeDialog;
            })(Dialogs = Design.Dialogs || (Design.Dialogs = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Dialogs;
            (function (Dialogs) {
                class VariableDialog extends Jade.UI.Dialog {
                    constructor(options) {
                        super(options);
                    }
                    get form() {
                        return this.m_form;
                    }
                    get name() {
                        return this.state.get("name");
                    }
                    get dataType() {
                        return this.state.get("dataType");
                    }
                    get description() {
                        return this.state.get("description");
                    }
                    get isNullable() {
                        return this.state.get("isNullable");
                    }
                    get cancelButton() {
                        return this.node.find("button[data-command=cancel]");
                    }
                    get okButton() {
                        return this.node.find("button[data-command=ok]");
                    }
                    template() {
                        return `<div style="position:absolute;top:10px;right:10px;bottom:10px;left:10px;">
                        <div data-controls style="position:absolute;top:0;right:0;bottom:36px;left:0;overflow-y:auto;overflow-x:hidden;">
                        </div>
                        <div style="position:absolute;height:26px;bottom:0;left:0;right:0;text-align:right;">
                            <button data-command="ok" class="-jadejs-button">OK</button>
                            <button data-command="cancel" class="-jadejs-button">Cancel</button>
                        </div>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.cancelButton.on(Jade.BrowserEvent.CLICK, _.bind(this.cancelButton_onClick, this));
                        this.okButton.on(Jade.BrowserEvent.CLICK, _.bind(this.okButton_onClick, this));
                        this.node.on(Jade.BrowserEvent.KEYPRESS, "input", (e) => {
                            if (e.which === Jade.KeyCode.Enter) {
                                this.okAndClose();
                            }
                        });
                        this.m_form = new Dialogs.VariableForm({
                            name: this.name,
                            description: this.description,
                            dataType: this.dataType,
                            isNullable: this.isNullable
                        });
                        this.controls.add(this.m_form);
                    }
                    onComplete(e) {
                        super.onComplete(e);
                        this.form.focus();
                        if (Jade.String.isNullOrWhiteSpace(this.name)) {
                            this.setTitle("Add Variable");
                        }
                        else {
                            this.setTitle("Edit Variable");
                        }
                    }
                    getWindowOptions() {
                        return {
                            title: "Variable",
                            height: 260,
                            width: 300,
                            resizable: false
                        };
                    }
                    static open(options) {
                        return new VariableDialog(options);
                    }
                    okButton_onClick(e) {
                        this.okAndClose();
                    }
                    cancelButton_onClick(e) {
                        this.close();
                    }
                    okAndClose() {
                        this.form.validate();
                        if (!this.form.isValid()) {
                            return;
                        }
                        Jade.Application
                            .instance
                            .contexts
                            .revolveContext({
                            tags: ["canvas"],
                            fn: () => {
                                this.commitVariable();
                            }
                        });
                        this.window.destroyContext();
                        this.close({
                            command: "ok",
                            data: this.form.value
                        });
                    }
                    commitVariable() {
                        let document = CanvasJS.Design.Environment.document;
                        let isNew = this.name == null;
                        let isRenamed = !isNew && this.name != this.form.name;
                        document.source.variables.add(this.form.value);
                        if (isRenamed) {
                            document.source.variables.remove(this.form.name);
                        }
                    }
                }
                Dialogs.VariableDialog = VariableDialog;
            })(Dialogs = Design.Dialogs || (Design.Dialogs = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Dialogs;
            (function (Dialogs) {
                class VariableForm extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get name() {
                        return this.state.get("name");
                    }
                    get description() {
                        return this.state.get("description");
                    }
                    get dataType() {
                        return this.state.get("dataType");
                    }
                    get isNullable() {
                        return this.state.get("isNullable");
                    }
                    get nameField() {
                        return this.m_nameField;
                    }
                    get descriptionField() {
                        return this.m_descriptionField;
                    }
                    get typeField() {
                        return this.m_typeField;
                    }
                    get isNullableField() {
                        return this.m_isNullableField;
                    }
                    get value() {
                        return {
                            name: this.nameField.value,
                            description: this.descriptionField.value,
                            dataType: this.typeField.value,
                            isNullable: false
                        };
                    }
                    focus() {
                        this.m_nameField.focus();
                    }
                    isValid() {
                        let result = true;
                        this.controls.each((control) => {
                            if (control instanceof PDJS.Shared.UI.Controls.Fields.Field && result) {
                                result = control.isValid;
                            }
                        });
                        return result;
                    }
                    validate() {
                        this.controls.each((control) => {
                            if (control instanceof PDJS.Shared.UI.Controls.Fields.Field) {
                                control.validate();
                            }
                        });
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_nameField =
                            new PDJS.Shared.UI.Controls.Fields.StringField({
                                label: "Name",
                                required: true,
                                maxLength: 250,
                                validateOnBlur: false
                            });
                        this.m_nameField.validators.add(new PDJS.Shared.UI.Controls.Fields.FieldValidatorRegex({
                            regularExpression: "^[A-Za-z_]+[A-Za-z0-9_]*$",
                            expectedResult: true,
                            message: "Name may contain only letter, number and underscore characters; and may not begin with a number character."
                        }));
                        this.controls.add(this.m_nameField);
                        this.m_typeField =
                            new PDJS.Shared.UI.Controls.Fields.SingleSelectField({
                                label: "Type",
                                required: true,
                                enabled: this.dataType == null,
                                validateOnBlur: false,
                                items: [
                                    { id: 1, label: "Boolean" },
                                    { id: 2, label: "Date" },
                                    { id: 3, label: "Number" },
                                    { id: 4, label: "String" }
                                ]
                            });
                        this.controls.add(this.m_typeField);
                        this.m_isNullableField =
                            new PDJS.Shared.UI.Controls.Fields.BooleanField({
                                label: "Allow Nulls",
                                checkboxLabel: "Yes"
                            });
                        this.controls.add(this.m_isNullableField);
                        this.m_descriptionField =
                            new PDJS.Shared.UI.Controls.Fields.StringField({
                                label: "Description",
                                multiline: true,
                                height: 150,
                                maxLength: 250,
                                validateOnBlur: false
                            });
                        this.controls.add(this.m_descriptionField);
                    }
                    onComplete(e) {
                        super.onComplete(e);
                        this.nameField.value = this.name;
                        this.descriptionField.value = this.description;
                        this.isNullableField.value = this.isNullable;
                        this.typeField.value = this.dataType;
                    }
                }
                Dialogs.VariableForm = VariableForm;
            })(Dialogs = Design.Dialogs || (Design.Dialogs = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Dialogs;
            (function (Dialogs) {
                class VariablesDialog extends Jade.UI.Dialog {
                    constructor(options) {
                        super(options);
                    }
                    get cancelButton() {
                        return this.node.find("button[data-command=cancel]");
                    }
                    get okButton() {
                        return this.node.find("button[data-command=ok]");
                    }
                    template() {
                        return `<div style="position:absolute;top:10px;right:10px;bottom:10px;left:10px;">
                        <div data-role="toolbar" style="position:absolute;top:0;left:0;right:0;height:30px;"></div>
                        <div data-controls style="position:absolute;top:40px;right:0;bottom:36px;left:0;overflow-y:auto;overflow-x:hidden;">
                        </div>
                        <div style="position:absolute;height:26px;bottom:0;left:0;right:0;text-align:right;">
                            <button data-command="ok" class="-jadejs-button">OK</button>
                            <button data-command="cancel" class="-jadejs-button">Cancel</button>
                        </div>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.cancelButton.on(Jade.BrowserEvent.CLICK, _.bind(this.cancelButton_onClick, this));
                        this.okButton.on(Jade.BrowserEvent.CLICK, _.bind(this.okButton_onClick, this));
                        this.node.on(Jade.BrowserEvent.KEYPRESS, "input", (e) => {
                            if (e.which === Jade.KeyCode.Enter) {
                                this.okAndClose();
                            }
                        });
                        this.toolbar_init();
                        this.grid_init();
                    }
                    onComplete(e) {
                        super.onComplete(e);
                        this;
                    }
                    getWindowOptions() {
                        return {
                            title: "Variables",
                            height: 450,
                            width: 700
                        };
                    }
                    static open(options) {
                        return new VariablesDialog(options);
                    }
                    okButton_onClick(e) {
                        this.okAndClose();
                    }
                    cancelButton_onClick(e) {
                        this.close();
                    }
                    okAndClose() {
                        this.window.destroyContext();
                        this.close({
                            command: "ok"
                        });
                    }
                    grid_init() {
                        this.m_list = new Dialogs.VariableList({});
                        this.controls.add(this.m_list);
                    }
                    toolbar_init() {
                        this.m_toolbar = new Jade.UI.ToolBar({
                            insertAt: "[data-role=toolbar]",
                            segments: [
                                new Dialogs.VariablesToolbarSegment()
                            ]
                        });
                        this.controls.add(this.m_toolbar);
                    }
                }
                Dialogs.VariablesDialog = VariablesDialog;
            })(Dialogs = Design.Dialogs || (Design.Dialogs = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Dialogs;
            (function (Dialogs) {
                class VariableList extends Jade.UI.Control {
                    get gridNode() {
                        return this.node.find("[data-id='grid']");
                    }
                    template() {
                        return `<div class="pdjs-canvas-design-variable-list">
                        <div data-id="grid">
                        </div>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.gridNode.css({
                            position: "absolute",
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            boxSizing: "border-box",
                            overflow: "hidden"
                        });
                        this.grid_init();
                        this.subscriptions.add("canvas/variables/updated", () => {
                            this.onVariableUpdated();
                        });
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.node.css({
                            position: "absolute",
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            boxSizing: "border-box",
                            border: "1px solid #AAAAAA"
                        });
                    }
                    grid_init() {
                        let variables = [];
                        Jade.Application
                            .instance
                            .contexts
                            .revolveContext({
                            tags: ["canvas"],
                            fn: () => {
                                let document = CanvasJS.Design.Environment.document;
                                variables = document.source.variables.toList();
                            }
                        });
                        this.m_grid = new PD.Web.UI.Controls.Grid({
                            container: this.gridNode,
                            pk: "name",
                            height: "100%",
                            selectOnRightClick: true,
                            selection: {
                                map: function (e) {
                                    return _.map(e.selections.toArray(), (item) => {
                                        return {
                                            name: item.name,
                                            description: item.description,
                                            dataType: item.dataType,
                                            isNullable: item.isNullable
                                        };
                                    });
                                }
                            },
                            resizable: true,
                            dataSource: {
                                data: variables
                            },
                            change: (e) => {
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .commands
                                    .setState({
                                    "pdjs/canvas/variables": {
                                        selections: e.selections.toArray()
                                    }
                                });
                            },
                            dblclick: (e) => {
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .commands
                                    .execute("pdjs/canvas/variables:variable/edit");
                            },
                            columns: [
                                new PD.Web.UI.Controls.GridIconColumn({
                                    field: "icon",
                                    transform: function (data) {
                                        return Jade.IconSet.get("pdjs").resolve("function.png", Jade.IconSetSizeSpecificDirectory.x16);
                                    }
                                }),
                                new PD.Web.UI.Controls.GridColumn({
                                    field: "name",
                                    title: "Name",
                                    width: "200px",
                                    template: (data) => {
                                        return `<b>${data.name}</b>`;
                                    }
                                }),
                                new PD.Web.UI.Controls.GridColumn({
                                    field: "type",
                                    title: "Type",
                                    width: "100px",
                                    template: (data) => {
                                        return `<b>${data.dataType}</b>`;
                                    },
                                    attributes: {
                                        style: "color:##0000FF;"
                                    }
                                }),
                                new PD.Web.UI.Controls.GridColumn({
                                    field: "isNullable",
                                    title: "Allow Null",
                                    width: "80px",
                                    template: (data) => {
                                        return `<b>${data.isNullable ? "True" : "False"}</b>`;
                                    }
                                }),
                                new PD.Web.UI.Controls.GridColumn({
                                    field: "description",
                                    title: "Description",
                                    width: "325px"
                                }),
                                new PD.Web.UI.Controls.GridFillColumn()
                            ]
                        });
                    }
                    onVariableUpdated() {
                        this.m_grid.get_dataSource().data([]);
                        this.m_grid.redraw();
                        Jade.Application
                            .instance
                            .contexts
                            .revolveContext({
                            tags: ["canvas"],
                            fn: () => {
                                let document = CanvasJS.Design.Environment.document;
                                this.m_grid.get_dataSource().data(document.source.variables.toList());
                                this.m_grid.redraw();
                            }
                        });
                    }
                }
                Dialogs.VariableList = VariableList;
            })(Dialogs = Design.Dialogs || (Design.Dialogs = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Dialogs;
            (function (Dialogs) {
                class VariableListItem extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get name() {
                        return this.state.get("name");
                    }
                    get description() {
                        return this.state.get("description");
                    }
                    template() {
                        return `<table class="pdjs-canvas-design-variable-list-item">
                        <tr>                    
                            <td style="width:200px;border:1px solid;"><div>${this.name}</div></td>
                            <td style="left:200px;right:0;"><div>${this.description}</div></td>
                        </tr>
                    </table>`;
                    }
                }
                Dialogs.VariableListItem = VariableListItem;
            })(Dialogs = Design.Dialogs || (Design.Dialogs = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Dialogs;
            (function (Dialogs) {
                class VariablesToolbarSegment extends Jade.UI.ToolBarSegment {
                    onAddItems(e) {
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "pdjs/canvas/variables:variable/create"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "pdjs/canvas/variables:variable/edit"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "pdjs/canvas/variables:variable/delete"
                        }));
                    }
                }
                Dialogs.VariablesToolbarSegment = VariablesToolbarSegment;
            })(Dialogs = Design.Dialogs || (Design.Dialogs = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Dialogs;
            (function (Dialogs) {
                class VariableCommand extends Jade.Command {
                    constructor(props) {
                        super(props);
                        this.state.set("selections", []);
                    }
                    get selections() {
                        return this.state.get("selections", []);
                    }
                }
                Dialogs.VariableCommand = VariableCommand;
            })(Dialogs = Design.Dialogs || (Design.Dialogs = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Dialogs;
            (function (Dialogs) {
                class VariableCommands extends Jade.CommandGroup {
                    constructor() {
                        super("pdjs/canvas/variables");
                    }
                    registerCommands(e) {
                        this.commands.add(new Dialogs.VariableCreateCommand());
                        this.commands.add(new Dialogs.VariableDeleteCommand());
                        this.commands.add(new Dialogs.VariableEditCommand());
                    }
                }
                Dialogs.VariableCommands = VariableCommands;
            })(Dialogs = Design.Dialogs || (Design.Dialogs = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
Jade.Application.onStart(function () {
    Jade.CommandGroups.add(PDJS.Canvas.Design.Dialogs.VariableCommands);
});
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Dialogs;
            (function (Dialogs) {
                class VariableCreateCommand extends Dialogs.VariableCommand {
                    getDefaultValuesForProps() {
                        return {
                            id: "variable/create",
                            label: "Add",
                            icon: "plus.png",
                            enabled: true,
                            display: "icon label",
                            iconSetId: "pdjs"
                        };
                    }
                    onExecute(e) {
                        Dialogs.VariableDialog.open({
                            callbacks: {
                                ok: (e) => {
                                    Jade.Application
                                        .instance
                                        .contexts
                                        .current
                                        .events
                                        .publish("canvas/variables/updated");
                                }
                            }
                        });
                    }
                }
                Dialogs.VariableCreateCommand = VariableCreateCommand;
            })(Dialogs = Design.Dialogs || (Design.Dialogs = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Dialogs;
            (function (Dialogs) {
                class VariableDeleteCommand extends Dialogs.VariableCommand {
                    setState(state) {
                        super.setState(state);
                        this.enabled = this.selections.length > 0;
                    }
                    onExecute(e) {
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "variable/delete",
                            label: "Delete",
                            icon: "delete.png",
                            enabled: true,
                            display: "icon label",
                            iconSetId: "pdjs"
                        };
                    }
                }
                Dialogs.VariableDeleteCommand = VariableDeleteCommand;
            })(Dialogs = Design.Dialogs || (Design.Dialogs = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Dialogs;
            (function (Dialogs) {
                class VariableEditCommand extends Dialogs.VariableCommand {
                    setState(state) {
                        super.setState(state);
                        this.enabled = this.selections.length === 1;
                    }
                    onExecute(e) {
                        let variable = _.first(this.selections);
                        if (variable == null) {
                            return;
                        }
                        Dialogs.VariableDialog.open({
                            name: variable.name,
                            description: variable.description,
                            dataType: variable.dataType,
                            isNullable: variable.isNullable,
                            callbacks: {
                                ok: (sender, e) => {
                                    sender.destroyContext();
                                    Jade.Application
                                        .instance
                                        .contexts
                                        .current
                                        .events
                                        .publish("canvas/variables/updated");
                                }
                            }
                        });
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "variable/edit",
                            label: "Edit",
                            icon: "edit.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pdjs"
                        };
                    }
                }
                Dialogs.VariableEditCommand = VariableEditCommand;
            })(Dialogs = Design.Dialogs || (Design.Dialogs = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                class FormElementBase extends Design.ElementViewBase {
                    constructor(options) {
                        super(options);
                    }
                }
                Forms.FormElementBase = FormElementBase;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                class FormButton extends Forms.FormElementBase {
                    get buttonNode() {
                        return this.node.find("button");
                    }
                    template() {
                        return `<button style="height:100%;width:100%;box-sizing:border-box;">${this.source.label}</button>`;
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.buttonNode.text(this.source.label);
                    }
                }
                Forms.FormButton = FormButton;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                let FormField = class FormField extends Forms.FormElementBase {
                    get formId() {
                        return this.source.formId;
                    }
                    get label() {
                        return this.source.label || this.source.defaultLabel;
                    }
                    get labelNode() {
                        return this.formFieldNode.children("[role=label]");
                    }
                    get controlNode() {
                        return this.formFieldNode.children("[role=control]");
                    }
                    get formFieldNode() {
                        return this.node.find(`.${Canvas.Shared.CanvasCss.FormField}`);
                    }
                    get deck() {
                        return this.m_deck;
                    }
                    template() {
                        return `<div class="${Canvas.Shared.CanvasCss.FormField}">
                        <div role="label">${this.label}:</div>
                        <div role="control" data-controls>
                        </div>
                    </div>`;
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.deck_init();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.labelNode.text(`${this.source.activeLabel}:`);
                        this.labelNode.css({
                            color: this.source.activeLabelColor
                        });
                        if (this.source.activeEnabledState) {
                            this.formFieldNode.removeClass(PDJS.Shared.UI.CssClass.Disabled);
                        }
                        else {
                            this.formFieldNode.addClass(PDJS.Shared.UI.CssClass.Disabled);
                        }
                    }
                    deck_init() {
                        this.m_deck = new Forms.FormFieldDeck({
                            insertAt: `.${Canvas.Shared.CanvasCss.FormField}`
                        });
                        this.controls.add(this.m_deck);
                        this.deck.controls.add(new Forms.FormFieldToolTip({
                            formField: this
                        }));
                    }
                };
                FormField = __decorate([
                    Jade.UI.Controls.toolingTags("form-field")
                ], FormField);
                Forms.FormField = FormField;
                class FormFieldBase extends FormField {
                    get source() {
                        return this.m_source;
                    }
                }
                Forms.FormFieldBase = FormFieldBase;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                class BuiltInField extends Forms.FormFieldBase {
                }
                Forms.BuiltInField = BuiltInField;
                class BuildInFieldBase extends BuiltInField {
                    get source() {
                        return this.m_source;
                    }
                }
                Forms.BuildInFieldBase = BuildInFieldBase;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                class ExtensionField extends Forms.FormFieldBase {
                    onActivate(e) {
                        super.onActivate(e);
                        this.source.inBatchMode = CanvasJS
                            .Actual
                            .Environment
                            .document
                            .state
                            .get("isBatchMode");
                        this.deck.controls.add(new Forms.FormFieldBatchEdit({
                            extensionField: this
                        }));
                    }
                }
                Forms.ExtensionField = ExtensionField;
                class ExtensionFieldBase extends ExtensionField {
                    get source() {
                        return this.m_source;
                    }
                }
                Forms.ExtensionFieldBase = ExtensionFieldBase;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                class EntityDescriptionField extends Forms.BuildInFieldBase {
                    get inputNode() {
                        return this.node.find("textarea");
                    }
                    onAttach(e) {
                        super.onAttach(e);
                        this.formFieldNode.addClass(Canvas.Shared.CanvasCss.StringField);
                        this.controlNode.append(`<textarea 
                                        class="${Canvas.Shared.CanvasCss.FormFieldAnimationTarget}" 
                                        style="overflow-y:scroll;">
                                    </textarea>`);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        if (this.source.activeEnabledState) {
                            this.inputNode.removeAttr("disabled");
                        }
                        else {
                            this.inputNode.attr("disabled", "disabled");
                        }
                    }
                }
                Forms.EntityDescriptionField = EntityDescriptionField;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                let EntityIconField = class EntityIconField extends Forms.BuildInFieldBase {
                    get comboBox() {
                        return this.m_comboBox;
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.comboBox_init();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.comboBox.enabled = this.source.activeEnabledState;
                    }
                    comboBox_init() {
                        this.m_comboBox = new Canvas.Shared.Forms.EntityIconFieldComboBox({
                            defaultMask: "Select...",
                            mode: PDJS.Shared.UI.Controls.ComboBoxMode.PopUp
                        });
                        this.controls.add(this.m_comboBox);
                    }
                };
                EntityIconField = __decorate([
                    CanvasJS.Design.allowedSizingHandles(CanvasJS.Design.GeometryBoxHandle.e, CanvasJS.Design.GeometryBoxHandle.w)
                ], EntityIconField);
                Forms.EntityIconField = EntityIconField;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                let EntityNameField = class EntityNameField extends Forms.BuildInFieldBase {
                    get inputNode() {
                        return this.controlNode.find("input[type=text]");
                    }
                    onAttach(e) {
                        super.onAttach(e);
                        this.formFieldNode.addClass(Canvas.Shared.CanvasCss.StringField);
                        this.controlNode.append(`<input 
                                        type="text"
                                        class="${Canvas.Shared.CanvasCss.FormFieldAnimationTarget}" />`);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        if (this.source.activeEnabledState) {
                            this.inputNode.removeAttr("disabled");
                        }
                        else {
                            this.inputNode.attr("disabled", "disabled");
                        }
                    }
                };
                EntityNameField = __decorate([
                    CanvasJS.Design.allowedSizingHandles(CanvasJS.Design.GeometryBoxHandle.e, CanvasJS.Design.GeometryBoxHandle.w)
                ], EntityNameField);
                Forms.EntityNameField = EntityNameField;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                let EntityParentField = class EntityParentField extends Forms.BuildInFieldBase {
                    get comboBox() {
                        return this.m_comboBox;
                    }
                    get navigate() {
                        return this.m_navigate;
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.comboBox_init();
                        this.navigate_init();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.comboBox.enabled = this.source.activeEnabledState;
                        this.comboBox.selection = {
                            entityID: 0,
                            entityName: "Parent 'A'",
                            entityTypeIcon: "cube_green.png",
                            entityTypeName: "",
                            entityTypeId: 0
                        };
                        Canvas.Shared.Forms.NavigateLink.setDesignDisplay(this.navigate);
                    }
                    comboBox_init() {
                        this.m_comboBox = new Canvas.Shared.Forms.EntityParentFieldComboBox({
                            defaultMask: "Select...",
                            entityTypeId: this.source.entityTypeId,
                            mode: PDJS.Shared.UI.Controls.ComboBoxMode.PopUp,
                        });
                        this.controls.add(this.m_comboBox);
                    }
                    navigate_init() {
                        this.m_navigate = new Canvas.Shared.Forms.NavigateLink({});
                        this.controls.add(this.m_navigate);
                    }
                };
                EntityParentField = __decorate([
                    CanvasJS.Design.allowedSizingHandles(CanvasJS.Design.GeometryBoxHandle.e, CanvasJS.Design.GeometryBoxHandle.w)
                ], EntityParentField);
                Forms.EntityParentField = EntityParentField;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                class EntityProcessField extends Forms.BuildInFieldBase {
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_assignment = new Canvas.Shared.Forms.EntityProcessField({
                            entityTypeId: this.source.entityTypeId,
                            keyIcon: "SIGNAL_FLAG_BLUE.PNG",
                            keyName: "Evaluation",
                            processName: `Process "A"`,
                            stageId: this.source.stageId,
                            stageName: "Ready To Complete",
                            stageIcon: this.source.stageIcon,
                            statusId: this.source.statusId,
                            statusName: "Approved",
                            statusIcon: "BULLET_BALL_GREEN.PNG",
                            showKey: this.source.showKey,
                            showProcess: this.source.showProcess,
                            showStage: this.source.showStage,
                            showStatus: this.source.showStatus
                        });
                        this.controls.add(this.m_assignment);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.m_assignment.showKey = this.source.showKey;
                        this.m_assignment.showProcess = this.source.showProcess;
                        this.m_assignment.showStage = this.source.showStage;
                        this.m_assignment.showStatus = this.source.showStatus;
                    }
                }
                Forms.EntityProcessField = EntityProcessField;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                let BooleanField = class BooleanField extends Forms.ExtensionFieldBase {
                    get itemLabelNode() {
                        return this.controlNode.find("div[role=input-label]");
                    }
                    get checkboxNode() {
                        return this.controlNode.find("input[type=checkbox]");
                    }
                    onAttach(e) {
                        super.onAttach(e);
                        this.formFieldNode.addClass(Canvas.Shared.CanvasCss.BooleanField);
                        this.controlNode.append(`<label>
                                        <input type="checkbox" />
                                        <div role="input-label">
                                            ${this.source.itemLabel}
                                        </div>
                                    </label>`);
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        let iconPath = null;
                        if (this.source.itemIcon != null) {
                            iconPath = Jade.IconSet.get("pd")
                                .resolve(this.source.itemIcon, Jade.IconSetSizeSpecificDirectory.x16);
                            this.itemLabelNode.css({
                                paddingLeft: "24px",
                                backgroundImage: `url(${iconPath})`,
                                backgroundRepeat: "no-repeat",
                                backgroundPosition: "3px 3px"
                            });
                        }
                        else {
                            this.itemLabelNode.css({
                                paddingLeft: "4px"
                            });
                        }
                        this.formFieldNode.addClass(Canvas.Shared.CanvasCss.BooleanField);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.checkboxNode.prop("disabled", !this.source.activeEnabledState);
                        this.itemLabelNode.css({
                            opacity: this.source.activeEnabledState ? 1 : .5
                        });
                    }
                };
                BooleanField = __decorate([
                    CanvasJS.Design.allowedSizingHandles(CanvasJS.Design.GeometryBoxHandle.e, CanvasJS.Design.GeometryBoxHandle.w)
                ], BooleanField);
                Forms.BooleanField = BooleanField;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                let DateField = class DateField extends Forms.ExtensionFieldBase {
                    get dateBox() {
                        return this.m_dateBox;
                    }
                    get itemLabelNode() {
                        return this.controlNode.find("div[role=input-label]");
                    }
                    get checkboxNode() {
                        return this.controlNode.find("input[type=checkbox]");
                    }
                    get formatExample() {
                        return new Date(2010, 9, 31);
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.dateBox_init();
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.formFieldNode.addClass(Canvas.Shared.CanvasCss.DateField);
                    }
                    onComplete(e) {
                        super.onComplete(e);
                        this.setFormat();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.setFormat();
                        this.itemLabelNode.css({
                            opacity: this.source.activeEnabledState ? 1 : .5
                        });
                        this.m_dateBox.enabled = this.source.activeEnabledState;
                    }
                    dateBox_init() {
                        this.m_dateBox = new PDJS.Shared.UI.Controls.DateTextBox({
                            format: this.source.activeFormat
                        });
                        this.controls.add(this.m_dateBox);
                    }
                    setFormat() {
                        if (this.dateBox.node) {
                            this.dateBox.mask = kendo.toString(this.formatExample, this.source.activeFormat);
                        }
                    }
                };
                DateField = __decorate([
                    CanvasJS.Design.allowedSizingHandles(CanvasJS.Design.GeometryBoxHandle.e, CanvasJS.Design.GeometryBoxHandle.w)
                ], DateField);
                Forms.DateField = DateField;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                let DecimalField = class DecimalField extends Forms.ExtensionFieldBase {
                    get format() {
                        return this.source.activeFormat;
                    }
                    get numericBox() {
                        return this.m_numericTextBox;
                    }
                    get formatExample() {
                        return this.state.get("formatExample", 999999999);
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.numericBox_init();
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.formFieldNode.addClass(Canvas.Shared.CanvasCss.NumericField);
                    }
                    onComplete(e) {
                        super.onComplete(e);
                        this.setFormat();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.setFormat();
                        this.numericBox.enabled = this.source.activeEnabledState;
                    }
                    numericBox_init() {
                        this.m_numericTextBox = new PDJS.Shared.UI.Controls.NumericTextBox({
                            insertAt: "[role=control]",
                            numericType: PDJS.Shared.UI.Controls.NumericTextBoxType.decimal,
                            format: this.format
                        });
                        this.controls.add(this.m_numericTextBox);
                    }
                    setFormat() {
                        if (this.numericBox.node) {
                            this.numericBox.maskValue = kendo.toString(this.formatExample, this.format);
                        }
                    }
                };
                DecimalField = __decorate([
                    CanvasJS.Design.allowedSizingHandles(CanvasJS.Design.GeometryBoxHandle.e, CanvasJS.Design.GeometryBoxHandle.w)
                ], DecimalField);
                Forms.DecimalField = DecimalField;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                let EntityField = class EntityField extends Forms.ExtensionFieldBase {
                    get comboBox() {
                        return this.m_comboBox;
                    }
                    get navigate() {
                        return this.m_navigate;
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.comboBox_init();
                        this.navigate_init();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.comboBox.enabled = this.source.activeEnabledState;
                        this.comboBox.selection = {
                            entityID: 0,
                            entityName: "Entity 'A'",
                            entityTypeIcon: "cube_yellow.png",
                            entityTypeName: ""
                        };
                        Canvas.Shared.Forms.NavigateLink.setDesignDisplay(this.navigate);
                    }
                    comboBox_init() {
                        this.m_comboBox = new Canvas.Shared.Forms.EntityFieldComboBox({
                            defaultMask: "Select...",
                            viewId: this.source.viewId,
                            viewStateId: this.source.viewStateId,
                            mode: PDJS.Shared.UI.Controls.ComboBoxMode.PopUp
                        });
                        this.controls.add(this.m_comboBox);
                    }
                    navigate_init() {
                        this.m_navigate = new Canvas.Shared.Forms.NavigateLink({});
                        this.controls.add(this.m_navigate);
                    }
                };
                EntityField = __decorate([
                    CanvasJS.Design.allowedSizingHandles(CanvasJS.Design.GeometryBoxHandle.e, CanvasJS.Design.GeometryBoxHandle.w)
                ], EntityField);
                Forms.EntityField = EntityField;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                let Int32Field = class Int32Field extends Forms.ExtensionFieldBase {
                    get format() {
                        return this.source.format || this.source.columnFormat;
                    }
                    get numericBox() {
                        return this.m_numericTextBox;
                    }
                    get formatExample() {
                        return this.state.get("formatExample", 1750000);
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.numericBox_init();
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.formFieldNode.addClass(Canvas.Shared.CanvasCss.NumericField);
                    }
                    onComplete(e) {
                        super.onComplete(e);
                        this.setFormat();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.setFormat();
                        this.m_numericTextBox.enabled = this.source.activeEnabledState;
                    }
                    numericBox_init() {
                        this.m_numericTextBox = new PDJS.Shared.UI.Controls.NumericTextBox({
                            insertAt: "[role=control]",
                            numericType: PDJS.Shared.UI.Controls.NumericTextBoxType.decimal,
                            format: this.format
                        });
                        this.controls.add(this.m_numericTextBox);
                    }
                    setFormat() {
                        if (this.numericBox.node) {
                            this.numericBox.maskValue = kendo.toString(this.formatExample, this.format);
                        }
                    }
                };
                Int32Field = __decorate([
                    CanvasJS.Design.allowedSizingHandles(CanvasJS.Design.GeometryBoxHandle.e, CanvasJS.Design.GeometryBoxHandle.w)
                ], Int32Field);
                Forms.Int32Field = Int32Field;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                let Int64Field = class Int64Field extends Forms.ExtensionFieldBase {
                    get format() {
                        return this.source.format || this.source.columnFormat;
                    }
                    get numericBox() {
                        return this.m_numericTextBox;
                    }
                    get formatExample() {
                        return this.state.get("formatExample", 1750000);
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.numericBox_init();
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.formFieldNode.addClass(Canvas.Shared.CanvasCss.NumericField);
                    }
                    onComplete(e) {
                        super.onComplete(e);
                        this.setFormat();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.setFormat();
                        this.m_numericTextBox.enabled = this.source.activeEnabledState;
                    }
                    numericBox_init() {
                        this.m_numericTextBox = new PDJS.Shared.UI.Controls.NumericTextBox({
                            insertAt: "[role=control]",
                            numericType: PDJS.Shared.UI.Controls.NumericTextBoxType.decimal,
                            format: this.format
                        });
                        this.controls.add(this.m_numericTextBox);
                    }
                    setFormat() {
                        if (this.numericBox.node) {
                            this.numericBox.maskValue = kendo.toString(this.formatExample, this.format);
                        }
                    }
                };
                Int64Field = __decorate([
                    CanvasJS.Design.allowedSizingHandles(CanvasJS.Design.GeometryBoxHandle.e, CanvasJS.Design.GeometryBoxHandle.w)
                ], Int64Field);
                Forms.Int64Field = Int64Field;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                class MultiSelectField extends Forms.ExtensionFieldBase {
                    get multiSelect() {
                        return this.m_multiSelect;
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.multiSelect_init();
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.controlNode.on(Jade.BrowserEvent.FOCUS, (e) => {
                            this.controlNode.addClass(Canvas.Shared.CanvasCss.FormFieldFocus);
                        });
                        this.controlNode.on(Jade.BrowserEvent.BLUR, (e) => {
                            this.controlNode.removeClass(Canvas.Shared.CanvasCss.FormFieldFocus);
                        });
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.multiSelect.enabled = this.source.activeEnabledState;
                    }
                    template() {
                        return `<div class="${Canvas.Shared.CanvasCss.FormField} ${Canvas.Shared.CanvasCss.MultiSelectField}">
                        <div role="label">${this.label}:</div>
                        <div role="control" data-controls class="${Canvas.Shared.CanvasCss.FormFieldAnimationTarget}">
                        </div>
                    </div>`;
                    }
                    multiSelect_init() {
                        this.m_multiSelect = new PDJS.Shared.UI.Controls.MultiSelect({
                            onItemChecked: (e) => {
                                this.source.value = [];
                                this.multiSelect.items.each((item) => {
                                    if (item.checked) {
                                        this.source.value[this.source.value.length] = item.itemId;
                                    }
                                });
                            }
                        });
                        this.controls.add(this.m_multiSelect);
                        _.each(this.source.items, (item) => {
                            this.multiSelect.controls.add(new PDJS.Shared.UI.Controls.MultiSelectItem({
                                itemId: item.id,
                                label: item.label,
                                icon: item.icon
                            }));
                        });
                    }
                }
                Forms.MultiSelectField = MultiSelectField;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                let SingleSelectField = class SingleSelectField extends Forms.ExtensionFieldBase {
                    get comboBox() {
                        return this.m_comboBox;
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.comboBox_init();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.m_comboBox.enabled = this.source.activeEnabledState;
                    }
                    comboBox_init() {
                        this.m_comboBox = new Canvas.Shared.Forms.SingleSelectFieldComboBox({
                            defaultMaskText: "Select...",
                            items: this.source.items,
                            onValueChanged: () => {
                                if (this.m_comboBox.selection != null) {
                                    this.source.selectedId = this.m_comboBox.selection.uid;
                                }
                                else {
                                    this.source.selectedId = null;
                                }
                            }
                        });
                        this.controls.add(this.m_comboBox);
                    }
                };
                SingleSelectField = __decorate([
                    CanvasJS.Design.allowedSizingHandles(CanvasJS.Design.GeometryBoxHandle.e, CanvasJS.Design.GeometryBoxHandle.w)
                ], SingleSelectField);
                Forms.SingleSelectField = SingleSelectField;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                class StringField extends Forms.ExtensionFieldBase {
                    get inputNode() {
                        return this.node.find("[role=text]");
                    }
                    onAttach(e) {
                        super.onAttach(e);
                        this.controlNode.append(this.createInput());
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.formFieldNode.addClass(Canvas.Shared.CanvasCss.StringField);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.controlNode.html(this.createInput());
                        this.controlNode.addClass(this.source.multiLine ? "multiline" : "singleline");
                        this.controlNode.removeClass(this.source.multiLine ? "singleline" : "multiline");
                        if (this.source.activeEnabledState) {
                            this.inputNode.removeAttr("disabled");
                        }
                        else {
                            this.inputNode.attr("disabled", "disabled");
                        }
                    }
                    createInput() {
                        let result = "";
                        if (this.source.multiLine) {
                            result = `<textarea
                            role="text"
                            style="overflow-y:scroll;">
                            </textarea>`;
                        }
                        else {
                            result = `<input
                            role="text"
                            type="text" />`;
                        }
                        return result;
                    }
                }
                Forms.StringField = StringField;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                let UserField = class UserField extends Forms.ExtensionFieldBase {
                    get comboBox() {
                        return this.m_comboBox;
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.comboBox_init();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.comboBox.enabled = this.source.activeEnabledState;
                    }
                    comboBox_init() {
                        this.m_comboBox = new Canvas.Shared.Forms.UserFieldComboBox({
                            defaultMask: "Select...",
                            viewId: this.source.viewId,
                            viewStateId: this.source.viewStateId,
                            mode: PDJS.Shared.UI.Controls.ComboBoxMode.PopUp
                        });
                        this.controls.add(this.m_comboBox);
                    }
                };
                UserField = __decorate([
                    CanvasJS.Design.allowedSizingHandles(CanvasJS.Design.GeometryBoxHandle.e, CanvasJS.Design.GeometryBoxHandle.w)
                ], UserField);
                Forms.UserField = UserField;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                class FormFieldDeckItem extends Jade.UI.Control {
                }
                Forms.FormFieldDeckItem = FormFieldDeckItem;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                class FormFieldBatchEdit extends Forms.FormFieldDeckItem {
                    constructor(options) {
                        super(options);
                    }
                    get extensionField() {
                        return this.state.get("extensionField");
                    }
                    get checkBoxNode() {
                        return this.node.find("input");
                    }
                    get isVisible() {
                        return !this.extensionField.source.isDisabled
                            && !this.extensionField.source.isReadOnly
                            && CanvasJS.Design.Environment.document.isListBased;
                    }
                    template() {
                        return `<div class="-pd-form-field-deck-item" style="padding-top:7px;cursor:pointer;"><input type='checkbox'/></div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        if (this.isVisible) {
                            this.node.show();
                        }
                        else {
                            this.node.hide();
                        }
                    }
                }
                Forms.FormFieldBatchEdit = FormFieldBatchEdit;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                class FormFieldDeck extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    template() {
                        return `<div class="-pd-form-field-deck"></div>`;
                    }
                }
                Forms.FormFieldDeck = FormFieldDeck;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                class FormFieldToolTip extends Forms.FormFieldDeckItem {
                    constructor(options) {
                        super(options);
                    }
                    get formField() {
                        return this.state.get("formField");
                    }
                    template() {
                        let tooltipIcon = Jade.IconSet.get("pdjs")
                            .resolve("question.png", Jade.IconSetSizeSpecificDirectory.x16);
                        return `<div class="-pd-form-field-deck-item" style="padding: 5px 1px 2px 1px;cursor:pointer;"><img src='${tooltipIcon}'/></div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.formField.source.state.on("change", _.bind(this.onStateChanged, this));
                    }
                    onStateChanged() {
                        if (this.formField.source.hasTooltip) {
                            this.node.show();
                        }
                        else {
                            this.node.hide();
                        }
                    }
                }
                Forms.FormFieldToolTip = FormFieldToolTip;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Views;
            (function (Views) {
                class IViewComponentGuard extends Jade.InterfaceGuard {
                    get signature() {
                        return {
                            id: "8a1e94fe-4ba8-4b9a-8025-371115c2416c",
                            label: "IViewComponentGuard"
                        };
                    }
                }
                Views.IViewComponentGuard = IViewComponentGuard;
            })(Views = Shared.Views || (Shared.Views = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                let BatchField = class BatchField extends Forms.FormFieldBase {
                    get batch() {
                        return this.m_batch;
                    }
                    get viewStateId() {
                        return this.source.viewStateId;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.formFieldNode.addClass(Canvas.Shared.CanvasCss.BatchField);
                        this.batch_init();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.batch.showCheckboxes = this.source.showCheckboxes;
                        this.batch_populate();
                    }
                    batch_init() {
                        this.m_batch = new PDJS.Shared.UI.Controls.BatchField({
                            dialogViewStateId: this.source.viewStateId,
                            dialogTitle: this.source.dialogTitle,
                            dialogHeight: this.source.dialogHeight,
                            dialogWidth: this.source.dialogWidth,
                            dialogFilters: [],
                            showCheckboxes: this.source.showCheckboxes,
                            change: (items) => {
                                this.source.listItems.splice(0, this.source.listItems.length);
                                items.forEach((item) => {
                                    this.source.listItems[this.source.listItems.length] = item;
                                });
                            }
                        });
                        this.controls.add(this.batch);
                    }
                    batch_populate() {
                        if (this.source.selectIdentities) {
                            this.batch.reload([
                                { active: true, selected: true, icon: null, id: 1, label: `User A`, visible: true },
                                { active: true, selected: false, icon: null, id: 2, label: `User B`, visible: true },
                                { active: true, selected: false, icon: null, id: 3, label: `Group A`, visible: true },
                                { active: true, selected: false, icon: null, id: 4, label: `User C`, visible: true },
                                { active: true, selected: false, icon: null, id: 5, label: `Group B`, visible: true }
                            ], "");
                        }
                        else {
                            this.batch.reload([
                                { active: true, selected: true, icon: null, id: 1, label: `Entity "A"`, visible: true },
                                { active: true, selected: false, icon: null, id: 2, label: `Entity "B"`, visible: true },
                                { active: true, selected: false, icon: null, id: 3, label: `Entity "C"`, visible: true },
                                { active: true, selected: false, icon: null, id: 4, label: `Entity "D"`, visible: true },
                                { active: true, selected: false, icon: null, id: 5, label: `Entity "E"`, visible: true }
                            ], "");
                        }
                    }
                };
                BatchField = __decorate([
                    Jade.InterfaceGuard.implement(Canvas.Shared.Views.IViewComponentGuard),
                    Jade.UI.Controls.toolingTags("view")
                ], BatchField);
                Forms.BatchField = BatchField;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Forms;
            (function (Forms) {
                class TextField extends Forms.FormFieldBase {
                    get inputNode() {
                        return this.node.find("[role=text]");
                    }
                    onAttach(e) {
                        super.onAttach(e);
                        this.controlNode.append(this.createInput());
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.formFieldNode.addClass(Canvas.Shared.CanvasCss.StringField);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.controlNode.html(this.createInput());
                        this.controlNode.addClass(this.source.multiLine ? "multiline" : "singleline");
                        this.controlNode.removeClass(this.source.multiLine ? "singleline" : "multiline");
                        this.inputNode.val(this.source.value);
                        if (this.source.activeEnabledState) {
                            this.inputNode.removeAttr("disabled");
                        }
                        else {
                            this.inputNode.attr("disabled", "disabled");
                        }
                    }
                    createInput() {
                        let result = "";
                        if (this.source.multiLine) {
                            result = `<textarea 
                            role="text"
                            style="overflow-y:scroll;">
                            </textarea>`;
                        }
                        else {
                            result = `<input 
                            role="text"
                            type="text" />`;
                        }
                        return result;
                    }
                }
                Forms.TextField = TextField;
            })(Forms = Design.Forms || (Design.Forms = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Process;
            (function (Process) {
                class ProcessDecisions extends Design.ElementViewBase {
                    template() {
                        return `<div class="-pdjs-canvas-process-decisions" style="position:absolute;top:0;left:0;right:0;bottom:0;" data-controls></div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_view = new PDJS.Canvas.Shared.Process.ProcessDecisions({});
                        this.controls.add(this.m_view);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.m_view.load(this.getDesignerData());
                    }
                    getDesignerData() {
                        let result = this.source.toJSON();
                        result.currentKey = Canvas.Shared.Process.DataSet.currentKey;
                        result.currentStage = Canvas.Shared.Process.DataSet.currentStage;
                        result.currentStatus = Canvas.Shared.Process.DataSet.currentStatus;
                        result.decisions = Canvas.Shared.Process.DataSet.selectedStageDecisions;
                        return result;
                    }
                }
                Process.ProcessDecisions = ProcessDecisions;
            })(Process = Design.Process || (Design.Process = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Process;
            (function (Process) {
                let ProcessState = class ProcessState extends Design.ElementViewBase {
                    template() {
                        return `<div class="-pdjs-canvas-process-state" style="position:absolute;top:0;left:0;right:0;bottom:0;" data-controls></div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_view = new PDJS.Canvas.Shared.Process.ProcessState({});
                        this.controls.add(this.m_view);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.m_view.load(this.getDesignerData());
                    }
                    getDesignerData() {
                        let result = this.source.toJSON();
                        result.processName = Canvas.Shared.Process.DataSet.currentProcess;
                        result.currentKey = Canvas.Shared.Process.DataSet.currentKey;
                        result.currentStage = Canvas.Shared.Process.DataSet.currentStage;
                        result.currentStatus = Canvas.Shared.Process.DataSet.currentStatus;
                        this.setDimensions(result);
                        return result;
                    }
                    setDimensions(data) {
                        this.source.height = this.source.absoluteHeight;
                        this.source.minHeight = this.source.absoluteHeight;
                        this.source.maxHeight = this.source.absoluteHeight;
                    }
                };
                ProcessState = __decorate([
                    CanvasJS.Design.allowedSizingHandles(CanvasJS.Design.GeometryBoxHandle.e, CanvasJS.Design.GeometryBoxHandle.w)
                ], ProcessState);
                Process.ProcessState = ProcessState;
            })(Process = Design.Process || (Design.Process = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Process;
            (function (Process) {
                class ProcessView extends Design.ElementViewBase {
                    template() {
                        return `<div style="position:absolute;top:0;left:0;right:0;bottom:0;" data-controls></div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_view = new PDJS.Canvas.Shared.Process.ProcessView({});
                        this.controls.add(this.m_view);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.m_view.load(this.getDesignerData());
                        this.setDecisionDestinationVisibility();
                    }
                    getDesignerData() {
                        let result = this.source.toJSON();
                        this.source.suspendStateChanged = true;
                        this.source.minHeight = (result.showKeys ? result.keyHeight : 0) +
                            (result.showStages ? result.stageHeight : 0) +
                            (result.showDecisions ? 150 : 0) +
                            (result.showState ? 40 : 0);
                        if (!result.showStages) {
                            this.source.maxHeight = (result.showKeys ? result.keyHeight : 0) +
                                (result.showDecisions ? 150 : 0) +
                                (result.showState ? 40 : 0);
                        }
                        else {
                            this.source.maxHeight = null;
                        }
                        this.source.suspendStateChanged = false;
                        result.currentKey = Canvas.Shared.Process.DataSet.currentKey;
                        result.currentStage = Canvas.Shared.Process.DataSet.currentStage;
                        result.currentStatus = Canvas.Shared.Process.DataSet.currentStatus;
                        result.keys = Canvas.Shared.Process.DataSet.keys;
                        result.stages = Canvas.Shared.Process.DataSet.stages;
                        return result;
                    }
                    setDecisionDestinationVisibility() {
                        if (this.source.showDecisionDestinations) {
                            PDJS.Application
                                .instance
                                .contexts
                                .current
                                .events
                                .publish(Canvas.Shared.Process.ProcessEvent.DecisionsMap, {
                                maps: Canvas.Shared.Process.DataSet.selectedStageDecisionMaps
                            });
                        }
                        else {
                            PDJS.Application
                                .instance
                                .contexts
                                .current
                                .events
                                .publish(Canvas.Shared.Process.ProcessEvent.DecisionsMap, {
                                maps: []
                            });
                        }
                    }
                }
                Process.ProcessView = ProcessView;
            })(Process = Design.Process || (Design.Process = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var RibbonBar;
            (function (RibbonBar) {
                class ArrangeRibbonGroup extends Jade.UI.Controls.RibbonBarGroup {
                    constructor() {
                        super({ label: "Arrange", toolingId: "element" });
                    }
                    get alwaysShow() {
                        return true;
                    }
                    onActivate(e) {
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            commandId: "pdjs/canvas/standard:gridlines/toggle"
                        }));
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            commandId: "canvas/standard:selection/bring-forward"
                        }));
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            commandId: "canvas/standard:selection/send-back"
                        }));
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            label: "Alignment",
                            width: 80,
                            icon: Jade.IconSet.get("pdjs").resolve("object_alignment_left.png", Jade.IconSetSizeSpecificDirectory.x32),
                            menu: ["element-alignment"]
                        }));
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            commandId: "pdjs/canvas/standard:elements/auto-arrange"
                        }));
                    }
                }
                RibbonBar.ArrangeRibbonGroup = ArrangeRibbonGroup;
            })(RibbonBar = Design.RibbonBar || (Design.RibbonBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var RibbonBar;
            (function (RibbonBar) {
                class ClipboardRibbonGroup extends Jade.UI.Controls.RibbonBarGroup {
                    constructor() {
                        super({ label: "Clipboard", toolingId: "element" });
                    }
                    get alwaysShow() {
                        return true;
                    }
                    onActivate(e) {
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            commandId: "canvas/clipboard:clipboard/cut"
                        }));
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            commandId: "canvas/clipboard:clipboard/copy"
                        }));
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            commandId: "canvas/clipboard:clipboard/paste"
                        }));
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            commandId: "canvas/clipboard:clipboard/duplicate"
                        }));
                    }
                }
                RibbonBar.ClipboardRibbonGroup = ClipboardRibbonGroup;
            })(RibbonBar = Design.RibbonBar || (Design.RibbonBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var RibbonBar;
            (function (RibbonBar) {
                class ElementRibbonGroup extends Jade.UI.Controls.RibbonBarGroup {
                    constructor() {
                        super({ label: "Element", toolingId: "element" });
                    }
                    get alwaysShow() {
                        return true;
                    }
                    onActivate(e) {
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            commandId: "pdjs/canvas/standard:element/properties"
                        }));
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            commandId: "canvas/standard:selection/delete"
                        }));
                    }
                }
                RibbonBar.ElementRibbonGroup = ElementRibbonGroup;
            })(RibbonBar = Design.RibbonBar || (Design.RibbonBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var RibbonBar;
            (function (RibbonBar) {
                class DocumentRibbonGroup extends Jade.UI.Controls.RibbonBarGroup {
                    constructor() {
                        super({ label: "Document", toolingId: "element" });
                    }
                    get alwaysShow() {
                        return true;
                    }
                    onActivate(e) {
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            commandId: "pdjs/canvas/standard:document/save"
                        }));
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            commandId: "pdjs/canvas/standard:document/close"
                        }));
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            commandId: "pdjs/canvas/standard:document/settings"
                        }));
                    }
                }
                RibbonBar.DocumentRibbonGroup = DocumentRibbonGroup;
            })(RibbonBar = Design.RibbonBar || (Design.RibbonBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var RibbonBar;
            (function (RibbonBar) {
                class FormFieldBehaviorRibbonGroup extends Jade.UI.Controls.RibbonBarGroup {
                    constructor() {
                        super({ label: "Behaviors", toolingId: "element" });
                    }
                    onActivate(e) {
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            icon: Jade.IconSet.get("pdjs").resolve("keyboard_key_blank_large.png", Jade.IconSetSizeSpecificDirectory.x32),
                            label: "Set Tab Order",
                            menu: ["tab-index"]
                        }));
                    }
                }
                RibbonBar.FormFieldBehaviorRibbonGroup = FormFieldBehaviorRibbonGroup;
            })(RibbonBar = Design.RibbonBar || (Design.RibbonBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var RibbonBar;
            (function (RibbonBar) {
                class FormFieldRequiredRibbonGroup extends Jade.UI.Controls.RibbonBarGroup {
                    constructor() {
                        super({ label: "Required Field", toolingId: "form-field" });
                    }
                    onActivate(e) {
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            commandId: "pdjs/canvas/standard:form-field/required/enable"
                        }));
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            commandId: "pdjs/canvas/standard:form-field/required/disable"
                        }));
                    }
                }
                RibbonBar.FormFieldRequiredRibbonGroup = FormFieldRequiredRibbonGroup;
            })(RibbonBar = Design.RibbonBar || (Design.RibbonBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var RibbonBar;
            (function (RibbonBar) {
                class GroupingRibbonGroup extends Jade.UI.Controls.RibbonBarGroup {
                    constructor() {
                        super({ label: "Grouping", toolingId: "element" });
                    }
                    get alwaysShow() {
                        return true;
                    }
                    onActivate(e) {
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            commandId: "canvas/standard:selection/group"
                        }));
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            commandId: "canvas/standard:selection/ungroup"
                        }));
                    }
                }
                RibbonBar.GroupingRibbonGroup = GroupingRibbonGroup;
            })(RibbonBar = Design.RibbonBar || (Design.RibbonBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var RibbonBar;
            (function (RibbonBar) {
                class LineRibbonGroup extends Jade.UI.Controls.RibbonBarGroup {
                    constructor() {
                        super({ label: "Line", toolingId: "line" });
                    }
                    onActivate(e) {
                        this.controls.add(new Jade.UI.Controls.RibbonBarSet({
                            width: 150,
                            items: [
                                new Jade.UI.Controls.RibbonBarButtonSmall({
                                    icon: Jade.IconSet.get("pdjs").resolve("shapes.png", Jade.IconSetSizeSpecificDirectory.x16),
                                    label: "Begin",
                                    menu: ["start-cap-shape"]
                                }),
                                new Jade.UI.Controls.RibbonBarButtonSmall({
                                    icon: Jade.IconSet.get("pdjs").resolve("shapes.png", Jade.IconSetSizeSpecificDirectory.x16),
                                    label: "End",
                                    menu: ["end-cap-shape"]
                                }),
                                new Jade.UI.Controls.RibbonBarButtonSmall({
                                    commandId: "pdjs/canvas/standard:line/shape/scale-up"
                                }),
                                new Jade.UI.Controls.RibbonBarButtonSmall({
                                    commandId: "pdjs/canvas/standard:line/shape/scale-down"
                                })
                            ]
                        }));
                    }
                }
                RibbonBar.LineRibbonGroup = LineRibbonGroup;
            })(RibbonBar = Design.RibbonBar || (Design.RibbonBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var RibbonBar;
            (function (RibbonBar) {
                class StyleRibbonGroup extends Jade.UI.Controls.RibbonBarGroup {
                    constructor() {
                        super({ label: "Style", toolingId: "style" });
                        this.shouldAlwaysShow(true);
                    }
                    onActivate(e) {
                        this.controls.add(new Design.ShapeRibbonSet({}));
                    }
                }
                RibbonBar.StyleRibbonGroup = StyleRibbonGroup;
            })(RibbonBar = Design.RibbonBar || (Design.RibbonBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var RibbonBar;
            (function (RibbonBar) {
                class TriangleRibbonGroup extends Jade.UI.Controls.RibbonBarGroup {
                    constructor() {
                        super({ label: "Triangle", toolingId: "triangle" });
                    }
                    onActivate(e) {
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            label: "Rotate Left",
                            icon: "rotate_left.png",
                            commandId: "pdjs/canvas/standard:shape/rotate",
                            value: 0
                        }));
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            label: "Rotate Right",
                            icon: "rotate_right.png",
                            commandId: "pdjs/canvas/standard:shape/rotate",
                            value: 1
                        }));
                    }
                }
                RibbonBar.TriangleRibbonGroup = TriangleRibbonGroup;
            })(RibbonBar = Design.RibbonBar || (Design.RibbonBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var RibbonBar;
            (function (RibbonBar) {
                class ViewRibbonGroup extends Jade.UI.Controls.RibbonBarGroup {
                    constructor() {
                        super({ label: "View", toolingId: "view" });
                    }
                    get alwaysShow() {
                        return true;
                    }
                    onActivate(e) {
                        this.controls.add(new Jade.UI.Controls.RibbonBarButton({
                            commandId: "pdjs/canvas/standard:view/designer"
                        }));
                    }
                }
                RibbonBar.ViewRibbonGroup = ViewRibbonGroup;
            })(RibbonBar = Design.RibbonBar || (Design.RibbonBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var RibbonBar;
            (function (RibbonBar) {
                class FormFieldRibbonSection extends Jade.UI.Controls.RibbonBarSection {
                    constructor() {
                        super({ label: "Forms", toolingId: "form-field" });
                    }
                    onPopulate() {
                        this.groups.add(new RibbonBar.FormFieldRequiredRibbonGroup());
                        this.groups.add(new RibbonBar.FormFieldBehaviorRibbonGroup());
                        this.groups.add(new RibbonBar.ArrangeRibbonGroup());
                        this.groups.add(new RibbonBar.GroupingRibbonGroup());
                    }
                }
                RibbonBar.FormFieldRibbonSection = FormFieldRibbonSection;
            })(RibbonBar = Design.RibbonBar || (Design.RibbonBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var RibbonBar;
            (function (RibbonBar) {
                class HomeRibbonSection extends Jade.UI.Controls.RibbonBarSection {
                    constructor() {
                        super({ label: "Canvas", toolingId: "element" });
                    }
                    get alwaysShow() {
                        return true;
                    }
                    onPopulate() {
                        this.groups.add(new RibbonBar.DocumentRibbonGroup());
                        this.groups.add(new RibbonBar.ClipboardRibbonGroup());
                        this.groups.add(new RibbonBar.ArrangeRibbonGroup());
                        this.groups.add(new RibbonBar.GroupingRibbonGroup());
                        this.groups.add(new RibbonBar.ElementRibbonGroup());
                        this.groups.add(new RibbonBar.StyleRibbonGroup());
                    }
                }
                RibbonBar.HomeRibbonSection = HomeRibbonSection;
            })(RibbonBar = Design.RibbonBar || (Design.RibbonBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var RibbonBar;
            (function (RibbonBar) {
                class ShapeRibbonSection extends Jade.UI.Controls.RibbonBarSection {
                    constructor() {
                        super({ label: "Shapes", toolingId: "shape" });
                    }
                    onPopulate() {
                        this.groups.add(new RibbonBar.TriangleRibbonGroup());
                        this.groups.add(new RibbonBar.LineRibbonGroup());
                        this.groups.add(new RibbonBar.ArrangeRibbonGroup());
                        this.groups.add(new RibbonBar.GroupingRibbonGroup());
                    }
                }
                RibbonBar.ShapeRibbonSection = ShapeRibbonSection;
            })(RibbonBar = Design.RibbonBar || (Design.RibbonBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var RibbonBar;
            (function (RibbonBar) {
                class ViewRibbonSection extends Jade.UI.Controls.RibbonBarSection {
                    constructor() {
                        super({ label: "View", toolingId: "view" });
                    }
                    onPopulate() {
                        this.groups.add(new RibbonBar.ViewRibbonGroup());
                    }
                }
                RibbonBar.ViewRibbonSection = ViewRibbonSection;
            })(RibbonBar = Design.RibbonBar || (Design.RibbonBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            class ShapeRibbonSet extends Jade.UI.Controls.RibbonBarSet {
                constructor(options) {
                    super(options);
                    CanvasJS.Design.Environment
                        .events
                        .subscribe(CanvasJS.Design.CanvasEvent.SELECTION_CHANGE, () => {
                        var enabled = false;
                        CanvasJS
                            .Design
                            .Environment
                            .selection
                            .each((view) => {
                            if (view.tooling.contains("style")) {
                                enabled = true;
                                return false;
                            }
                        });
                        this.controls.each((control) => {
                            if (control instanceof Jade.UI.Controls.RibbonBarButtonSmall) {
                                control.enabled = enabled;
                            }
                        });
                    });
                }
                onPopulate() {
                    this.controls.add(new Jade.UI.Controls.RibbonBarButtonSmall({
                        label: "Background",
                        icon: Jade.IconSet.get("pdjs").resolve("paint_bucket.png", Jade.IconSetSizeSpecificDirectory.x16),
                        menu: ["color-palette"],
                        enabled: false
                    }));
                    this.controls.add(new Jade.UI.Controls.RibbonBarButtonSmall({
                        label: "Border",
                        icon: Jade.IconSet.get("pdjs").resolve("marker.png", Jade.IconSetSizeSpecificDirectory.x16),
                        menu: ["shape-border"],
                        enabled: false
                    }));
                }
            }
            Design.ShapeRibbonSet = ShapeRibbonSet;
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Shapes;
            (function (Shapes) {
                class Shape extends CanvasJS.Design.ElementDesignViewBase {
                }
                Shapes.Shape = Shape;
                let ShapeBase = class ShapeBase extends Shape {
                    get source() {
                        return this.m_source;
                    }
                    get containerNode() {
                        return this.node.find("[role=container]");
                    }
                    template() {
                        return `<div style="position:absolute;top:0;left:0;right:0;bottom:0;" role="container" data-controls></div>`;
                    }
                };
                ShapeBase = __decorate([
                    Jade.UI.Controls.toolingTags("style")
                ], ShapeBase);
                Shapes.ShapeBase = ShapeBase;
            })(Shapes = Design.Shapes || (Design.Shapes = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Shapes;
            (function (Shapes) {
                class Ellipse extends Shapes.ShapeBase {
                    onInit(e) {
                        super.onInit(e);
                        this.m_shape = new Canvas.Shared.Shapes.Ellipse({
                            backgroundColor: this.source.backgroundColor,
                            borderColor: this.source.borderColor,
                            borderStyle: this.source.borderStyle,
                            borderWidth: this.source.borderWidth
                        });
                        this.controls.add(this.m_shape);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.m_shape.backgroundColor = this.source.backgroundColor;
                        this.m_shape.borderColor = this.source.borderColor;
                        this.m_shape.borderStyle = this.source.borderStyle;
                        this.m_shape.borderWidth = this.source.borderWidth;
                    }
                }
                Shapes.Ellipse = Ellipse;
            })(Shapes = Design.Shapes || (Design.Shapes = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Shapes;
            (function (Shapes) {
                let Line = class Line extends CanvasJS.Design.ElementDesignViewBase {
                    onInit(e) {
                        super.onInit(e);
                        this.m_shape = new Canvas.Shared.Shapes.Line({
                            endCapShape: this.source.endCapShape,
                            endCapColor: this.source.endCapColor,
                            endCapHeight: this.source.endCapHeight,
                            endCapWidth: this.source.endCapWidth,
                            lineColor: this.source.lineColor,
                            lineWeight: this.source.lineWeight,
                            startCapColor: this.source.startCapColor,
                            startCapHeight: this.source.startCapHeight,
                            startCapShape: this.source.startCapShape,
                            startCapWidth: this.source.startCapWidth
                        });
                        this.controls.add(this.m_shape);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.m_shape.lineColor = this.source.lineColor;
                        this.m_shape.lineWeight = this.source.lineWeight;
                        this.m_shape.startCapColor = this.source.startCapColor;
                        this.m_shape.startCapHeight = this.source.startCapHeight;
                        this.m_shape.startCapShape = this.source.startCapShape;
                        this.m_shape.startCapWidth = this.source.startCapWidth;
                        this.m_shape.endCapColor = this.source.endCapColor;
                        this.m_shape.endCapHeight = this.source.endCapHeight;
                        this.m_shape.endCapShape = this.source.endCapShape;
                        this.m_shape.endCapWidth = this.source.endCapWidth;
                        this.m_shape.redraw();
                        this.setArea({
                            height: Jade.Arithmetic.roundUp(this.source.currentMaxHeight < 10 ? 10 : this.source.currentMaxHeight, 5),
                            width: this.source.width
                        });
                    }
                };
                Line = __decorate([
                    CanvasJS.Design.allowedSizingHandles(CanvasJS.Design.GeometryBoxHandle.e, CanvasJS.Design.GeometryBoxHandle.w),
                    Jade.UI.Controls.toolingTags("shape", "line")
                ], Line);
                Shapes.Line = Line;
            })(Shapes = Design.Shapes || (Design.Shapes = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Shapes;
            (function (Shapes) {
                class Rectangle extends Shapes.ShapeBase {
                    onInit(e) {
                        super.onInit(e);
                        this.m_shape = new Canvas.Shared.Shapes.Rectangle({
                            backgroundColor: this.source.backgroundColor,
                            borderColor: this.source.borderColor,
                            borderStyle: this.source.borderStyle,
                            borderWidth: this.source.borderWidth
                        });
                        this.controls.add(this.m_shape);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.m_shape.backgroundColor = this.source.backgroundColor;
                        this.m_shape.borderColor = this.source.borderColor;
                        this.m_shape.borderStyle = this.source.borderStyle;
                        this.m_shape.borderWidth = this.source.borderWidth;
                    }
                }
                Shapes.Rectangle = Rectangle;
            })(Shapes = Design.Shapes || (Design.Shapes = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Shapes;
            (function (Shapes) {
                class Triangle extends Shapes.ShapeBase {
                }
                Shapes.Triangle = Triangle;
                let TriangleBase = class TriangleBase extends Triangle {
                    get source() {
                        return this.m_source;
                    }
                };
                TriangleBase = __decorate([
                    Jade.UI.Controls.toolingTags("shape", "triangle")
                ], TriangleBase);
                Shapes.TriangleBase = TriangleBase;
            })(Shapes = Design.Shapes || (Design.Shapes = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Shapes;
            (function (Shapes) {
                class IsoscelesTriangle extends Shapes.TriangleBase {
                    onInit(e) {
                        super.onInit(e);
                        this.m_shape = new Canvas.Shared.Shapes.IsoscelesTriangle({
                            backgroundColor: this.source.backgroundColor,
                            borderColor: this.source.borderColor,
                            borderStyle: this.source.borderStyle,
                            borderWidth: this.source.borderWidth,
                            rotation: this.source.rotation,
                            height: this.source.height,
                            width: this.source.width
                        });
                        this.controls.add(this.m_shape);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.m_shape.backgroundColor = this.source.backgroundColor;
                        this.m_shape.borderColor = this.source.borderColor;
                        this.m_shape.borderStyle = this.source.borderStyle;
                        this.m_shape.borderWidth = this.source.borderWidth;
                        this.m_shape.rotation = this.source.rotation;
                        this.m_shape.height = this.source.height;
                        this.m_shape.width = this.source.width;
                        this.m_shape.redraw();
                    }
                }
                Shapes.IsoscelesTriangle = IsoscelesTriangle;
            })(Shapes = Design.Shapes || (Design.Shapes = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Shapes;
            (function (Shapes) {
                class RightTriangle extends Shapes.TriangleBase {
                    onInit(e) {
                        super.onInit(e);
                        this.m_shape = new Canvas.Shared.Shapes.RightTriangle({
                            backgroundColor: this.source.backgroundColor,
                            borderColor: this.source.borderColor,
                            borderStyle: this.source.borderStyle,
                            borderWidth: this.source.borderWidth,
                            rotation: this.source.rotation,
                            height: this.source.height,
                            width: this.source.width
                        });
                        this.controls.add(this.m_shape);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.m_shape.backgroundColor = this.source.backgroundColor;
                        this.m_shape.borderColor = this.source.borderColor;
                        this.m_shape.borderStyle = this.source.borderStyle;
                        this.m_shape.borderWidth = this.source.borderWidth;
                        this.m_shape.rotation = this.source.rotation;
                        this.m_shape.height = this.source.height;
                        this.m_shape.width = this.source.width;
                        this.m_shape.redraw();
                    }
                }
                Shapes.RightTriangle = RightTriangle;
            })(Shapes = Design.Shapes || (Design.Shapes = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var StatusBar;
            (function (StatusBar) {
                class Errors extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                        this.m_erroredElements = new Jade.MappedCollection({
                            key: "ID"
                        });
                    }
                    get erroredElements() {
                        return this.m_erroredElements;
                    }
                    get errorsList() {
                        return this.m_errorsList;
                    }
                    get labelNode() {
                        return this.node.children("div[role=label]");
                    }
                    template() {
                        return `<div class="-pdjs-statusbar-errors">
                        <div role="label"></div>
                        <div role="popup" data-controls></div>
                    </div>`;
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.subscriptions.add(CanvasJS.Design.CanvasEvent.DOCUMENT_LOAD, () => { this.getErroredElements(); });
                        this.subscriptions.add(CanvasJS.Design.CanvasEvent.ELEMENT_DELETE, () => { this.getErroredElements(); });
                        this.subscriptions.add(CanvasJS.Design.CanvasEvent.ELEMENT_PASTE, () => { this.getErroredElements(); });
                        this.subscriptions.add(CanvasJS.Design.CanvasEvent.ELEMENT_CUT, () => { this.getErroredElements(); });
                        this.subscriptions.add(CanvasJS.Design.CanvasEvent.ELEMENT_EDIT, () => { this.getErroredElements(); });
                        this.subscriptions.add(CanvasJS.Design.CanvasEvent.TOOLBOX_ITEMS_ADD, () => { this.getErroredElements(); });
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_errorsList = new StatusBar.ErrorsList({
                            anchor: this.node
                        });
                        this.controls.add(this.errorsList);
                        this.setIconAndText();
                        this.errorsList.refresh(this.erroredElements);
                        this.labelNode.on(Jade.BrowserEvent.CLICK, (e) => {
                            this.errorsList.toggle();
                        });
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.setIconAndText();
                        if (this.errorsList != null) {
                            this.errorsList.refresh(this.erroredElements);
                            if (this.erroredElements.count == 0) {
                                this.errorsList.hide();
                            }
                        }
                    }
                    getErroredElements() {
                        this.erroredElements.clear();
                        CanvasJS.Design.Environment
                            .document
                            .controls
                            .getByType(Design.ElementView)
                            .each((element) => {
                            if (element.source.hasErrors) {
                                this.erroredElements.add(element);
                            }
                        });
                        this.onStateChanged();
                    }
                    setIconAndText() {
                        if (this.labelNode == null) {
                            return;
                        }
                        let url = null;
                        let label = "";
                        if (this.erroredElements.count === 0) {
                            url = Jade.IconSet.get("pdjs").resolve("ok.png", Jade.IconSetSizeSpecificDirectory.x16);
                            label = "No errors.";
                        }
                        else {
                            url = Jade.IconSet.get("pdjs").resolve("error.png", Jade.IconSetSizeSpecificDirectory.x16);
                            label = `${this.erroredElements.count} errors.`;
                        }
                        this.labelNode.css({
                            backgroundImage: `url(${url})`
                        });
                        this.labelNode.text(label);
                    }
                }
                StatusBar.Errors = Errors;
            })(StatusBar = Design.StatusBar || (Design.StatusBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var StatusBar;
            (function (StatusBar) {
                class ErrorsList extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get anchor() {
                        return this.state.get("anchor");
                    }
                    get popUpNode() {
                        return $(`#popup-${this.ID}`);
                    }
                    get itemsNode() {
                        return this.node.children("div[role=items]");
                    }
                    get closeNode() {
                        return this.node.find("div[role=title-close]");
                    }
                    show() {
                        Tipped.show(this.anchor);
                    }
                    hide() {
                        Tipped.hide(this.anchor);
                    }
                    toggle() {
                        Tipped.toggle(this.anchor);
                    }
                    refresh(erroredElements) {
                        this.controls.clear();
                        this.itemsNode.empty();
                        erroredElements.each((element) => {
                            this.controls.add(new StatusBar.ErrorsListItem({
                                element: element
                            }));
                        });
                        if (erroredElements.count == 0) {
                            this.itemsNode.append(`<table style="height:100%;width:100%;"><tr><td style="text-align:center;vertical-align:middle;font-size:13px;">No errors.</td></tr></table>`);
                        }
                    }
                    destroy() {
                        this.hide();
                        Tipped.remove(this.anchor.get(0));
                        this.node.closest(".tpd-tooltip").remove();
                        super.destroy();
                    }
                    template() {
                        return `<div class="-pdjs-statusbar-errors-list" style="height:350px;width:400px;">
                        <div role="title">
                            <div role="title-label">Errors</div>
                            <div role="title-close" style="background-image:url(${Jade.IconSet.get("pd").resolve("cancel_white.png", Jade.IconSetSizeSpecificDirectory.misc)})"></div>
                        </div>
                        <div role="items" data-controls></div>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.createPopUp();
                        this.closeNode.on(Jade.BrowserEvent.CLICK, () => {
                            this.hide();
                        });
                    }
                    createPopUp() {
                        Tipped.create(this.anchor, `<div id="popup-${this.ID}" style="height:350px;width: 400px;"></div>`, {
                            skin: "white",
                            padding: false,
                            showOn: false,
                            hideOn: false,
                            stem: false,
                            position: { target: "topright", tooltip: "bottomright" },
                            zIndex: 10004,
                            detach: false,
                            offset: { x: -1, y: -3 }
                        });
                        this.show();
                        this.hide();
                        this.node.detach();
                        this.popUpNode.append(this.node);
                    }
                }
                StatusBar.ErrorsList = ErrorsList;
            })(StatusBar = Design.StatusBar || (Design.StatusBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var StatusBar;
            (function (StatusBar) {
                class ErrorsListItem extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get element() {
                        return this.state.get("element");
                    }
                    get itemsNode() {
                        return this.node.find("div[role=items]");
                    }
                    get buttonNode() {
                        return this.node.find("[role=resolve] button");
                    }
                    template() {
                        return `<div class="-pdjs-statusbar-errors-list-item" style="position:relative;">
                        <div role="title">${this.element.source.componentName}</div>
                        <div role="items" data-controls></div>
                        <div role="resolve" style="position:absolute;right:0;top:10px;padding:5px;box-sizing:border-box;"><button>Resolve</button></div>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.setIcon();
                        _.each(this.element.source.errors, (item) => {
                            this.itemsNode.append(`<div>${item.message}<div>`);
                        });
                        this.node.on(Jade.BrowserEvent.CLICK, "div[role=title], div[role=items]", _.bind(this.onClick, this));
                        this.buttonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.resolveOnClick, this));
                    }
                    onClick(e) {
                        this.selectElement();
                    }
                    resolveOnClick(e) {
                        e.cancelBubble = true;
                        e.preventDefault();
                        this.selectElement();
                        if (this.element.source.hasNonRecoverableErrors) {
                            this.deleteElement();
                        }
                        else {
                            this.recoverElement();
                        }
                    }
                    deleteElement() {
                        Jade.UI.MessageDialog.open({
                            dialogStyle: Jade.UI.MessageDialogStyle.Information,
                            dialogButtons: Jade.UI.MessageDialogButtonStyle.YesNo,
                            title: "Delete Unrecoverable Element",
                            message: "This element has unrecoverable errors and should be deleted. Proceed with deleting this element?",
                            select: (e) => {
                                e.close();
                                if (e.button == Jade.UI.MessageDialogButton.yes) {
                                    CanvasJS.Design.Environment.document.controls.remove(this.element);
                                    CanvasJS.Design.Environment.context.commands.execute("canvas/standard:selection/delete", {
                                        suppressConfirmation: true
                                    });
                                }
                            }
                        });
                    }
                    recoverElement() {
                        CanvasJS.Design.Environment
                            .context
                            .commands
                            .execute("pdjs/canvas/standard:element/properties");
                    }
                    selectElement() {
                        CanvasJS.Design.Environment.selection.clear();
                        CanvasJS.Design.Environment.selection.add(this.element);
                        CanvasJS.Design.Environment.selection.box.hide();
                        CanvasJS.Design.Environment.selection.box.show();
                    }
                    setIcon() {
                        let iconName = this.element.source.hasNonRecoverableErrors ? "skull.png" : "error.png";
                        let iconPath = Jade.IconSet.get("pdjs")
                            .resolve(iconName, Jade.IconSetSizeSpecificDirectory.x24);
                        this.node.css({
                            backgroundImage: `url(${iconPath})`
                        });
                    }
                }
                StatusBar.ErrorsListItem = ErrorsListItem;
            })(StatusBar = Design.StatusBar || (Design.StatusBar = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var ToolBox;
            (function (ToolBox) {
                class ToolBoxAction extends CanvasJS.Design.ToolBoxAction {
                    createStates(args) {
                        let states = [];
                        let x = args.x;
                        let y = args.y;
                        args.items.forEach(item => {
                            let state = this.createState(_.clone(item));
                            if (state != null) {
                                states.push(_.extend(state, {
                                    id: Jade.Guid.new(),
                                    x: x,
                                    y: y
                                }));
                                x += 20;
                                y += 20;
                            }
                        });
                        this.initElements(states);
                    }
                    createState(item) {
                        return {};
                    }
                    initElements(states) {
                        let document = CanvasJS.Design.Environment.document;
                        let service = new PDJS.Services.Canvas.ElementService();
                        service.createDesignElements({
                            sessionId: document.source.sessionId,
                            documentId: document.source.id,
                            elements: states,
                            success: (e) => {
                                this.createElements(e.data);
                            }
                        });
                    }
                    createElements(states) {
                        let elements = [];
                        states.forEach(state => {
                            let element = this.createElement(state);
                            if (element) {
                                elements.push(element);
                            }
                        });
                        this.appendElements(elements);
                    }
                    createElement(state) {
                        return null;
                    }
                    appendElements(elements) {
                        CanvasJS.Design.Environment.selection.clear();
                        elements.forEach(element => {
                            CanvasJS.Design.Environment.selection.add(element);
                            this.fireToolBoxItemAddedEvent({
                                elements: elements,
                                item: this
                            });
                        });
                        CanvasJS.Design.Environment.selection.box.show();
                    }
                }
                ToolBox.ToolBoxAction = ToolBoxAction;
            })(ToolBox = Design.ToolBox || (Design.ToolBox = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var ToolBox;
            (function (ToolBox) {
                class BatchFieldAction extends ToolBox.ToolBoxAction {
                    get instance() {
                        return this.parameters["instance"];
                    }
                    get batchFieldType() {
                        return this.m_batchFieldType;
                    }
                    set batchFieldType(value) {
                        this.m_batchFieldType = value;
                    }
                    execute(e) {
                        ToolBox.BatchFieldActionDialog.open({
                            callbacks: {
                                ok: (sender, result) => {
                                    sender.close();
                                    this.batchFieldType = result.batchFieldType;
                                    this.createStates({
                                        items: [this.instance],
                                        x: e.x,
                                        y: e.y
                                    });
                                }
                            }
                        });
                    }
                    createState(item) {
                        return _.extend(item, {
                            selectIdentities: this.batchFieldType == ToolBox.BatchFieldType.Identities,
                        });
                    }
                    createElement(state) {
                        return CanvasJS.Design.Environment.document.createElementOf(state, true);
                    }
                }
                ToolBox.BatchFieldAction = BatchFieldAction;
            })(ToolBox = Design.ToolBox || (Design.ToolBox = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var ToolBox;
            (function (ToolBox) {
                let BatchFieldType;
                (function (BatchFieldType) {
                    BatchFieldType[BatchFieldType["Entities"] = 0] = "Entities";
                    BatchFieldType[BatchFieldType["Identities"] = 1] = "Identities";
                })(BatchFieldType = ToolBox.BatchFieldType || (ToolBox.BatchFieldType = {}));
                class BatchFieldActionDialog extends Jade.UI.Dialog {
                    constructor(options) {
                        super(options);
                    }
                    get entitiesButton() {
                        return this.node.find("[data-role=entities]");
                    }
                    get identitiesButton() {
                        return this.node.find("[data-role=identities]");
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.entitiesButton.on("click", _.bind(this.entitiesButton_onClick, this));
                        this.identitiesButton.on("click", _.bind(this.identitiesButton_onClick, this));
                    }
                    template() {
                        return `<div class="-pdjs-canvas-design-toolbox-batch-field-action-dialog">
                        <div data-role="grid">
                            <div>
                                <button data-role="entities">
                                    <img src="${Jade.IconSet.get("pdjs").resolve("objects.png", Jade.IconSetSizeSpecificDirectory.x64)}"/><br/>
                                    Entities
                                </button>
                            </div>
                            <div>
                                <button data-role="identities">
                                    <img src="${Jade.IconSet.get("pdjs").resolve("users.png", Jade.IconSetSizeSpecificDirectory.x64)}"/><br/>
                                    Users / Groups
                                </button>
                            </div>
                        </div>
                    </div>`;
                    }
                    getWindowOptions() {
                        return {
                            title: "Select | Batch Field Type",
                            height: 150,
                            width: 350
                        };
                    }
                    entitiesButton_onClick(e) {
                        this.m_selection = BatchFieldType.Entities;
                        this.returnSelected();
                    }
                    identitiesButton_onClick(e) {
                        this.m_selection = BatchFieldType.Identities;
                        this.returnSelected();
                    }
                    returnSelected() {
                        if (this.m_selection == null) {
                            alert("No batch field type was selected!");
                            return;
                        }
                        this.close({
                            command: "ok",
                            data: {
                                batchFieldType: this.m_selection
                            }
                        });
                    }
                    static open(options) {
                        return new BatchFieldActionDialog(options);
                    }
                }
                ToolBox.BatchFieldActionDialog = BatchFieldActionDialog;
            })(ToolBox = Design.ToolBox || (Design.ToolBox = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var ToolBox;
            (function (ToolBox) {
                class FormFieldAction extends ToolBox.ToolBoxAction {
                    get fieldMap() {
                        return this.parameters["fieldMap"];
                    }
                    execute(e) {
                        let document = CanvasJS.Design.Environment.document;
                        ToolBox.FormFieldActionDialog.open({
                            extensionId: document.extensionId,
                            canvasType: document.canvasType,
                            callbacks: {
                                ok: (sender, result) => {
                                    sender.close();
                                    this.createStates({
                                        items: result,
                                        x: e.x,
                                        y: e.y
                                    });
                                }
                            }
                        });
                    }
                    createState(item) {
                        let state = _.clone(this.fieldMap[item.fieldType]);
                        let result = _.extend(state, {
                            columnId: item.columnId,
                            columnFormat: item.columnFormat,
                            defaultLabel: item.columnName
                        });
                        return result;
                    }
                    createElement(state) {
                        return CanvasJS.Design.Environment.document.createElementOf(state, true);
                    }
                }
                ToolBox.FormFieldAction = FormFieldAction;
            })(ToolBox = Design.ToolBox || (Design.ToolBox = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var ToolBox;
            (function (ToolBox) {
                class FormFieldActionDialog extends Jade.UI.Dialog {
                    constructor(options) {
                        super(options);
                    }
                    get grid() {
                        return this.state.get("grid");
                    }
                    get canvasType() {
                        return this.state.get("canvasType");
                    }
                    get extensionId() {
                        return this.state.get("extensionId");
                    }
                    get okButton() {
                        return this.node.find("[data-role=ok]");
                    }
                    get cancelButton() {
                        return this.node.find("[data-role=cancel]");
                    }
                    onActivate(e) {
                        this.grid_onActivate();
                        this.okButton.on("click", _.bind(this.okButton_onClick, this));
                        this.cancelButton.on("click", _.bind(this.cancelButton_onClick, this));
                    }
                    template() {
                        return `<div class="-pdjs-FormFieldSeletionDialog">
                        <div data-role="grid"></div>
                        <div data-role="deck">
                            <button class="-jadejs-button" data-role="ok">OK</button>
                            <button class="-jadejs-button" data-role="cancel">Cancel</button>
                        </div>
                    </div>`;
                    }
                    getWindowOptions() {
                        return {
                            title: "Form Field Selection",
                            height: 500,
                            width: 650
                        };
                    }
                    okButton_onClick(e) {
                        this.returnSelected();
                    }
                    cancelButton_onClick(e) {
                        this.close();
                    }
                    grid_onActivate() {
                        let options = this.state.toJSON();
                        let type = Jade.Type.getType("PD.Web.UI.Controls.ViewGrid");
                        let grid = new type({
                            container: `#${this.ID} DIV[data-role=grid]`,
                            viewStateId: this.state.get("viewStateId"),
                            selection: {
                                map: function (e) {
                                    return _.map(e.selections.toArray(), (item) => {
                                        return {
                                            columnId: item.ColumnID,
                                            columnName: item.ColumnName,
                                            columnFormat: item.ColumnFormat,
                                            fieldType: item.ObjectType
                                        };
                                    });
                                }
                            },
                            defaultSelectionEnabled: false,
                            selectionMode: "multiple",
                            needContext: (e) => {
                                e.addFilter(PDJS.Core.Views.FormFieldFilter.listData(this.canvasType == Canvas.Core.CanvasType.List).toJSON());
                                if (this.canvasType == Canvas.Core.CanvasType.DocumentType) {
                                    e.addFilter(PDJS.Core.Views.FormFieldFilter.fileBased().toJSON());
                                }
                                if (this.canvasType == Canvas.Core.CanvasType.List) {
                                    e.addFilter(PDJS.Core.Views.FormFieldFilter.extension(this.extensionId).toJSON());
                                }
                            },
                            dblclick: (e) => {
                                this.returnSelected();
                            }
                        });
                        this.state.set({
                            grid: grid
                        });
                    }
                    returnSelected() {
                        let fields = this.grid.getSelections().toArray();
                        if (fields.length == 0) {
                            alert("No selections hae been made!");
                            return;
                        }
                        this.close({
                            command: "ok",
                            data: fields
                        });
                    }
                    static open(options) {
                        let result = null;
                        Jade.Ajax.call({
                            url: Jade.Path.resolve("~/Manage/Canvas/ToolBox/FormFieldSelection"),
                            success: (e) => {
                                let args = _.extend(options, {
                                    viewStateId: e.viewStateId
                                });
                                new FormFieldActionDialog(args);
                            }
                        });
                        return result;
                    }
                }
                ToolBox.FormFieldActionDialog = FormFieldActionDialog;
            })(ToolBox = Design.ToolBox || (Design.ToolBox = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var ToolBox;
            (function (ToolBox) {
                class ToolBoxElementValidated extends CanvasJS.Design.ToolBoxElement {
                    execute(e) {
                        let state = _.extend(this.instance, {
                            id: Jade.Guid.new(),
                            x: e.x + CanvasJS.Design.Environment.gridUnit,
                            y: e.y + CanvasJS.Design.Environment.gridUnit
                        });
                        this.validateState(state, (states) => {
                            let element = CanvasJS.Design.Environment.document.createElement(states[0], true);
                            if (element) {
                                CanvasJS.Design.Environment.selection.clear();
                                CanvasJS.Design.Environment.selection.add(element);
                                CanvasJS.Design.Environment.selection.box.show();
                                this.fireToolBoxItemAddedEvent({
                                    elements: [element],
                                    item: this
                                });
                            }
                        });
                    }
                    validateState(state, onSuccess) {
                        let document = CanvasJS.Design.Environment.document;
                        if (!state.isCreatable) {
                            onSuccess([state]);
                            return;
                        }
                        let service = new PDJS.Services.Canvas.ElementService();
                        service.createDesignElements({
                            sessionId: document.source.sessionId,
                            documentId: document.source.id,
                            elements: [state],
                            success: (e) => {
                                onSuccess(e.data);
                            }
                        });
                    }
                }
                ToolBox.ToolBoxElementValidated = ToolBoxElementValidated;
            })(ToolBox = Design.ToolBox || (Design.ToolBox = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Views;
            (function (Views) {
                class IViewComponentGridGuard extends Jade.InterfaceGuard {
                    get signature() {
                        return {
                            id: "b510bb96-40d5-4efb-970d-c9611f3274c0",
                            label: "IViewComponentGridGuard"
                        };
                    }
                }
                Views.IViewComponentGridGuard = IViewComponentGridGuard;
            })(Views = Shared.Views || (Shared.Views = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Design;
        (function (Design) {
            var Views;
            (function (Views) {
                let EventHistoryView = class EventHistoryView extends Design.ElementViewBase {
                    get grid() {
                        return this.m_grid;
                    }
                    get viewStateId() {
                        return this.source.viewStateId;
                    }
                    template() {
                        return `<div style="position:absolute;top:0;left:0;right:0;bottom:0;border:1px solid #CCCCCC;" role="grid"></div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.grid_init();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.redrawGrid();
                    }
                    onResize() {
                        super.onResize();
                        this.redrawGrid();
                    }
                    grid_init() {
                        this.m_grid = new PD.Web.UI.Controls.ViewGrid({
                            container: this.node.children("[role=grid]"),
                            height: "100%",
                            viewStateId: this.source.viewStateId
                        });
                    }
                    redrawGrid() {
                        if (this.grid != null) {
                            this.grid.redraw();
                        }
                    }
                };
                EventHistoryView = __decorate([
                    Jade.InterfaceGuard.implement(Canvas.Shared.Views.IViewComponentGuard, Canvas.Shared.Views.IViewComponentGridGuard),
                    Jade.UI.Controls.toolingTags("view")
                ], EventHistoryView);
                Views.EventHistoryView = EventHistoryView;
            })(Views = Design.Views || (Design.Views = {}));
        })(Design = Canvas.Design || (Canvas.Design = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            class ActionInvoker {
                static invoke(action) {
                    PDJS.JS.PD.Actions.Action.invoke(action);
                }
            }
            Shared.ActionInvoker = ActionInvoker;
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            let CanvasCss;
            (function (CanvasCss) {
                CanvasCss["FormField"] = "-pdjs-canvas-form-field";
                CanvasCss["FormFieldFocus"] = "-pdjs-canvas-form-field-focus";
                CanvasCss["FormFieldAnimationTarget"] = "-pdjs-canvas-form-field-animation-target";
                CanvasCss["SingleSelectField"] = "-pdjs-canvas-ssl-field";
                CanvasCss["MultiSelectField"] = "-pdjs-canvas-msl-field";
                CanvasCss["EntityField"] = "-pdjs-canvas-entity-field";
                CanvasCss["UserField"] = "-pdjs-canvas-user-field";
                CanvasCss["StringField"] = "-pdjs-canvas-string-field";
                CanvasCss["BooleanField"] = "-pdjs-canvas-boolean-field";
                CanvasCss["DateField"] = "-pdjs-canvas-date-field";
                CanvasCss["NumericField"] = "-pdjs-canvas-numeric-field";
                CanvasCss["TextElement"] = "-pdjs-text-element";
                CanvasCss["BatchField"] = "-pdjs-batch-field";
                CanvasCss["Disabled"] = "-pdjs-disabled";
            })(CanvasCss = Shared.CanvasCss || (Shared.CanvasCss = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            class ElementBar extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                    this.state.unset("source");
                }
                get cacheLastUpdated() {
                    return this.state.get("cacheLastUpdated");
                }
                set cacheLastUpdated(value) {
                    this.state.set("cacheLastUpdated", value);
                }
                cacheLastUpdatedFormatted() {
                    return kendo.toString(new Date(Date.now()), "g");
                }
                get visible() {
                    return this.state.get("visible");
                }
                set visible(value) {
                    this.state.set("visible", value);
                }
                get showRefresh() {
                    return this.state.get("showRefresh", false);
                }
                set showRefresh(value) {
                    this.state.set("showRefresh", value);
                }
                get onRefreshCallback() {
                    return this.state.get("onRefresh", () => { });
                }
                get refreshNode() {
                    return this.node.find("span[role=refresh]");
                }
                template() {
                    return `<div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis"></div>`;
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.node.css({
                        position: "absolute",
                        bottom: "5px",
                        left: 0,
                        right: 0,
                        height: "25px",
                        boxSizing: "border-box",
                        lineHeight: "25px",
                        backgroundColor: "transparent",
                        paddingTop: "5px"
                    });
                    this.node.on(Jade.BrowserEvent.CLICK, "span[role=refresh]", () => {
                        this.onRefreshCallback();
                    });
                }
                onStateChanged() {
                    super.onStateChanged();
                    let text = null;
                    if (this.visible) {
                        this.node.show();
                    }
                    else {
                        this.node.hide();
                    }
                    text = `<b>As of:</b> ${this.cacheLastUpdatedFormatted()}`;
                    if (this.showRefresh) {
                        text += `<span role="refresh" style="padding-left:10px;color:#007acc;text-decoration:underline;cursor:pointer;">Refresh</span>`;
                    }
                    this.node.empty();
                    this.node.append(text);
                }
            }
            Shared.ElementBar = ElementBar;
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            let VerticalAlign;
            (function (VerticalAlign) {
                VerticalAlign["top"] = "flex-start";
                VerticalAlign["middle"] = "center";
                VerticalAlign["bottom"] = "flex-end";
            })(VerticalAlign || (VerticalAlign = {}));
            let HorizontalAlign;
            (function (HorizontalAlign) {
                HorizontalAlign["left"] = "flex-start";
                HorizontalAlign["center"] = "center";
                HorizontalAlign["right"] = "flex-end";
            })(HorizontalAlign || (HorizontalAlign = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            let ElementMenuPosition;
            (function (ElementMenuPosition) {
                ElementMenuPosition[ElementMenuPosition["topLeft"] = 0] = "topLeft";
                ElementMenuPosition[ElementMenuPosition["topRight"] = 1] = "topRight";
                ElementMenuPosition[ElementMenuPosition["bottomLeft"] = 2] = "bottomLeft";
                ElementMenuPosition[ElementMenuPosition["bottomRight"] = 3] = "bottomRight";
            })(ElementMenuPosition = Shared.ElementMenuPosition || (Shared.ElementMenuPosition = {}));
            class ElementMenu extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                    this.state.unset("source");
                    this.m_items = new Jade.ObservableMappedCollection({
                        key: "ID",
                        callbacks: {
                            onAfterAdd: (e) => {
                                e.item.menu = this;
                                if (this.popUp != null) {
                                    this.popUp.controls.add(e.item);
                                }
                            },
                            onAfterRemove: (e) => {
                                e.item.menu = null;
                                if (this.popUp != null) {
                                    this.popUp.controls.remove(e.item);
                                }
                            }
                        }
                    });
                }
                get visible() {
                    return this.state.get("visible", true);
                }
                set visible(value) {
                    this.state.set("visible", value);
                }
                get position() {
                    return this.state.get("position", ElementMenuPosition.topRight);
                }
                set position(value) {
                    this.state.set("position", value);
                }
                get items() {
                    return this.m_items;
                }
                get loadedCallback() {
                    return this.state.get("loaded", () => { });
                }
                get popUp() {
                    return this.m_popUp;
                }
                template() {
                    return `<div></div>`;
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.node.css({
                        position: "absolute",
                        height: "16px",
                        width: "16px",
                        boxSizing: "border-box",
                        backgroundColor: "transparent",
                        paddingTop: "5px",
                        backgroundImage: `url(${Jade.IconSet.get("pdjs").resolve("bars.png", Jade.IconSetSizeSpecificDirectory.misc)})`,
                        backgroundPosition: "center center",
                        backgroundRepeat: "no-repeat",
                        cursor: "pointer"
                    });
                    this.m_popUp = new Shared.ElementMenuPopUp({
                        anchor: this.node,
                        init: () => {
                            this.items.each((item) => {
                                if (this.popUp.controls.getById(item.ID) == null) {
                                    this.popUp.controls.add(item);
                                }
                            });
                        }
                    });
                    this.controls.add(this.m_popUp);
                }
                onComplete(e) {
                    super.onComplete(e);
                    this.loadedCallback();
                }
                onStateChanged() {
                    super.onStateChanged();
                    this.node.css({
                        top: this.positionTop(),
                        bottom: this.positionBottom(),
                        left: this.positionLeft(),
                        right: this.positionRight(),
                        display: this.visible ? "block" : "none"
                    });
                    this.node.attr("title", "Actions and Settings");
                }
                positionTop() {
                    return this.position == ElementMenuPosition.topLeft ||
                        this.position == ElementMenuPosition.topRight ? "5px" : null;
                }
                positionBottom() {
                    return this.position == ElementMenuPosition.bottomLeft ||
                        this.position == ElementMenuPosition.bottomRight ? "5px" : null;
                }
                positionLeft() {
                    return this.position == ElementMenuPosition.topLeft ||
                        this.position == ElementMenuPosition.bottomLeft ? "5px" : null;
                }
                positionRight() {
                    return this.position == ElementMenuPosition.topRight ||
                        this.position == ElementMenuPosition.bottomRight ? "5px" : null;
                }
            }
            Shared.ElementMenu = ElementMenu;
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            class ElementMenuItem extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                }
                get menu() {
                    return this.m_menu;
                }
                set menu(value) {
                    this.m_menu = value;
                }
                get visible() {
                    return this.state.get("visible", true);
                }
                set visible(value) {
                    this.state.set("visible", value);
                }
                get showCallback() {
                    return this.state.get("show", () => { });
                }
                show() {
                    this.showCallback(this);
                }
            }
            Shared.ElementMenuItem = ElementMenuItem;
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            class ElementMenuItemAction extends Shared.ElementMenuItem {
                constructor(options) {
                    super(options);
                }
                get icon() {
                    return this.state.get("icon");
                }
                set icon(value) {
                    this.state.set("icon", value);
                }
                get label() {
                    return this.state.get("label", "");
                }
                set label(value) {
                    this.state.set("label", value);
                }
                get clickCallback() {
                    return this.state.get("click", () => { });
                }
                template() {
                    return `<div class="-pdjs-element-menu-item"></div>`;
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.node.on(Jade.BrowserEvent.CLICK, _.bind(() => {
                        this.clickCallback();
                        this.menu.popUp.hide();
                    }, this));
                }
                onStateChanged() {
                    super.onStateChanged();
                    this.node.css({
                        height: "25px",
                        padding: "5px 5px 5px 26px",
                        fontSize: "12px",
                        fontFamily: "Arial",
                        border: "0 solid #EEEEEE",
                        margin: "0",
                        boxSizing: "border-box",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap",
                        display: "block",
                        width: "100%",
                        cursor: "pointer"
                    });
                    if (this.icon != null) {
                        this.node.css({
                            backgroundImage: `url(${this.icon})`,
                            backgroundRepeat: "no-repeat",
                            backgroundPosition: "5px center"
                        });
                    }
                    if ($("style[data-control-style=-pdjs-element-menu-item]").length == 0) {
                        document.head.insertAdjacentHTML("beforeend", `
                <style data-control-style="-pdjs-element-menu-item">
                    .-pdjs-element-menu-item:hover {
                        background-color: #EEEEEE;
                    }
                </style>`);
                    }
                    this.node.text(this.label);
                }
            }
            Shared.ElementMenuItemAction = ElementMenuItemAction;
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            class ElementMenuItemBoard extends Shared.ElementMenuItem {
                constructor(options) {
                    super(options);
                }
                get content() {
                    return this.state.get("content", "");
                }
                set content(value) {
                    this.state.set("content", value);
                }
                template() {
                    return `<div>${this.content}</div>`;
                }
                onStateChanged() {
                    super.onStateChanged();
                    this.node.empty();
                    this.node.append(this.content);
                }
            }
            Shared.ElementMenuItemBoard = ElementMenuItemBoard;
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            class ElementMenuPopUp extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                    this.m_items = new Jade.ObservableMappedCollection({
                        key: "id"
                    });
                }
                get anchor() {
                    return this.state.get("anchor", $());
                }
                get hideCallback() {
                    return this.state.get("hide", () => { });
                }
                get showCallback() {
                    return this.state.get("show", () => { });
                }
                get initCallback() {
                    return this.state.get("init", () => { });
                }
                hide() {
                    Tipped.hide(this.anchor);
                    this.hideCallback();
                }
                show() {
                    Tipped.show(this.anchor);
                }
                template() {
                    return `<div></div>`;
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.node.css({
                        boxSizing: "border-box",
                        width: "200px",
                        overflowY: "auto",
                        maxHeight: "300px"
                    });
                    Tipped.create(this.anchor, this.node, {
                        skin: "white-no-padding",
                        radius: false,
                        shadow: false,
                        stem: false,
                        position: "bottomright",
                        showOn: "click",
                        hideAfter: 500,
                        hideDelay: 500,
                        fadeOut: 100,
                        showDelay: 0,
                        hideOn: "click-outside",
                        hideOthers: true,
                        detach: false,
                        onShow: () => {
                            this.showCallback();
                            this.controls.each((item) => {
                                item.show();
                            });
                        }
                    });
                }
                onComplete(e) {
                    super.onComplete(e);
                    this.show();
                    this.hide();
                    this.initCallback();
                }
            }
            Shared.ElementMenuPopUp = ElementMenuPopUp;
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Charts;
            (function (Charts) {
                class ChartOptions {
                    constructor(options) {
                        this.m_state = null;
                        this.m_state = new Jade.StateBag(options);
                    }
                    get state() {
                        return this.m_state;
                    }
                    getOptions() {
                        return this.getChartOptions(this.state.toJSON());
                    }
                    getChartOptions(data) {
                        return {
                            theme: "silver",
                            categoryAxis: this.getCategoryAxis(),
                            chartArea: this.getChartArea(),
                            legend: this.getLegend(),
                            plotArea: this.getPlotArea(),
                            series: this.getSeries(),
                            seriesDefaults: this.getSeriesDefaults(),
                            title: this.getTitle(),
                            valueAxis: this.getValueAxis(),
                            transitions: false
                        };
                    }
                    getCategoryAxis() {
                        let result = [];
                        let categories = this.state.get("data.categories", []);
                        let categoryAxis = null;
                        if (categories.length > 0) {
                            _.each(categories, (category, index) => {
                                if (category.isDate) {
                                    category = this.formatDateValues(category);
                                }
                                categoryAxis = this.getCategoryAxisStyle();
                                categoryAxis.categories = category.data;
                                categoryAxis.justified = false;
                                categoryAxis.labels["format"] = this.getDataFormatString(category["format"]);
                                result[index] = categoryAxis;
                            });
                        }
                        else {
                            result = this.getCategoryAxisStyle();
                        }
                        return result;
                    }
                    getCategoryAxisStyle() {
                        let result = {
                            categories: [],
                            labels: {},
                            line: {},
                            title: {},
                            majorGridLines: {},
                            minorGridLines: {},
                            majorTicks: {},
                            minorTicks: {}
                        };
                        let categoryAxis = this.state.get("style.categoryAxis");
                        if (categoryAxis == null) {
                            return result;
                        }
                        let labels = this.state.get("style.categoryAxis.labels");
                        let line = this.state.get("style.categoryAxis.line");
                        let title = this.state.get("style.categoryAxis.title");
                        let majorGridLines = this.state.get("style.categoryAxis.majorGridLines");
                        let minorGridLines = this.state.get("style.categoryAxis.minorGridLines");
                        if (labels) {
                            result.labels["color"] = labels.color;
                            result.labels["font"] = labels.fontSize + " " + labels.fontName;
                            result.labels["rotation"] = labels.rotation;
                            result.labels["visible"] = labels.visible;
                        }
                        if (line) {
                            result.line["color"] = line.color;
                            result.line["width"] = line.width;
                            result.line["visible"] = line.visible;
                        }
                        if (title) {
                            result.title["color"] = title.color;
                            result.title["font"] = title.fontSize + " " + title.fontName;
                            result.title["position"] = title.position;
                            result.title["rotation"] = title.rotation;
                            result.title["text"] = title.text;
                            result.title["visible"] = title.visible;
                        }
                        if (majorGridLines) {
                            result.majorGridLines["color"] = majorGridLines.color;
                            result.majorGridLines["dashType"] = majorGridLines.dashType;
                            result.majorGridLines["visible"] = majorGridLines.visible;
                            result.majorTicks["visible"] = majorGridLines.tickMarks;
                        }
                        if (minorGridLines) {
                            result.minorGridLines["color"] = minorGridLines.color;
                            result.minorGridLines["dashType"] = minorGridLines.dashType;
                            result.minorGridLines["visible"] = minorGridLines.visible;
                            result.minorTicks["visible"] = minorGridLines.tickMarks;
                        }
                        return result;
                    }
                    getChartArea() {
                        let result = { border: {} };
                        let chartArea = this.state.get("style.chartArea");
                        if (chartArea == null) {
                            return result;
                        }
                        result["height"] = this.state.get("height", 250);
                        result["width"] = this.state.get("width", 400);
                        result["background"] = chartArea.backColor;
                        result.border["color"] = chartArea.borderColor;
                        result.border["dashType"] = chartArea.borderStyle;
                        result.border["width"] = chartArea.borderWidth;
                        return result;
                    }
                    getLegend() {
                        let result = {
                            border: {},
                            labels: {}
                        };
                        let legend = this.state.get("style.legend");
                        if (legend == null) {
                            return result;
                        }
                        result["position"] = legend.position;
                        result["visible"] = legend.visible;
                        let border = this.state.get("style.legend.border");
                        let labels = this.state.get("style.legend.labels");
                        if (border) {
                            result.border["color"] = border.color;
                            result.border["width"] = border.width;
                        }
                        if (labels) {
                            result.labels["color"] = labels.color;
                            result.labels["font"] = `${labels.fontSize}  ${labels.fontName}`;
                        }
                        return result;
                    }
                    getPlotArea() {
                        var result = { border: {} };
                        let plotArea = this.state.get("style.plotArea");
                        if (plotArea == null) {
                            return result;
                        }
                        result["background"] = plotArea.backColor;
                        result.border["color"] = plotArea.borderColor;
                        result.border["width"] = plotArea.borderWidth;
                        return result;
                    }
                    getSeries() {
                        let result = [];
                        let serie = null;
                        let series = this.state.get("data.series");
                        _.each(series, (item) => {
                            serie = $.extend(true, {}, {
                                tooltip: {
                                    format: this.getDataFormatString(item["format"])
                                }
                            }, item);
                            if (serie.isDate) {
                                serie = this.formatDateValues(serie);
                            }
                            serie.stack = this.state.get("style.valueAxis.stack");
                            result[result.length] = serie;
                        });
                        return result;
                    }
                    getSeriesDefaults() {
                        return {
                            tooltip: {
                                visible: true
                            }
                        };
                    }
                    getTitle() {
                        let result = {};
                        let title = this.state.get("style.title");
                        if (title == null) {
                            return result;
                        }
                        result["align"] = title.align;
                        result["font"] = `${title.fontSize}  ${title.fontName}`;
                        result["position"] = title.position;
                        result["text"] = title.text;
                        result["visible"] = title.visible;
                        result["color"] = title.color;
                        return result;
                    }
                    getValueAxis() {
                        let result = {
                            categories: [],
                            labels: {},
                            line: {},
                            title: {},
                            majorGridLines: {},
                            minorGridLines: {},
                            majorTicks: {},
                            minorTicks: {},
                            axisCrossingValue: [0, -1000000000000, -1000000000000]
                        };
                        let valueAxis = this.state.get("style.valueAxis");
                        if (valueAxis == null) {
                            return result;
                        }
                        let series = this.state.get("data.series", []);
                        let labels = this.state.get("style.valueAxis.labels");
                        let line = this.state.get("style.valueAxis.line");
                        let title = this.state.get("style.valueAxis.title");
                        let majorGridLines = this.state.get("style.valueAxis.majorGridLines");
                        let minorGridLines = this.state.get("style.valueAxis.minorGridLines");
                        if (labels) {
                            result.labels["color"] = labels.color;
                            result.labels["font"] = labels.fontSize + " " + labels.fontName;
                            result.labels["rotation"] = labels.rotation;
                            result.labels["visible"] = labels.visible;
                        }
                        if (line) {
                            result.line["color"] = line.color;
                            result.line["width"] = line.width;
                            result.line["visible"] = line.visible;
                        }
                        if (title) {
                            result.title["color"] = title.color;
                            result.title["font"] = title.fontSize + " " + title.fontName;
                            result.title["position"] = title.position;
                            result.title["rotation"] = title.rotation;
                            result.title["text"] = title.text;
                            result.title["visible"] = title.visible;
                        }
                        if (majorGridLines) {
                            result.majorGridLines["color"] = majorGridLines.color;
                            result.majorGridLines["dashType"] = majorGridLines.dashType;
                            result.majorGridLines["visible"] = majorGridLines.visible;
                            result.majorTicks["visible"] = majorGridLines.tickMarks;
                        }
                        if (minorGridLines) {
                            result.minorGridLines["color"] = minorGridLines.color;
                            result.minorGridLines["dashType"] = minorGridLines.dashType;
                            result.minorGridLines["visible"] = minorGridLines.visible;
                            result.minorTicks["visible"] = minorGridLines.tickMarks;
                        }
                        if (series.length > 0) {
                            result.labels["format"] = this.getDataFormatString(series[0]["format"]);
                        }
                        return result;
                    }
                    getDataFormatString(format) {
                        var result = null;
                        if (format) {
                            result = "{0:" + format + "}";
                        }
                        return result;
                    }
                    formatDateValues(src) {
                        let index = 0;
                        let datum = null;
                        if (src.isDate) {
                            _.each(src.data, (item) => {
                                if (datum != null) {
                                    let num = Date.parse(datum);
                                    if (!isNaN(num)) {
                                        src.data[index] = kendo.toString(new Date(num), src.format);
                                    }
                                }
                            });
                        }
                        return src;
                    }
                }
                Charts.ChartOptions = ChartOptions;
            })(Charts = Shared.Charts || (Shared.Charts = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Forms;
            (function (Forms) {
                class NavigateLink extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                        this.m_imageUrl = Jade.IconSet.get("pdjs")
                            .resolve("nav_right.png", Jade.IconSetSizeSpecificDirectory.x16);
                    }
                    get entityId() {
                        return this.state.get("entityId", null);
                    }
                    set entityId(value) {
                        this.state.set("entityId", value);
                    }
                    get entityName() {
                        return this.state.get("entityName", null);
                    }
                    set entityName(value) {
                        this.state.set("entityName", value);
                    }
                    get imageUrl() {
                        return this.m_imageUrl;
                    }
                    template() {
                        return `<a href="#" />`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.node.css({
                            position: "absolute",
                            top: "2px",
                            right: "23px",
                            bottom: "2px",
                            width: "20px",
                            display: "none",
                            backgroundImage: `url(${this.imageUrl})`,
                            backgroundPosition: "center center",
                            backgroundRepeat: "no-repeat"
                        });
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        if (this.entityId > 0) {
                            this.node.attr("href", Jade.Path.resolve(`~/explore/${this.entityId}`));
                        }
                        else {
                            this.node.attr("href", "#");
                        }
                        this.node.attr("title", `Navigate to ${this.entityName}`);
                        this.node.css({
                            display: this.entityId != null ? "inline-block" : "none"
                        });
                    }
                    static setDesignDisplay(link) {
                        link.entityId = 0;
                        link.entityName = "Entity 'A'";
                    }
                }
                Forms.NavigateLink = NavigateLink;
            })(Forms = Shared.Forms || (Shared.Forms = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                let ComboBoxMode;
                (function (ComboBoxMode) {
                    ComboBoxMode[ComboBoxMode["List"] = 0] = "List";
                    ComboBoxMode[ComboBoxMode["PopUp"] = 1] = "PopUp";
                })(ComboBoxMode = Controls.ComboBoxMode || (Controls.ComboBoxMode = {}));
                class ComboBox extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                        this.ensureDataSource(options.data);
                        this.state.unset("data");
                    }
                    get defaultMask() {
                        return this.state.get("defaultMask", "Select...");
                    }
                    set defaultMask(value) {
                        this.state.set("defaultMask", value);
                    }
                    get enabled() {
                        return this.state.get("enabled", true);
                    }
                    set enabled(value) {
                        this.state.set("enabled", value);
                    }
                    get data() {
                        return this.m_data;
                    }
                    get input() {
                        return this.m_input;
                    }
                    get list() {
                        return this.m_list;
                    }
                    get mode() {
                        return this.state.get("mode", ComboBoxMode.List);
                    }
                    set mode(value) {
                        this.state.set("mode", value);
                    }
                    get maskValue() {
                        return this.input.maskValue;
                    }
                    set maskValue(value) {
                        this.input.maskValue = value;
                    }
                    get textValue() {
                        return this.input.textValue;
                    }
                    set textValue(value) {
                        this.input.textValue = value;
                    }
                    get selection() {
                        return this.state.get("selection");
                    }
                    set selection(value) {
                        this.state.set("selection", value);
                    }
                    get icon() {
                        return this.m_icon;
                    }
                    get iconValue() {
                        return this.icon.path;
                    }
                    set iconValue(value) {
                        this.icon.path = value;
                    }
                    get button() {
                        return this.m_button;
                    }
                    get onFilterCallback() {
                        return this.state.get("onFilter");
                        ;
                    }
                    get onCreateListItemCallback() {
                        return this.state.get("onCreateListItem");
                        ;
                    }
                    get onSelectionChangedCallback() {
                        return this.state.get("onSelectionChanged", () => { });
                    }
                    get onShowDialogCallback() {
                        return this.state.get("onShowDialog", () => { });
                    }
                    get tabIndex() {
                        return this.state.get("tabIndex", -1);
                    }
                    set tabIndex(value) {
                        this.state.set("tabIndex", value);
                    }
                    template() {
                        return `<div></div>`;
                    }
                    focusMask() {
                        this.input.focusMask();
                    }
                    focusText() {
                        this.input.focusText();
                    }
                    hideList() {
                        this.list.hide();
                    }
                    showList() {
                        this.list.show();
                    }
                    showMask() {
                        this.input.showMask();
                        this.setDisplayMode();
                    }
                    showText() {
                        this.input.showText();
                        this.setDisplayMode();
                    }
                    getInputEvent(args) {
                        return new Controls.ComboBoxInputEvent(args);
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.m_input = new Controls.MaskedTextBox({
                            defaultMaskText: this.defaultMask,
                            onMaskDoubleClick: (e) => {
                                this.getInputEvent({
                                    event: e,
                                    eventType: Jade.BrowserEvent.DOUBLECLICK,
                                    comboBox: this,
                                    source: Controls.ComboBoxInputEventSource.mask
                                }).execute();
                            },
                            onMaskBlur: (e) => {
                                this.getInputEvent({
                                    event: e,
                                    eventType: Jade.BrowserEvent.BLUR,
                                    comboBox: this,
                                    source: Controls.ComboBoxInputEventSource.mask
                                }).execute();
                            },
                            onMaskFocus: (e) => {
                                this.getInputEvent({
                                    event: e,
                                    eventType: Jade.BrowserEvent.FOCUS,
                                    comboBox: this,
                                    source: Controls.ComboBoxInputEventSource.mask
                                }).execute();
                            },
                            onMaskKeyDown: (e) => {
                                this.getInputEvent({
                                    event: e,
                                    eventType: Jade.BrowserEvent.KEYDOWN,
                                    comboBox: this,
                                    source: Controls.ComboBoxInputEventSource.mask
                                }).execute();
                            },
                            onMaskKeyPress: (e) => {
                                this.getInputEvent({
                                    event: e,
                                    eventType: Jade.BrowserEvent.KEYPRESS,
                                    comboBox: this,
                                    source: Controls.ComboBoxInputEventSource.mask
                                }).execute();
                            },
                            onMaskKeyUp: (e) => {
                                this.getInputEvent({
                                    event: e,
                                    eventType: Jade.BrowserEvent.KEYUP,
                                    comboBox: this,
                                    source: Controls.ComboBoxInputEventSource.mask
                                }).execute();
                            },
                            onTextBlur: (e) => {
                                this.getInputEvent({
                                    event: e,
                                    eventType: Jade.BrowserEvent.BLUR,
                                    comboBox: this,
                                    source: Controls.ComboBoxInputEventSource.text
                                }).execute();
                            },
                            onTextFocus: (e) => {
                                this.getInputEvent({
                                    event: e,
                                    eventType: Jade.BrowserEvent.FOCUS,
                                    comboBox: this,
                                    source: Controls.ComboBoxInputEventSource.text
                                }).execute();
                            },
                            onTextKeyDown: (e) => {
                                this.getInputEvent({
                                    event: e,
                                    eventType: Jade.BrowserEvent.KEYDOWN,
                                    comboBox: this,
                                    source: Controls.ComboBoxInputEventSource.text
                                }).execute();
                            },
                            onTextKeyPress: (e) => {
                                this.getInputEvent({
                                    event: e,
                                    eventType: Jade.BrowserEvent.KEYPRESS,
                                    comboBox: this,
                                    source: Controls.ComboBoxInputEventSource.text
                                }).execute();
                            },
                            onTextKeyUp: (e) => {
                                this.getInputEvent({
                                    event: e,
                                    eventType: Jade.BrowserEvent.KEYUP,
                                    comboBox: this,
                                    source: Controls.ComboBoxInputEventSource.text
                                }).execute();
                            }
                        });
                        this.m_icon = new Controls.ComboBoxIcon();
                        this.m_button = new Controls.ComboBoxButton({
                            mode: this.mode,
                            onShowList: _.bind(this.onShowList, this),
                            onShowDialog: _.bind(this.onShowDialog, this)
                        });
                        this.controls.add(this.input);
                        this.controls.add(this.icon);
                        this.controls.add(this.button);
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_list = this.createList();
                        this.controls.add(this.list);
                        this.node.addClass(Controls.CssClass.ComboBox);
                        this.data.bind();
                    }
                    onComplete(e) {
                        super.onComplete(e);
                        this.triggerSelectionChange();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.input.enabled = this.enabled;
                        this.input.tabIndex = this.tabIndex;
                        this.button.enabled = this.enabled;
                        if (this.state.hasChanged("selection")) {
                            this.triggerSelectionChange();
                        }
                    }
                    onSelectionChange(selection) {
                        if (selection == null) {
                            this.iconValue = null;
                            this.maskValue = this.defaultMask;
                            this.textValue = "";
                        }
                    }
                    onDataBind(data) {
                        if (data != null) {
                            this.list.clear();
                            data.each((record) => {
                                let item = this.createListItem(record);
                                if (item != null) {
                                    this.list.controls.add(item);
                                }
                            });
                            this.onDataBound(data);
                        }
                    }
                    onDataBound(data) {
                        if (data.count === 0) {
                            this.list.showMessage("No matching items.");
                        }
                    }
                    onFilter(e) {
                        this.onFilterCallback(e);
                    }
                    createDataSource(e) {
                        return new Controls.ComboBoxDataSource({
                            data: e
                        });
                    }
                    createListItem(e) {
                        return this.onCreateListItemCallback(e);
                    }
                    createList() {
                        return new PDJS.Shared.UI.Controls.ComboBoxList({
                            comboBox: this,
                            anchor: this.node,
                            height: 200,
                            width: this.node.outerWidth() - 2
                        });
                    }
                    onShowDialog(e) {
                        this.onShowDialogCallback();
                    }
                    onShowList(e) {
                        this.list.toggle();
                        if (this.input.isMaskVisible) {
                            this.focusMask();
                        }
                        else {
                            this.focusText();
                        }
                    }
                    ensureDataSource(data) {
                        if (data == null) {
                            data = [];
                        }
                        if (data instanceof Array) {
                            this.m_data = this.createDataSource(data);
                        }
                        if (data instanceof Controls.ComboBoxDataSource) {
                            this.m_data = data;
                        }
                        this.data.onChangeCallback = _.bind(this.onDataBind, this);
                        this.data.onFilterCallback = _.bind(this.onFilter, this);
                    }
                    setDisplayMode() {
                        let addPadding = Jade.String.isNullOrWhiteSpace(this.iconValue) && this.input.isMaskVisible;
                        this.input.maskNode.css({
                            paddingLeft: addPadding ? "5px" : "25px"
                        });
                        this.icon.visible = this.input.isMaskVisible;
                    }
                    triggerSelectionChange() {
                        this.onSelectionChange(this.selection);
                        this.onSelectionChangedCallback(this.selection);
                        this.setDisplayMode();
                    }
                }
                Controls.ComboBox = ComboBox;
                class ComboBoxOf extends ComboBox {
                    constructor(options) {
                        super(options);
                    }
                    get selection() {
                        return this.state.get("selection");
                    }
                    set selection(value) {
                        this.state.set("selection", value);
                    }
                    onSelectionChange(selection) {
                        super.onSelectionChange(selection);
                    }
                }
                Controls.ComboBoxOf = ComboBoxOf;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Forms;
            (function (Forms) {
                class EntityIconFieldComboBox extends PDJS.Shared.UI.Controls.ComboBoxOf {
                    onSelectionChange(selection) {
                        super.onSelectionChange(selection);
                        if (selection != null) {
                            this.iconValue = selection.icon;
                            this.maskValue = selection.name;
                        }
                    }
                    createListItem(e) {
                        return new PDJS.Shared.UI.Controls.ComboBoxListItem({
                            data: e,
                            uidMap: "icon",
                            labelMap: "name",
                            iconMap: "icon"
                        });
                    }
                    onFilter(e) {
                        let service = new PDJS.Services.System.IconService();
                        service.search({
                            term: this.textValue,
                            success: (e2) => {
                                e.result.addRange(e2.data.data);
                                e.complete();
                            }
                        });
                    }
                    onShowDialog(e) {
                        PDJS.Shared.Dialogs.IconBrowserDialog.open({
                            callbacks: {
                                ok: (sender, data) => {
                                    this.selection = {
                                        icon: data.value,
                                        name: data.value.replace("_", " ")
                                    };
                                }
                            }
                        });
                    }
                }
                Forms.EntityIconFieldComboBox = EntityIconFieldComboBox;
            })(Forms = Shared.Forms || (Shared.Forms = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Forms;
            (function (Forms) {
                class EntityParentFieldComboBox extends PDJS.Shared.UI.Controls.ComboBoxOf {
                    constructor(options) {
                        super(options);
                    }
                    get entityTypeId() {
                        return this.state.get("entityTypeId");
                    }
                    createListItem(data) {
                        return new PDJS.Shared.UI.Controls.ComboBoxListItem({
                            data: data,
                            uidMap: "entityID",
                            labelMap: "entityName",
                            iconMap: "entityTypeIcon"
                        });
                    }
                    onFilter(e) {
                        let service = new PDJS.Services.Canvas.Forms.FormFieldService();
                        service.entityParentFieldQuery({
                            searchTerm: this.textValue,
                            childTypeId: this.entityTypeId,
                            success: (e2) => {
                                e.result.addRange(e2.data.entities);
                                e.complete();
                            }
                        });
                    }
                    onSelectionChange(selection) {
                        super.onSelectionChange(selection);
                        if (selection != null) {
                            this.iconValue = selection.entityTypeIcon;
                            this.maskValue = selection.entityName;
                            this.icon.title = selection.entityTypeName;
                        }
                    }
                    onShowDialog() {
                        PDJS.Shared.Entities.EntityBrowserDialog.open({
                            filters: [PDJS.Core.Views.EntityFilter.parentFilter(this.entityTypeId)],
                            callbacks: {
                                ok: (sender, e) => {
                                    this.selection = {
                                        entityID: e.entityId,
                                        entityName: e.entityName,
                                        entityTypeIcon: e.entityTypeIcon,
                                        entityTypeName: e.entityTypeName,
                                        entityTypeId: null
                                    };
                                }
                            }
                        });
                    }
                }
                Forms.EntityParentFieldComboBox = EntityParentFieldComboBox;
            })(Forms = Shared.Forms || (Shared.Forms = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Forms;
            (function (Forms) {
                class EntityProcessField extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                        this.isUnassigned = options.stageId == null;
                    }
                    get assignment() {
                        return this.m_assignment;
                    }
                    get entityTypeId() {
                        return this.state.get("entityTypeId");
                    }
                    get isUnassigned() {
                        return this.state.get("isUnassigned", false);
                    }
                    set isUnassigned(value) {
                        this.state.set("isUnassigned", value);
                    }
                    get keyIcon() {
                        return this.state.get("keyIcon");
                    }
                    set keyIcon(value) {
                        this.state.set("keyIcon", value);
                    }
                    get keyName() {
                        return this.state.get("keyName");
                    }
                    set keyName(value) {
                        this.state.set("keyName", value);
                    }
                    get keyNode() {
                        return this.node.find("div[role=key]");
                    }
                    get keyNameNode() {
                        return this.node.find("div[role=key-name]");
                    }
                    get processName() {
                        return this.state.get("processName", "");
                    }
                    set processName(value) {
                        this.state.set("processName", value);
                    }
                    get processNode() {
                        return this.node.find("div[role=process]");
                    }
                    get processNameNode() {
                        return this.node.find("div[role=process-name]");
                    }
                    get stageId() {
                        return this.state.get("stageId");
                    }
                    set stageId(value) {
                        this.state.set("stageId", value);
                    }
                    get stageIcon() {
                        return this.state.get("stageIcon", "GEAR.PNG");
                    }
                    set stageIcon(value) {
                        this.state.set("stageIcon", value);
                    }
                    get stageName() {
                        return this.state.get("stageName");
                    }
                    set stageName(value) {
                        this.state.set("stageName", value);
                    }
                    get stageNode() {
                        return this.node.find("div[role=stage]");
                    }
                    get stageNameNode() {
                        return this.node.find("div[role=stage-name]");
                    }
                    get statusId() {
                        return this.state.get("statusId");
                    }
                    set statusId(value) {
                        this.state.set("statusId", value);
                    }
                    get statusIcon() {
                        return this.state.get("statusIcon");
                    }
                    set statusIcon(value) {
                        this.state.set("statusIcon", value);
                    }
                    get statusName() {
                        return this.state.get("statusName");
                    }
                    set statusName(value) {
                        this.state.set("statusName", value);
                    }
                    get statusNode() {
                        return this.node.find("div[role=status]");
                    }
                    get statusNameNode() {
                        return this.node.find("div[role=status-name]");
                    }
                    get showKey() {
                        return this.state.get("showKey");
                    }
                    set showKey(value) {
                        this.state.set("showKey", value);
                    }
                    get showProcess() {
                        return this.state.get("showProcess");
                    }
                    set showProcess(value) {
                        this.state.set("showProcess", value);
                    }
                    get showStage() {
                        return this.state.get("showStage");
                    }
                    set showStage(value) {
                        this.state.set("showStage", value);
                    }
                    get showStatus() {
                        return this.state.get("showStatus");
                    }
                    set showStatus(value) {
                        this.state.set("showStatus", value);
                    }
                    get onChangeCallback() {
                        return this.state.get("onChange", () => { });
                    }
                    get tabIndex() {
                        return this.state.get("tabIndex");
                    }
                    template() {
                        return `
                    <div class="-pdjs-entity-process-ctrl">
                        <div role="process">
                            <div>Process:</div>
                            <div role="process-name"></div>
                        </div>
                        <div role="key">
                            <div>Key:</div>
                            <div role="key-name"></div>
                        </div>
                        <div role="stage">
                            <div>Stage:</div>
                            <div role="stage-name"></div>
                        </div>
                        <div role="status">
                            <div>Status:</div>
                            <div role="status-name"></div>
                        </div>
                    </div>
                `;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_assignment = new Forms.EntityProcessFieldAssignment({
                            tabIndex: this.tabIndex,
                            onClick: (e) => {
                                Forms.EntityProcessFieldDialog.open({
                                    entityTypeId: this.entityTypeId,
                                    callbacks: {
                                        ok: (sender, e) => {
                                            sender.destroyContext();
                                            this.processName = e.processName;
                                            this.keyIcon = e.keyIcon;
                                            this.keyName = e.keyName;
                                            this.stageName = e.stageName;
                                            this.statusId = e.statusId;
                                            this.statusName = e.statusName;
                                            this.statusIcon = e.statusIcon;
                                            this.stageId = e.stageId;
                                            this.onChangeCallback();
                                        }
                                    }
                                });
                            }
                        });
                        this.controls.add(this.assignment);
                        this.node.on(Jade.BrowserEvent.MOUSEENTER, () => {
                            if (this.isUnassigned) {
                            }
                        });
                        this.node.on(Jade.BrowserEvent.MOUSELEAVE, () => {
                            if (this.isUnassigned && this.stageId != null) {
                            }
                        });
                        if (this.isUnassigned) {
                            this.node.on(Jade.BrowserEvent.MOUSEENTER, () => {
                                if (this.stageId != null) {
                                    this.assignment.visible = true;
                                }
                            });
                            this.node.on(Jade.BrowserEvent.MOUSELEAVE, () => {
                                if (this.stageId != null) {
                                    this.assignment.visible = false;
                                }
                            });
                        }
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.processNameNode.text(this.processName);
                        this.processNameNode.css({
                            backgroundImage: `url(${Jade.IconSet.get("pd").resolve("gears.png", Jade.IconSetSizeSpecificDirectory.x16)})`
                        });
                        this.showNode(this.processNode, this.showProcess && this.stageId != null);
                        this.keyNameNode.text(this.keyName);
                        this.keyNameNode.css({
                            backgroundImage: `url(${Jade.IconSet.get("pd").resolve(this.keyIcon, Jade.IconSetSizeSpecificDirectory.x16)})`
                        });
                        this.showNode(this.keyNode, this.showKey && this.stageId != null);
                        this.stageNameNode.text(this.stageName);
                        this.stageNameNode.css({
                            backgroundImage: `url(${Jade.IconSet.get("pd").resolve("gear.png", Jade.IconSetSizeSpecificDirectory.x16)})`
                        });
                        this.showNode(this.stageNode, this.showStage && this.stageId != null);
                        this.statusNameNode.text(this.statusName);
                        this.statusNameNode.css({
                            backgroundImage: `url(${Jade.IconSet.get("pd").resolve(this.statusIcon, Jade.IconSetSizeSpecificDirectory.x16)})`
                        });
                        this.showNode(this.statusNode, this.showStatus && this.stageId != null);
                        this.assignment.visible = this.stageId == null;
                    }
                    showNode(node, show) {
                        if (show) {
                            node.show();
                        }
                        else {
                            node.hide();
                        }
                    }
                }
                Forms.EntityProcessField = EntityProcessField;
            })(Forms = Shared.Forms || (Shared.Forms = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Forms;
            (function (Forms) {
                class EntityProcessFieldAssignment extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get tabIndex() {
                        return this.state.get("tabIndex", true);
                    }
                    get visible() {
                        return this.state.get("visible", true);
                    }
                    set visible(value) {
                        this.state.set("visible", value);
                    }
                    get buttonNode() {
                        return this.node.find("button");
                    }
                    get onClickCallback() {
                        return this.state.get("onClick", () => { });
                    }
                    template() {
                        return `<table style="height:100%;width:100%;position:absolute;top:0;right:0;bottom:0;left:0;background-color:#FFFFFF;">
                        <tr>
                            <td style="text-align:center;vertical-align:center;">
                                <button tabIndex="${this.tabIndex}">Assign Process</button>
                            </td>
                        </tr>
                    </table>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.buttonNode.on(Jade.BrowserEvent.CLICK, (e) => {
                            this.onClickCallback(e);
                        });
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        if (this.visible) {
                            this.node.show();
                        }
                        else {
                            this.node.hide();
                        }
                    }
                }
                Forms.EntityProcessFieldAssignment = EntityProcessFieldAssignment;
            })(Forms = Shared.Forms || (Shared.Forms = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Forms;
            (function (Forms) {
                class EntityProcessFieldDialog extends Jade.UI.Dialog {
                    constructor(options) {
                        super(options);
                    }
                    get entityTypeId() {
                        return this.state.get("entityTypeId");
                    }
                    get processList() {
                        return this.m_processList;
                    }
                    get statusList() {
                        return this.m_statusList;
                    }
                    get stageTree() {
                        return this.m_stageTree;
                    }
                    get okButton() {
                        return this.node.find("button[data-command=ok]");
                    }
                    get cancelButton() {
                        return this.node.find("button[data-command=cancel]");
                    }
                    template() {
                        return `
                <div style="position:absolute;top:10px;right:10px;bottom:10px;left:10px;">
                    <div role="inputs" data-controls style="position:absolute;top:0;right:0;left:0;height:100px;">
                    
                    </div>
                    <div style="position:absolute;top:100px;right:0;left:0;bottom:34px;">
                        <div style="height:26px;line-height:26px;font-family:arial;font-size:12px;color:red;">Assign Stage Of:</div>
                        <div role="process-stage-grid" style="position:absolute;top:26px;right:0;left:0;bottom:0;"></div>
                    </div>
                    <div style="position:absolute;bottom:0;height:24px;left:0;right:0;text-align:right;overflow:hidden;">
                        <button class="-jadejs-button" data-command="ok">OK</button>
                        <button class="-jadejs-button" data-command="cancel">Cancel</button>
                    </div>
                </div>`;
                    }
                    getWindowOptions() {
                        return {
                            title: "Process Assignment",
                            height: 450,
                            width: 450
                        };
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.stageTree_init();
                        this.processList_init();
                        this.statusList_init();
                        this.okButton.on(Jade.BrowserEvent.CLICK, _.bind(this.okButton_onClick, this));
                        this.cancelButton.on(Jade.BrowserEvent.CLICK, _.bind(this.cancelButton_onClick, this));
                    }
                    processList_init() {
                        this.m_processList = new PDJS.Shared.UI.Controls.Fields.ProcessField({
                            label: "Assign to Process",
                            width: "100%",
                            required: true,
                            entityTypeId: this.entityTypeId,
                            onSelectionChanged: (value) => {
                                if (value != null) {
                                    this.statusList.processId = value.id;
                                    this.stageTree.processId = value.id;
                                }
                                else {
                                    this.statusList.processId = null;
                                    this.stageTree.processId = null;
                                }
                            }
                        });
                        this.controls.add(this.processList);
                    }
                    statusList_init() {
                        this.m_statusList = new PDJS.Shared.UI.Controls.Fields.ProcessStatusField({
                            label: "Assign Status Of",
                            width: "100%",
                            required: true
                        });
                        this.controls.add(this.statusList);
                    }
                    stageTree_init() {
                        this.m_stageTree = new Forms.EntityProcessTree({
                            insertAt: "div[role=process-stage-grid]",
                            height: "100%",
                            width: "100%"
                        });
                        this.controls.add(this.m_stageTree);
                    }
                    okButton_onClick(e) {
                        if (this.isValid()) {
                            this.close({
                                command: "ok",
                                data: {
                                    processId: this.m_processList.processId,
                                    processName: this.m_processList.processName,
                                    keyIcon: this.m_stageTree.keyIcon,
                                    keyName: this.m_stageTree.keyName,
                                    stageId: this.m_stageTree.stageId,
                                    stageName: this.m_stageTree.stageName,
                                    statusId: this.m_statusList.statusId,
                                    statusIcon: this.m_statusList.statusIcon,
                                    statusName: this.m_statusList.statusName
                                }
                            });
                        }
                    }
                    cancelButton_onClick(e) {
                        this.close({
                            command: "cancel"
                        });
                    }
                    isValid() {
                        let result = true;
                        this.controls.each((control) => {
                            if (control instanceof PDJS.Shared.UI.Controls.Fields.Field) {
                                control.validate();
                                if (control.errors.count > 0) {
                                    result = false;
                                }
                            }
                        });
                        if (result == true && this.m_stageTree.stageId == null) {
                            result = false;
                            Jade.UI.MessageDialog.open({
                                dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                                dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                                message: "A process stage must be selected.",
                                select: (e) => {
                                    e.close();
                                }
                            });
                        }
                        return result;
                    }
                    static open(options) {
                        return new EntityProcessFieldDialog(options);
                    }
                }
                Forms.EntityProcessFieldDialog = EntityProcessFieldDialog;
            })(Forms = Shared.Forms || (Shared.Forms = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Forms;
            (function (Forms) {
                class EntityProcessTree extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get processId() {
                        return this.state.get("processId");
                    }
                    set processId(value) {
                        this.state.set("processId", value);
                    }
                    get height() {
                        return this.state.get("height", "100%");
                    }
                    set height(value) {
                        this.state.set("height", value);
                    }
                    get width() {
                        return this.state.get("width", "100%");
                    }
                    set width(value) {
                        this.state.set("width", value);
                    }
                    get selection() {
                        return this.m_selection;
                    }
                    get treeNode() {
                        return this.node.find("div[role=tree]");
                    }
                    get stageId() {
                        return this.selection != null
                            ? this.selection.id : null;
                    }
                    get stageIcon() {
                        return this.selection != null
                            ? this.selection.icon : null;
                    }
                    get stageName() {
                        return this.selection != null
                            ? this.selection.name : null;
                    }
                    get keyIcon() {
                        return this.selection != null
                            ? this.selection.keyIcon : null;
                    }
                    get keyName() {
                        return this.selection != null
                            ? this.selection.keyName : null;
                    }
                    template() {
                        return `
                    <div style="border:1px solid #AAAAAA;position:relative;background-color:#FFFFFF;overflow:auto;">
                        <div role="tree" class="-pdjs-tree" style="padding-top:5px;"></div>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_processService =
                            new PDJS.Services.Process.ProcessService();
                        this.tree_init();
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.node.css({
                            height: this.height,
                            width: this.width
                        });
                        if (this.state.hasChanged("processId")) {
                            this.m_selection = null;
                            this.tree_load();
                        }
                    }
                    tree_init() {
                        let that = this;
                        this.m_tree = this.treeNode.kendoTreeView({
                            dataSource: {
                                transport: {
                                    read: function (e) {
                                        let item = e.data;
                                        if (item != null && item.id != null) {
                                            let node = that.m_tree.findByUid(item.dataItem.uid);
                                            that.m_processService.getStages({
                                                keyId: item.id,
                                                success: (response) => {
                                                    e.success([]);
                                                    _.each(response.data, (data) => {
                                                        that.m_tree.append({
                                                            id: data.id,
                                                            text: data.name,
                                                            imageUrl: Jade.IconSet.get("pd").resolve(data.icon, Jade.IconSetSizeSpecificDirectory.x16),
                                                            hasChildren: data.hasChildren,
                                                            icon: data.icon,
                                                            type: "stage"
                                                        }, node);
                                                    });
                                                }
                                            });
                                        }
                                    }
                                }
                            },
                            select: _.bind(this.tree_select, this)
                        }).data("kendoTreeView");
                        this.tree_load();
                    }
                    tree_load() {
                        this.m_tree.dataSource.data([]);
                        if (this.processId == null) {
                            this.addNoProcessMessage();
                            return;
                        }
                        this.m_processService.getKeys({
                            processId: this.processId,
                            success: (response) => {
                                this.removeNoProcessMessage();
                                _.each(response.data, (data) => {
                                    this.m_tree.append({
                                        id: data.id,
                                        text: data.name,
                                        icon: data.icon,
                                        imageUrl: Jade.IconSet.get("pd").resolve(data.icon, Jade.IconSetSizeSpecificDirectory.x16),
                                        hasChildren: data.hasChildren,
                                        type: "key"
                                    });
                                });
                            }
                        });
                    }
                    tree_select(e) {
                        let data = this.m_tree.dataItem(e.node);
                        if (data == null) {
                            this.m_selection = null;
                            return;
                        }
                        if (data.type != "stage") {
                            e.preventDefault();
                            return;
                        }
                        let key = data.parentNode();
                        this.m_selection = {
                            id: data.id,
                            icon: data.icon,
                            name: data.text,
                            keyId: key.id,
                            keyIcon: key.icon,
                            keyName: key.text
                        };
                    }
                    addNoProcessMessage() {
                        let message = this.controls.getByType(PDJS.Shared.UI.Controls.Message).first();
                        if (message == null) {
                            this.controls.add(new PDJS.Shared.UI.Controls.Message({
                                message: "No process selected."
                            }));
                        }
                    }
                    removeNoProcessMessage() {
                        let message = this.controls.getByType(PDJS.Shared.UI.Controls.Message).first();
                        if (message != null) {
                            this.controls.remove(message);
                        }
                    }
                }
                Forms.EntityProcessTree = EntityProcessTree;
            })(Forms = Shared.Forms || (Shared.Forms = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Forms;
            (function (Forms) {
                class EntityFieldComboBox extends PDJS.Shared.UI.Controls.ComboBoxOf {
                    constructor(options) {
                        super(options);
                    }
                    get viewId() {
                        return this.state.get("viewId");
                    }
                    get viewStateId() {
                        return this.state.get("viewStateId");
                    }
                    onSelectionChange(selection) {
                        super.onSelectionChange(selection);
                        if (selection != null) {
                            this.iconValue = selection.entityTypeIcon;
                            this.maskValue = selection.entityName;
                            this.icon.title = selection.entityTypeName;
                        }
                    }
                    createListItem(data) {
                        return new PDJS.Shared.UI.Controls.ComboBoxListItem({
                            data: data,
                            uidMap: "entityID",
                            labelMap: "entityName",
                            iconMap: "entityTypeIcon"
                        });
                    }
                    onFilter(e) {
                        let service = new PDJS.Services.Canvas.Forms.FormFieldService();
                        service.entityFieldQuery({
                            searchTerm: this.textValue,
                            viewId: this.viewId,
                            success: (e2) => {
                                e.result.addRange(e2.data.entities);
                                e.complete();
                            }
                        });
                    }
                    onShowDialog() {
                        PDJS.Shared.Entities.EntityBrowserDialog.open({
                            viewStateId: this.viewStateId,
                            callbacks: {
                                ok: (sender, e) => {
                                    this.selection = {
                                        entityID: e.entityId,
                                        entityName: e.entityName,
                                        entityTypeIcon: e.entityTypeIcon,
                                        entityTypeName: e.entityTypeName
                                    };
                                }
                            }
                        });
                    }
                }
                Forms.EntityFieldComboBox = EntityFieldComboBox;
            })(Forms = Shared.Forms || (Shared.Forms = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Forms;
            (function (Forms) {
                class SingleSelectFieldComboBox extends PDJS.Shared.UI.Controls.ComboBox {
                    constructor(options) {
                        super(options);
                    }
                    get tabIndex() {
                        return this.state.get("tabIndex", -1);
                    }
                    set tabIndex(value) {
                        this.state.set("tabIndex", value);
                    }
                    get items() {
                        return this.state.get("items");
                    }
                    setSelectedItem(options) {
                        this.selection = options;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.fill();
                    }
                    fill() {
                        _.each(this.items, (item) => {
                            this.list.controls.add(new PDJS.Shared.UI.Controls.ComboBoxListItem({
                                data: item,
                                uidMap: "id",
                                iconMap: "icon",
                                labelMap: "label"
                            }));
                        });
                        this.onFilter();
                    }
                    onMaskFocus() {
                        if (!Jade.String.isNullOrWhiteSpace(this.textValue)) {
                            this.showText();
                            this.focusText();
                        }
                    }
                    onButtonClick() {
                        this.showList();
                    }
                    onInputBlur(e) {
                        this.showMask();
                    }
                    onFilter() {
                        let results = new Array();
                        let escape = function (value) {
                            return value.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
                        };
                        if (this.textValue != null && this.textValue != "") {
                            let exp = new RegExp(`${escape(this.textValue.toLowerCase())}`, "i");
                            _.each(this.items, (item) => {
                                if (exp.test(item.label.toLowerCase())) {
                                    results[results.length] = item;
                                }
                            });
                        }
                        else {
                            results = this.items;
                        }
                        this.list.controls.clear();
                        _.each(results, (item) => {
                            this.list.controls.add(new PDJS.Shared.UI.Controls.ComboBoxListItem({
                                data: item,
                                uidMap: "id",
                                iconMap: "icon",
                                labelMap: "label"
                            }));
                        });
                    }
                    clearFilter() {
                        this.list.controls.clear();
                        _.each(this.items, (item) => {
                            this.list.controls.add(new PDJS.Shared.UI.Controls.ComboBoxListItem({
                                data: item,
                                uidMap: "id",
                                iconMap: "icon",
                                labelMap: "label"
                            }));
                        });
                    }
                }
                Forms.SingleSelectFieldComboBox = SingleSelectFieldComboBox;
            })(Forms = Shared.Forms || (Shared.Forms = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Forms;
            (function (Forms) {
                class UserFieldComboBox extends PDJS.Shared.UI.Controls.ComboBoxOf {
                    constructor(options) {
                        super(options);
                    }
                    get viewId() {
                        return this.state.get("viewId");
                    }
                    get viewStateId() {
                        return this.state.get("viewStateId");
                    }
                    onSelectionChange(selection) {
                        super.onSelectionChange(selection);
                        if (selection != null) {
                            this.maskValue = selection.userName;
                        }
                    }
                    createListItem(data) {
                        return new PDJS.Shared.UI.Controls.ComboBoxListItem({
                            data: data,
                            uidMap: "userID",
                            labelMap: "userName"
                        });
                    }
                    onFilter(e) {
                        let service = new PDJS.Services.Canvas.Forms.FormFieldService();
                        service.userFieldQuery({
                            searchTerm: this.textValue,
                            viewId: this.viewId,
                            success: (e2) => {
                                e.result.addRange(e2.data.users);
                                e.complete();
                            }
                        });
                    }
                    onShowDialog() {
                        Forms.UserFieldComboBoxDialog.open({
                            viewStateId: this.viewStateId,
                            callbacks: {
                                ok: (sender, e) => {
                                    let item = _.first(e);
                                    if (item != null) {
                                        this.selection = {
                                            userID: item.id,
                                            userName: item.name
                                        };
                                    }
                                }
                            }
                        });
                    }
                }
                Forms.UserFieldComboBox = UserFieldComboBox;
            })(Forms = Shared.Forms || (Shared.Forms = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Forms;
            (function (Forms) {
                class UserFieldComboBoxDialog extends Jade.UI.Dialog {
                    get viewStateId() {
                        return this.state.get("viewStateId", null);
                    }
                    set viewStateId(value) {
                        this.state.set("viewStateId", value);
                    }
                    get okButtonNode() {
                        return this.node.find("button[data-command=ok]");
                    }
                    get cancelButtonNode() {
                        return this.node.find("button[data-command=cancel]");
                    }
                    get selections() {
                        return this.m_grid.getSelections().toArray();
                    }
                    template() {
                        return `
            <div style="position:absolute;top:10px;left:10px;right:10px;bottom:10px;box-sizing:border-box;">
                <div data-role="grid" style="position:absolute;top:0;left:0;right:0;bottom:34px;border:1px solid #AAAAAA;">
                    
                </div>
                <div style="position:absolute;height:26px;bottom:0;left:0;right:0;text-align:right;">
                    <button data-command="ok" class="-jadejs-button">OK</button>
                    <button data-command="cancel" class="-jadejs-button">Cancel</button>
                </div>
            </div>
            `;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.grid_init();
                        this.okButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.okButton_onClick, this));
                        this.cancelButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.cancelButton_onClick, this));
                    }
                    getWindowOptions() {
                        return {
                            title: "User Browser",
                            height: 400,
                            width: 600,
                            maximized: false
                        };
                    }
                    static open(options) {
                        return new UserFieldComboBoxDialog(options);
                    }
                    grid_init() {
                        this.m_grid = new PD.Web.UI.Controls.ViewGrid({
                            container: this.node.find("[data-role=grid]"),
                            selectionMode: "single",
                            viewStateId: this.viewStateId,
                            selectOnRightClick: false,
                            defaultSelectionEnabled: true,
                            selection: {
                                map: (e) => {
                                    return _.map(e.selections.toArray(), (item, index) => {
                                        return {
                                            id: item.ObjectId,
                                            name: item.ObjectName,
                                            type: item.ObjectType
                                        };
                                    });
                                }
                            },
                            dblclick: (e) => {
                                this.closeAndReturn();
                            }
                        });
                    }
                    okButton_onClick(e) {
                        this.closeAndReturn();
                    }
                    cancelButton_onClick(e) {
                        this.close();
                    }
                    closeAndReturn() {
                        if (this.selections.length > -1) {
                            this.window.destroyContext();
                            this.close({
                                command: "ok",
                                data: this.selections
                            });
                        }
                        else {
                            Jade.UI.MessageDialog.open({
                                dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                                dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                                title: "No User Selected",
                                message: "No user has been selected. Select a user and try again.",
                                select: (e) => {
                                    e.close();
                                }
                            });
                        }
                    }
                }
                Forms.UserFieldComboBoxDialog = UserFieldComboBoxDialog;
            })(Forms = Shared.Forms || (Shared.Forms = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Process;
            (function (Process) {
                class ProcessColorPalette {
                    constructor(options) {
                        this.m_wheel = [];
                        options = options || {};
                        this.buildWheel(options.count);
                    }
                    static get colors() {
                        return this.m_colors;
                    }
                    get wheel() {
                        return this.m_wheel;
                    }
                    getColor(index) {
                        let result = null;
                        if (index < this.wheel.length) {
                            result = this.wheel[index];
                        }
                        return result;
                    }
                    setCount(index) {
                        this.buildWheel(index);
                    }
                    buildWheel(count) {
                        if (count == null) {
                            this.m_wheel = ProcessColorPalette.colors.slice(0);
                            return;
                        }
                        for (let i = 0; i < count; i++) {
                            this.wheel[i] = ProcessColorPalette.colors[i % ProcessColorPalette.colors.length];
                        }
                    }
                }
                ProcessColorPalette.m_colors = [
                    { light: "#a5f986", dark: "#52b030" },
                    { light: "#d6f8e9", dark: "#5cdba3" },
                    { light: "#c1c0fd", dark: "#615fde" },
                    { light: "#dcff9a", dark: "#8dcf11" },
                    { light: "#ccdce8", dark: "#5ea0d1" },
                    { light: "#fcd8e9", dark: "#e675aa" },
                    { light: "#81e7fd", dark: "#30aec9" },
                    { light: "#dda5fb", dark: "#b055e0" },
                    { light: "#fab7a5", dark: "#de7559" },
                    { light: "#fdf89d", dark: "#d1c932" }
                ];
                Process.ProcessColorPalette = ProcessColorPalette;
            })(Process = Shared.Process || (Shared.Process = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Process;
            (function (Process) {
                class Status {
                }
                Status.A = {
                    id: 1,
                    name: "Status A",
                    icon: "BULLET_BALL_BLUE.PNG"
                };
                Status.B = {
                    id: 2,
                    icon: "BULLET_BALL_GREEN.PNG",
                    name: "Status B"
                };
                Status.C = {
                    id: 3,
                    icon: "BULLET_BALL_RED.PNG",
                    name: "Status C"
                };
                Status.D = {
                    id: 1,
                    icon: "BULLET_BALL_YELLOW.PNG",
                    name: "Status D"
                };
                Process.Status = Status;
                class Stage {
                }
                Stage.A = { id: 1, name: "Stage A", decisions: [], keyId: 1, visited: true };
                Stage.B = { id: 2, name: "Stage B", decisions: [], keyId: 1, visited: true };
                Stage.C = { id: 3, name: "Stage C", decisions: [], keyId: 1, visited: true };
                Stage.D = { id: 4, name: "Stage D", decisions: [], keyId: 1, visited: true };
                Stage.E = { id: 5, name: "Stage E", decisions: [], keyId: 1, visited: true };
                Stage.F = { id: 6, name: "Stage F", decisions: [], keyId: 2, visited: true };
                Stage.G = { id: 7, name: "Stage G", decisions: [], keyId: 2, visited: true };
                Stage.H = { id: 8, name: "Stage H", decisions: [], keyId: 2, visited: true };
                Stage.I = { id: 9, name: "Stage I", decisions: [], keyId: 3, visited: true };
                Stage.J = { id: 10, name: "Stage J", decisions: [], keyId: 3 };
                Stage.K = { id: 11, name: "Stage K", decisions: [], keyId: 3 };
                Stage.L = { id: 12, name: "Stage L", decisions: [], keyId: 3 };
                Stage.M = { id: 13, name: "Stage M", decisions: [], keyId: 4 };
                Stage.N = { id: 14, name: "Stage N", decisions: [], keyId: 4 };
                Stage.O = { id: 15, name: "Stage O", decisions: [], keyId: 5 };
                Stage.P = { id: 16, name: "Stage P", decisions: [], keyId: 5 };
                Stage.Q = { id: 17, name: "Stage Q", decisions: [], keyId: 5 };
                Stage.List = [Stage.A, Stage.B, Stage.C, Stage.D, Stage.E,
                    Stage.F, Stage.G, Stage.H, Stage.I, Stage.J,
                    Stage.K, Stage.L, Stage.M, Stage.N, Stage.O,
                    Stage.P, Stage.Q];
                Process.Stage = Stage;
                class Key {
                }
                Key.One = { id: 1, name: "Key 1", icon: "SIGNAL_FLAG_WHITE.PNG", visited: true };
                Key.Two = { id: 2, name: "Key 2", icon: "SIGNAL_FLAG_YELLOW.PNG", visited: true };
                Key.Three = { id: 3, name: "Key 3", icon: "SIGNAL_FLAG_GREEN.PNG", visited: true };
                Key.Four = { id: 4, name: "Key 4", icon: "SIGNAL_FLAG_BLUE.PNG" };
                Key.Five = { id: 5, name: "Key 5", icon: "SIGNAL_FLAG_CHECKERED.PNG" };
                Key.List = [Key.One, Key.Two, Key.Three, Key.Four, Key.Five];
                Process.Key = Key;
                class Decision {
                }
                Decision.A = { id: 1, name: "Decision A", stageId: Stage.J.id, targetStage: Stage.K, targetStatus: Status.B };
                Decision.B = { id: 2, name: "Decision B", stageId: Stage.J.id, targetStage: Stage.F, targetStatus: Status.C };
                Decision.C = { id: 3, name: "Decision C", stageId: Stage.J.id, targetStage: Stage.D, targetStatus: Status.D };
                Decision.List = [Decision.A, Decision.B, Decision.C];
                Process.Decision = Decision;
                Stage.C.decisions = Decision.List;
                class DecisionMap {
                }
                DecisionMap.A = { color: Process.ProcessColorPalette.colors[0], stageId: Stage.K.id, index: 0 };
                DecisionMap.B = { color: Process.ProcessColorPalette.colors[1], stageId: Stage.F.id, index: 1 };
                DecisionMap.C = { color: Process.ProcessColorPalette.colors[2], stageId: Stage.D.id, index: 2 };
                DecisionMap.List = [DecisionMap.A, DecisionMap.B, DecisionMap.C];
                Process.DecisionMap = DecisionMap;
                class DataSet {
                    static get currentProcess() {
                        return "Process A";
                    }
                    static get currentKey() {
                        return Key.Three;
                    }
                    static get currentStage() {
                        return Stage.J;
                    }
                    static get currentStatus() {
                        return Status.A;
                    }
                    static get keys() {
                        return Key.List;
                    }
                    static get stages() {
                        return Stage.List;
                    }
                    static get selectedStage() {
                        return Stage.C;
                    }
                    static get selectedStageDecisions() {
                        return Decision.List;
                    }
                    static get selectedStageDecisionMaps() {
                        return DecisionMap.List;
                    }
                }
                Process.DataSet = DataSet;
            })(Process = Shared.Process || (Shared.Process = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Process;
            (function (Process) {
                let ProcessEvent;
                (function (ProcessEvent) {
                    ProcessEvent["StageSelect"] = "PDJS.CANVAS:PROCESSVIEW:STAGE:SELCT";
                    ProcessEvent["DecisionsMap"] = "PDJS.CANVAS:PROCESSVIEW:DECISIONS:MAP";
                })(ProcessEvent = Process.ProcessEvent || (Process.ProcessEvent = {}));
            })(Process = Shared.Process || (Shared.Process = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Process;
            (function (Process) {
                class ProcessDecisionsComponent extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get eventBus() {
                        return Jade.Application.instance.contexts.current.events;
                    }
                    get source() {
                        return this.m_source;
                    }
                    template() {
                        return `<div></div>`;
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.m_source = this.state.get("source");
                        this.state.unset("source", { silent: true });
                    }
                }
                Process.ProcessDecisionsComponent = ProcessDecisionsComponent;
            })(Process = Shared.Process || (Shared.Process = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Process;
            (function (Process) {
                class ProcessDecisions extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                        this.m_eventBus = new Jade.EventBus();
                        this.m_source = options.source;
                        this.state.unset("source", { silent: true });
                    }
                    get eventBus() {
                        return this.m_eventBus;
                    }
                    get source() {
                        return this.m_source;
                    }
                    template() {
                        return `<div class="-pdjs-canvas-process-decisions" style="position:absolute;top:0;right:0;bottom:0;left:0;"></div>`;
                    }
                    load(source) {
                        this.controls.clear();
                        this.m_source = source;
                        this.component_init();
                    }
                    onActivate(e) {
                        super.onActivate(e);
                    }
                    component_init() {
                        this.m_component = new Process.ProcessDecisionsList({
                            source: this.source
                        });
                        this.controls.add(this.m_component);
                    }
                }
                Process.ProcessDecisions = ProcessDecisions;
            })(Process = Shared.Process || (Shared.Process = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Process;
            (function (Process) {
                class ProcessDecisionsList extends Process.ProcessDecisionsComponent {
                    get grid() {
                        return this.m_grid;
                    }
                    get selectedStage() {
                        return this.m_selectedStage;
                    }
                    set selectedStage(value) {
                        this.m_selectedStage = value;
                    }
                    get currentStage() {
                        return this.source.currentStage;
                    }
                    get selectedDecisions() {
                        let result = [];
                        this.source.decisions.forEach(decision => {
                            if (decision.stageId == this.selectedStage.id) {
                                result[result.length] = decision;
                            }
                        });
                        return result;
                    }
                    get isActiveStage() {
                        return this.selectedStage.id === this.currentStage.id;
                    }
                    get colors() {
                        return this.m_colors;
                    }
                    template() {
                        return `<div role="decisions" data-controls></div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.node.css({
                            overflow: "hidden",
                            overflowY: "auto"
                        });
                        this.setSelectedStage(this.source.currentStage);
                        this.grid_init();
                        this.grid_fill();
                        this.subscriptions.add(Process.ProcessEvent.StageSelect, (e) => {
                            this.onStageSelect(e);
                        });
                        this.node.on(Jade.BrowserEvent.CLICK, "div[role=decision-action]", (e) => {
                            this.action_onClick(e);
                        });
                    }
                    onDestroy(e) {
                        if (this.m_grid != null) {
                            this.m_grid.destroy();
                        }
                    }
                    grid_init() {
                        this.m_grid = new PD.Web.UI.Controls.Grid({
                            container: this.node,
                            showToolbar: false,
                            height: "100%",
                            footer: {
                                visible: false
                            },
                            dataSource: {
                                data: this.selectedDecisions
                            },
                            messaging: {
                                noRecordsMessage: this.currentStage != null ?
                                    "No decisions available for this stage." :
                                    "Process has not been assigned."
                            },
                            selectionMode: "none",
                            resizable: true,
                            columns: [
                                new PD.Web.UI.Controls.GridColumn({
                                    title: "#",
                                    width: "30px",
                                    template: (e) => {
                                        return this.generateId(e);
                                    },
                                    headerAttributes: {
                                        style: "text-align: center;padding-left:0;"
                                    }
                                }),
                                new PD.Web.UI.Controls.GridColumn({
                                    field: "name",
                                    title: "Decision",
                                    width: "150px",
                                    template: (e) => {
                                        return this.generateLabel(e);
                                    }
                                }),
                                new PD.Web.UI.Controls.GridColumn({
                                    title: "Action",
                                    template: (e) => {
                                        return this.generateDescription(e);
                                    }
                                })
                            ]
                        });
                    }
                    grid_fill() {
                        this.m_grid.get_dataSource().data(this.selectedDecisions);
                        this.grid.redraw();
                    }
                    generateId(decision) {
                        let result = "";
                        this.selectedDecisions.forEach((item, index) => {
                            if (item.id === decision.id) {
                                let colors = this.colors.getColor(index);
                                result += `<div role="decision-id" style="border-color:${colors.dark};background-color:${colors.light};">${index += 1}</div>`;
                            }
                        });
                        return result;
                    }
                    generateLabel(decision) {
                        let result = "";
                        if (this.isActiveStage) {
                            result = `<div role="decision-action" data-id="${decision.id}">${decision.name}</div>`;
                        }
                        else {
                            result = `<div role="decision-label">${decision.name}</div>`;
                        }
                        return result;
                    }
                    generateDescription(decision, includeIcon = true) {
                        let result = "";
                        let hasTargetStage = decision.targetStage != null;
                        let hasTargetStatus = decision.targetStatus != null;
                        let isStageChanged = hasTargetStage &&
                            decision.targetStage.id != this.selectedStage.id;
                        let isStatusChanged = hasTargetStatus &&
                            decision.targetStatus.id != this.source.currentStatus.id;
                        if (isStageChanged) {
                            result += `Move to <b>${decision.targetStage.name}</b>`;
                        }
                        if (isStageChanged && isStatusChanged) {
                            result += " and ";
                        }
                        if (isStatusChanged) {
                            let iconPath = Jade.IconSet
                                .get("pd").resolve(decision.targetStatus.icon, Jade.IconSetSizeSpecificDirectory.x16);
                            result += `${!isStageChanged ? "S" : "s"}et to <b>${decision.targetStatus.name}</b>`;
                            result += includeIcon ? `<img src="${iconPath}" style="margin-left: 5px;vertical-align:text-bottom;"/>` : "";
                        }
                        result += !isStageChanged && !isStatusChanged ? "No change." : "";
                        return result;
                    }
                    setSelectedStage(stage) {
                        this.selectedStage = stage;
                        this.m_colors = new Process.ProcessColorPalette({
                            count: this.selectedDecisions.length
                        });
                        this.publishDecisionMapEvent();
                    }
                    publishDecisionMapEvent() {
                        let maps = [];
                        this.selectedDecisions.forEach((decision, index) => {
                            maps[maps.length] = {
                                stageId: decision.targetStage ? decision.targetStage.id : null,
                                color: this.colors.getColor(index),
                                index: index
                            };
                        });
                        this.eventBus.publish(Process.ProcessEvent.DecisionsMap, {
                            maps: maps
                        });
                    }
                    onStageSelect(e) {
                        this.setSelectedStage(e.stage);
                        this.grid_fill();
                    }
                    action_onClick(e) {
                        let decisionId = $(e.target).data("id");
                        let decision = this.grid.get_dataSource().get_instance().get(decisionId);
                        Jade.UI.MessageDialog.open({
                            dialogStyle: Jade.UI.MessageDialogStyle.Information,
                            dialogButtons: Jade.UI.MessageDialogButtonStyle.YesNo,
                            title: "Execute Decision",
                            message: `
                    Execute the decision:<br/><br/>
                    <div style="padding-left: 20px;">
                        <b style="font-size:16px">${decision.name}</b><br/><br/>
                    </div>
                    Take the following action:<br/><br/>
                    <div style="padding-left: 20px;">
                        ${this.generateDescription(decision, false)}
                    </div>`,
                            select: (e) => {
                                if (e.button === Jade.UI.MessageDialogButton.yes) {
                                    this.executeDecision(decision);
                                }
                                e.close();
                            }
                        });
                    }
                    executeDecision(decision) {
                        let service = new PDJS.Services.Process.ProcessService();
                        service.executeDecision({
                            decisionId: decision.id,
                            entityId: this.source.entityId,
                            success: (e) => {
                                switch (true) {
                                    case e.data.hasScriptErrors:
                                        this.showExecuteDecisionErrorsDialog(e.data.scriptErrors);
                                        break;
                                    case e.data.hasScriptAlerts:
                                        this.showExecuteDecisionSuccessDialog(e.data.scriptAlerts);
                                        break;
                                    default:
                                        window.location.reload();
                                        break;
                                }
                            }
                        });
                    }
                    showExecuteDecisionErrorsDialog(errors) {
                        Jade.UI.MultiMessageDialog.open({
                            dialogStyle: Jade.UI.MessageDialogStyle.Error,
                            dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                            title: "Decision Execution Errors",
                            header: "Decision execution failed due to the following errors:",
                            messages: errors, select: (e) => {
                                e.close();
                            }
                        });
                    }
                    showExecuteDecisionSuccessDialog(alerts) {
                        Jade.UI.MultiMessageDialog.open({
                            dialogStyle: Jade.UI.MessageDialogStyle.Success,
                            dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                            title: "Decision Execution Success",
                            header: "Decision execution succeeded with the following alerts:",
                            messages: alerts,
                            select: (e) => {
                                e.close();
                                window.location.reload();
                            }
                        });
                    }
                }
                Process.ProcessDecisionsList = ProcessDecisionsList;
            })(Process = Shared.Process || (Shared.Process = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Process;
            (function (Process) {
                class ProcessState extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                        this.m_source = options.source;
                        this.state.unset("source", { silent: true });
                    }
                    get source() {
                        return this.m_source;
                    }
                    template() {
                        return `<div></div>`;
                    }
                    load(source) {
                        this.controls.clear();
                        this.m_source = source;
                        this.controls.add(new Process.ProcessStateLayout({
                            source: this.source
                        }));
                    }
                }
                Process.ProcessState = ProcessState;
            })(Process = Shared.Process || (Shared.Process = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Process;
            (function (Process) {
                class ProcessStateLayout extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                        this.m_source = options.source;
                        this.state.unset("source", { silent: true });
                    }
                    get source() {
                        return this.m_source;
                    }
                    get showProcess() {
                        return this.source.showProcess &&
                            this.source.processName != null;
                    }
                    get showKey() {
                        return this.source.showKey &&
                            this.source.currentKey != null;
                    }
                    get showStage() {
                        return this.source.showStage &&
                            this.source.currentStage != null;
                    }
                    get showStatus() {
                        return this.source.showStatus &&
                            this.source.currentStatus != null;
                    }
                    get isHorizontalOrientation() {
                        return this.source.orientation ==
                            Canvas.Core.Process.ProcessStateOrientation.Horizontal;
                    }
                    get headNode() {
                        return this.node.find("div[role=head]");
                    }
                    get bodyNode() {
                        return this.node.find("div[role=body]");
                    }
                    template() {
                        return `<div>${this.isHorizontalOrientation ? `<div role="head"></div><div role="body"></div>` : ""}</div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        if (this.showProcess) {
                            this.addProcess();
                        }
                        if (this.showKey) {
                            this.addKey();
                        }
                        if (this.showStage) {
                            this.addStage();
                        }
                        if (this.showStatus) {
                            this.addStatus();
                        }
                        if (this.isHorizontalOrientation) {
                            this.headNode.css({
                                display: "flex",
                                flexDirection: "row",
                                alignContent: "space-evenly",
                                columnCount: this.source.displayedSectionCount,
                                flexBasis: 0
                            });
                            this.bodyNode.css({
                                display: "flex",
                                flexDirection: "row",
                                alignContent: "space-evenly",
                                columnCount: this.source.displayedSectionCount,
                                flexBasis: 0
                            });
                        }
                    }
                    getAttachment() {
                        let result = {
                            headNode: this.node,
                            bodyNode: this.node
                        };
                        if (this.isHorizontalOrientation) {
                            result = {
                                headNode: this.headNode,
                                bodyNode: this.bodyNode
                            };
                        }
                        return result;
                    }
                    addProcess() {
                        this.generateHeaderNode(`Process`);
                        this.generateContentNode(this.source.processName, "GEARS.PNG");
                    }
                    addKey() {
                        this.generateHeaderNode(`Key`);
                        this.generateContentNode(this.source.currentKey.name, this.source.currentKey.icon);
                    }
                    addStage() {
                        this.generateHeaderNode(`Stage`);
                        this.generateContentNode(this.source.currentStage.name, this.source.currentStage.icon);
                    }
                    addStatus() {
                        this.generateHeaderNode(`Status`);
                        this.generateContentNode(this.source.currentStatus.name, this.source.currentStatus.icon);
                    }
                    generateHeaderNode(text) {
                        let node = $(`<div role="header">${text}</div>`);
                        let target = this.getAttachment();
                        node.css({
                            height: this.source.itemHeight,
                            fontSize: `${this.source.fontSize}px`,
                            lineHeight: `1.10`,
                            padding: "5px",
                            width: this.isHorizontalOrientation ? "100%" : null,
                            textAlign: this.isHorizontalOrientation ? "center" : "left"
                        });
                        target.headNode.append(node);
                    }
                    generateContentNode(text, icon) {
                        let node = $(`<div role="content"></div>`);
                        let target = this.getAttachment();
                        node.css({
                            height: this.source.itemHeight,
                            fontSize: `${this.source.fontSize}px`,
                            lineHeight: `1.10`,
                            padding: "5px",
                            width: this.isHorizontalOrientation ? "100%" : null,
                            textAlign: this.isHorizontalOrientation ? "center" : "left"
                        });
                        if (icon) {
                            node.append(`<img src="${this.getIcon(icon)}" style="vertical-align:text-top;margin-right:5px;"/>`);
                        }
                        node.append(`<span>${text}</span>`);
                        target.bodyNode.append(node);
                    }
                    getIcon(icon) {
                        let result = null;
                        let iconSize = this.getIconSize();
                        if (icon != null) {
                            result = Jade.IconSet.get("pd").resolve(icon, iconSize);
                        }
                        return result;
                    }
                    getIconSize() {
                        let result = Jade.IconSetSizeSpecificDirectory.x16;
                        switch (true) {
                            case this.source.fontSize >= 48:
                                result = Jade.IconSetSizeSpecificDirectory.x48;
                                break;
                            case this.source.fontSize >= 32:
                                result = Jade.IconSetSizeSpecificDirectory.x32;
                                break;
                            case this.source.fontSize >= 24:
                                result = Jade.IconSetSizeSpecificDirectory.x24;
                                break;
                        }
                        return result;
                    }
                }
                Process.ProcessStateLayout = ProcessStateLayout;
            })(Process = Shared.Process || (Shared.Process = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Process;
            (function (Process) {
                let ProcessViewCss;
                (function (ProcessViewCss) {
                    ProcessViewCss["StageCurrent"] = "-pdjs-stage-current";
                    ProcessViewCss["StageVisited"] = "-pdjs-stage-visited";
                    ProcessViewCss["StageSelected"] = "-pdjs-stage-selected";
                    ProcessViewCss["KeyCurrent"] = "-pdjs-key-current";
                    ProcessViewCss["KeyVisited"] = "-pdjs-key-visited";
                })(ProcessViewCss = Process.ProcessViewCss || (Process.ProcessViewCss = {}));
                class ProcessView extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                        this.m_componentHeights = [];
                        this.m_source = options.source;
                        this.state.unset("source", { silent: true });
                    }
                    get eventBus() {
                        return Jade.Application.instance.contexts.current.events;
                    }
                    get source() {
                        return this.m_source;
                    }
                    get componentHeights() {
                        return this.m_componentHeights;
                    }
                    get gridNode() {
                        return this.node.find("div[role=grid]");
                    }
                    get styles() {
                        if (this.m_styles == null) {
                            this.m_styles = new PDJS.Shared.UI.StyleInjector({ id: this.ID });
                        }
                        return this.m_styles;
                    }
                    get keysComponent() {
                        return this.m_keysComponent;
                    }
                    get stagesComponent() {
                        return this.m_stagesComponent;
                    }
                    get clientHeight() {
                        return this.node.get(0).clientHeight;
                    }
                    get clientWidth() {
                        return this.node.get(0).clientWidth;
                    }
                    template() {
                        return `<div class="-pdjs-canvas-process-view">
                        <div role="grid" data-controls></div>
                    </div>`;
                    }
                    load(source) {
                        this.controls.clear();
                        this.m_source = source;
                        if (this.source.showKeys) {
                            this.keysComponent_init();
                        }
                        if (this.source.showStages) {
                            this.stagesComponent_init();
                        }
                        this.navigationComponent_init();
                        this.setSectionHeights();
                        this.addStyles();
                        this.setBorders();
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.subscriptions.add(Process.ProcessEvent.StageSelect, (e) => {
                            this.onStageSelect(e);
                        });
                    }
                    onDestroy(e) {
                        super.onDestroy(e);
                        this.styles.remove();
                    }
                    keysComponent_init() {
                        this.m_keysComponent = new Process.ProcessViewKeys({
                            eventBus: this.eventBus,
                            source: this.source
                        });
                        this.controls.add(this.m_keysComponent);
                    }
                    stagesComponent_init() {
                        this.m_stagesComponent = new Process.ProcessViewStageColumns({
                            eventBus: this.eventBus,
                            source: this.source
                        });
                        this.controls.add(this.m_stagesComponent);
                    }
                    navigationComponent_init() {
                        if (this.source.showStages) {
                            this.controls.add(new Process.ProcessViewNavigation({
                                source: this.source,
                                parentNode: this.m_stagesComponent.node,
                                offsetTop: this.source.keyHeight,
                                navigate: () => {
                                    this.m_keysComponent.node.scrollLeft(this.m_stagesComponent.node.scrollLeft());
                                    this.setBorders();
                                }
                            }));
                        }
                        else {
                            this.controls.add(new Process.ProcessViewNavigation({
                                source: this.source,
                                parentNode: this.m_keysComponent.node
                            }));
                        }
                    }
                    setSectionHeights() {
                        let heights = [];
                        if (this.source.showKeys) {
                            heights[heights.length] = `${this.source.keyHeight}px`;
                        }
                        if (this.source.showStages) {
                            heights[heights.length] = `1fr`;
                        }
                        this.gridNode.css({
                            gridTemplateRows: heights.join(" ")
                        });
                    }
                    addStyles() {
                        if (this.source.showVisitedKeys) {
                            this.styles.addStyle(`div[role=key].${ProcessViewCss.KeyVisited}`, {
                                backgroundColor: this.source.visitedKeyBackColor || "none",
                                borderWidth: `${this.source.visitedKeyBorderWidth}px`,
                                borderColor: this.source.visitedKeyBorderColor || "none",
                                color: this.source.visitedKeyForeColor || "#000000"
                            });
                        }
                        if (this.source.showCurrentKey) {
                            this.styles.addStyle(`div[role=key].${ProcessViewCss.KeyCurrent}`, {
                                backgroundColor: `${this.source.currentKeyBackColor || "none"} !important`,
                                borderWidth: `${this.source.currentKeyBorderWidth}px !important`,
                                borderColor: `${this.source.currentKeyBorderColor || "none"} !important`,
                                color: `${this.source.currentKeyForeColor || "#000000"} !important`
                            });
                        }
                        if (this.source.showVisitedStages) {
                            this.styles.addStyle(`div[role=stage].${ProcessViewCss.StageVisited}`, {
                                backgroundColor: this.source.visitedStageBackColor || "none",
                                borderWidth: `${this.source.visitedStageBorderWidth}px`,
                                borderColor: this.source.visitedStageBorderColor || "none",
                                color: this.source.visitedStageForeColor || "#000000"
                            });
                        }
                        if (this.source.showCurrentStage) {
                            this.styles.addStyle(`div[role=stage].${ProcessViewCss.StageCurrent}`, {
                                backgroundColor: this.source.currentStageBackColor || "none",
                                borderWidth: `${this.source.currentStageBorderWidth}px`,
                                borderColor: this.source.currentStageBorderColor || "none",
                                color: this.source.currentStageForeColor || "#000000"
                            });
                        }
                        this.styles.addStyle(`div[role=stage].${ProcessViewCss.StageSelected}`, {
                            backgroundColor: this.source.selectedStageBackColor || "none",
                            borderWidth: `${this.source.selectedStageBorderWidth}px`,
                            borderColor: this.source.selectedStageBorderColor || "none",
                            color: this.source.selectedStageForeColor || "#000000"
                        });
                        this.styles.inject();
                        this.node.addClass(this.styles.rootClass);
                    }
                    onStageSelect(e) {
                        this.gridNode
                            .find(`.${ProcessViewCss.StageSelected}`)
                            .removeClass(`${ProcessViewCss.StageSelected}`);
                    }
                    setBorders() {
                        this.setRightBorder();
                        this.setBottomBorder();
                    }
                    setRightBorder() {
                        let columnCount = this.source.keys.length;
                        let columnWidth = this.source.gridColumnWidth;
                        let scrollX = this.stagesComponent != null ?
                            this.stagesComponent.scrollPositionX :
                            this.keysComponent.scrollPositionX;
                        let showRightBorder = this.clientWidth > (columnCount * columnWidth) || (this.clientWidth % columnWidth) != 0;
                        this.node.css({
                            borderRight: showRightBorder ? "1px solid #CCCCCC" : "none"
                        });
                    }
                    setBottomBorder() {
                        let rowCount = this.source.rowCount;
                        let rowHeight = this.source.stageHeight;
                        let scrollY = this.stagesComponent != null ?
                            this.stagesComponent.scrollPositionY : 0;
                        let showBottomBorder = this.clientHeight > (rowCount * rowHeight) || (this.clientHeight % rowHeight) != 0;
                        this.node.css({
                            borderBottom: showBottomBorder ? "1px solid #CCCCCC" : null
                        });
                    }
                }
                Process.ProcessView = ProcessView;
            })(Process = Shared.Process || (Shared.Process = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Process;
            (function (Process) {
                class ProcessViewComponent extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get eventBus() {
                        return Jade.Application.instance.contexts.current.events;
                    }
                    get source() {
                        return this.m_source;
                    }
                    template() {
                        return `<div></div>`;
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.m_source = this.state.get("source");
                        this.state.unset("source", { silent: true });
                    }
                }
                Process.ProcessViewComponent = ProcessViewComponent;
            })(Process = Shared.Process || (Shared.Process = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Process;
            (function (Process) {
                class ProcessViewDecisionMap extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get map() {
                        return this.state.get("map");
                    }
                    get maps() {
                        return this.m_maps;
                    }
                    template() {
                        return `<div role="decision-map"></div>`;
                    }
                    addMap(map) {
                        if (map != null) {
                            this.maps[this.maps.length] = map;
                            this.build();
                        }
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_maps = [];
                        this.maps[this.maps.length] = this.map;
                        this.build();
                    }
                    onDestroy(e) {
                        super.onDestroy(e);
                        Tipped.remove(this.node);
                    }
                    build() {
                        this.maps.length === 1 ?
                            this.buildSingleView() : this.buildMultiView();
                    }
                    buildSingleView() {
                        let map = this.maps[0];
                        this.node.text(map.index + 1);
                        this.node.css({
                            borderColor: map.color.dark,
                            backgroundColor: map.color.light
                        });
                    }
                    buildMultiView() {
                        Tipped.remove(this.node);
                        let tooltipNode = $(`<div class="-pdjs-canvas-process-view-map-tooltip"></div>`);
                        this.node.text("++");
                        this.node.css({
                            borderColor: "#CCCCCC",
                            backgroundColor: "#EEEEEE"
                        });
                        this.maps.forEach(map => {
                            let mapNode = $(`<div role="decision-map">${map.index + 1}</div>`);
                            mapNode.css({
                                borderColor: map.color.dark,
                                backgroundColor: map.color.light
                            });
                            tooltipNode.append(mapNode);
                        });
                        Tipped.create(this.node, tooltipNode, {
                            skin: "white"
                        });
                    }
                }
                Process.ProcessViewDecisionMap = ProcessViewDecisionMap;
            })(Process = Shared.Process || (Shared.Process = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Process;
            (function (Process) {
                class ProcessViewKey extends Process.ProcessViewComponent {
                    constructor(options) {
                        super(options);
                    }
                    get keySource() {
                        return this.state.get("keySource");
                    }
                    get labelNode() {
                        return this.node.find("label");
                    }
                    template() {
                        return `<div role="key">
                        <div>
                            <img src="${Jade.IconSet.get("pd").resolve(this.keySource.icon, Jade.IconSetSizeSpecificDirectory.x48)}" />
                        </div>
                        <label>${this.keySource.name}</label>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.node.css({
                            height: `${this.source.keyHeight}px`
                        });
                        this.labelNode.css({
                            fontSize: `${this.source.keyFontSize}px`
                        });
                        if (this.source.showCurrentKey) {
                            this.enableCurrentCssClass(this.isKeyCurrent());
                        }
                        if (this.source.showVisitedKeys) {
                            this.enableVisitedCssClass(this.isKeyVisited());
                        }
                    }
                    enableCurrentCssClass(enabled) {
                        if (enabled) {
                            this.node.addClass(Process.ProcessViewCss.KeyCurrent);
                        }
                        else {
                            this.node.removeClass(Process.ProcessViewCss.KeyCurrent);
                        }
                    }
                    enableVisitedCssClass(enabled) {
                        if (enabled) {
                            this.node.addClass(Process.ProcessViewCss.KeyVisited);
                        }
                        else {
                            this.node.removeClass(Process.ProcessViewCss.KeyVisited);
                        }
                    }
                    isKeyVisited() {
                        return this.keySource.visited;
                    }
                    isKeyCurrent() {
                        let result = false;
                        if (this.source.currentStage != null) {
                            result = this.source.currentStage.keyId == this.keySource.id;
                        }
                        return result;
                    }
                }
                Process.ProcessViewKey = ProcessViewKey;
            })(Process = Shared.Process || (Shared.Process = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Process;
            (function (Process) {
                class ProcessViewKeys extends Process.ProcessViewComponent {
                    get scrollPositionX() {
                        return this.node.get(0).scrollLeft;
                    }
                    template() {
                        return `<div role="keys"></div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.createKeys();
                    }
                    createKeys() {
                        this.source.keys.forEach(key => {
                            this.controls.add(new Process.ProcessViewKey({
                                eventBus: this.eventBus,
                                keySource: key,
                                source: this.source
                            }));
                        });
                        this.node.css({
                            height: `${this.source.keyHeight}px`
                        });
                        this.node.append(`<div role="key-filler"></div>`);
                        this.setColumnWidths();
                    }
                    setColumnWidths() {
                        let widths = [];
                        let width = this.source.gridColumnWidth;
                        this.source.keys.forEach((key, index) => {
                            let isFirstOrLast = index == 0 || index == this.source.keys.length - 1;
                            let appliedWidth = isFirstOrLast ? width - 1 : width;
                            widths[widths.length] = `${width}px`;
                        });
                        widths[widths.length] = "1fr";
                        this.node.css({
                            gridTemplateColumns: widths.join(" ")
                        });
                    }
                }
                Process.ProcessViewKeys = ProcessViewKeys;
            })(Process = Shared.Process || (Shared.Process = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Process;
            (function (Process) {
                class ProcessViewNavigation extends Process.ProcessViewComponent {
                    constructor(options) {
                        super(options);
                    }
                    get parentNode() {
                        return this.state.get("parentNode");
                    }
                    get scrollHeight() {
                        return this.parentNode.get(0).scrollHeight;
                    }
                    get scrollWidth() {
                        return this.parentNode.get(0).scrollWidth;
                    }
                    get clientHeight() {
                        return this.parentNode.get(0).clientHeight;
                    }
                    get clientWidth() {
                        return this.parentNode.get(0).clientWidth;
                    }
                    get overflowedRight() {
                        return (this.scrollWidth - this.clientWidth) > 0;
                    }
                    get overflowedBottom() {
                        return (this.scrollHeight - this.clientHeight) > 0;
                    }
                    get scrollTop() {
                        return this.parentNode.get(0).scrollTop;
                    }
                    get scrollLeft() {
                        return this.parentNode.get(0).scrollLeft;
                    }
                    get canScrollTop() {
                        return this.vScroll &&
                            this.scrollTop > 0;
                    }
                    get canScrollRight() {
                        return this.hScroll &&
                            (this.scrollLeft + this.clientWidth) < this.scrollWidth - 1;
                    }
                    get canScrollBottom() {
                        return this.vScroll &&
                            (this.scrollTop + this.clientHeight) < this.scrollHeight - 1;
                    }
                    get canScrollLeft() {
                        return this.hScroll &&
                            this.scrollLeft > 0;
                    }
                    get topNode() {
                        return this.node.find("img[role=top]");
                    }
                    get bottomNode() {
                        return this.node.find("img[role=bottom]");
                    }
                    get rightNode() {
                        return this.node.find("img[role=right]");
                    }
                    get leftNode() {
                        return this.node.find("img[role=left]");
                    }
                    get hScroll() {
                        return this.state.get("hScroll", true);
                    }
                    get vScroll() {
                        return this.state.get("vScroll", true);
                    }
                    get shiftWidth() {
                        return this.source.gridColumnWidth;
                    }
                    get shiftHeight() {
                        return this.source.stageHeight;
                    }
                    get navNodes() {
                        return this.node.find("img");
                    }
                    get offsetTop() {
                        return this.state.get("offsetTop", 0);
                    }
                    get navigateCallback() {
                        return this.state.get("navigate", () => { });
                    }
                    template() {
                        return `<div class="-pdjs-canvas-process-view-nav">
                        <div style="top:${this.offsetTop}px;">
                            <img role="top" src="${Jade.IconSet.get("pdjs").resolve("nav_up.png", Jade.IconSetSizeSpecificDirectory.x24)}"/>     
                        </div>
                        <div style="top:${this.offsetTop}px;">
                            <img role="right" src="${Jade.IconSet.get("pdjs").resolve("nav_right.png", Jade.IconSetSizeSpecificDirectory.x24)}"/>
                        </div>
                        <div>
                            <img role="bottom" src="${Jade.IconSet.get("pdjs").resolve("nav_down.png", Jade.IconSetSizeSpecificDirectory.x24)}"/>
                        </div>
                        <div style="top:${this.offsetTop}px;">
                            <img role="left" src="${Jade.IconSet.get("pdjs").resolve("nav_left.png", Jade.IconSetSizeSpecificDirectory.x24)}"/>
                        </div>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.navNodes.on(Jade.BrowserEvent.MOUSEENTER, _.bind(this.showNavNodes, this));
                        this.navNodes.on(Jade.BrowserEvent.MOUSELEAVE, _.bind(this.hideNavNodes, this));
                        this.parentNode.on(Jade.BrowserEvent.MOUSEENTER, _.bind(this.showNavNodes, this));
                        this.parentNode.on(Jade.BrowserEvent.MOUSELEAVE, _.bind(this.hideNavNodes, this));
                        this.topNode.on(Jade.BrowserEvent.CLICK, _.bind(this.navTopNode_onClick, this));
                        this.rightNode.on(Jade.BrowserEvent.CLICK, _.bind(this.navRightNode_onClick, this));
                        this.bottomNode.on(Jade.BrowserEvent.CLICK, _.bind(this.navBottomNode_onClick, this));
                        this.leftNode.on(Jade.BrowserEvent.CLICK, _.bind(this.navLeftNode_onClick, this));
                        this.showNavNodes();
                    }
                    showNavNodes() {
                        this.canScrollBottom ? this.bottomNode.show() : this.bottomNode.hide();
                        this.canScrollLeft ? this.leftNode.show() : this.leftNode.hide();
                        this.canScrollRight ? this.rightNode.show() : this.rightNode.hide();
                        this.canScrollTop ? this.topNode.show() : this.topNode.hide();
                    }
                    hideNavNodes() {
                        this.bottomNode.hide();
                        this.leftNode.hide();
                        this.rightNode.hide();
                        this.topNode.hide();
                    }
                    navTopNode_onClick(e) {
                        if (this.canScrollTop) {
                            this.parentNode.scrollTop(this.scrollTop - this.shiftHeight);
                            this.showNavNodes();
                            this.navigateCallback();
                        }
                    }
                    navRightNode_onClick(e) {
                        if (this.canScrollRight) {
                            this.parentNode.scrollLeft(this.scrollLeft + this.shiftWidth);
                            this.showNavNodes();
                            this.navigateCallback();
                        }
                    }
                    navBottomNode_onClick(e) {
                        if (this.canScrollBottom) {
                            this.parentNode.scrollTop(this.scrollTop + this.shiftHeight);
                            this.showNavNodes();
                            this.navigateCallback();
                        }
                    }
                    navLeftNode_onClick(e) {
                        if (this.canScrollLeft) {
                            this.parentNode.scrollLeft(this.scrollLeft - this.shiftWidth);
                            this.showNavNodes();
                            this.navigateCallback();
                        }
                    }
                }
                Process.ProcessViewNavigation = ProcessViewNavigation;
            })(Process = Shared.Process || (Shared.Process = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Process;
            (function (Process) {
                class ProcessViewStage extends Process.ProcessViewComponent {
                    constructor(options) {
                        super(options);
                    }
                    get stageSource() {
                        return this.state.get("stageSource");
                    }
                    get labelNode() {
                        return this.node.find("label");
                    }
                    get map() {
                        return this.controls.getByType(Process.ProcessViewDecisionMap).first();
                    }
                    template() {
                        return `<div role="stage" style="position:relative;">
                        <label>${this.stageSource.name}</label>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        let isCurrentStage = this.stageSource.id == this.source.currentStage.id;
                        let isVisitedStage = this.stageSource.visited;
                        if (this.source.showCurrentStage) {
                            this.enableCurrentCssClass(isCurrentStage);
                        }
                        if (this.source.showVisitedStages) {
                            this.enableVisitedCssClass(isVisitedStage);
                        }
                        this.labelNode.css({
                            fontSize: `${this.source.stageFontSize}px`
                        });
                        this.node.on(Jade.BrowserEvent.CLICK, () => {
                            this.eventBus.publish(Process.ProcessEvent.StageSelect, {
                                stage: this.stageSource,
                            });
                        });
                        this.subscriptions.add(Process.ProcessEvent.DecisionsMap, (e) => {
                            this.onDecisionsMap(e);
                        });
                        this.subscriptions.add(Process.ProcessEvent.StageSelect, (e) => {
                            this.onStageSelect(e);
                        });
                    }
                    enableCurrentCssClass(enabled) {
                        if (enabled) {
                            this.node.addClass("-pdjs-stage-current");
                        }
                    }
                    enableSelectedCssClass(enabled) {
                        if (enabled) {
                            this.node.addClass("-pdjs-stage-selected");
                        }
                    }
                    enableVisitedCssClass(enabled) {
                        if (enabled) {
                            this.node.addClass("-pdjs-stage-visited");
                        }
                    }
                    onStageSelect(e) {
                        this.enableSelectedCssClass(this.stageSource.id == e.stage.id);
                    }
                    onDecisionsMap(e) {
                        let filteredMaps = e.maps.filter(map => {
                            return map.stageId == this.stageSource.id;
                        });
                        if (this.map != null) {
                            this.controls.remove(this.map);
                        }
                        filteredMaps.forEach(map => {
                            if (this.map == null) {
                                this.controls.add(new Process.ProcessViewDecisionMap({
                                    map: map
                                }));
                            }
                            else {
                                this.map.addMap(map);
                            }
                        });
                    }
                }
                Process.ProcessViewStage = ProcessViewStage;
            })(Process = Shared.Process || (Shared.Process = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Process;
            (function (Process) {
                class ProcesViewStageColumn extends Process.ProcessViewComponent {
                    constructor(options) {
                        super(options);
                    }
                    get keySource() {
                        return this.state.get("keySource");
                    }
                    get stages() {
                        return this.controls.getByType(Process.ProcessViewStage);
                    }
                    get isFirstOrLast() {
                        return this.state.get("isFirstOrLast");
                    }
                    template() {
                        return `<div role="stage-column" key-id="${this.keySource.id}"></div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        let appliedWidth = this.isFirstOrLast ?
                            this.source.gridColumnWidth - 1 : this.source.gridColumnWidth;
                        this.generateStages();
                        this.calculateStageCounts();
                        this.node.css({
                            width: `${this.source.gridColumnWidth}px`,
                            minWidth: `${this.source.gridColumnWidth}px`,
                            minHeight: `${this.source.stageHeight * this.m_maxStageCount}px`,
                            gridTemplateRows: this.generateGridTemplateRowsStyle()
                        });
                    }
                    generateStages() {
                        this.m_stageCount = 0;
                        this.source.stages.forEach(stage => {
                            if (this.keySource.id === stage.keyId) {
                                this.controls.add(new Process.ProcessViewStage({
                                    eventBus: this.eventBus,
                                    stageSource: stage,
                                    source: this.source
                                }));
                                this.m_stageCount += 1;
                            }
                        });
                        this.node.append(`<div role="stage-filler"></div>`);
                    }
                    calculateStageCounts() {
                        this.m_maxStageCount = 0;
                        let keys = {};
                        this.source.stages.forEach(stage => {
                            let array = null;
                            if (keys[stage.keyId] === undefined) {
                                array = keys[stage.keyId] = [];
                            }
                            array = keys[stage.keyId];
                            array[array.length] = stage.id;
                        });
                        Object.keys(keys).forEach(key => {
                            if (keys[key].length > this.m_maxStageCount) {
                                this.m_maxStageCount = keys[key].length;
                            }
                        });
                    }
                    generateGridTemplateRowsStyle() {
                        let values = [];
                        let height = this.source.stageHeight;
                        for (let i = 0; i < this.m_stageCount; i++) {
                            let isFirstOrLast = i == 0 || i == this.m_stageCount - 1;
                            let appliedHeight = isFirstOrLast ? height - 1 : height;
                            values[i] = `${height}px`;
                        }
                        return `${values.join(" ")} 1fr`;
                    }
                }
                Process.ProcesViewStageColumn = ProcesViewStageColumn;
            })(Process = Shared.Process || (Shared.Process = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Process;
            (function (Process) {
                class ProcessViewStageColumns extends Process.ProcessViewComponent {
                    get scrollPositionX() {
                        return this.node.get(0).scrollLeft;
                    }
                    get scrollPositionY() {
                        return this.node.get(0).scrollTop;
                    }
                    template() {
                        return `<div role="stages"></div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.columns_init();
                    }
                    columns_init() {
                        this.source.keys.forEach((key, index) => {
                            this.controls.add(new Process.ProcesViewStageColumn({
                                source: this.source,
                                keySource: key,
                                eventBus: this.eventBus
                            }));
                        });
                        this.node.append(`<div role="stage-column-filler"></div>`);
                        this.setColumnWidths();
                    }
                    setColumnWidths() {
                        let widths = [];
                        let width = this.source.gridColumnWidth;
                        this.source.keys.forEach((key, index) => {
                            let isFirstOrLast = index == 0 || index == this.source.keys.length - 1;
                            let appliedWidth = isFirstOrLast ? width - 1 : width;
                            widths[widths.length] = `${width}px`;
                        });
                        widths[widths.length] = "1fr";
                        this.node.css({
                            gridTemplateColumns: widths.join(" ")
                        });
                    }
                }
                Process.ProcessViewStageColumns = ProcessViewStageColumns;
            })(Process = Shared.Process || (Shared.Process = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Shapes;
            (function (Shapes) {
                class Shape extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get nodeHeight() {
                        return this.node.outerHeight(true);
                    }
                    get nodeWidth() {
                        return this.node.outerWidth(true);
                    }
                    get backgroundColor() {
                        return this.state.get("backgroundColor");
                    }
                    set backgroundColor(value) {
                        this.state.set("backgroundColor", value);
                    }
                    get borderColor() {
                        return this.state.get("borderColor");
                    }
                    set borderColor(value) {
                        this.state.set("borderColor", value);
                    }
                    get borderStyle() {
                        return this.state.get("borderStyle");
                    }
                    set borderStyle(value) {
                        this.state.set("borderStyle", value);
                    }
                    get borderWidth() {
                        return this.state.get("borderWidth");
                    }
                    set borderWidth(value) {
                        this.state.set("borderWidth", value);
                    }
                    template() {
                        return `<div role="shape" style="position:absolute;top:0;left:0;right:0;bottom:0;"></div>`;
                    }
                }
                Shapes.Shape = Shape;
            })(Shapes = Shared.Shapes || (Shared.Shapes = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Shapes;
            (function (Shapes) {
                class Ellipse extends Shapes.Shape {
                    constructor(options) {
                        super(options);
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.node.css({
                            borderRadius: "50%",
                            backgroundColor: this.backgroundColor,
                            borderColor: this.borderColor,
                            borderWidth: this.borderWidth,
                            borderStyle: this.borderStyle
                        });
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.node.css({
                            borderRadius: "50%",
                            backgroundColor: this.backgroundColor,
                            borderColor: this.borderColor,
                            borderWidth: this.borderWidth,
                            borderStyle: this.borderStyle
                        });
                    }
                }
                Shapes.Ellipse = Ellipse;
            })(Shapes = Shared.Shapes || (Shared.Shapes = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Shapes;
            (function (Shapes) {
                class LinePaths {
                    static line(l) {
                        let left = 0;
                        let right = l.width;
                        let top = (l.height - l.lineWeight) / 2;
                        let bottom = ((l.height - l.lineWeight) / 2) + l.lineWeight;
                        switch (l.startCapShape) {
                            case Canvas.Core.Shapes.LineCapShape.circle:
                                left = l.startCapWidth / 2;
                                break;
                            case Canvas.Core.Shapes.LineCapShape.triangle:
                                left = l.startCapWidth;
                        }
                        switch (l.endCapShape) {
                            case Canvas.Core.Shapes.LineCapShape.circle:
                                right = l.width - (l.endCapWidth / 2);
                                break;
                            case Canvas.Core.Shapes.LineCapShape.triangle:
                                right = l.width - l.endCapWidth;
                        }
                        return `M ${left},${top} L${right},${top} L${right},${bottom} L${left},${bottom} Z`;
                    }
                    static startCap(l) {
                        let result = "";
                        switch (l.startCapShape) {
                            case Canvas.Core.Shapes.LineCapShape.circle:
                                result = this.startCapCircle(l);
                                break;
                            case Canvas.Core.Shapes.LineCapShape.square:
                                result = this.startCapSquare(l);
                                break;
                            case Canvas.Core.Shapes.LineCapShape.triangle:
                                result = this.startCapTriangle(l);
                                break;
                        }
                        return result;
                    }
                    static endCap(l) {
                        let result = "";
                        switch (l.endCapShape) {
                            case Canvas.Core.Shapes.LineCapShape.circle:
                                result = this.endCapCircle(l);
                                break;
                            case Canvas.Core.Shapes.LineCapShape.square:
                                result = this.endCapSquare(l);
                                break;
                            case Canvas.Core.Shapes.LineCapShape.triangle:
                                result = this.endCapTriangle(l);
                                break;
                        }
                        return result;
                    }
                    static endCapTriangle(l) {
                        let x1 = (l.width - l.endCapWidth);
                        let y1 = (l.height - l.endCapHeight) / 2;
                        let x2 = l.width;
                        let y2 = (l.height / 2);
                        let x3 = (l.width - l.endCapWidth);
                        let y3 = ((l.height - l.endCapHeight) / 2) + l.endCapHeight;
                        return `M ${x1},${y1} L${x2},${y2} L${x3},${y3} Z`;
                    }
                    static startCapTriangle(l) {
                        let x1 = 0;
                        let y1 = (l.height / 2);
                        let x2 = l.startCapWidth;
                        let y2 = (l.height - l.startCapHeight) / 2;
                        let x3 = l.startCapWidth;
                        let y3 = ((l.height - l.startCapHeight) / 2) + l.startCapHeight;
                        return `M ${x1},${y1} L${x2},${y2} L${x3},${y3} Z`;
                    }
                    static endCapCircle(l) {
                        let xAxis = l.width - l.endCapWidth;
                        let yAxis = l.height / 2;
                        let xRadius = l.endCapWidth / 2;
                        let yRadius = l.endCapHeight / 2;
                        let height = l.endCapHeight;
                        let width = l.endCapWidth;
                        return `M ${xAxis}, ${yAxis} 
                    a ${xRadius},${yRadius} 0 1,0 ${width}, 0
                    a ${xRadius},${yRadius} 0 1,0 -${width},0 Z`;
                    }
                    static startCapCircle(l) {
                        let xAxis = 0;
                        let yAxis = l.height / 2;
                        let xRadius = l.startCapWidth / 2;
                        let yRadius = l.startCapHeight / 2;
                        let height = l.startCapHeight;
                        let width = l.startCapWidth;
                        return `M ${xAxis}, ${yAxis} 
                    a ${xRadius},${yRadius} 0 1,0 ${width}, 0
                    a ${xRadius},${yRadius} 0 1,0 -${width},0 Z`;
                    }
                    static endCapSquare(l) {
                        let x1 = (l.width - l.endCapWidth);
                        let y1 = (l.height - l.endCapHeight) / 2;
                        let x2 = l.width;
                        let y2 = (l.height / 2);
                        let x3 = (l.width - l.endCapWidth);
                        let y3 = ((l.height - l.endCapHeight) / 2) + l.endCapHeight;
                        return `M ${x1},${y1} L${x2},${y2} L${x3},${y3} Z`;
                    }
                    static startCapSquare(l) {
                        let topY = ((l.height - l.startCapHeight) / 2);
                        let bottomY = ((l.height - l.startCapHeight) / 2) + l.startCapHeight;
                        let x1 = 0;
                        let y1 = topY;
                        let x2 = l.endCapWidth;
                        let y2 = topY;
                        let x3 = l.endCapWidth;
                        let y3 = bottomY;
                        let x4 = 0;
                        let y4 = bottomY;
                        return `M ${x1},${y1} L${x2},${y2} L${x3},${y3} L${x4},${y4} Z`;
                    }
                }
                Shapes.LinePaths = LinePaths;
                class Line extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get height() {
                        return this.node.outerHeight(true);
                    }
                    get width() {
                        return this.node.outerWidth(true);
                    }
                    get lineColor() {
                        return this.state.get("lineColor");
                    }
                    set lineColor(value) {
                        this.state.set("lineColor", value);
                    }
                    get startCapShape() {
                        return this.state.get("startCapShape");
                    }
                    set startCapShape(value) {
                        this.state.set("startCapShape", value);
                    }
                    get startCapHeight() {
                        return this.state.get("startCapHeight");
                    }
                    set startCapHeight(value) {
                        this.state.set("startCapHeight", value);
                    }
                    get startCapWidth() {
                        return this.state.get("startCapWidth");
                    }
                    set startCapWidth(value) {
                        this.state.set("startCapWidth", value);
                    }
                    get startCapColor() {
                        return this.state.get("startCapColor");
                    }
                    set startCapColor(value) {
                        this.state.set("startCapColor", value);
                    }
                    get endCapShape() {
                        return this.state.get("endCapShape");
                    }
                    set endCapShape(value) {
                        this.state.set("endCapShape", value);
                    }
                    get endCapHeight() {
                        return this.state.get("endCapHeight");
                    }
                    set endCapHeight(value) {
                        this.state.set("endCapHeight", value);
                    }
                    get endCapWidth() {
                        return this.state.get("endCapWidth");
                    }
                    set endCapWidth(value) {
                        this.state.set("endCapWidth", value);
                    }
                    get endCapColor() {
                        return this.state.get("endCapColor");
                    }
                    set endCapColor(value) {
                        this.state.set("endCapColor", value);
                    }
                    get lineWeight() {
                        return this.state.get("lineWeight");
                    }
                    set lineWeight(value) {
                        this.state.set("lineWeight", value);
                    }
                    template() {
                        return `<div role="shape" style="position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;"></div>`;
                    }
                    redraw() {
                        if (this.node == null) {
                            return;
                        }
                        let line = this.node.find(`svg defs path[id=line${this.ID}]`);
                        let startCap = this.node.find(`svg defs path[id=startCap${this.ID}]`);
                        let endCap = this.node.find(`svg defs path[id=endCap${this.ID}]`);
                        let useLine = this.node.find("svg g use[data-id=line]");
                        let useStartCap = this.node.find("svg g use[data-id=startCap]");
                        let useEndCap = this.node.find("svg g use[data-id=endCap]");
                        let svg = this.node.find("svg");
                        useLine.attr("fill", this.lineColor);
                        useStartCap.attr("fill", this.startCapColor);
                        useEndCap.attr("fill", this.endCapColor);
                        svg.attr("height", this.height);
                        svg.attr("width", this.width);
                        line.attr("d", LinePaths.line(this));
                        startCap.attr("d", LinePaths.startCap(this));
                        endCap.attr("d", LinePaths.endCap(this));
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.node.empty();
                        this.node.append(this.content());
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.redraw();
                    }
                    content() {
                        return `
                <svg width="${this.width}" height="${this.height}">
	                <defs>
		                <path
			                id="line${this.ID}"
			                d="${LinePaths.line(this)}"/>
                        <path
			                id="startCap${this.ID}"
			                d="${LinePaths.startCap(this)}"/>
                        <path
			                id="endCap${this.ID}"
			                d="${LinePaths.endCap(this)}"/>
	                </defs>
	                <g>
		                <use
			                xlink:href="#line${this.ID}"
			                fill="${this.lineColor}" 
                            data-id="line" />
                        <use
			                xlink:href="#startCap${this.ID}"
			                fill="${this.startCapColor}" 
                            data-id="startCap" />
                        <use
			                xlink:href="#endCap${this.ID}"
			                fill="${this.endCapColor}" 
                            data-id="endCap" />
	                </g>
                </svg>
            `;
                    }
                }
                Shapes.Line = Line;
            })(Shapes = Shared.Shapes || (Shared.Shapes = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Shapes;
            (function (Shapes) {
                class Rectangle extends Shapes.Shape {
                    constructor(options) {
                        super(options);
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.node.css({
                            backgroundColor: this.backgroundColor,
                            borderColor: this.borderColor,
                            borderWidth: this.borderWidth,
                            borderStyle: this.borderStyle
                        });
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.node.css({
                            backgroundColor: this.backgroundColor,
                            borderColor: this.borderColor,
                            borderWidth: this.borderWidth,
                            borderStyle: this.borderStyle
                        });
                    }
                }
                Shapes.Rectangle = Rectangle;
            })(Shapes = Shared.Shapes || (Shared.Shapes = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Shapes;
            (function (Shapes) {
                class Triangle extends Shapes.Shape {
                    constructor(options) {
                        super(options);
                    }
                    get svgID() {
                        return `SVG-${this.ID}`;
                    }
                    get height() {
                        return this.state.get("height");
                    }
                    set height(value) {
                        this.state.set("height", value);
                    }
                    get width() {
                        return this.state.get("width");
                    }
                    set width(value) {
                        this.state.set("width", value);
                    }
                    get rotation() {
                        return this.state.get("rotation", Canvas.Core.Shapes.TriangleRotation.rotate0);
                    }
                    set rotation(value) {
                        this.state.set("rotation", value);
                    }
                    redraw() {
                        if (this.node == null) {
                            return;
                        }
                        let path = this.node.find("svg defs path");
                        let use = this.node.find("svg g use");
                        let svg = this.node.find("svg");
                        use.attr("stroke", this.borderColor);
                        use.attr("stroke-width", this.strokeWidth());
                        use.attr("stroke-dasharray", this.strokeStyle());
                        use.attr("fill", this.backgroundColor);
                        svg.attr("height", this.height);
                        svg.attr("width", this.width);
                        path.attr("d", this.getShapePath());
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.node.empty();
                        this.node.append(this.content());
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.redraw();
                    }
                    getDefaultOptions() {
                        return {
                            rotation: Canvas.Core.Shapes.TriangleRotation.rotate0
                        };
                    }
                    getShapePath() {
                        return "";
                    }
                    content() {
                        return `<svg width="${this.width}" height="${this.height}">
                        <defs>
	                        <path
                                id="${this.svgID}" 
                                d="${this.getShapePath()}"/>
                            <clipPath
                                id="clip${this.svgID}">
		                        <use
                                    xlink:href="#${this.svgID}"/>
	                        </clipPath>
                        </defs>
                        <g>
	                        <use
                                xlink:href="#${this.svgID}" 
                                stroke="${this.borderColor}" 
                                stroke-width="${this.borderWidth * 2}" 
                                fill="${this.backgroundColor}" 
                                clip-path="url(#clip${this.svgID})"/>
                        </g>
                    </svg>`;
                    }
                    strokeWidth() {
                        let result = 0;
                        if (this.borderStyle == "none") {
                            result = 0;
                        }
                        else {
                            result = parseInt(this.borderWidth.toString()) * 2;
                        }
                        return result;
                    }
                    strokeStyle() {
                        let result = "";
                        switch (this.borderStyle) {
                            case "dashed":
                                result = "11 6";
                                break;
                            case "dotted":
                                result = "5 5";
                                break;
                        }
                        return result;
                    }
                }
                Shapes.Triangle = Triangle;
            })(Shapes = Shared.Shapes || (Shared.Shapes = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Shapes;
            (function (Shapes) {
                class IsoscelesTriangle extends Shapes.Triangle {
                    constructor(options) {
                        super(options);
                    }
                    getShapePath() {
                        let result = null;
                        let height = this.nodeHeight;
                        let width = this.nodeWidth;
                        switch (this.rotation) {
                            case Canvas.Core.Shapes.TriangleRotation.rotate0:
                                result = `M ${width / 2},0 L 0,${height} L ${width},${height} Z`;
                                break;
                            case Canvas.Core.Shapes.TriangleRotation.rotate90:
                                result = `M 0,0 L ${width},${height / 2} L 0,${height} Z`;
                                break;
                            case Canvas.Core.Shapes.TriangleRotation.rotate180:
                                result = `M 0,0 L ${width},0 L ${width / 2},${height} Z`;
                                break;
                            case Canvas.Core.Shapes.TriangleRotation.rotate270:
                                result = `M 0,${height / 2} L ${width},0 L ${width},${height} Z`;
                                break;
                        }
                        return result;
                    }
                }
                Shapes.IsoscelesTriangle = IsoscelesTriangle;
            })(Shapes = Shared.Shapes || (Shared.Shapes = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Shapes;
            (function (Shapes) {
                class RightTriangle extends Shapes.Triangle {
                    constructor(options) {
                        super(options);
                    }
                    getShapePath() {
                        let result = "";
                        let height = this.nodeHeight;
                        let width = this.nodeWidth;
                        switch (this.rotation) {
                            case Canvas.Core.Shapes.TriangleRotation.rotate0:
                                result = `M 0,0 L${width},0 L${width},${height} Z`;
                                break;
                            case Canvas.Core.Shapes.TriangleRotation.rotate90:
                                result = `M ${width},0 L${width},${height} L0,${height} Z`;
                                break;
                            case Canvas.Core.Shapes.TriangleRotation.rotate180:
                                result = `M 0,0 L${width},${height} L0,${height} Z`;
                                break;
                            case Canvas.Core.Shapes.TriangleRotation.rotate270:
                                result = `M 0,0 L${width},0 L0,${height} Z`;
                                break;
                        }
                        return result;
                    }
                }
                Shapes.RightTriangle = RightTriangle;
            })(Shapes = Shared.Shapes || (Shared.Shapes = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Views;
            (function (Views) {
                class ViewCommandBase extends Jade.Command {
                    get view() {
                        return CanvasJS.Design.Environment.selection.first();
                    }
                    get component() {
                        return this.view;
                    }
                    get viewStateId() {
                        return this.component.viewStateId;
                    }
                    hasGrid() {
                        return Jade.InterfaceGuard.is(this.view, Views.IViewComponentGuard);
                    }
                    get grid() {
                        return this.view.grid;
                    }
                    getDefaultValuesForProps() {
                        return {
                            enabled: true,
                            display: "label icon",
                            iconSetId: "pdjs"
                        };
                    }
                    onStateChanged(e) {
                        this.enabled = CanvasJS.Design.Environment.selection.count == 1
                            && Jade.InterfaceGuard.is(this.view, Views.IViewComponentGuard);
                    }
                    createContext() {
                        this.m_context = Jade.Application.instance.contexts.createContext({
                            name: "view-filters",
                            makeDefault: true
                        });
                    }
                    destroyContext() {
                        if (this.m_context != null) {
                            Jade.Application.instance.contexts.destroyContext({
                                id: this.m_context.ID
                            });
                        }
                    }
                }
                Views.ViewCommandBase = ViewCommandBase;
            })(Views = Shared.Views || (Shared.Views = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Views;
            (function (Views) {
                class ViewDesignerCommand extends Views.ViewCommandBase {
                    getDefaultValuesForProps() {
                        return _.extend(super.getDefaultValuesForProps(), {
                            id: "view/designer",
                            label: "Designer",
                            icon: "pencil_and_square.png"
                        });
                    }
                    onStateChanged(e) {
                        super.onStateChanged(e);
                        this.visible = this.enabled;
                    }
                    onExecute(e) {
                        Views.ViewDesignerDialog.open({
                            viewStateId: this.viewStateId,
                            callbacks: {
                                ok: (sender) => {
                                    sender.destroyContext();
                                    if (this.grid != null) {
                                        this.grid.build();
                                    }
                                },
                                cancel: (sender) => {
                                    sender.destroyContext();
                                }
                            }
                        });
                    }
                }
                Views.ViewDesignerCommand = ViewDesignerCommand;
            })(Views = Shared.Views || (Shared.Views = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Canvas;
    (function (Canvas) {
        var Shared;
        (function (Shared) {
            var Views;
            (function (Views) {
                class ViewDesignerDialog extends Jade.UI.Dialog {
                    constructor(options) {
                        super(options);
                    }
                    get grid() {
                        return this.m_grid;
                    }
                    get gridNode() {
                        return this.node.find("div[role=grid]");
                    }
                    get toolbarNode() {
                        return this.node.find("div[role=toolbar]");
                    }
                    get cancelButton() {
                        return this.node.find("button[data-command=cancel]");
                    }
                    get okButton() {
                        return this.node.find("button[data-command=ok]");
                    }
                    get viewStateId() {
                        return this.state.get("viewStateId");
                    }
                    template() {
                        return `<div style="position:absolute;top:10px;right:10px;bottom:10px;left:10px;">
                        <div role="toolbar" style='position:absolute;height:30px;top:0;left:0;right:0;border-width:0px;overflow:hidden;'></div>
                        <div role="grid" style="position:absolute;top:40px;right:0;bottom:36px;left:0;border: 1px solid #CCCCCC;">
                        </div>
                        <div style="position:absolute;height:26px;bottom:0;left:0;right:0;text-align:right;">
                            <button data-command="ok" class="-jadejs-button">OK</button>
                            <button data-command="cancel" class="-jadejs-button">Cancel</button>
                        </div>
                    </div>`;
                    }
                    static open(options) {
                        return new ViewDesignerDialog(options);
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.cancelButton.on(Jade.BrowserEvent.CLICK, _.bind(this.cancelButton_onClick, this));
                        this.okButton.on(Jade.BrowserEvent.CLICK, _.bind(this.okButton_onClick, this));
                        this.grid_init();
                        this.toolbar_init();
                        this.m_service =
                            new PDJS.Services.Views.ViewService();
                        this.m_service.getViewState({
                            viewStateId: this.viewStateId,
                            success: (e) => {
                                this.m_viewState = e.data.state;
                            }
                        });
                    }
                    getWindowOptions() {
                        return {
                            title: "View Designer",
                            height: 600,
                            width: 800
                        };
                    }
                    okButton_onClick(e) {
                        this.close({
                            command: "ok"
                        });
                    }
                    cancelButton_onClick(e) {
                        if (this.m_viewState == null) {
                            this.close();
                            return;
                        }
                        this.m_service.setViewState({
                            viewStateId: this.viewStateId,
                            state: this.m_viewState,
                            success: (e) => {
                                this.close();
                            }
                        });
                    }
                    grid_init() {
                        this.m_grid = new PD.Web.UI.Controls.ViewGrid({
                            container: this.gridNode,
                            height: "100%",
                            viewStateId: this.viewStateId,
                            defaultSelectionEnabled: false,
                            ready: () => {
                                this.toolbar_init();
                            }
                        });
                    }
                    toolbar_init() {
                        this.m_toolbar = new PDJS.JS.PD.Web.UI.Controls.Toolbar({
                            container: this.toolbarNode,
                            segments: [
                                new PDJS.JS.PD.Manage.Modules.ViewDesignToolbar(() => {
                                    return {
                                        viewGrid: this.grid
                                    };
                                })
                            ]
                        });
                    }
                }
                Views.ViewDesignerDialog = ViewDesignerDialog;
            })(Views = Shared.Views || (Shared.Views = {}));
        })(Shared = Canvas.Shared || (Canvas.Shared = {}));
    })(Canvas = PDJS.Canvas || (PDJS.Canvas = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Core;
    (function (Core) {
        class Model {
            constructor(state) {
                this.m_state = new Jade.StateBag();
                this.state.on("change", () => {
                    this.onStateChanged();
                    this.onStateChangeCallback();
                });
                this.state.set(state, { silent: true });
            }
            get onStateChangeCallback() {
                if (_.isFunction(this.m_onStateChangeCallback)) {
                    return this.m_onStateChangeCallback;
                }
                else {
                    return () => { };
                }
                ;
            }
            set onStateChangeCallback(value) {
                if (_.isFunction(value)) {
                    this.m_onStateChangeCallback = value;
                }
            }
            get state() {
                return this.m_state;
            }
            toJSON() {
                return this.state.toJSON();
            }
            has(name) {
                return this[name] != undefined;
            }
            onStateChanged() {
            }
        }
        Core.Model = Model;
    })(Core = PDJS.Core || (PDJS.Core = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Core;
    (function (Core) {
        var Files;
        (function (Files) {
            class File extends Core.Model {
                get id() {
                    return this.state.get("id");
                }
                set id(value) {
                    this.state.set("id", value);
                }
                get documentType() {
                    return this.state.get("documentType");
                }
                set documentType(value) {
                    this.state.set("documentType", value);
                }
                get extension() {
                    return this.state.get("extension");
                }
                set extension(value) {
                    this.state.set("extension", value);
                }
                get name() {
                    return this.state.get("name");
                }
                set name(value) {
                    this.state.set("name", value);
                }
                get size() {
                    return this.state.get("size");
                }
                set size(value) {
                    this.state.set("size", value);
                }
                get sizeText() {
                    return Jade.Convert.BytesToUnits(this.size, Jade.DiskUnits.MB);
                }
            }
            Files.File = File;
        })(Files = Core.Files || (Core.Files = {}));
    })(Core = PDJS.Core || (PDJS.Core = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Core;
    (function (Core) {
        var Files;
        (function (Files) {
            let FileAlertType;
            (function (FileAlertType) {
                FileAlertType[FileAlertType["Validation"] = 0] = "Validation";
                FileAlertType[FileAlertType["Error"] = 1] = "Error";
            })(FileAlertType = Files.FileAlertType || (Files.FileAlertType = {}));
            class FileAlert extends Core.Model {
                constructor(options) {
                    super(options);
                }
                get message() {
                    return this.state.get("message", "");
                }
                set message(value) {
                    this.state.set("message", value);
                }
                get type() {
                    return this.state.get("type", FileAlertType.Error);
                }
            }
            Files.FileAlert = FileAlert;
            class FileAlertCollection extends Jade.ObservableCollection {
                getByAlertType(type) {
                    let result = new Jade.Collection();
                    this.each((item) => {
                        if (item.type === type) {
                            result.add(item);
                        }
                    });
                    return result;
                }
                get validationErrors() {
                    return this.getByAlertType(Core.Files.FileAlertType.Validation);
                }
                get errors() {
                    return this.getByAlertType(Core.Files.FileAlertType.Error);
                }
            }
            Files.FileAlertCollection = FileAlertCollection;
        })(Files = Core.Files || (Core.Files = {}));
    })(Core = PDJS.Core || (PDJS.Core = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Core;
    (function (Core) {
        var Files;
        (function (Files) {
            let FileStatus;
            (function (FileStatus) {
                FileStatus[FileStatus["PENDING"] = 1] = "PENDING";
                FileStatus[FileStatus["VALIDATED"] = 2] = "VALIDATED";
                FileStatus[FileStatus["READY"] = 3] = "READY";
                FileStatus[FileStatus["COMMITTED"] = 4] = "COMMITTED";
                FileStatus[FileStatus["ERROR"] = 5] = "ERROR";
            })(FileStatus = Files.FileStatus || (Files.FileStatus = {}));
            class StoredFile extends Files.File {
                constructor(state) {
                    super(state);
                    this.m_alerts = new Files.FileAlertCollection([], {
                        onAfterChange: (e) => {
                            this.state.trigger("change");
                        }
                    });
                    this.setStatusProperties();
                }
                get canvasDocument() {
                    return this.state.get("canvasDocument");
                }
                set canvasDocument(value) {
                    this.state.set("canvasDocument", value);
                }
                get selected() {
                    return this.state.get("selected", false);
                }
                set selected(value) {
                    this.state.set("selected", value);
                }
                get status() {
                    return this.state.get("status");
                }
                set status(value) {
                    this.state.set("status", value);
                }
                get alerts() {
                    return this.m_alerts;
                }
                get statusIcon() {
                    return this.state.get("statusIcon");
                }
                set statusIcon(value) {
                    this.state.set("statusIcon", value);
                }
                get statusColor() {
                    return this.state.get("statusColor");
                }
                set statusColor(value) {
                    this.state.set("statusColor", value);
                }
                get statusIconPath() {
                    return Jade.IconSet.get("pdjs")
                        .resolve(this.statusIcon, Jade.IconSetSizeSpecificDirectory.x24);
                }
                get statusText() {
                    return this.state.get("statusText");
                }
                set statusText(value) {
                    this.state.set("statusText", value);
                }
                get lastCommitResponse() {
                    return this.state.get("lastCommitResponse");
                }
                set lastCommitResponse(value) {
                    this.state.set("lastCommitResponse", value);
                }
                setCanvasDocument() {
                    let oldCanvasDocument = null;
                    let service = new PDJS.Services.Canvas.Files.FileService();
                    if (this.canvasDocument != null) {
                        oldCanvasDocument = this.canvasDocument.clone();
                    }
                    service.getCanvasDocument({
                        documentId: this.documentType.canvasId,
                        fileId: this.id,
                        success: (e) => {
                            this.status = Core.Files.FileStatus.PENDING;
                            this.canvasDocument = new PDJS.Canvas.Core.Documents.DocumentModel(e.data.document);
                            if (oldCanvasDocument != null) {
                                PDJS.Canvas.Core.Forms.FormFields.map(oldCanvasDocument, this.canvasDocument);
                            }
                            this.alerts.clear();
                            this.setEntityNameFieldValue(e.data.validateResponse);
                            this.lastCommitResponse = null;
                            this.lastCommitResponse = e.data.validateResponse;
                            if (this.lastCommitResponse.hasValidationErrors) {
                                PDJS.Canvas.Core.Forms.FormFields.iterateRequiredFields(this.canvasDocument, (field) => {
                                    if (field.hasValue()) {
                                        delete this.lastCommitResponse.validationErrors[field.id];
                                    }
                                });
                                this.processFormSubmitResponse(this.lastCommitResponse);
                            }
                            this.status = this.alerts.validationErrors.count > 0 ? Core.Files.FileStatus.ERROR : Core.Files.FileStatus.VALIDATED;
                        }
                    });
                }
                commit(entityId, folder, success) {
                    if (this.status == FileStatus.COMMITTED) {
                        return;
                    }
                    this.status = FileStatus.PENDING;
                    this.alerts.clear();
                    let service = new PDJS.Services.Canvas.Files.FileService();
                    service.edit({
                        document: this.canvasDocument.toJSON(),
                        fileId: this.id,
                        documentTypeId: this.documentType.id,
                        success: (e) => {
                            this.lastCommitResponse = e.data;
                            if (this.lastCommitResponse.hasValidationErrors || this.lastCommitResponse.hasScriptErrors) {
                                this.processFormSubmitResponse(this.lastCommitResponse);
                                this.status = FileStatus.ERROR;
                            }
                            else {
                                this.id = e.data.fileId;
                                this.status = FileStatus.COMMITTED;
                                if (_.isFunction(success)) {
                                    success();
                                }
                            }
                        },
                        error: (e) => {
                            this.status = FileStatus.ERROR;
                            this.alerts.add(new Files.FileAlert({
                                type: Files.FileAlertType.Error,
                                message: "Unknown Error"
                            }));
                            e.errorHandled = true;
                        }
                    });
                }
                onStateChanged() {
                    super.onStateChanged();
                    if (this.state.hasChanged("status")) {
                        this.setStatusProperties();
                    }
                    if (this.state.hasChanged("canvasDocument")) {
                        this.onCanvasChanged();
                    }
                }
                setStatusProperties() {
                    let isInspecting = this.status === Core.Files.FileStatus.PENDING;
                    let isValidated = this.status === Core.Files.FileStatus.VALIDATED;
                    let hasErrors = this.alerts.count > 0;
                    let isReady = this.alerts.count > 0
                        && this.status === Core.Files.FileStatus.READY;
                    let alertCount = this.alerts.count;
                    switch (true) {
                        case isInspecting:
                            this.statusIcon = "magnifying_glass.png";
                            this.statusColor = "blue";
                            this.statusText = "Inspecting...";
                            break;
                        case hasErrors:
                            this.statusIcon = "sign_warning.png";
                            this.statusColor = "red";
                            this.statusText = `${alertCount} ${alertCount === 1 ? "Error" : "Errors"}`;
                            break;
                        case isReady || isValidated:
                            this.statusIcon = "ok.png";
                            this.statusColor = "darkgreen";
                            this.statusText = "Ready";
                            break;
                    }
                }
                onCanvasChanged() {
                    let name = PDJS.Canvas.Core.Forms.FormFields.getValue({
                        document: this.canvasDocument,
                        type: PDJS.Canvas.Core.Forms.EntityNameField
                    });
                    if (!Jade.String.isNullOrWhiteSpace(name)) {
                        this.name = name;
                    }
                }
                processFormSubmitResponse(response) {
                    if (response.hasValidationErrors) {
                        _.each(response.validationErrors, (error) => {
                            this.alerts.add(new Files.FileAlert({
                                type: Files.FileAlertType.Validation,
                                message: error
                            }));
                        });
                    }
                    if (response.hasScriptErrors) {
                        _.each(response.scriptErrors, (error) => {
                            this.alerts.add(new Files.FileAlert({
                                type: Files.FileAlertType.Error,
                                message: error
                            }));
                        });
                    }
                }
                setEntityNameFieldValue(response) {
                    let isEmptyObject = (obj) => {
                        let result = true;
                        for (let key in obj) {
                            if (obj.hasOwnProperty(key))
                                result = false;
                            break;
                        }
                        return result;
                    };
                    PDJS.Canvas.Core.Forms.FormFields.getFields({
                        type: PDJS.Canvas.Core.Forms.EntityNameField,
                        document: this.canvasDocument
                    }).each((field) => {
                        field.value = this.name;
                        delete response.validationErrors[field.id];
                        if (isEmptyObject(response.validationErrors)) {
                            response.hasValidationErrors = false;
                        }
                    });
                }
            }
            Files.StoredFile = StoredFile;
        })(Files = Core.Files || (Core.Files = {}));
    })(Core = PDJS.Core || (PDJS.Core = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Core;
    (function (Core) {
        var Files;
        (function (Files) {
            class Upload extends Core.Model {
                get id() {
                    return this.state.get("id");
                }
                set id(value) {
                    this.state.set("id", value);
                }
                get percent() {
                    return this.state.get("percent");
                }
                set percent(value) {
                    this.state.set("percent", value);
                }
                get status() {
                    return this.state.get("status");
                }
                set status(value) {
                    this.state.set("status", value);
                }
            }
            Files.Upload = Upload;
        })(Files = Core.Files || (Core.Files = {}));
    })(Core = PDJS.Core || (PDJS.Core = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Core;
    (function (Core) {
        var Files;
        (function (Files) {
            class UploadFile extends Files.StoredFile {
                constructor(state) {
                    super(state);
                    this.m_upload = new Files.Upload(state.upload);
                    this.upload.onStateChangeCallback = () => {
                        this.onStateChanged();
                        this.onStateChangeCallback();
                    };
                    this.setStatusProperties();
                }
                get upload() {
                    return this.m_upload;
                }
                commit(entityId, folderId, success, error) {
                    if (this.status == Files.FileStatus.COMMITTED) {
                        if (_.isFunction(success)) {
                            success();
                        }
                        return;
                    }
                    this.alerts.clear();
                    let service = new PDJS.Services.Canvas.Files.FileService();
                    service.create({
                        document: this.canvasDocument.toJSON(),
                        parentId: entityId,
                        folderId: folderId,
                        documentTypeId: this.documentType.id,
                        documentName: this.name,
                        uploadName: `${this.upload.id}${this.extension}`,
                        success: (e) => {
                            if (e.data.hasScriptErrors) {
                                this.status = Files.FileStatus.ERROR;
                                _.each(e.data.scriptErrors, (error) => {
                                    this.alerts.add(new Files.FileAlert({
                                        type: Files.FileAlertType.Error,
                                        message: error
                                    }));
                                });
                            }
                            else {
                                this.id = e.data.fileId;
                                this.status = Files.FileStatus.COMMITTED;
                            }
                            if (_.isFunction(success)) {
                                success();
                            }
                        },
                        error: (e) => {
                            this.alerts.add(new Files.FileAlert({
                                type: Files.FileAlertType.Error,
                                message: "Unknown Error"
                            }));
                            e.errorHandled = true;
                            if (_.isFunction(success)) {
                                success();
                            }
                        }
                    });
                }
                setStatusProperties() {
                    if (this.upload == null) {
                        return;
                    }
                    let isQueued = this.upload.percent == 0
                        && this.upload.status === plupload.FileStatus.QUEUED;
                    let isUploading = this.upload.percent < 100
                        && this.upload.status === plupload.FileStatus.UPLOADING;
                    let uploadFailed = this.upload.percent < 100
                        && this.upload.status === plupload.FileStatus.FAILED;
                    let isInspecting = this.upload.status === plupload.FileStatus.DONE
                        && this.status === Core.Files.FileStatus.PENDING;
                    let isValidated = this.upload.status === plupload.FileStatus.DONE
                        && this.status === Core.Files.FileStatus.VALIDATED;
                    let hasErrors = this.alerts.count > 0
                        && this.upload.status === plupload.FileStatus.DONE;
                    let isReady = this.alerts.count > 0
                        && this.upload.status === plupload.FileStatus.DONE
                        && this.status === Core.Files.FileStatus.READY;
                    let isCommitted = this.alerts.count > 0
                        && this.upload.status === plupload.FileStatus.DONE
                        && this.status === Core.Files.FileStatus.COMMITTED;
                    let alertCount = this.alerts.count;
                    switch (true) {
                        case isQueued:
                            this.statusIcon = "cloud_upload.png";
                            this.statusColor = "black";
                            this.statusText = "Pending Upload";
                            break;
                        case isUploading:
                            this.statusIcon = "hourglass.png";
                            this.statusColor = "blue";
                            this.statusText = "Uploading...";
                            break;
                        case uploadFailed:
                            this.statusIcon = "error.png";
                            this.statusColor = "red";
                            this.statusText = "Upload Failed";
                            break;
                        case isInspecting:
                            this.statusIcon = "magnifying_glass.png";
                            this.statusColor = "blue";
                            this.statusText = "Inspecting...";
                            break;
                        case hasErrors:
                            this.statusIcon = "sign_warning.png";
                            this.statusColor = "red";
                            this.statusText = `${alertCount} ${alertCount === 1 ? "Warning" : "Warnings"}`;
                            break;
                        case isReady || isValidated:
                            this.statusIcon = "ok.png";
                            this.statusColor = "darkgreen";
                            this.statusText = "Ready";
                            break;
                    }
                }
            }
            Files.UploadFile = UploadFile;
        })(Files = Core.Files || (Core.Files = {}));
    })(Core = PDJS.Core || (PDJS.Core = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Core;
    (function (Core) {
        var Views;
        (function (Views) {
            class ContextFilter {
                constructor(id, params) {
                    this.m_id = id;
                    this.m_params = params;
                }
                get id() {
                    return this.m_id;
                }
                get params() {
                    return this.m_params;
                }
                toJSON() {
                    let result = {
                        id: this.id
                    };
                    if (this.params != null) {
                        result.params = this.params;
                    }
                    return result;
                }
                ;
            }
            Views.ContextFilter = ContextFilter;
        })(Views = Core.Views || (Core.Views = {}));
    })(Core = PDJS.Core || (PDJS.Core = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Core;
    (function (Core) {
        var Views;
        (function (Views) {
            class EntityFilter extends Views.ContextFilter {
                constructor(id, params) {
                    super(id, params);
                }
                static parentFilter(childTypeId) {
                    return new EntityFilter("ParentFilter", {
                        childTypeId: childTypeId
                    });
                }
                static descendantsOnly(entityId) {
                    return new EntityFilter("DescendantsOnly", {
                        entityId: entityId
                    });
                }
            }
            Views.EntityFilter = EntityFilter;
            class IdentityFilter extends Views.ContextFilter {
                constructor(id, params) {
                    super(id, params);
                }
                static activeOnly() {
                    return new IdentityFilter("ActiveOnly");
                }
                static usersOnly() {
                    return new IdentityFilter("UsersOnly");
                }
                static groupsOnly() {
                    return new IdentityFilter("GroupsOnly");
                }
                static excludeAllAdmins() {
                    return new IdentityFilter("ExcludeAllAdmins");
                }
                static excludeSysAdmins() {
                    return new IdentityFilter("ExcludeSysAdmins");
                }
                static excludeBuiltIns() {
                    return new IdentityFilter("ExcludeBuiltIns");
                }
                static excludeEveryone() {
                    return new IdentityFilter("ExcludeEveryone");
                }
            }
            Views.IdentityFilter = IdentityFilter;
            class FormFieldFilter extends Views.ContextFilter {
                constructor(id, params) {
                    super(id, params);
                }
                static listData(isList) {
                    return new IdentityFilter("ListData", {
                        isList: isList ? 1 : 0
                    });
                }
                static fileBased() {
                    return new IdentityFilter("FileBased");
                }
                static extension(extensionId) {
                    return new IdentityFilter("Extension", {
                        extID: extensionId
                    });
                }
            }
            Views.FormFieldFilter = FormFieldFilter;
        })(Views = Core.Views || (Core.Views = {}));
    })(Core = PDJS.Core || (PDJS.Core = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        class ApplicationBar extends Jade.UI.Control {
            get homeNode() {
                return this.node.find("a[data-id=home]");
            }
            get createNode() {
                return this.node.find("a[data-id=home]");
            }
            get viewsNode() {
                return this.node.find("a[data-id=home]");
            }
            get userNode() {
                return this.node.find("a[data-id=home]");
            }
            get manageNode() {
                return this.node.find("a[data-id=home]");
            }
            get titleNode() {
                return this.node.find(".-pdjs-fwk-app-bar-title");
            }
            get searchNode() {
                return this.node.find(".-pdjs-fwk-app-bar-search");
            }
            get itemsNode() {
                return this.node.find(".-pdjs-fwk-app-bar-items");
            }
            template() {
                return `
                <div class="-pdjs-fwk-app-bar">
                    <div class="-pdjs-fwk-app-bar-title"></div>
                    <div class="-pdjs-fwk-app-bar-items" data-controls></div>
                </div>`;
            }
            onActivate(e) {
                super.onActivate(e);
                this.populate(PDJS.Application.instance.startUpData);
            }
            populate(e) {
                this.controls.add(new Hub.ApplicationBarItem({
                    icon: "~/application/icons/misc/24x24/home.png",
                    url: Jade.Path.resolve("~/Hub/Home")
                }));
                if (e.entityTypes.length > 0) {
                    this.controls.add(new Hub.ApplicationBarItem({
                        icon: "~/application/icons/misc/24x24/plus.png",
                        onClick: (e) => {
                            this.m_createPanel.toggle();
                        }
                    }));
                }
                if (e.views.length == 0) {
                    this.controls.add(new Hub.ApplicationBarItem({
                        icon: "~/application/icons/misc/24x24/binocular.png",
                        url: Jade.Path.resolve("~/Hub/ViewBrowser/Global")
                    }));
                }
                else {
                    this.controls.add(new Hub.ApplicationBarItem({
                        icon: "~/application/icons/misc/24x24/binocular.png",
                        onClick: (e) => {
                            this.m_viewPanel.toggle();
                        }
                    }));
                }
                this.controls.add(new Hub.GlobalSearch({
                    width: 200,
                    backgroundColor: e.theme.ui.backgroundColor
                }));
                this.controls.add(new Hub.ApplicationBarItem({
                    backgroundColor: "#00000080",
                    icon: "~/application/icons/misc/24x24/user.png",
                    onClick: (e) => {
                        this.m_userPanel.toggle();
                    }
                }));
                let width = 0;
                this.controls.each((control) => {
                    if (control instanceof Hub.ApplicationBarItem) {
                        width += control.width;
                    }
                });
                this.titleNode.css({
                    right: `${width + 10}px`,
                    color: e.theme.ui.textColor
                });
                this.itemsNode.css({
                    width: `${width + 10}px`
                });
                this.node.css({
                    backgroundColor: e.theme.ui.backgroundColor
                });
                this.titleNode.text(e.applicationName);
                this.createPanel_init(e);
                this.userPanel_init(e);
                this.viewPanel_init(e);
            }
            createPanel_init(e) {
                this.m_createPanel = new Hub.CreatePanel({
                    anchor: this.createNode,
                    top: 41,
                    startUpData: e
                });
                this.controls.add(this.m_createPanel);
            }
            userPanel_init(e) {
                this.m_userPanel = new Hub.UserPanel({
                    anchor: this.userNode,
                    top: 41,
                    startUpData: e
                });
                this.controls.add(this.m_userPanel);
            }
            viewPanel_init(e) {
                this.m_viewPanel = new Hub.ViewPanel({
                    anchor: this.viewsNode,
                    top: 41,
                    startUpData: e
                });
                this.controls.add(this.m_viewPanel);
            }
        }
        Hub.ApplicationBar = ApplicationBar;
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        class ApplicationBarItem extends Jade.UI.Control {
            constructor(options) {
                super(options);
            }
            get icon() {
                return this.state.get("icon");
            }
            get url() {
                return this.state.get("url", "#");
            }
            get width() {
                return this.state.get("width", 40);
            }
            get backgroundColor() {
                return this.state.get("backgroundColor", null);
            }
            get onClickCallback() {
                return this.state.get("onClick", () => { });
            }
            template() {
                if (this.url == null) {
                    return `<div><div>`;
                }
                else {
                    return `<a href="${Jade.Path.resolve(this.url)}"></a>`;
                }
            }
            onActivate(e) {
                super.onActivate(e);
                let icon = Jade.Path.resolve(this.icon);
                this.node.css({
                    position: "relative",
                    display: "inline-block",
                    height: "40px",
                    width: `${this.width}px`,
                    backgroundColor: this.backgroundColor == null ? "" : this.backgroundColor,
                    backgroundPosition: "center center",
                    backgroundRepeat: "no-repeat"
                });
                if (this.icon != null) {
                    this.node.css({
                        backgroundImage: `url(${icon})`
                    });
                }
                if (this.url == "#") {
                    this.node.on(Jade.BrowserEvent.CLICK, (e) => {
                        e.stopImmediatePropagation();
                        this.onClickCallback(e);
                    });
                }
            }
        }
        Hub.ApplicationBarItem = ApplicationBarItem;
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class PanelMenu extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get anchor() {
                        return this.state.get("anchor", $());
                    }
                    get hideOnMoueLeave() {
                        return this.state.get("hideOnMoueLeave", true);
                    }
                    get hideOnClickOutside() {
                        return this.state.get("hideOnClickOutside", true);
                    }
                    get hideOthers() {
                        return this.state.get("hideOthers", true);
                    }
                    get top() {
                        return this.state.get("top", 0);
                    }
                    get visible() {
                        return this.node.is(":visible");
                    }
                    template() {
                        return `<div class="-pdjs-ui-panel-menu"></div>`;
                    }
                    hide() {
                        this.node.hide();
                        this.hideOnClickEventOff();
                    }
                    show() {
                        if (this.hideOthers) {
                            this.hideOtherPanels();
                        }
                        this.node.show();
                        this.hideOnClickEventOn();
                    }
                    toggle() {
                        if (this.visible) {
                            this.hide();
                        }
                        else {
                            this.show();
                        }
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.node.css({
                            top: this.top == 0 ? "" : `${this.top}px`,
                            display: "none"
                        });
                        this.node.detach();
                        $("body").append(this.node);
                        this.anchor.on(Jade.BrowserEvent.CLICK, (e) => {
                            if (this.visible) {
                                this.hide();
                            }
                            else {
                                this.show();
                            }
                        });
                    }
                    hideOtherPanels() {
                        $(`.-pdjs-ui-panel-menu`).hide();
                    }
                    hideOnClickEventOn() {
                        if (this.hideOnClickOutside) {
                            $("body").on(`${Jade.BrowserEvent.CLICK}.PanelMenuHideOnClick`, (e) => {
                                if ($(e.target).closest(`#${this.ID}`).length === 0) {
                                    this.hide();
                                }
                            });
                        }
                    }
                    hideOnClickEventOff() {
                        if (this.hideOnClickOutside) {
                            $("body").off(`${Jade.BrowserEvent.CLICK}.PanelMenuHideOnClick`);
                        }
                    }
                }
                Controls.PanelMenu = PanelMenu;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        class CreatePanel extends PDJS.Shared.UI.Controls.PanelMenu {
            constructor(options) {
                super(options);
            }
            get startUpData() {
                return this.state.get("startUpData");
            }
            onActivate(e) {
                super.onActivate(e);
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuTitle({
                    label: "Create New"
                }));
                this.startUpData.entityTypes.forEach((entry) => {
                    this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuAction({
                        label: entry.name,
                        icon: entry.icon,
                        description: entry.description,
                        click: (e) => {
                            this.hide();
                            PDJS.Entities.EntityDialogs.showCreate({
                                entityTypeId: entry.id,
                                entityTypeName: entry.name,
                                promptToOpen: true
                            });
                        }
                    }));
                });
            }
        }
        Hub.CreatePanel = CreatePanel;
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        class GlobalSearch extends Hub.ApplicationBarItem {
            template() {
                return `<div style="box-sizing:border-box;"></div>`;
            }
            onActivate(e) {
                super.onActivate(e);
                let searchBox = new PDJS.Shared.UI.Controls.MaskedTextBox({
                    defaultMaskText: "Search...",
                    onMaskFocus: (e) => {
                        searchBox.showText();
                        searchBox.focusText();
                    },
                    onTextFocus: (e) => {
                        searchBox.focusText();
                    },
                    onTextBlur: (e) => {
                        if (Jade.String.isNullOrWhiteSpace(searchBox.textValue)) {
                            searchBox.showMask();
                        }
                    },
                    onTextKeyPress: (e) => {
                        let isSearchCommand = e.keyCode == Jade.KeyCode.Enter;
                        if (!isSearchCommand || Jade.String.isNullOrWhiteSpace(searchBox.textValue)) {
                            return;
                        }
                        let isValidSearch = searchBox.textValue.length > 1;
                        if (isValidSearch) {
                            window.location.href = Jade.Path.resolve(`~/hub/search?searchTerm=${searchBox.textValue}`);
                        }
                    }
                });
                this.controls.add(searchBox);
                searchBox.node.css({
                    top: "8px",
                    left: "10px",
                    right: "10px"
                });
                searchBox.textAndMaskNode.css({
                    borderColor: this.backgroundColor
                });
                searchBox.maskNode.css({
                    backgroundImage: `url(${Jade.IconSet.get("pd").resolve("ICON_SEARCH_16X16.GIF", Jade.IconSetSizeSpecificDirectory.misc)}`,
                    backgroundPosition: "right 5px center",
                    backgroundRepeat: "no-repeat"
                });
                this.node.css({
                    padding: "10px",
                    backgroundColor: "#FFFFFF80"
                });
            }
        }
        Hub.GlobalSearch = GlobalSearch;
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        class UserPanel extends PDJS.Shared.UI.Controls.PanelMenu {
            constructor(options) {
                super(options);
            }
            get startUpData() {
                return this.state.get("startUpData");
            }
            onActivate(e) {
                super.onActivate(e);
                this.node.css({
                    top: `${this.top}px`
                });
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuTitle({
                    label: this.startUpData.currentUser.displayName
                }));
                this.addRecentEntities();
                this.addRecentViews();
                this.addPersonalization();
                this.addAdministration();
                this.addHelp();
                this.addLogout();
            }
            addRecentEntities() {
                if (this.startUpData.recentEntities.length == 0) {
                    return;
                }
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuHeading({
                    label: "Recent"
                }));
                this.startUpData.recentEntities.forEach((entry) => {
                    this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuLink({
                        label: entry.name,
                        description: entry.description,
                        url: Jade.Path.resolve("~/explore/" + entry.id)
                    }));
                });
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuSeperator());
            }
            addRecentViews() {
                if (this.startUpData.recentViews.length == 0) {
                    return;
                }
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuHeading({
                    label: "Recent Views"
                }));
                this.startUpData.recentViews.forEach((entry) => {
                    this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuLink({
                        label: entry.name,
                        description: entry.description,
                        url: Jade.Path.resolve("~/viewbrowser?viewid=" + entry.id)
                    }));
                });
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuSeperator());
            }
            addPersonalization() {
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuHeading({
                    label: "Personalization"
                }));
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuLink({
                    label: "Views",
                    url: Jade.Path.resolve("~/Hub/ViewBrowser/Personal")
                }));
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuLink({
                    label: "Favorites",
                    url: Jade.Path.resolve("~/Hub/Personalization/Favorites")
                }));
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuLink({
                    label: "Preferences",
                    url: Jade.Path.resolve("~/Hub/Personalization/Preferences")
                }));
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuSeperator());
            }
            addAdministration() {
                if (!this.startUpData.currentUser.isAdmin) {
                    return;
                }
                let target = `${PDJS.Application.instance.id}-manage`;
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuHeading({
                    label: "Administration"
                }));
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuLink({
                    label: "Users",
                    url: Jade.Path.resolve("~/Manage/#/module/users"),
                    target: target
                }));
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuLink({
                    label: "Groups",
                    url: Jade.Path.resolve("~/Manage/#/module/groups"),
                    target: target
                }));
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuLink({
                    label: "Entity Management",
                    url: Jade.Path.resolve("~/Manage/#/module/entity-management"),
                    target: target
                }));
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuLink({
                    label: "Entity Types",
                    url: Jade.Path.resolve("~/Manage/#/module/entity-types"),
                    target: target
                }));
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuLink({
                    label: "Property Extensions",
                    url: Jade.Path.resolve("~/Manage/#/module/data-model/properties"),
                    target: target
                }));
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuLink({
                    label: "More...",
                    url: Jade.Path.resolve("~/Manage/#/module/overview"),
                    target: target
                }));
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuSeperator());
            }
            addHelp() {
                if (Jade.String.isNullOrWhiteSpace(this.startUpData.supportUrl)) {
                    return;
                }
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuLink({
                    label: "Help",
                    url: Jade.Path.resolve(this.startUpData.supportUrl),
                    largeText: true
                }));
            }
            addLogout() {
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuLink({
                    label: "Sign Out",
                    url: Jade.Path.resolve("~/Shared/Account/Logout"),
                    largeText: true
                }));
            }
        }
        Hub.UserPanel = UserPanel;
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        class ViewPanel extends PDJS.Shared.UI.Controls.PanelMenu {
            constructor(options) {
                super(options);
            }
            get startUpData() {
                return this.state.get("startUpData");
            }
            onActivate(e) {
                super.onActivate(e);
                this.node.css({
                    top: `${this.top}px`
                });
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuTitle({
                    label: "Global Views"
                }));
                this.addViews();
                this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuLink({
                    label: "More...",
                    largeText: true,
                    url: "~/hub/viewbrowser/global"
                }));
            }
            addViews() {
                if (this.startUpData.views.length < 0) {
                    return;
                }
                this.startUpData.views.forEach((entry) => {
                    this.controls.add(new PDJS.Shared.UI.Controls.PanelMenuAction({
                        label: entry.name,
                        description: entry.description,
                        url: Jade.Path.resolve("~/viewbrowser?viewid=" + entry.id)
                    }));
                });
            }
        }
        Hub.ViewPanel = ViewPanel;
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            let Events;
            (function (Events) {
                Events["FileChangeEvent"] = "File:Change";
            })(Events = Explorer.Events || (Explorer.Events = {}));
            class ExplorerContext {
                constructor() {
                    let contextId = Jade.Guid.new();
                    Jade.Application.instance.contexts.createContext({
                        id: contextId,
                        name: "explorer"
                    });
                    Jade.Application
                        .instance
                        .contexts
                        .current
                        .events
                        .subscribe("canvas/form/changed", function (e) {
                        PDJS.JS
                            .ProspectDirector
                            .RUNTIME
                            .MODULES
                            .Navigator
                            .canvasFormChanged = {
                            contextId: contextId,
                            formId: e.formId
                        };
                    });
                    Jade.Application
                        .instance
                        .contexts
                        .current
                        .events
                        .subscribe("canvas/form/reset", function (e) {
                        PDJS.JS
                            .ProspectDirector
                            .RUNTIME
                            .MODULES
                            .Navigator
                            .canvasFormChanged = null;
                    });
                    Jade.Application
                        .instance
                        .contexts
                        .current
                        .events
                        .subscribe("canvas/destroyed", function (e) {
                        PDJS.JS
                            .ProspectDirector
                            .RUNTIME
                            .MODULES
                            .Navigator
                            .canvasFormChanged = null;
                    });
                }
                unload() {
                    Jade.Application
                        .instance
                        .contexts
                        .current
                        .events
                        .publish("Explorer:Content:Unload");
                }
            }
            Explorer.ExplorerContext = ExplorerContext;
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            class ExplorerContent extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                    Jade.Application
                        .instance
                        .contexts
                        .current
                        .events
                        .subscribe("Explorer:Content:Unload", () => {
                        this.destroy();
                    });
                }
                get explorer() {
                    return PDJS.JS
                        .ProspectDirector
                        .RUNTIME
                        .MODULES
                        .Explorer;
                }
                get allowUploads() {
                    return this.state.get("data.allowUploads");
                }
                get allowAddChildren() {
                    return this.state.get("data.allowAddChildren");
                }
                get allowAddFiles() {
                    return this.state.get("data.allowAddFiles");
                }
                get allowReplaceFiles() {
                    return this.state.get("data.allowReplaceFiles");
                }
                get allowEdit() {
                    return this.state.get("data.allowEdit");
                }
                get allowDeleteListItem() {
                    return this.state.get("data.allowDeleteListItem");
                }
                get allowDeleteFile() {
                    return this.state.get("data.allowDeleteFile");
                }
                get allowCreateEntity() {
                    return this.state.get("data.allowCreateEntity");
                }
                onDestroy(e) {
                    super.onDestroy(e);
                    Jade.Application
                        .instance
                        .contexts
                        .current
                        .commands
                        .clear();
                }
                static refresh() {
                    Jade.Application
                        .instance
                        .contexts
                        .current
                        .events
                        .publish("explorer/reload");
                }
            }
            Explorer.ExplorerContent = ExplorerContent;
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var ContentList;
            (function (ContentList) {
                class ContentListCommandBase extends Jade.Command {
                    constructor(props) {
                        super(props);
                        this.state.set({
                            entityId: null,
                            folderId: null,
                            entities: null,
                            allowCreateEntity: null,
                            allowAddChildren: null
                        });
                    }
                    get entityId() {
                        return this.state.get("entityId");
                    }
                    get folderId() {
                        return this.state.get("folderId");
                    }
                    get entities() {
                        return this.state.get("entities", []);
                    }
                    get ids() {
                        return this.entities.map(e => {
                            return e.id;
                        });
                    }
                }
                ContentList.ContentListCommandBase = ContentListCommandBase;
            })(ContentList = Explorer.ContentList || (Explorer.ContentList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var ContentList;
            (function (ContentList) {
                class ContentListCommands extends Jade.CommandGroup {
                    constructor() {
                        super("explorer/content-list");
                    }
                    registerCommands(e) {
                        e.commands.add(new ContentList.NewCommand({}));
                        e.commands.add(new ContentList.OpenCommand({}));
                        e.commands.add(new ContentList.OpenInNewWindowCommand({}));
                        e.commands.add(new ContentList.PropertiesCommand({}));
                        e.commands.add(new ContentList.DeleteCommand({}));
                        e.commands.add(new ContentList.ReportsCommand({}));
                        e.commands.add(new ContentList.AddToFavortiesCommand({}));
                    }
                }
                ContentList.ContentListCommands = ContentListCommands;
                Jade.Application.onStart(() => {
                    Jade.CommandGroups.add(ContentListCommands);
                });
            })(ContentList = Explorer.ContentList || (Explorer.ContentList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var ContentList;
            (function (ContentList) {
                let ContentListPageEvent;
                (function (ContentListPageEvent) {
                    ContentListPageEvent["onGridRefreshRequest"] = "grid/refresh-request";
                })(ContentListPageEvent = ContentList.ContentListPageEvent || (ContentList.ContentListPageEvent = {}));
                class ContentListPage extends Explorer.ExplorerContent {
                    constructor(options) {
                        super(options);
                    }
                    get viewStateId() {
                        return this.state.get("data.viewStateId");
                    }
                    get entityId() {
                        return this.state.get("data.entityId");
                    }
                    get folderId() {
                        return this.state.get("data.folderId");
                    }
                    get entityTypes() {
                        return this.state.get("data.entityTypes");
                    }
                    get promptAfterCreate() {
                        return this.state.get("data.promptAfterCreate");
                    }
                    get contextualFilters() {
                        return this.state.get("data.contextualFilters");
                    }
                    get doubleClickMode() {
                        return this.state.get("data.doubleClickMode");
                    }
                    get menuNode() {
                        return this.node.find("div[role=menu]");
                    }
                    template() {
                        return `<div style="position:absolute;top:10px;right:0;bottom:0;left:0;">
                        <div role="menu" style="position:absolute;top:0;left:10px;right:10px;height:30px;display:none;"></div>
                        <div role="grid" style="position:absolute;top:40px;left:10px;right:10px;bottom:10px;border:1px solid #CCCCCC;"></div>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.grid_init();
                        this.menu_init();
                        Jade.Application
                            .instance
                            .contexts
                            .current
                            .events
                            .subscribe(ContentListPageEvent.onGridRefreshRequest, (e) => {
                            this.m_grid.refresh(e || {});
                        });
                        setTimeout(() => {
                            Jade.Application
                                .instance
                                .contexts
                                .current
                                .commands
                                .setState({
                                "explorer/content-list": {
                                    entityTypes: this.entityTypes,
                                    promptAfterCreate: this.promptAfterCreate,
                                    allowAddChildren: this.allowAddChildren,
                                    allowCreateEntity: this.allowCreateEntity
                                }
                            });
                            this.menuNode.show();
                        }, 200);
                    }
                    grid_init() {
                        this.m_grid = new PD.Web.UI.Controls.ViewGrid({
                            pk: "id",
                            container: this.node.find("[role=grid]"),
                            selectionMode: "multiple",
                            viewStateId: this.viewStateId,
                            selectOnRightClick: true,
                            defaultSelectionEnabled: true,
                            selection: {
                                map: (e) => {
                                    return _.map(e.selections.toArray(), (item, index) => {
                                        return {
                                            id: item.id,
                                            name: item.ObjectName,
                                            type: item.ObjectType
                                        };
                                    });
                                }
                            },
                            change: (e) => {
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .commands
                                    .setState({
                                    "explorer/content-list": {
                                        entityId: this.entityId,
                                        folderId: this.folderId,
                                        entities: e.selections.toArray()
                                    }
                                });
                            },
                            dblclick: (e) => {
                                let commandId = "explorer/content-list:entity/properties";
                                if (this.doubleClickMode === 0) {
                                    if (PDJS.JS.ProspectDirector.RUNTIME.ENVIRONMENT.CONTENT_LIST_DOUBLE_CLICK_BEHAVIOR === 1) {
                                        commandId = "explorer/content-list:entity/open-in-new-window";
                                    }
                                    else {
                                        commandId = "explorer/content-list:entity/open";
                                    }
                                }
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .commands
                                    .execute(commandId, {
                                    entityId: this.entityId,
                                    folderId: this.folderId,
                                    entities: e.selections.toArray()
                                });
                            },
                            needContext: (e) => {
                                e.filters = this.contextualFilters ? this.contextualFilters : [];
                            },
                            contextMenu: () => {
                                this.contextMenu_init();
                            }
                        });
                    }
                    menu_init() {
                        this.m_menu = new Jade.UI.ToolBar({
                            insertAt: "[role=menu]",
                            segments: [new ContentList.ToolbarSegment()]
                        });
                        this.controls.add(this.m_menu);
                    }
                    contextMenu_init() {
                        let contextMenu = new PDJS.Shared.UI.Controls.GridContextMenu({
                            grid: this.m_grid,
                            segments: [
                                {
                                    type: "PDJS.Hub.Explorer.ContentList.ContextMenuSegment",
                                    context: () => {
                                        return {
                                            entityId: this.entityId,
                                            folderId: this.folderId,
                                            entities: this.m_grid.getSelections().toArray()
                                        };
                                    }
                                }
                            ]
                        });
                        this.controls.add(contextMenu);
                    }
                }
                ContentList.ContentListPage = ContentListPage;
            })(ContentList = Explorer.ContentList || (Explorer.ContentList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var ContentList;
            (function (ContentList) {
                class ContextMenuSegment extends Jade.UI.ContextMenuSegment {
                    onAddItems(e) {
                        e.addItem(new Jade.UI.ContextMenuItemCommand({
                            commandId: "explorer/content-list:entity/open"
                        }));
                        e.addItem(new Jade.UI.ContextMenuItemCommand({
                            commandId: "explorer/content-list:entity/open-in-new-window"
                        }));
                        e.addSeparator();
                        e.addItem(new Jade.UI.ContextMenuItemCommand({
                            commandId: "explorer/content-list:entity/delete"
                        }));
                        e.addSeparator();
                        e.addItem(new Jade.UI.ContextMenuItemCommand({
                            commandId: "explorer/content-list:entity/reports"
                        }));
                        e.addItem(new Jade.UI.ContextMenuItemCommand({
                            commandId: "explorer/content-list:entity/add-to-favorites"
                        }));
                        e.addSeparator();
                        e.addItem(new Jade.UI.ContextMenuItemCommand({
                            commandId: "explorer/content-list:entity/properties"
                        }));
                    }
                }
                ContentList.ContextMenuSegment = ContextMenuSegment;
            })(ContentList = Explorer.ContentList || (Explorer.ContentList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var ContentList;
            (function (ContentList) {
                class ToolbarSegment extends Jade.UI.ToolBarSegment {
                    onAddItems(e) {
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/content-list:entity/new"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/content-list:entity/open"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/content-list:entity/open-in-new-window"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/content-list:entity/properties"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/content-list:entity/delete"
                        }));
                    }
                    onClick(e) {
                        if (e.item instanceof Jade.UI.ToolBarButtonCommand) {
                            if (e.item.command != null) {
                                e.item.command.state.add("nodeId", e.item.ID);
                            }
                        }
                    }
                }
                ContentList.ToolbarSegment = ToolbarSegment;
            })(ContentList = Explorer.ContentList || (Explorer.ContentList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var ContentList;
            (function (ContentList) {
                class AddToFavortiesCommand extends ContentList.ContentListCommandBase {
                    onStateChanged(e) {
                        this.enabled = this.entities.length > 0;
                    }
                    onExecute(e) {
                        PDJS.JS.ProspectDirector.Modules.Personalization.AddToFavoritesDialog.Dialog.show({
                            params: {
                                ids: JSON.stringify(this.ids)
                            }
                        });
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "entity/add-to-favorites",
                            tooltip: "Add To Favorites",
                            label: "Add To Favorites",
                            icon: "star_yellow_add.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                }
                ContentList.AddToFavortiesCommand = AddToFavortiesCommand;
            })(ContentList = Explorer.ContentList || (Explorer.ContentList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var ContentList;
            (function (ContentList) {
                class DeleteCommand extends ContentList.ContentListCommandBase {
                    onStateChanged(e) {
                        this.enabled = this.entities.length > 0;
                    }
                    onExecute(e) {
                        Jade.UI.MessageDialog.open({
                            dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                            dialogButtons: Jade.UI.MessageDialogButtonStyle.OKCancel,
                            allowClose: true,
                            title: "Send to Recycle Bin",
                            message: `Send the selected items to the Recycle Bin?`,
                            select: (e) => {
                                e.close();
                                if (e.button === Jade.UI.MessageDialogButton.ok) {
                                    this.deleteEntities();
                                }
                            }
                        });
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "entity/delete",
                            tooltip: "Delete",
                            label: "Delete",
                            icon: "delete.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                    deleteEntities() {
                        PDJS.JS.PD.Shared.Dialogs.TaskStatus.open({
                            config: {
                                title: "Send to Recycle Bin"
                            },
                            showDetail: true,
                            enableClose: false,
                            taskStart: (args) => {
                                PDJS.JS.PD.ajax({
                                    type: "POST",
                                    url: Jade.Path.resolve("~/Shared/RecycleBin/Send"),
                                    data: {
                                        ids: this.ids,
                                        status: 4
                                    },
                                    success: function (e) {
                                        args.startPolling(e);
                                    },
                                    error: function (e) {
                                        args.abort(e.responseJSON);
                                        e.errorHandled = true;
                                    }
                                });
                            },
                            taskSuccess: function (e) {
                                e.enableClose(true);
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .events
                                    .publish(ContentList.ContentListPageEvent.onGridRefreshRequest, {
                                    clear: true
                                });
                            }
                        });
                    }
                }
                ContentList.DeleteCommand = DeleteCommand;
            })(ContentList = Explorer.ContentList || (Explorer.ContentList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var ContentList;
            (function (ContentList) {
                class NewCommand extends ContentList.ContentListCommandBase {
                    constructor(props) {
                        super(props);
                        this.state.set({
                            entityTypes: null,
                            promptAfterCreate: null
                        });
                    }
                    get nodeId() {
                        return this.state.get("nodeId");
                    }
                    get node() {
                        return $(`[id=${this.nodeId}]`);
                    }
                    get entityTypes() {
                        return this.state.get("entityTypes", []);
                    }
                    get promptAfterCreate() {
                        return this.state.get("promptAfterCreate", true);
                    }
                    get allowAddChildren() {
                        return this.state.get("allowAddChildren", false);
                    }
                    get allowCreateEntity() {
                        return this.state.get("allowCreateEntity", false);
                    }
                    onExecute(e) {
                        if (this.node == null) {
                            return;
                        }
                        if (this.entityTypes.length == 1) {
                            this.showCreateEntityDialog(this.entityTypes[0].id);
                        }
                        if (this.entityTypes.length > 1) {
                            this.triggerPopUp();
                        }
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "entity/new",
                            tooltip: "New",
                            label: "New",
                            icon: "add.png",
                            enabled: true,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                    onStateChanged(e) {
                        this.enabled = this.entityTypes.length > 0 && this.allowAddChildren;
                        this.visible = this.allowCreateEntity;
                    }
                    triggerPopUp() {
                        if (this.m_popUp == null) {
                            this.createPopUp();
                        }
                        if (this.m_popUp != null) {
                            this.m_popUp.show();
                        }
                    }
                    createPopUp() {
                        this.m_popUp = new PDJS.Shared.UI.Controls.PopUp({
                            container: this.node,
                            anchor: this.node,
                            tipped: {
                                skin: "white-no-padding",
                                offset: { y: 3 }
                            }
                        });
                        this.entityTypes.forEach(data => {
                            let item = new PDJS.Shared.UI.Controls.PopUpItem({
                                click: () => {
                                    this.showCreateEntityDialog(data.id);
                                },
                                data: {
                                    id: data.id,
                                    label: data.name,
                                    icon: data.icon
                                }
                            });
                            this.m_popUp.controls.add(item);
                            item.node.css({
                                width: "100%",
                                minWidth: "150px"
                            });
                        });
                    }
                    showCreateEntityDialog(entityTypeId) {
                        PDJS.Entities.EntityDialogs.showCreate({
                            entityTypeId: entityTypeId,
                            parentId: this.entityId,
                            promptToOpen: this.promptAfterCreate,
                            onCreate: (sender, e) => {
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .events
                                    .publish(ContentList.ContentListPageEvent.onGridRefreshRequest);
                            }
                        });
                    }
                }
                ContentList.NewCommand = NewCommand;
            })(ContentList = Explorer.ContentList || (Explorer.ContentList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var ContentList;
            (function (ContentList) {
                class OpenCommand extends ContentList.ContentListCommandBase {
                    onStateChanged(e) {
                        this.enabled = this.entities.length == 1;
                    }
                    onExecute(e) {
                        let entity = this.entities[0];
                        window.location.href = Jade.Path.resolve(`~/explore/${entity.id}`);
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "entity/open",
                            tooltip: "Open",
                            label: "Open",
                            icon: "folder_into.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                }
                ContentList.OpenCommand = OpenCommand;
            })(ContentList = Explorer.ContentList || (Explorer.ContentList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var ContentList;
            (function (ContentList) {
                class OpenInNewWindowCommand extends ContentList.ContentListCommandBase {
                    onStateChanged(e) {
                        this.enabled = this.entities.length == 1;
                    }
                    onExecute(e) {
                        let entity = this.entities[0];
                        window.open(Jade.Path.resolve(`~/explore/${entity.id}`));
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "entity/open-in-new-window",
                            tooltip: "Open In New Window",
                            label: "Open In New Window",
                            icon: "window_new.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                }
                ContentList.OpenInNewWindowCommand = OpenInNewWindowCommand;
            })(ContentList = Explorer.ContentList || (Explorer.ContentList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var ContentList;
            (function (ContentList) {
                class PropertiesCommand extends ContentList.ContentListCommandBase {
                    onStateChanged(e) {
                        this.enabled = this.entities.length == 1;
                    }
                    onExecute(e) {
                        PDJS.Entities.EntityDialogs.showProperties({
                            entityId: this.ids[0],
                            onSave: () => {
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .events
                                    .publish(ContentList.ContentListPageEvent.onGridRefreshRequest);
                            }
                        });
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "entity/properties",
                            tooltip: "Properties",
                            label: "Properties",
                            icon: "preferences.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                }
                ContentList.PropertiesCommand = PropertiesCommand;
            })(ContentList = Explorer.ContentList || (Explorer.ContentList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var ContentList;
            (function (ContentList) {
                class ReportsCommand extends ContentList.ContentListCommandBase {
                    onStateChanged(e) {
                        this.enabled = this.entities.length == 1;
                    }
                    onExecute(e) {
                        let entity = this.entities[0];
                        PDJS.JS.ProspectDirector.Modules.Reports.ReportSelectorDialog.Dialog.show({
                            params: {
                                entityId: entity.id,
                                entityTypeId: entity.type
                            }
                        });
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "entity/reports",
                            tooltip: "Reports...",
                            label: "Reports...",
                            icon: "document_text.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                }
                ContentList.ReportsCommand = ReportsCommand;
            })(ContentList = Explorer.ContentList || (Explorer.ContentList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var DesignableList;
            (function (DesignableList) {
                class ContextMenuSegment extends Jade.UI.ContextMenuSegment {
                    onAddItems(e) {
                        e.addItem(new Jade.UI.ContextMenuItemCommand({
                            commandId: "designable-list/list-items:list-item/edit"
                        }));
                        e.addItem(new Jade.UI.ContextMenuItemCommand({
                            commandId: "designable-list/list-items:list-item/copy"
                        }));
                        e.addSeparator();
                        e.addItem(new Jade.UI.ContextMenuItemCommand({
                            commandId: "designable-list/list-items:list-item/delete"
                        }));
                    }
                }
                DesignableList.ContextMenuSegment = ContextMenuSegment;
            })(DesignableList = Explorer.DesignableList || (Explorer.DesignableList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var DesignableList;
            (function (DesignableList) {
                class DesignableListCommandBase extends Jade.Command {
                    constructor(props) {
                        super(props);
                        this.state.set({
                            entityId: null,
                            folderId: null,
                            entities: null,
                            allowDeleteListItem: null,
                            allowEdit: null,
                            extensionId: null,
                            documentId: null,
                            items: null
                        });
                    }
                    get allowDeleteListItem() {
                        return this.state.get("allowDeleteListItem");
                    }
                    get allowEdit() {
                        return this.state.get("allowEdit");
                    }
                    get documentId() {
                        return this.state.get("documentId", null);
                    }
                    get entityId() {
                        return this.state.get("entityId");
                    }
                    get extensionId() {
                        return this.state.get("extensionId");
                    }
                    get folderId() {
                        return this.state.get("folderId");
                    }
                    get items() {
                        return this.state.get("items", []);
                    }
                }
                DesignableList.DesignableListCommandBase = DesignableListCommandBase;
            })(DesignableList = Explorer.DesignableList || (Explorer.DesignableList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var DesignableList;
            (function (DesignableList) {
                class DesignableListDialog extends Jade.UI.Dialog {
                    get okButton() {
                        return this.node.find("button[data-role=ok-button]");
                    }
                    get cancelButton() {
                        return this.node.find("button[data-role=cancel-button]");
                    }
                    get documentId() {
                        return this.state.get("documentId");
                    }
                    get entityId() {
                        return this.state.get("entityId");
                    }
                    get extensionId() {
                        return this.state.get("extensionId");
                    }
                    get rowIds() {
                        return this.state.get("rowIds", []);
                    }
                    get isCopy() {
                        return this.state.get("isCopy");
                    }
                    get viewBox() {
                        return this.state.get("viewBox", null);
                    }
                    set viewBox(value) {
                        this.state.set("viewBox", value);
                    }
                    onActivate(e) {
                        this.viewBox = new PDJS.Canvas.Actual.CanvasViewBox({
                            createContext: false,
                            documentId: this.documentId,
                            documentState: null,
                            entityId: this.entityId,
                            extensionId: this.extensionId,
                            rowIds: this.rowIds
                        });
                        this.controls.add(this.viewBox);
                        switch (true) {
                            case this.isCopy:
                                this.setTitle("Copy List Item");
                                break;
                            case this.rowIds.length > 1:
                                this.setTitle("Batch Edit List Items");
                                break;
                            case this.rowIds.length == 1:
                                this.setTitle("Edit List Item");
                                break;
                            case this.rowIds.length == 0:
                                this.setTitle("New List Item");
                                break;
                        }
                        this.okButton.on("click", $.proxy(this.okButton_onClick, this));
                        this.cancelButton.on("click", $.proxy(this.cancelButton_onClick, this));
                    }
                    okButton_onClick() {
                        let isCreate = (this.rowIds.length == 0 || this.isCopy);
                        PDJS.Canvas.Actual.Forms.FormFieldAnimation.start(null, 1500, PDJS.Canvas.Actual.Forms.FormFieldAnimationType.pending);
                        if (isCreate) {
                            this.createItem();
                        }
                        else {
                            this.updateItem();
                        }
                    }
                    cancelButton_onClick() {
                        this.close();
                    }
                    template() {
                        return `<div class="${CanvasJS.Actual.CanvasCss.Element}">
                <div data-controls style="position:absolute;top:0;bottom:46px;right:0;left:0;overflow:auto;">
                
                </div>
                <div style="position:absolute;bottom:0;right:0;left:0;height:46px;text-align:right;padding:10px 10px 0 10px;box-sizing:border-box;border:0px solid #AAAAAA;border-top-width:1px;">
                    <button data-role="ok-button" class="-jadejs-button">OK</button>
                    <button data-role="cancel-button" class="-jadejs-button">Cancel</button>
                </div>
            </div>`;
                    }
                    getWindowOptions() {
                        return {
                            maximized: false,
                            height: 500,
                            width: 680
                        };
                    }
                    createItem() {
                        let service = new PDJS.Services.Canvas.ListItemService();
                        service.create({
                            document: this.viewBox.document.source,
                            entityId: this.entityId,
                            extensionId: this.extensionId,
                            success: (e) => {
                                this.itemRequestSuccess(e.data);
                            },
                            error: (e) => {
                                this.itemRequestError(e.data);
                            }
                        });
                    }
                    updateItem() {
                        let service = new PDJS.Services.Canvas.ListItemService();
                        service.update({
                            document: this.viewBox.document.source,
                            entityId: this.entityId,
                            extensionId: this.extensionId,
                            rowIds: this.rowIds,
                            success: (e) => {
                                this.itemRequestSuccess(e.data);
                            },
                            error: (e) => {
                                this.itemRequestError(e.data);
                            }
                        });
                    }
                    itemRequestSuccess(e) {
                        setTimeout(() => {
                            switch (true) {
                                case e.hasValidationErrors:
                                    PDJS.Canvas.Actual.CanvasRefresh.validate({
                                        validationErrors: e.validationErrors
                                    });
                                    PDJS.Canvas.Actual.Forms.FormFieldAnimation.start(null, 1500, PDJS.Canvas.Actual.Forms.FormFieldAnimationType.error);
                                    this.okButton.prop("disabled", false);
                                    break;
                                case e.hasScriptErrors:
                                    PDJS.Canvas.Actual.Forms.FormFieldAnimation.start(null, 1500, PDJS.Canvas.Actual.Forms.FormFieldAnimationType.error);
                                    Jade.UI.MultiMessageDialog.open({
                                        dialogStyle: Jade.UI.MessageDialogStyle.Error,
                                        dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                                        title: "Request Failure",
                                        header: "The request could not be completed due to the following errors:",
                                        messages: e.scriptErrors,
                                        select: (e) => {
                                            e.close();
                                        }
                                    });
                                    this.okButton.prop("disabled", false);
                                    break;
                                case e.hasScriptAlerts:
                                    PDJS.Canvas.Actual.Forms.FormFieldAnimation.start(null, 1500, PDJS.Canvas.Actual.Forms.FormFieldAnimationType.success);
                                    Jade.UI.MultiMessageDialog.open({
                                        dialogStyle: Jade.UI.MessageDialogStyle.Success,
                                        dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                                        title: "Request Success",
                                        header: "The request completed successfully with the following alerts generated by the application:",
                                        messages: e.scriptAlerts,
                                        select: (e2) => {
                                            e2.close();
                                            this.close({
                                                command: "ok",
                                                data: {
                                                    rowId: e.rowId
                                                }
                                            });
                                        }
                                    });
                                default:
                                    PDJS.Canvas.Actual.Forms.FormFieldAnimation.start(null, 1500, PDJS.Canvas.Actual.Forms.FormFieldAnimationType.success);
                                    this.close({
                                        command: "ok",
                                        data: {
                                            rowId: e.rowId
                                        }
                                    });
                                    break;
                            }
                        }, 500);
                    }
                    itemRequestError(e) {
                        PDJS.Canvas.Actual.Forms.FormFieldAnimation.stop(null);
                        this.okButton.prop("disabled", false);
                    }
                    static open(options = {}, callback) {
                        let result = new DesignableListDialog(options);
                        if (_.isFunction(callback)) {
                            callback();
                        }
                        return result;
                    }
                }
                DesignableList.DesignableListDialog = DesignableListDialog;
            })(DesignableList = Explorer.DesignableList || (Explorer.DesignableList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var DesignableList;
            (function (DesignableList) {
                let DeisgnableListPageEvent;
                (function (DeisgnableListPageEvent) {
                    DeisgnableListPageEvent["onListItemRefreshRequest"] = "list-item/refresh-request";
                })(DeisgnableListPageEvent = DesignableList.DeisgnableListPageEvent || (DesignableList.DeisgnableListPageEvent = {}));
                class DesignableListPage extends Explorer.ExplorerContent {
                    constructor(options) {
                        super(options);
                    }
                    get viewStateId() {
                        return this.state.get("data.viewStateId");
                    }
                    get documentId() {
                        return this.state.get("data.documentId");
                    }
                    get entityId() {
                        return this.state.get("data.entityId");
                    }
                    get extensionId() {
                        return this.state.get("data.extensionId");
                    }
                    get folderId() {
                        return this.state.get("data.folderId");
                    }
                    get contextualFilters() {
                        return this.state.get("data.contextualFilters");
                    }
                    get menuNode() {
                        return this.node.find("div[role=menu]");
                    }
                    template() {
                        return `<div style="position:absolute;top:10px;right:0;bottom:0;left:0;">
                        <div role="menu" style="position:absolute;top:0;left:10px;right:10px;height:30px;display:none;"></div>
                        <div role="grid" style="position:absolute;top:40px;left:10px;right:10px;bottom:10px;border:1px solid #CCCCCC;"></div>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.menu_init();
                        this.grid_init();
                        Jade.Application
                            .instance
                            .contexts
                            .current
                            .events
                            .subscribe(DeisgnableListPageEvent.onListItemRefreshRequest, (e) => {
                            this.m_grid.refresh(e || {});
                        });
                        setTimeout(() => {
                            Jade.Application
                                .instance
                                .contexts
                                .current
                                .commands
                                .setState({
                                "designable-list/list-items": {
                                    allowEdit: this.allowEdit,
                                    allowDeleteListItem: this.allowDeleteListItem
                                }
                            });
                            this.menuNode.show();
                        }, 200);
                    }
                    grid_init() {
                        this.m_grid = new PD.Web.UI.Controls.ViewGrid({
                            pk: "id",
                            container: this.node.find("[role=grid]"),
                            selectionMode: "multiple",
                            viewStateId: this.viewStateId,
                            selectOnRightClick: true,
                            defaultSelectionEnabled: true,
                            selection: {
                                map: (e) => {
                                    return _.map(e.selections.toArray(), (item, index) => {
                                        return {
                                            id: item.id
                                        };
                                    });
                                }
                            },
                            change: (e) => {
                                let ids = _.map(e.selections.toArray(), (e) => {
                                    return e.id;
                                });
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .commands
                                    .setState({
                                    "designable-list/list-items": {
                                        documentId: this.documentId,
                                        entityId: this.entityId,
                                        extensionId: this.extensionId,
                                        folderId: this.folderId,
                                        items: ids
                                    }
                                });
                            },
                            dblclick: (e) => {
                                let ids = _.map(e.selections.toArray(), (e) => {
                                    return e.id;
                                });
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .commands
                                    .execute("designable-list/list-items:list-item/edit", {
                                    documentId: this.documentId,
                                    entityId: this.entityId,
                                    extensionId: this.extensionId,
                                    folderId: this.folderId,
                                    items: ids
                                });
                            },
                            needContext: (e) => {
                                e.filters = this.contextualFilters ? this.contextualFilters : [];
                            },
                            contextMenu: () => {
                                this.contextMenu_init();
                            }
                        });
                    }
                    menu_init() {
                        this.m_menu = new Jade.UI.ToolBar({
                            insertAt: "[role=menu]",
                            segments: [new DesignableList.ToolbarSegment()]
                        });
                        this.controls.add(this.m_menu);
                    }
                    contextMenu_init() {
                        let contextMenu = new PDJS.Shared.UI.Controls.GridContextMenu({
                            grid: this.m_grid,
                            segments: [
                                {
                                    type: "PDJS.Hub.Explorer.DesignableList.ContextMenuSegment",
                                    context: () => {
                                        let ids = _.map(this.m_grid.getSelections().toArray(), (e) => {
                                            return e.id;
                                        });
                                        return {
                                            documentId: this.documentId,
                                            entityId: this.entityId,
                                            extensionId: this.extensionId,
                                            folderId: this.folderId,
                                            items: ids
                                        };
                                    }
                                }
                            ]
                        });
                        this.controls.add(contextMenu);
                    }
                }
                DesignableList.DesignableListPage = DesignableListPage;
            })(DesignableList = Explorer.DesignableList || (Explorer.DesignableList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var DesignableList;
            (function (DesignableList) {
                class ToolbarSegment extends Jade.UI.ToolBarSegment {
                    onAddItems(e) {
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "designable-list/list-items:list-item/create"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "designable-list/list-items:list-item/edit"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "designable-list/list-items:list-item/copy"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "designable-list/list-items:list-item/delete"
                        }));
                    }
                }
                DesignableList.ToolbarSegment = ToolbarSegment;
            })(DesignableList = Explorer.DesignableList || (Explorer.DesignableList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var DesignableList;
            (function (DesignableList) {
                class CopyListItemCommand extends DesignableList.DesignableListCommandBase {
                    onExecute(e) {
                        PDJS.Hub.Explorer.DesignableList.DesignableListDialog.open({
                            documentId: this.documentId,
                            entityId: this.entityId,
                            extensionId: this.extensionId,
                            rowIds: this.items,
                            isCopy: true,
                            callbacks: {
                                ok: (sender, e) => {
                                    let rowId = e.rowId;
                                    setTimeout(() => {
                                        Jade.Application
                                            .instance
                                            .contexts
                                            .current
                                            .events
                                            .publish(DesignableList.DeisgnableListPageEvent.onListItemRefreshRequest, {
                                            clear: true,
                                            selections: [rowId]
                                        });
                                    }, 100);
                                }
                            }
                        });
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "list-item/copy",
                            tooltip: "Copy",
                            label: "Copy",
                            icon: "copy.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                    onStateChanged(e) {
                        this.enabled = this.items.length == 1 && this.allowEdit;
                    }
                }
                DesignableList.CopyListItemCommand = CopyListItemCommand;
            })(DesignableList = Explorer.DesignableList || (Explorer.DesignableList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var DesignableList;
            (function (DesignableList) {
                class CreateListItemCommand extends DesignableList.DesignableListCommandBase {
                    onExecute(e) {
                        PDJS.Hub.Explorer.DesignableList.DesignableListDialog.open({
                            documentId: this.documentId,
                            entityId: this.entityId,
                            extensionId: this.extensionId,
                            rowIds: [],
                            isCopy: false,
                            callbacks: {
                                ok: (sender, e) => {
                                    let rowId = e.rowId;
                                    setTimeout(() => {
                                        Jade.Application
                                            .instance
                                            .contexts
                                            .current
                                            .events
                                            .publish(DesignableList.DeisgnableListPageEvent.onListItemRefreshRequest, {
                                            clear: true,
                                            selections: [rowId]
                                        });
                                    }, 250);
                                }
                            }
                        });
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "list-item/create",
                            tooltip: "New",
                            label: "New",
                            icon: "add.png",
                            enabled: true,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                    onStateChanged(e) {
                        this.enabled = this.allowEdit;
                    }
                }
                DesignableList.CreateListItemCommand = CreateListItemCommand;
            })(DesignableList = Explorer.DesignableList || (Explorer.DesignableList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var DesignableList;
            (function (DesignableList) {
                class DeleteListItemCommand extends DesignableList.DesignableListCommandBase {
                    onExecute(e) {
                        Jade.UI.MessageDialog.open({
                            dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                            dialogButtons: Jade.UI.MessageDialogButtonStyle.OKCancel,
                            allowClose: true,
                            title: "Delete List Items",
                            message: "Delete the selected list items?",
                            select: (e) => {
                                e.close();
                                if (e.button === Jade.UI.MessageDialogButton.ok) {
                                    this.deleteItems();
                                }
                            }
                        });
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "list-item/delete",
                            tooltip: "Delete",
                            label: "Delete",
                            icon: "delete.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                    onStateChanged(e) {
                        super.onStateChanged(e);
                        this.enabled = this.items.length > 0 && this.allowDeleteListItem;
                    }
                    deleteItems() {
                        PDJS.JS.PD.Shared.Dialogs.TaskStatus.open({
                            config: {
                                title: "Delete List Items"
                            },
                            showDetail: true,
                            enableClose: false,
                            taskStart: (args) => {
                                Jade.Ajax.call({
                                    type: "POST",
                                    url: Jade.Path.resolve("~/ExplorerContent/DesignableListItemDelete"),
                                    data: {
                                        entityId: this.entityId,
                                        folderId: this.folderId,
                                        items: JSON.stringify(this.items)
                                    },
                                    success: function (e) {
                                        args.startPolling(e);
                                    },
                                    error: function (e) {
                                        args.abort(e.responseJSON);
                                        e.errorHandled = true;
                                    }
                                });
                            },
                            taskSuccess: function (e) {
                                e.enableClose(true);
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .events
                                    .publish(DesignableList.DeisgnableListPageEvent.onListItemRefreshRequest, {
                                    clear: true
                                });
                            }
                        });
                    }
                }
                DesignableList.DeleteListItemCommand = DeleteListItemCommand;
            })(DesignableList = Explorer.DesignableList || (Explorer.DesignableList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var DesignableList;
            (function (DesignableList) {
                class DesignableListCommands extends Jade.CommandGroup {
                    constructor() {
                        super("designable-list/list-items");
                    }
                    registerCommands(e) {
                        e.commands.add(new DesignableList.CreateListItemCommand({}));
                        e.commands.add(new DesignableList.EditListItemCommand({}));
                        e.commands.add(new DesignableList.CopyListItemCommand({}));
                        e.commands.add(new DesignableList.DeleteListItemCommand({}));
                    }
                }
                DesignableList.DesignableListCommands = DesignableListCommands;
            })(DesignableList = Explorer.DesignableList || (Explorer.DesignableList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
Jade.Application.onStart(function () {
    Jade.CommandGroups.add(PDJS.Hub.Explorer.DesignableList.DesignableListCommands);
});
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var DesignableList;
            (function (DesignableList) {
                class EditListItemCommand extends DesignableList.DesignableListCommandBase {
                    onExecute(e) {
                        PDJS.Hub.Explorer.DesignableList.DesignableListDialog.open({
                            documentId: this.documentId,
                            entityId: this.entityId,
                            extensionId: this.extensionId,
                            rowIds: this.items,
                            isCopy: false,
                            callbacks: {
                                ok: (sender, e) => {
                                    setTimeout(() => {
                                        Jade.Application
                                            .instance
                                            .contexts
                                            .current
                                            .events
                                            .publish(DesignableList.DeisgnableListPageEvent.onListItemRefreshRequest);
                                    }, 100);
                                }
                            }
                        });
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "list-item/edit",
                            tooltip: "Edit",
                            label: "Edit",
                            icon: "pencil.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                    onStateChanged(e) {
                        this.enabled = this.items.length > 0 && this.allowEdit;
                    }
                }
                DesignableList.EditListItemCommand = EditListItemCommand;
            })(DesignableList = Explorer.DesignableList || (Explorer.DesignableList = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileExplorer;
            (function (FileExplorer) {
                class ContextMenuSegment extends Jade.UI.ContextMenuSegment {
                    onAddItems(e) {
                        e.addItem(new Jade.UI.ContextMenuItemCommand({
                            commandId: "explorer/file-explorer:file/download"
                        }));
                        e.addSeparator();
                        e.addItem(new Jade.UI.ContextMenuItemCommand({
                            commandId: "explorer/file-explorer:file/properties"
                        }));
                    }
                }
                FileExplorer.ContextMenuSegment = ContextMenuSegment;
            })(FileExplorer = Explorer.FileExplorer || (Explorer.FileExplorer = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileExplorer;
            (function (FileExplorer) {
                let FileExplorerPageEvent;
                (function (FileExplorerPageEvent) {
                    FileExplorerPageEvent["onGridRefreshRequest"] = "grid/refresh-request";
                })(FileExplorerPageEvent = FileExplorer.FileExplorerPageEvent || (FileExplorer.FileExplorerPageEvent = {}));
                class FileExplorerPage extends Explorer.ExplorerContent {
                    constructor(options) {
                        super(options);
                    }
                    get viewStateId() {
                        return this.state.get("data.viewStateId");
                    }
                    get entityId() {
                        return this.state.get("data.entityId");
                    }
                    get folderId() {
                        return this.state.get("data.folderId");
                    }
                    get contextualFilters() {
                        return this.state.get("data.contextualFilters");
                    }
                    template() {
                        return `<div style="position:absolute;top:10px;right:0;bottom:0;left:0;">
                        <div role="menu" style="position:absolute;top:0;left:10px;right:10px;height:30px;"></div>
                        <div role="grid" style="position:absolute;top:40px;left:10px;right:10px;bottom:10px;border:1px solid #CCCCCC;"></div>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.grid_init();
                        this.menu_init();
                        Jade.Application
                            .instance
                            .contexts
                            .current
                            .events
                            .subscribe(FileExplorerPageEvent.onGridRefreshRequest, (e) => {
                            this.m_grid.refresh(e || {});
                        });
                    }
                    grid_init() {
                        this.m_grid = new PD.Web.UI.Controls.ViewGrid({
                            pk: "id",
                            container: this.node.find("[role=grid]"),
                            selectionMode: "multiple",
                            viewStateId: this.viewStateId,
                            selectOnRightClick: true,
                            defaultSelectionEnabled: true,
                            selection: {
                                map: (e) => {
                                    return _.map(e.selections.toArray(), (item, index) => {
                                        return {
                                            id: item.id
                                        };
                                    });
                                }
                            },
                            change: (e) => {
                                let ids = _.map(e.selections.toArray(), (e) => {
                                    return e.id;
                                });
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .commands
                                    .setState({
                                    "explorer/file-explorer": {
                                        entityId: this.entityId,
                                        folderId: this.folderId,
                                        items: ids
                                    }
                                });
                            },
                            dblclick: (e) => {
                                let ids = _.map(e.selections.toArray(), (e) => {
                                    return e.id;
                                });
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .commands
                                    .execute("explorer/file-explorer:file/download", {
                                    entityId: this.entityId,
                                    folderId: this.folderId,
                                    items: ids
                                });
                            },
                            needContext: (e) => {
                                e.filters = this.contextualFilters ? this.contextualFilters : [];
                            },
                            contextMenu: () => {
                                this.contextMenu_init();
                            }
                        });
                    }
                    menu_init() {
                        this.m_menu = new Jade.UI.ToolBar({
                            insertAt: "[role=menu]",
                            segments: [new FileExplorer.ToolbarSegment()]
                        });
                        this.controls.add(this.m_menu);
                    }
                    contextMenu_init() {
                        let contextMenu = new PDJS.Shared.UI.Controls.GridContextMenu({
                            grid: this.m_grid,
                            segments: [
                                {
                                    type: "PDJS.Hub.Explorer.FileExplorer.ContextMenuSegment",
                                    context: () => {
                                        let ids = _.map(this.m_grid.getSelections().toArray(), (e) => {
                                            return e.id;
                                        });
                                        return {
                                            entityId: this.entityId,
                                            folderId: this.folderId,
                                            items: ids
                                        };
                                    }
                                }
                            ]
                        });
                        this.controls.add(contextMenu);
                    }
                }
                FileExplorer.FileExplorerPage = FileExplorerPage;
            })(FileExplorer = Explorer.FileExplorer || (Explorer.FileExplorer = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileExplorer;
            (function (FileExplorer) {
                class ToolbarSegment extends Jade.UI.ToolBarSegment {
                    onAddItems(e) {
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/file-explorer:file/download"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/file-explorer:file/properties"
                        }));
                    }
                }
                FileExplorer.ToolbarSegment = ToolbarSegment;
            })(FileExplorer = Explorer.FileExplorer || (Explorer.FileExplorer = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileExplorer;
            (function (FileExplorer) {
                class Commands extends Jade.CommandGroup {
                    constructor() {
                        super("explorer/file-explorer");
                    }
                    registerCommands(e) {
                        e.commands.add(new FileExplorer.DownloadCommand({}));
                        e.commands.add(new FileExplorer.PropertiesCommand({}));
                    }
                }
                FileExplorer.Commands = Commands;
                Jade.Application.onStart(() => {
                    Jade.CommandGroups.add(Commands);
                });
            })(FileExplorer = Explorer.FileExplorer || (Explorer.FileExplorer = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileExplorer;
            (function (FileExplorer) {
                class DownloadCommand extends Jade.Command {
                    constructor(props) {
                        super(props);
                        this.state.set({
                            documentId: null,
                            entityId: null,
                            extensionId: null,
                            items: null
                        });
                    }
                    get documentId() {
                        return this.state.get("documentId", null);
                    }
                    get entityId() {
                        return this.state.get("entityId");
                    }
                    get extensionId() {
                        return this.state.get("extensionId");
                    }
                    get items() {
                        return this.state.get("items");
                    }
                    onStateChanged(e) {
                        this.enabled = this.items.length > 0;
                    }
                    onExecute(e) {
                        if (this.items.length == 1) {
                            PDJS.JS.ProspectDirector.RUNTIME.iframeRequest("~/file/download/" + this.items[0]);
                        }
                        if (this.items.length > 1) {
                            this.downloadMultipleFiles();
                        }
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "file/download",
                            tooltip: "Download",
                            label: "Download",
                            icon: "download.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                    downloadMultipleFiles() {
                        PDJS.JS.PD.Shared.Dialogs.TaskStatus.open({
                            config: {
                                title: "Download Files"
                            },
                            showDetail: true,
                            taskStart: (args) => {
                                args.ajax({
                                    type: "POST",
                                    url: Jade.Path.resolve("~/Hub/File/DownloadMultipleFiles"),
                                    data: {
                                        ids: this.items
                                    }
                                });
                            },
                            taskSuccess: (args) => {
                                if (args.tags.path != null) {
                                    PDJS.JS.ProspectDirector.RUNTIME.iframeRequest(`~/file/DownloadMultipleFilesZip?path=${args.tags.path}`);
                                    args.close();
                                }
                            }
                        });
                    }
                }
                FileExplorer.DownloadCommand = DownloadCommand;
            })(FileExplorer = Explorer.FileExplorer || (Explorer.FileExplorer = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileExplorer;
            (function (FileExplorer) {
                class PropertiesCommand extends Jade.Command {
                    constructor(props) {
                        super(props);
                        this.state.set({
                            entityId: null,
                            folderId: null,
                            items: null
                        });
                    }
                    get entityId() {
                        return this.state.get("entityId");
                    }
                    get folderId() {
                        return this.state.get("entityId");
                    }
                    get items() {
                        return this.state.get("items");
                    }
                    onStateChanged(e) {
                        this.enabled = this.items.length == 1;
                    }
                    onExecute(e) {
                        PDJS.Shared.Files.EditFiles.showProperties({
                            entityId: this.items[0],
                            onSave: () => {
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .events
                                    .publish(FileExplorer.FileExplorerPageEvent.onGridRefreshRequest);
                            }
                        });
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "file/properties",
                            tooltip: "Properties",
                            label: "Properties",
                            icon: "pencil.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                }
                FileExplorer.PropertiesCommand = PropertiesCommand;
            })(FileExplorer = Explorer.FileExplorer || (Explorer.FileExplorer = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class ContextMenuSegment extends Jade.UI.ContextMenuSegment {
                    onAddItems(e) {
                        e.addItem(new Jade.UI.ContextMenuItemCommand({
                            commandId: "explorer/file-folder:file/download"
                        }));
                        e.addSeparator();
                        e.addItem(new Jade.UI.ContextMenuItemCommand({
                            commandId: "explorer/file-folder:file/delete"
                        }));
                        e.addItem(new Jade.UI.ContextMenuItemCommand({
                            commandId: "explorer/file-folder:file/change-type"
                        }));
                        e.addSeparator();
                        e.addItem(new Jade.UI.ContextMenuItemCommand({
                            commandId: "explorer/file-folder:file/move"
                        }));
                        e.addItem(new Jade.UI.ContextMenuItemCommand({
                            commandId: "explorer/file-folder:file/replace"
                        }));
                        e.addSeparator();
                        e.addItem(new Jade.UI.ContextMenuItemCommand({
                            commandId: "explorer/file-folder:file/properties"
                        }));
                    }
                }
                FileFolder.ContextMenuSegment = ContextMenuSegment;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                let FileFolderPageEvent;
                (function (FileFolderPageEvent) {
                    FileFolderPageEvent["onGridRefreshRequest"] = "grid/refresh-request";
                })(FileFolderPageEvent = FileFolder.FileFolderPageEvent || (FileFolder.FileFolderPageEvent = {}));
                class FileFolderPage extends Explorer.ExplorerContent {
                    constructor(options) {
                        super(options);
                    }
                    get viewStateId() {
                        return this.state.get("data.viewStateId");
                    }
                    get entityId() {
                        return this.state.get("data.entityId");
                    }
                    get folderId() {
                        return this.state.get("data.folderId");
                    }
                    get contextualFilters() {
                        return this.state.get("data.contextualFilters");
                    }
                    get menuNode() {
                        return this.node.find("div[role=menu]");
                    }
                    template() {
                        return `<div style="position:absolute;top:10px;right:0;bottom:0;left:0;">
                        <div role="menu" style="position:absolute;top:0;left:10px;right:10px;height:30px;display:none;"></div>
                        <div role="grid" style="position:absolute;top:40px;left:10px;right:10px;bottom:10px;border:1px solid #CCCCCC;"></div>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.grid_init();
                        this.menu_init();
                        Jade.Application
                            .instance
                            .contexts
                            .current
                            .events
                            .subscribe(FileFolderPageEvent.onGridRefreshRequest, (e) => {
                            this.m_grid.refresh(e || {});
                        });
                        setTimeout(() => {
                            Jade.Application
                                .instance
                                .contexts
                                .current
                                .commands
                                .setState({
                                "explorer/file-folder": {
                                    allowAddFiles: this.allowAddFiles,
                                    allowReplaceFiles: this.allowReplaceFiles,
                                    allowUploads: this.allowUploads,
                                    allowEdit: this.allowEdit,
                                    allowDeleteFile: this.allowDeleteFile
                                }
                            });
                            this.menuNode.show();
                        }, 200);
                    }
                    grid_init() {
                        this.m_grid = new PD.Web.UI.Controls.ViewGrid({
                            pk: "id",
                            container: this.node.find("[role=grid]"),
                            selectionMode: "multiple",
                            viewStateId: this.viewStateId,
                            selectOnRightClick: true,
                            defaultSelectionEnabled: true,
                            selection: {
                                map: (e) => {
                                    return _.map(e.selections.toArray(), (item, index) => {
                                        return {
                                            id: item.id,
                                            name: item.ObjectName,
                                            extension: item.d0_general_FileExt
                                        };
                                    });
                                }
                            },
                            change: (e) => {
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .commands
                                    .setState({
                                    "explorer/file-folder": {
                                        entityId: this.entityId,
                                        folderId: this.folderId,
                                        files: e.selections.toArray()
                                    }
                                });
                            },
                            dblclick: (e) => {
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .commands
                                    .execute("explorer/file-folder:file/download", {
                                    entityId: this.entityId,
                                    folderId: this.folderId,
                                    files: e.selections.toArray()
                                });
                            },
                            needContext: (e) => {
                                e.filters = this.contextualFilters ? this.contextualFilters : [];
                            },
                            contextMenu: () => {
                                this.contextMenu_init();
                            }
                        });
                    }
                    menu_init() {
                        this.m_menu = new Jade.UI.ToolBar({
                            insertAt: "[role=menu]",
                            segments: [new FileFolder.ToolbarSegment()]
                        });
                        this.controls.add(this.m_menu);
                    }
                    contextMenu_init() {
                        let contextMenu = new PDJS.Shared.UI.Controls.GridContextMenu({
                            grid: this.m_grid,
                            segments: [
                                {
                                    type: "PDJS.Hub.Explorer.FileFolder.ContextMenuSegment",
                                    context: () => {
                                        return {
                                            entityId: this.entityId,
                                            folderId: this.folderId,
                                            files: this.m_grid.getSelections().toArray()
                                        };
                                    }
                                }
                            ]
                        });
                        this.controls.add(contextMenu);
                    }
                }
                FileFolder.FileFolderPage = FileFolderPage;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class ToolbarSegment extends Jade.UI.ToolBarSegment {
                    onAddItems(e) {
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/file-folder:file/upload"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/file-folder:file/download"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/file-folder:file/properties"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/file-folder:file/delete"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/file-folder:file/change-type"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/file-folder:file/move"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/file-folder:file/replace"
                        }));
                    }
                }
                FileFolder.ToolbarSegment = ToolbarSegment;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class FileFolderCommandBase extends Jade.Command {
                    constructor(props) {
                        super(props);
                        this.state.set({
                            entityId: null,
                            folderId: null,
                            files: null,
                            allowReplaceFiles: null,
                            allowUploads: null,
                            allowEdit: null,
                            allowDeleteFile: null,
                            allowAddFiles: null
                        });
                    }
                    get allowDeleteFile() {
                        return this.state.get("allowDeleteFile", false);
                    }
                    get allowEdit() {
                        return this.state.get("allowEdit", false);
                    }
                    get allowAddFiles() {
                        return this.state.get("allowAddFiles", false);
                    }
                    get allowReplaceFiles() {
                        return this.state.get("allowReplaceFiles", false);
                    }
                    get allowUploads() {
                        return this.state.get("allowUploads", false);
                    }
                    get entityId() {
                        return this.state.get("entityId");
                    }
                    get folderId() {
                        return this.state.get("folderId");
                    }
                    get files() {
                        return this.state.get("files", []);
                    }
                    get ids() {
                        return this.files.map(e => {
                            return e.id;
                        });
                    }
                }
                FileFolder.FileFolderCommandBase = FileFolderCommandBase;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class FileFolderCommands extends Jade.CommandGroup {
                    constructor() {
                        super("explorer/file-folder");
                    }
                    registerCommands(e) {
                        e.commands.add(new FileFolder.DownloadCommand({}));
                        e.commands.add(new FileFolder.PropertiesCommand({}));
                        e.commands.add(new FileFolder.UploadCommand({}));
                        e.commands.add(new FileFolder.ChangeTypeCommand({}));
                        e.commands.add(new FileFolder.MoveCommand({}));
                        e.commands.add(new FileFolder.DeleteCommand({}));
                        e.commands.add(new FileFolder.ReplaceCommand({}));
                    }
                }
                FileFolder.FileFolderCommands = FileFolderCommands;
                Jade.Application.onStart(() => {
                    Jade.CommandGroups.add(FileFolderCommands);
                });
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class StoredFileCommandBase extends Jade.Command {
                    constructor(props) {
                        super(props);
                        this.state.set({
                            files: [],
                            status: FileFolder.UploadStatus.STOPPED
                        });
                        this.state.doNotSerialize.add("files");
                    }
                    get files() {
                        return this.state.get("files", null);
                    }
                    get status() {
                        return this.state.get("status", FileFolder.UploadStatus.STOPPED);
                    }
                    get hasFiles() {
                        return this.files != null && this.files.count > 0;
                    }
                    get hasSelectedFiles() {
                        return this.files.selected.count > 0;
                    }
                }
                FileFolder.StoredFileCommandBase = StoredFileCommandBase;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class StoredFileCommands extends Jade.CommandGroup {
                    constructor() {
                        super("explorer/file-upload");
                    }
                    registerCommands(e) {
                        e.commands.add(new FileFolder.AddFilesCommand({}));
                        e.commands.add(new FileFolder.RemoveFilesCommand({}));
                        e.commands.add(new FileFolder.ClearFilesCommand({}));
                        e.commands.add(new FileFolder.SetFileTypeCommand({}));
                        e.commands.add(new FileFolder.SelectFilesCommand({}));
                    }
                }
                FileFolder.StoredFileCommands = StoredFileCommands;
                Jade.Application.onStart(() => {
                    Jade.CommandGroups.add(StoredFileCommands);
                });
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class ChangeTypeCommand extends FileFolder.FileFolderCommandBase {
                    onStateChanged(e) {
                        this.enabled = this.files.length > 0 && this.allowEdit;
                    }
                    onExecute(e) {
                        FileFolder.ChangeDocumentTypeDialog.open({
                            entityId: this.entityId,
                            folderId: this.folderId,
                            fileIds: this.ids,
                            callbacks: {
                                ok: (sender, e) => {
                                    Jade.Application
                                        .instance
                                        .contexts
                                        .current
                                        .events
                                        .publish(FileFolder.FileFolderPageEvent.onGridRefreshRequest);
                                }
                            }
                        });
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "file/change-type",
                            tooltip: "Change Type",
                            label: "Change Type",
                            icon: "document_refresh.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                }
                FileFolder.ChangeTypeCommand = ChangeTypeCommand;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class DeleteCommand extends FileFolder.FileFolderCommandBase {
                    onExecute(e) {
                        Jade.UI.MessageDialog.open({
                            dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                            dialogButtons: Jade.UI.MessageDialogButtonStyle.OKCancel,
                            allowClose: true,
                            title: "Delete Files",
                            message: "Delete the selected files?",
                            select: (e) => {
                                e.close();
                                if (e.button === Jade.UI.MessageDialogButton.ok) {
                                    this.deleteFiles();
                                }
                            }
                        });
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "file/delete",
                            tooltip: "Delete",
                            label: "Delete",
                            icon: "delete.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                    onStateChanged(e) {
                        this.enabled = this.files.length > 0 && this.allowDeleteFile;
                    }
                    deleteFiles() {
                        PDJS.JS.PD.Shared.Dialogs.TaskStatus.open({
                            config: {
                                title: "Delete Files"
                            },
                            showDetail: true,
                            enableClose: false,
                            taskStart: (args) => {
                                PDJS.JS.PD.ajax({
                                    type: "POST",
                                    url: Jade.Path.resolve("~/File/Delete"),
                                    data: {
                                        id: this.ids
                                    },
                                    success: (e) => {
                                        args.startPolling(e);
                                    },
                                    error: (e) => {
                                        args.abort(e.responseJSON);
                                        e.errorHandled = true;
                                    }
                                });
                            },
                            taskSuccess: (e) => {
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .events
                                    .publish(FileFolder.FileFolderPageEvent.onGridRefreshRequest, {
                                    clear: true
                                });
                                e.enableClose(true);
                                this.refreshFileCounts();
                            }
                        });
                    }
                    refreshFileCounts() {
                        PDJS.JS.PD.ajax({
                            url: Jade.Path.resolve("~/Explorer/GetFolder"),
                            data: {
                                entityId: this.entityId,
                                folderId: this.folderId
                            },
                            success: function (e) {
                                PDJS.JS.ProspectDirector.RUNTIME.MODULES.Explorer.reloadNode(e);
                                if (PDJS.JS.ProspectDirector.RUNTIME.MODULES.ExplorerTabStrip) {
                                    PDJS.JS.ProspectDirector.RUNTIME.MODULES.ExplorerTabStrip.reloadTab(e);
                                }
                            }
                        });
                    }
                }
                FileFolder.DeleteCommand = DeleteCommand;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class DownloadCommand extends FileFolder.FileFolderCommandBase {
                    onStateChanged(e) {
                        this.enabled = this.files.length > 0;
                    }
                    onExecute(e) {
                        if (this.files.length == 1) {
                            PDJS.JS.ProspectDirector.RUNTIME.iframeRequest("~/file/download/" + this.ids[0]);
                        }
                        if (this.files.length > 1) {
                            this.downloadMultipleFiles();
                        }
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "file/download",
                            tooltip: "Download",
                            label: "Download",
                            icon: "download.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                    downloadMultipleFiles() {
                        PDJS.JS.PD.Shared.Dialogs.TaskStatus.open({
                            config: {
                                title: "Download Files"
                            },
                            showDetail: true,
                            taskStart: (args) => {
                                args.ajax({
                                    type: "POST",
                                    url: Jade.Path.resolve("~/Hub/File/DownloadMultipleFiles"),
                                    data: {
                                        ids: this.ids
                                    }
                                });
                            },
                            taskSuccess: (args) => {
                                if (args.tags.path != null) {
                                    PDJS.JS.ProspectDirector.RUNTIME.iframeRequest(`~/file/DownloadMultipleFilesZip?path=${args.tags.path}`);
                                    args.close();
                                }
                            }
                        });
                    }
                }
                FileFolder.DownloadCommand = DownloadCommand;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class MoveCommand extends FileFolder.FileFolderCommandBase {
                    onStateChanged(e) {
                        this.enabled = this.files.length > 0 && this.allowAddFiles;
                    }
                    onExecute(e) {
                        PDJS.JS.ProspectDirector.Modules.Explorer.Contents.FileMoveDialog.Dialog.show({
                            params: {
                                entityId: this.entityId,
                                folderId: this.folderId,
                                files: JSON.stringify(this.ids)
                            },
                            callbacks: {
                                ok: (sender, e) => {
                                    Jade.Application
                                        .instance
                                        .contexts
                                        .current
                                        .events
                                        .publish(FileFolder.FileFolderPageEvent.onGridRefreshRequest, {
                                        clear: true
                                    });
                                    PDJS.JS.ProspectDirector.RUNTIME.MODULES.Explorer.reloadNode(e.sourceFolder);
                                    PDJS.JS.ProspectDirector.RUNTIME.MODULES.Explorer.reloadNode(e.destinationFolder);
                                    if (PDJS.JS.ProspectDirector.RUNTIME.MODULES.ExplorerTabStrip) {
                                        PDJS.JS.ProspectDirector.RUNTIME.MODULES.ExplorerTabStrip.reloadTab(e.sourceFolder);
                                        PDJS.JS.ProspectDirector.RUNTIME.MODULES.ExplorerTabStrip.reloadTab(e.destinationFolder);
                                    }
                                }
                            }
                        });
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "file/move",
                            tooltip: "Move",
                            label: "Move",
                            icon: "document_into.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                }
                FileFolder.MoveCommand = MoveCommand;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class PropertiesCommand extends FileFolder.FileFolderCommandBase {
                    onStateChanged(e) {
                        this.enabled = this.files.length == 1;
                    }
                    onExecute(e) {
                        PDJS.Shared.Files.EditFiles.showProperties({
                            entityId: this.ids[0],
                            onSave: () => {
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .events
                                    .publish(FileFolder.FileFolderPageEvent.onGridRefreshRequest);
                            }
                        });
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "file/properties",
                            tooltip: "Properties",
                            label: "Properties",
                            icon: "pencil.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                }
                FileFolder.PropertiesCommand = PropertiesCommand;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class ReplaceCommand extends FileFolder.FileFolderCommandBase {
                    onStateChanged(e) {
                        this.enabled = this.files.length == 1 && this.allowReplaceFiles;
                    }
                    onExecute(e) {
                        let file = this.files[0];
                        PDJS.JS.PD.Hub.FileReplaceDialog.open({
                            fileId: file.id,
                            fileName: file.name,
                            fileExtension: file.extension,
                            callbacks: {
                                ok: (sender, e) => {
                                    setTimeout(() => {
                                        this.showSuccessMessage(file);
                                    }, 100);
                                    Jade.Application
                                        .instance
                                        .contexts
                                        .current
                                        .events
                                        .publish(FileFolder.FileFolderPageEvent.onGridRefreshRequest);
                                }
                            }
                        });
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "file/replace",
                            tooltip: "Replace",
                            label: "Replace",
                            icon: "documents_exchange.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                    showSuccessMessage(file) {
                        Jade.UI.MessageDialog.open({
                            dialogStyle: Jade.UI.MessageDialogStyle.Success,
                            dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                            allowClose: true,
                            title: "Success",
                            message: `The file "${file.name}${file.extension}" has been replaced successfully.`,
                            select: (e) => {
                                e.close();
                            }
                        });
                    }
                }
                FileFolder.ReplaceCommand = ReplaceCommand;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class UploadCommand extends FileFolder.FileFolderCommandBase {
                    onExecute(e) {
                        FileFolder.FileUploadDialog.open({
                            entityId: this.entityId,
                            folderId: this.folderId,
                            callbacks: {
                                ok: (sender, e) => {
                                    this.updateCounts();
                                    setTimeout(() => {
                                        Jade.Application
                                            .instance
                                            .contexts
                                            .current
                                            .events
                                            .publish(FileFolder.FileFolderPageEvent.onGridRefreshRequest);
                                    }, 100);
                                }
                            }
                        });
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "file/upload",
                            tooltip: "Upload",
                            label: "Upload",
                            icon: "upload.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                    onStateChanged(e) {
                        this.enabled = this.allowAddFiles;
                        this.visible = this.allowUploads;
                    }
                    updateCounts() {
                        Jade.Ajax.call({
                            type: Jade.HttpVerb.GET,
                            url: Jade.Path.resolve("~/Hub/Explorer/GetFolderInfo"),
                            data: {
                                entityId: this.entityId,
                                srcId: this.folderId
                            },
                            success: (e) => {
                                PDJS.JS.ProspectDirector.RUNTIME.MODULES.Explorer.reloadNode(e.src);
                                if (PDJS.JS.ProspectDirector.RUNTIME.MODULES.ExplorerTabStrip) {
                                    PDJS.JS.ProspectDirector.RUNTIME.MODULES.ExplorerTabStrip.reloadTab(e.src);
                                }
                            }
                        });
                    }
                }
                FileFolder.UploadCommand = UploadCommand;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class AddFilesCommand extends FileFolder.StoredFileCommandBase {
                    getDefaultValuesForProps() {
                        return {
                            id: "upload/add-files",
                            tooltip: "Add Files",
                            label: "Add Files...",
                            icon: "plus.png",
                            enabled: true,
                            display: "icon label",
                            iconSetId: "pdv2"
                        };
                    }
                }
                FileFolder.AddFilesCommand = AddFilesCommand;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class ClearFilesCommand extends FileFolder.StoredFileCommandBase {
                    getDefaultValuesForProps() {
                        return {
                            id: "upload/clear-files",
                            tooltip: "Clear",
                            label: "Clear",
                            icon: "eraser.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                    onStateChanged(state) {
                        super.onStateChanged(state);
                        this.enabled = this.hasFiles && this.status == FileFolder.UploadStatus.STOPPED;
                    }
                    onExecute(e) {
                        this.files.clear();
                    }
                }
                FileFolder.ClearFilesCommand = ClearFilesCommand;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class RemoveFilesCommand extends FileFolder.StoredFileCommandBase {
                    onExecute(e) {
                        this.files.selected.each((file) => {
                            this.files.remove(file);
                        });
                    }
                    onStateChanged(state) {
                        super.onStateChanged(state);
                        this.enabled = this.hasSelectedFiles && this.status == FileFolder.UploadStatus.STOPPED;
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "upload/remove-files",
                            tooltip: "Remove",
                            label: "Remove",
                            icon: "delete.png",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pdv2"
                        };
                    }
                }
                FileFolder.RemoveFilesCommand = RemoveFilesCommand;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class SelectFilesCommand extends FileFolder.StoredFileCommandBase {
                    get allSelected() {
                        return this.files.count === this.files.selected.count;
                    }
                    onExecute(e) {
                        let checked = !this.allSelected;
                        this.files.each((file) => {
                            file.source.selected = checked;
                        });
                        this.setDisplay();
                    }
                    onStateChanged(state) {
                        this.enabled = this.hasFiles && this.status == FileFolder.UploadStatus.STOPPED;
                        this.setDisplay();
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "upload/select-files",
                            label: "Select Files",
                            icon: "CHECKBOX.PNG",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                    setDisplay() {
                        if (this.allSelected) {
                            this.label = "Deselect All";
                            this.icon = "CHECKBOX_UNCHECKED.PNG";
                        }
                        else {
                            this.label = "Select All";
                            this.icon = "CHECKBOX.PNG";
                        }
                    }
                }
                FileFolder.SelectFilesCommand = SelectFilesCommand;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class SetFileTypeCommand extends FileFolder.StoredFileCommandBase {
                    onStateChanged(state) {
                        this.enabled = this.hasSelectedFiles && this.status == FileFolder.UploadStatus.STOPPED;
                    }
                    onExecute(e) {
                        this.showDocumentTypeSelectionDialog();
                    }
                    getDefaultValuesForProps() {
                        return {
                            id: "upload/set-file-type",
                            tooltip: "Set Document Type",
                            label: "Set Document Type",
                            icon: "DOCUMENTS_EXCHANGE.PNG",
                            enabled: false,
                            display: "icon label",
                            iconSetId: "pd"
                        };
                    }
                    showDocumentTypeSelectionDialog() {
                        PDJS.Shared.DocumentTypes.DocumentTypeBrowserDialog.open({
                            viewCustomId: PDJS.Services.Views.BuiltInViews.DOCUMENT_TYPE_ASSIGNMENT,
                            selectionMode: PD.Web.UI.Controls.GridSelectionMode.single,
                            callbacks: {
                                ok: (sender, e) => {
                                    let documentType = _.first(e);
                                    this.files.selected.each((file) => {
                                        file.source.documentType = documentType;
                                        file.source.setCanvasDocument();
                                    });
                                }
                            }
                        });
                    }
                }
                FileFolder.SetFileTypeCommand = SetFileTypeCommand;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class StoredFile extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                        this.source.onStateChangeCallback = () => {
                            this.onStateChanged();
                        };
                    }
                    get source() {
                        return this.state.get("$source");
                    }
                    get fileNameNode() {
                        return this.labelNode.children(`div[role=name]`);
                    }
                    get fileSizeNode() {
                        return this.labelNode.children(`div[role=size]`);
                    }
                    get statusNode() {
                        return this.labelNode.children("div[role=status]");
                    }
                    get typeNode() {
                        return this.labelNode.children("div[role=type]");
                    }
                    get typeNameNode() {
                        return this.typeNode.children("div[role=name]");
                    }
                    get labelNode() {
                        return this.node.children("div[role=label]");
                    }
                    get iconNode() {
                        return this.node.children("div[role=icon]");
                    }
                    get editNode() {
                        return this.node.children("div[role=edit]");
                    }
                    get editButtonNode() {
                        return this.editNode.find("button");
                    }
                    get percentNode() {
                        return this.node.children(`div[role=percent]`);
                    }
                    get checkBoxNode() {
                        return this.node.find(`div[role=check] > input[type=checkbox]`);
                    }
                    get progressNode() {
                        return this.node.children(`div[role=progress]`);
                    }
                    get progressBarNode() {
                        return this.progressNode.children(`div[role=bar]`);
                    }
                    get onSelectedCallback() {
                        return this.state.get("onSelected", () => { });
                    }
                    get onChangeCallback() {
                        return this.state.get("onChange", () => { });
                    }
                    onActivate(e) {
                        this.percentNode.hide();
                        this.node.on("click", "input[type=checkbox]", _.bind(this.onCheckboxChecked, this));
                        this.editButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.editButton_onClick, this));
                        this.typeNameNode.on(Jade.BrowserEvent.CLICK, _.bind(this.typeName_onClick, this));
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.updateUI();
                        if (this.state.hasChanged("selected")) {
                            this.onSelectedCallback(this);
                        }
                        this.onChangeCallback(this);
                    }
                    onCheckboxChecked(e) {
                        this.source.selected = this.checkBoxNode.is(":checked");
                    }
                    template() {
                        return `
            <div data-id="${this.ID}" class="-pdjs-file-control">
                <div role="check">
                    <input type="checkbox">
                </div>
                <div role="label">
                    <div role="name">${this.source.name}${this.source.extension}</div>
                    <div role="size"></div>
                    <div role="type">
                        <div role="name">${this.source.documentType.name}</div>
                    </div>
                    <div role="status"></div>
                </div>
                <div role="icon"></div>
                <div role="edit">
                    <button>Edit</button>
                </div>
                <div role="percent"></div>
                <div role="progress">
                    <div role="bar" style="width:0;">&nbsp;</div>
                </div>
            </div>
        `;
                    }
                    updateUI() {
                        this.fileNameNode.text(`${this.source.name}${this.source.extension}`);
                        this.checkBoxNode.prop("checked", this.source.selected);
                        this.typeNameNode.text(this.source.documentType.name);
                        this.fileSizeNode.text(this.source.sizeText);
                        this.iconNode.empty();
                        this.iconNode.append(`<img src="${this.source.statusIconPath}"/>`);
                        this.statusNode.empty();
                        this.statusNode.append(`<span style='color:${this.source.statusColor}'>${this.source.statusText}</span>`);
                        if (this.source.alerts.count > 0) {
                            this.createErrorsToolTip();
                        }
                        else {
                            Tipped.remove(this.iconNode);
                        }
                    }
                    editButton_onClick(e) {
                        FileFolder.FileFormDialog.open({
                            canvasDocument: this.source.canvasDocument,
                            lastCommitResponse: this.source.lastCommitResponse,
                            fileId: this.source.id,
                            callbacks: {
                                ok: (sender, e) => {
                                    sender.destroyContext();
                                    this.source.canvasDocument =
                                        new PDJS.Canvas.Core.Documents.DocumentModel(e.document);
                                    this.source.alerts.clear();
                                    this.source.status =
                                        PDJS.Core.Files.FileStatus.VALIDATED;
                                }
                            }
                        });
                    }
                    typeName_onClick(e) {
                        PDJS.Shared.DocumentTypes.DocumentTypeBrowserDialog.open({
                            viewCustomId: PDJS.Services.Views.BuiltInViews.DOCUMENT_TYPE_ASSIGNMENT,
                            selectionMode: PD.Web.UI.Controls.GridSelectionMode.single,
                            callbacks: {
                                ok: (sender, e) => {
                                    let documentType = _.first(e);
                                    this.source.documentType = documentType;
                                    this.source.setCanvasDocument();
                                }
                            }
                        });
                    }
                    createErrorsToolTip() {
                        let message = "";
                        this.source.alerts.each((error) => {
                            message += `${error.message}<br/>`;
                        });
                        if (!Jade.String.isNullOrWhiteSpace(message)) {
                            Tipped.create(this.iconNode, message, {
                                skin: "validation-error",
                                position: {
                                    target: 'topmiddle',
                                    tooltip: 'bottommiddle'
                                }
                            });
                        }
                    }
                }
                FileFolder.StoredFile = StoredFile;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class StoredFileCollectionBase extends Jade.ObservableCollection {
                    constructor(options, callbacks) {
                        super([], callbacks);
                        this.m_controls = options.controls;
                        options.controls.each((control) => {
                            if (control instanceof FileFolder.StoredFile) {
                                this.add(control);
                            }
                        });
                    }
                    get controls() {
                        return this.m_controls;
                    }
                    get selected() {
                        let result = new Jade.ObservableCollection();
                        this.each((file) => {
                            if (file.source.selected) {
                                result.add(file);
                            }
                        });
                        return result;
                    }
                    getById(id) {
                        let result;
                        this.each((file) => {
                            if (file.ID === id) {
                                result = file;
                                return false;
                            }
                        });
                        return result;
                    }
                    getByFormStatus(...status) {
                        let result = new Jade.ObservableCollection();
                        this.each((file) => {
                            if (status.indexOf(file.source.status) > -1) {
                                result.add(file);
                            }
                        });
                        return result;
                    }
                }
                FileFolder.StoredFileCollectionBase = StoredFileCollectionBase;
                class StoredFileCollection extends StoredFileCollectionBase {
                }
                FileFolder.StoredFileCollection = StoredFileCollection;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class StoredFileContainer extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get files() {
                        return this.m_files;
                    }
                    get fileIds() {
                        return this.state.get("fileIds", []);
                    }
                    get onChangeCallback() {
                        return this.state.get("onChange", () => { });
                    }
                    get allFilesCommited() {
                        return this.files.getByFormStatus(PDJS.Core.Files.FileStatus.COMMITTED).count === this.files.count;
                    }
                    get noFilesWithErrors() {
                        return this.files.getByFormStatus(PDJS.Core.Files.FileStatus.ERROR).count === 0;
                    }
                    get noFilesPending() {
                        return this.files.getByFormStatus(PDJS.Core.Files.FileStatus.PENDING).count === 0;
                    }
                    template() {
                        return `
            <div class="-pdjs-file-container">
                <div data-role="grid" data-controls></div>
            </div>`;
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.m_files = new FileFolder.UploadFileCollection({
                            controls: this.controls
                        }, {
                            onAfterAdd: (e) => {
                                this.controls.add(e.item);
                            },
                            onAfterRemove: (e) => {
                                this.controls.remove(e.item);
                            },
                            onAfterChange: (e) => {
                                this.onChangeCallback();
                            }
                        });
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.populate();
                    }
                    populate() {
                        let fileService = new PDJS.Services.Files.FileService();
                        fileService.getFileInfo({
                            fileIds: this.fileIds,
                            success: (e) => {
                                _.each(e.data, (data) => {
                                    let source = new PDJS.Core.Files.StoredFile({
                                        id: data.id,
                                        name: data.name,
                                        extension: data.extension,
                                        size: data.size,
                                        documentType: data.documentType,
                                        status: PDJS.Core.Files.FileStatus.PENDING
                                    });
                                    this.files.add(new FileFolder.StoredFile({
                                        $source: source,
                                        onChange: (item) => {
                                            this.onChangeCallback();
                                        }
                                    }));
                                    source.setCanvasDocument();
                                });
                            }
                        });
                    }
                }
                FileFolder.StoredFileContainer = StoredFileContainer;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class UploadFile extends FileFolder.StoredFile {
                    get source() {
                        return this.state.get("$source");
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.editNode.hide();
                    }
                    updateUI() {
                        super.updateUI();
                        this.progressBarNode.css({
                            width: `${this.source.upload.percent}%`
                        });
                        this.percentNode.text(`${this.source.upload.percent}%`);
                        if (this.source.upload.percent == 100) {
                            this.percentNode.hide();
                            this.editNode.show();
                        }
                        else {
                            this.percentNode.show();
                            this.editNode.hide();
                        }
                    }
                }
                FileFolder.UploadFile = UploadFile;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class UploadFileCollection extends FileFolder.StoredFileCollectionBase {
                    getByUploadId(id) {
                        let result;
                        this.each((file) => {
                            if (file.source.upload.id === id) {
                                result = file;
                                return false;
                            }
                        });
                        return result;
                    }
                    getByUploadStatus(...status) {
                        let result = new Jade.ObservableCollection();
                        this.each((file) => {
                            if (status.indexOf(file.source.upload.status) > -1) {
                                result.add(file);
                            }
                        });
                        return result;
                    }
                }
                FileFolder.UploadFileCollection = UploadFileCollection;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class IChangeDocumentTypeDialogOptions {
                }
                FileFolder.IChangeDocumentTypeDialogOptions = IChangeDocumentTypeDialogOptions;
                class ChangeDocumentTypeDialog extends Jade.UI.Dialog {
                    constructor(options) {
                        super(options);
                    }
                    get entityId() {
                        return this.state.get("entityId");
                    }
                    get folderId() {
                        return this.state.get("folderId");
                    }
                    get fileContainer() {
                        return this.m_fileContainer;
                    }
                    get fileIds() {
                        return this.state.get("fileIds", []);
                    }
                    get okButtonNode() {
                        return this.node.find("button[data-command=ok]");
                    }
                    get cancelButtonNode() {
                        return this.node.find("button[data-command=cancel]");
                    }
                    template() {
                        return `
                <div style="position:absolute;top:10px;right:10px;bottom:10px;left:10px;overflow:hidden;">
                    <div data-role="toolbar" style="position:absolute;top:0;left:0;right:0;height:30px;"></div>
                    <div data-controls style="position:absolute;top:40px;left:0;right:0;bottom:36px;"></div>
                    <div data-role="deck" style="height:26px;position:absolute;left:0;right:0;bottom:0;text-align:right;display:grid;grid-template-columns:auto 225px;">
                        <div data-role="deck-left">
                        </div>
                        <div data-role="deck-right">
                        <button data-command="ok" class="-jadejs-button">Save</button>
                        <button data-command="cancel" class="-jadejs-button">Cancel</button>
                        </div>
                    </div>
                </div>
            `;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_fileContainer = new FileFolder.StoredFileContainer({
                            fileIds: this.fileIds,
                            onChange: () => {
                                this.onFileChange();
                            }
                        });
                        this.controls.add(this.m_fileContainer);
                        this.setButtonState();
                        this.okButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.okButton_onClick, this));
                        this.cancelButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(() => {
                            this.close();
                        }, this));
                        this.toolbar_init();
                        this.progressbar_init();
                        setTimeout(() => {
                            this.selectAllDocumentOnOpen();
                        }, 100);
                    }
                    getWindowOptions() {
                        return {
                            title: "Change Document Type",
                            height: 450,
                            width: 700
                        };
                    }
                    toolbar_init() {
                        this.m_toolbar = new Jade.UI.ToolBar({
                            insertAt: "div[data-role=toolbar]",
                            segments: [new FileFolder.ChangeDocumentTypeToolbarSegment()]
                        });
                        this.controls.add(this.m_toolbar);
                    }
                    progressbar_init() {
                        this.m_progressbar = new PDJS.Shared.UI.Controls.ProgressBar({
                            insertAt: "div[data-role=deck-left]",
                            showMessage: true,
                            backgroundColor: "#1fee1c",
                            color: "#000000",
                            message: "Pending save.",
                            height: "22px"
                        });
                        this.controls.add(this.m_progressbar);
                    }
                    okButton_onClick(e) {
                        let files = this.fileContainer.files;
                        this.okButtonNode.prop("disabled", false);
                        let fileIndex = 0;
                        let uploadFileFn = () => {
                            if (files.count > fileIndex) {
                                let file = files.item(fileIndex);
                                file.source.commit(this.entityId, this.folderId, () => {
                                    fileIndex += 1;
                                    setTimeout(() => {
                                        this.m_progressbar.update({
                                            message: `Saving file "${file.source.name}${file.source.extension}"...`,
                                            percent: 100 * (fileIndex / files.count)
                                        });
                                        if (fileIndex == files.count) {
                                            this.onFileChange();
                                            this.updateProgressBarDisplay();
                                        }
                                        uploadFileFn();
                                    }, 100);
                                });
                            }
                        };
                        uploadFileFn();
                    }
                    setButtonState() {
                        this.okButtonNode.prop("disabled", !(this.fileContainer.noFilesPending && this.fileContainer.noFilesWithErrors));
                    }
                    checkAllFilesCommittedAndClose() {
                        if (this.fileContainer.allFilesCommited) {
                            this.close({
                                command: "ok",
                                data: []
                            });
                        }
                    }
                    updateContext() {
                        Jade.Application
                            .instance
                            .contexts
                            .current
                            .commands
                            .setState({
                            "explorer/file-upload": {
                                files: this.fileContainer.files
                            }
                        }, { force: true });
                    }
                    onFileChange() {
                        this.updateContext();
                        this.setButtonState();
                        this.checkAllFilesCommittedAndClose();
                    }
                    updateProgressBarDisplay() {
                        let errors = [];
                        this.fileContainer.files.getByFormStatus(PDJS.Core.Files.FileStatus.ERROR).each(file => {
                            errors[errors.length] = `"${file.source.name}${file.source.extension}" has ${file.source.alerts.count} warnings.`;
                        });
                        if (errors.length > 0) {
                            Jade.UI.MultiMessageDialog.open({
                                dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                                dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                                title: "Warnings Found",
                                header: `The following files contain warnings, fix the warnings and attempt the save operation again.`,
                                messages: errors,
                                select: (e) => {
                                    e.close();
                                }
                            });
                            this.m_progressbar.update({
                                message: "Pending save.",
                                percent: 0
                            });
                        }
                    }
                    selectAllDocumentOnOpen() {
                        this.updateContext();
                        Jade.Application
                            .instance
                            .contexts
                            .current
                            .commands
                            .execute("explorer/file-upload:upload/select-files");
                    }
                    static open(options) {
                        return new ChangeDocumentTypeDialog(options);
                    }
                }
                FileFolder.ChangeDocumentTypeDialog = ChangeDocumentTypeDialog;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class ChangeDocumentTypeToolbarSegment extends Jade.UI.ToolBarSegment {
                    onAddItems(e) {
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/file-upload:upload/remove-files"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/file-upload:upload/select-files"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/file-upload:upload/set-file-type"
                        }));
                    }
                }
                FileFolder.ChangeDocumentTypeToolbarSegment = ChangeDocumentTypeToolbarSegment;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class FileFormDialog extends Jade.UI.Dialog {
                    get canvasDocument() {
                        return this.state.get("canvasDocument");
                    }
                    get fileId() {
                        return this.state.get("fileId");
                    }
                    set fileId(value) {
                        this.state.set("fileId", value);
                    }
                    get viewBox() {
                        return this.m_viewBox;
                    }
                    get okButtonNode() {
                        return this.node.find("button[data-command=ok]");
                    }
                    get cancelButtonNode() {
                        return this.node.find("button[data-command=cancel]");
                    }
                    get lastCommitResponse() {
                        return this.state.get("lastCommitResponse");
                    }
                    template() {
                        return `<div style="position:absolute;top:0;right:0;bottom:10px;left:0;">
                         <div data-role="content" data-controls style="position:absolute;top:0;left:0;right:0;bottom:36px;overflow:auto;"></div>
                         <div data-role="deck" style="height:26px;position:absolute;left:0;right:0;bottom:0;text-align:right;padding-right:10px;padding-left:10px;">
                            <button data-command="ok" class="-jadejs-button">OK</button>
                            <button data-command="cancel" class="-jadejs-button">Cancel</button>
                        </div>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.okButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.okButton_onClick, this));
                        this.cancelButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.cancelButton_onClick, this));
                        this.m_viewBox = new PDJS.Canvas.Actual.CanvasViewBox({
                            documentId: this.canvasDocument.id,
                            documentState: this.canvasDocument.toJSON(),
                            entityId: this.fileId,
                            createContext: false
                        });
                        this.controls.add(this.m_viewBox);
                        setTimeout(() => {
                            this.applyLastCommitResponse();
                        }, 250);
                    }
                    getWindowOptions() {
                        return {
                            title: "Edit File",
                            height: 450,
                            width: 680
                        };
                    }
                    okButton_onClick(e) {
                        this.viewBox.document.controls.each((element) => {
                            if (element instanceof PDJS.Canvas.Actual.Forms.FormField) {
                                element.onSubmit();
                            }
                        });
                        let formService = new PDJS.Services.Canvas.Forms.FormService();
                        formService.validate({
                            document: this.viewBox.document.source.toJSON(),
                            success: (e) => {
                                if (e.data.hasValidationErrors) {
                                    this.onValidationErrors(e.data);
                                }
                                else {
                                    this.close({
                                        command: "ok",
                                        data: {
                                            document: this.viewBox.document.source.toJSON()
                                        }
                                    });
                                }
                            }
                        });
                    }
                    cancelButton_onClick(e) {
                        this.close();
                    }
                    onValidationErrors(e) {
                        PDJS.Canvas.Actual.CanvasRefresh.validate({
                            validationErrors: e.validationErrors
                        });
                        PDJS.Canvas.Actual.Forms.FormFieldAnimation.start(null, 1500, PDJS.Canvas.Actual.Forms.FormFieldAnimationType.error);
                    }
                    applyLastCommitResponse() {
                        if (this.lastCommitResponse == null) {
                            return;
                        }
                        if (this.lastCommitResponse.hasValidationErrors) {
                            PDJS.Canvas.Actual.CanvasRefresh.validate({
                                validationErrors: this.lastCommitResponse.validationErrors
                            });
                        }
                    }
                    static open(options) {
                        return new FileFormDialog(options);
                    }
                }
                FileFolder.FileFormDialog = FileFormDialog;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class FileUploadDialog extends Jade.UI.Dialog {
                    constructor(options) {
                        super(options);
                    }
                    get upload() {
                        return this.m_upload;
                    }
                    get entityId() {
                        return this.state.get("entityId");
                    }
                    get folderId() {
                        return this.state.get("folderId");
                    }
                    get defaultDocumentType() {
                        return this.state.get("defaultDocumentType", {});
                    }
                    set defaultDocumentType(value) {
                        this.state.set("defaultDocumentType", value);
                    }
                    get saveButtonNode() {
                        return this.node.find("button[data-command=save]");
                    }
                    get cancelButtonNode() {
                        return this.node.find("button[data-command=cancel]");
                    }
                    get uploadButtonNode() {
                        return this.node.find("button[data-command=upload]");
                    }
                    get selectButtonNode() {
                        return this.node.find("div[data-role=toolbar] a:first");
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.subscriptions.add(Explorer.Events.FileChangeEvent, (e) => {
                            this.onFileChange(e);
                        });
                        this.saveButtonNode.hide();
                        this.uploadButtonNode.prop("disabled", true);
                        this.saveButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.saveButton_onClick, this));
                        this.uploadButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(() => {
                            this.upload.startUpload();
                        }, this));
                        this.cancelButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(() => {
                            this.close();
                        }, this));
                        this.toolbar_init();
                        this.progressbar_init();
                        Jade.Ajax.call({
                            url: Jade.Path.resolve("~/Hub/FileFolder/FileUploadDialog"),
                            data: {
                                entityId: this.entityId
                            },
                            success: (e) => {
                                this.defaultDocumentType = e;
                                setTimeout(() => {
                                    this.upload_init();
                                }, 200);
                            },
                            error: () => {
                                this.close();
                            }
                        });
                    }
                    close(options) {
                        if (this.upload != null) {
                            this.upload.stopUpload();
                        }
                        super.close(options);
                    }
                    template() {
                        return `
                <div style="position:absolute;top:10px;right:10px;bottom:10px;left:10px;overflow:hidden;">
                    <div data-role="toolbar" style="position:absolute;top:0;left:0;right:0;height:30px;"></div>
                    <div data-role="upload" style="position:absolute;top:40px;left:0;right:0;bottom:36px;"></div>
                    <div data-role="deck" style="height:26px;position:absolute;left:0;right:0;bottom:0;text-align:right;display:grid;grid-template-columns:auto 225px;">
                        <div data-role="deck-left">
                        </div>
                        <div data-role="deck-right">
                            <button data-command="save" class="-jadejs-button">Save</button>
                            <button data-command="upload" class="-jadejs-button">Upload</button>
                            <button data-command="cancel" class="-jadejs-button">Cancel</button>
                        </div>
                    </div>
                </div>
            `;
                    }
                    getWindowOptions() {
                        return {
                            title: "File Upload",
                            height: 450,
                            width: 700
                        };
                    }
                    upload_init() {
                        this.m_upload = new FileFolder.Upload({
                            insertAt: "[data-role=upload]",
                            defaultDocumentType: this.defaultDocumentType,
                            containerNode: this.node,
                            selectButtonNode: this.selectButtonNode,
                            onQueueChanged: () => {
                                this.setUploadButtonDisplay();
                                this.setSaveButtonDisplay();
                            },
                            onBeforeUpload: () => {
                                this.setUploadButtonDisplay();
                                this.setSaveButtonDisplay();
                            },
                            onUploadProgress: (e) => {
                                this.m_progressbar.update({
                                    message: `Uploading file "${e.source.name}${e.source.extension}" ...`,
                                    percent: this.m_upload.totalPercent
                                });
                            },
                            onUploadComplete: (e) => {
                                this.m_progressbar.update({
                                    message: `Pending save.`,
                                    percent: 0
                                });
                            },
                            onFileRemoved: (e) => {
                                this.setUploadButtonDisplay();
                                this.setSaveButtonDisplay();
                            },
                            onFilesAdded: (e) => {
                                this.setUploadButtonDisplay();
                                this.setSaveButtonDisplay();
                                this.m_progressbar.update({
                                    message: `Pending upload.`,
                                    percent: 0
                                });
                            },
                            onError: (e) => {
                                Jade.UI.MessageDialog.open({
                                    dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                                    dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                                    allowClose: true,
                                    message: e.message,
                                    select: (e) => {
                                        e.close();
                                    }
                                });
                            }
                        });
                        this.controls.add(this.upload);
                        this.updateCommandState();
                    }
                    toolbar_init() {
                        this.m_toolbar = new Jade.UI.ToolBar({
                            insertAt: "div[data-role=toolbar]",
                            segments: [new FileFolder.FileUploadToolbarSegment()]
                        });
                        this.controls.add(this.m_toolbar);
                    }
                    progressbar_init() {
                        this.m_progressbar = new PDJS.Shared.UI.Controls.ProgressBar({
                            insertAt: "div[data-role=deck-left]",
                            showMessage: true,
                            backgroundColor: "#1fee1c",
                            color: "#000000",
                            message: "Pending add files.",
                            height: "22px"
                        });
                        this.controls.add(this.m_progressbar);
                    }
                    setUploadButtonDisplay() {
                        let visible = this.upload.files.getByUploadStatus(plupload.FileStatus.QUEUED, plupload.FileStatus.UPLOADING).count > 0 || this.upload.files.count === 0;
                        let enabled = this.upload.files.getByUploadStatus(plupload.FileStatus.QUEUED).count > 0
                            && this.upload.uploadStatus === FileFolder.UploadStatus.STOPPED;
                        if (visible) {
                            this.uploadButtonNode.show();
                        }
                        else {
                            this.uploadButtonNode.hide();
                        }
                        this.uploadButtonNode.prop("disabled", !enabled);
                    }
                    setSaveButtonDisplay() {
                        let visible = this.upload.files.getByUploadStatus(plupload.FileStatus.DONE).count === this.upload.files.count
                            && this.upload.files.count > 0;
                        let enabled = this.upload.files.getByFormStatus(PDJS.Core.Files.FileStatus.VALIDATED, PDJS.Core.Files.FileStatus.COMMITTED).count == this.upload.files.count;
                        if (visible) {
                            this.saveButtonNode.show();
                        }
                        else {
                            this.saveButtonNode.hide();
                        }
                        this.saveButtonNode.prop("disabled", !enabled);
                    }
                    onFileChange(file) {
                        this.updateCommandState();
                        this.setUploadButtonDisplay();
                        this.setSaveButtonDisplay();
                        this.checkAllFilesCommittedAndClose(file);
                    }
                    saveButton_onClick(e) {
                        let fileIndex = 0;
                        let uploadFileFn = () => {
                            if (this.upload.files.count > fileIndex) {
                                let file = this.upload.files.item(fileIndex);
                                file.source.commit(this.entityId, this.folderId, () => {
                                    fileIndex += 1;
                                    setTimeout(() => {
                                        this.m_progressbar.update({
                                            message: `Saving file "${file.source.name}${file.source.extension}"...`,
                                            percent: 100 * (fileIndex / this.upload.files.count)
                                        });
                                        if (fileIndex == this.upload.files.count) {
                                            this.onFileChange(file);
                                            this.updateProgressBarDisplay();
                                        }
                                        uploadFileFn();
                                    }, 100);
                                });
                            }
                        };
                        uploadFileFn();
                    }
                    checkAllFilesCommittedAndClose(file) {
                        if (file.source.status === PDJS.Core.Files.FileStatus.COMMITTED) {
                            let commitedFileCount = this.upload.files.getByFormStatus(PDJS.Core.Files.FileStatus.COMMITTED).count;
                            if (commitedFileCount == this.upload.files.count) {
                                this.close({
                                    command: "ok",
                                    data: []
                                });
                            }
                        }
                    }
                    updateCommandState() {
                        Jade.Application
                            .instance
                            .contexts
                            .current
                            .commands
                            .setState({
                            "explorer/file-upload": {
                                files: this.upload.files,
                                status: this.upload.uploadStatus
                            }
                        }, { force: true });
                    }
                    updateProgressBarDisplay() {
                        let errors = [];
                        this.upload.files.getByFormStatus(PDJS.Core.Files.FileStatus.ERROR).each(file => {
                            errors[errors.length] = `"${file.source.name}${file.source.extension}" has ${file.source.alerts.count} warnings.`;
                        });
                        if (errors.length > 0) {
                            Jade.UI.MultiMessageDialog.open({
                                dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                                dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                                title: "Warnings Found",
                                header: `The following files contain warnings, fix the warnings and attempt the save operation again.`,
                                messages: errors,
                                select: (e) => {
                                    e.close();
                                }
                            });
                            this.m_progressbar.update({
                                message: "Pending save.",
                                percent: 0
                            });
                        }
                    }
                    static open(options = {}) {
                        return new FileUploadDialog(options);
                    }
                }
                FileFolder.FileUploadDialog = FileUploadDialog;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class FileUploadToolbarSegment extends Jade.UI.ToolBarSegment {
                    onAddItems(e) {
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/file-upload:upload/add-files"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/file-upload:upload/remove-files"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/file-upload:upload/clear-files"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/file-upload:upload/select-files"
                        }));
                        e.registerItem(new Jade.UI.ToolBarButtonCommand({
                            commandId: "explorer/file-upload:upload/set-file-type"
                        }));
                    }
                }
                FileFolder.FileUploadToolbarSegment = FileUploadToolbarSegment;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                let UploadStatus;
                (function (UploadStatus) {
                    UploadStatus[UploadStatus["STOPPED"] = 1] = "STOPPED";
                    UploadStatus[UploadStatus["STARTED"] = 2] = "STARTED";
                })(UploadStatus = FileFolder.UploadStatus || (FileFolder.UploadStatus = {}));
                class Upload extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get selectButtonNode() {
                        return this.state.get("selectButtonNode");
                    }
                    get containerNode() {
                        return this.state.get("containerNode");
                    }
                    get defaultDocumentType() {
                        return this.state.get("defaultDocumentType", {});
                    }
                    get uploader() {
                        return this.state.get("uploader");
                    }
                    set uploader(value) {
                        this.state.set("uploader", value);
                    }
                    get uploadStatus() {
                        return this.m_status;
                    }
                    get onFileUploadedCallback() {
                        return this.state.get("onFileUploaded", () => { });
                    }
                    get onFilesAddedCallback() {
                        return this.state.get("onFilesAdded", () => { });
                    }
                    get onFilesChangedCallback() {
                        return this.state.get("onFilesChanged", () => { });
                    }
                    get onBeforeUploadCallback() {
                        return this.state.get("onBeforeUpload", () => { });
                    }
                    get onFileRemovedCallback() {
                        return this.state.get("onFileRemoved", () => { });
                    }
                    get onQueueChangedCallback() {
                        return this.state.get("onQueueChanged", () => { });
                    }
                    get onErrorCallback() {
                        return this.state.get("onError", () => { });
                    }
                    get onUploadCompleteCallback() {
                        return this.state.get("onUploadComplete", () => { });
                    }
                    get onUploadProgressCallback() {
                        return this.state.get("onUploadProgress", () => { });
                    }
                    get files() {
                        return new FileFolder.UploadFileCollection({
                            controls: this.controls
                        }, {
                            onAfterRemove: (e) => {
                                this.uploader.files.removeById(e.item.source.upload.id);
                                this.controls.remove(e.item);
                                this.updateContext();
                                if (this.uploader.files.count === 0) {
                                    this.addEmptyMessage();
                                }
                                this.onFileRemovedCallback(e.item);
                            }
                        });
                    }
                    get totalPercent() {
                        if (this.uploader.uploader != null) {
                            return this.uploader.uploader.total.percent;
                        }
                        return 0;
                    }
                    onActivate(e) {
                        this.uploader_init();
                        this.addEmptyMessage();
                    }
                    uploader_onBeforeUpload(e) {
                        this.m_status = UploadStatus.STARTED;
                        let file = this.files.getByUploadId(e.id);
                        if (file != null) {
                            file.node.get(0).scrollIntoView();
                            file.node.addClass("-pdjs-upload-in-progress");
                        }
                        this.onBeforeUploadCallback(file);
                    }
                    uploader_onError(e) {
                        this.m_status = UploadStatus.STOPPED;
                        let file = null;
                        if (e.file != null) {
                            file = this.files.getByUploadId(e.file.id);
                            if (file != null) {
                                file.source.upload.status = e.file.status;
                            }
                        }
                        e = this.getCustomError(e);
                        this.stopUpload();
                        this.onErrorCallback(e);
                    }
                    uploader_onFileUploaded(e) {
                        let file = this.files.getByUploadId(e.id);
                        if (file != null) {
                            file.source.upload.percent = e.percent;
                            file.source.upload.status = e.status;
                            file.node.removeClass("-pdjs-upload-in-progress");
                        }
                        this.updateContext();
                        this.onFileUploadedCallback(file);
                    }
                    uploader_onFilesAdded(e) {
                        let files = new Jade.Collection();
                        e.each((file) => {
                            let options = {
                                $source: new PDJS.Core.Files.UploadFile({
                                    id: null,
                                    extension: Jade.Path.getFileExtension(file.name),
                                    name: Jade.Path.getFileNameWithoutExtension(file.name),
                                    size: file.size,
                                    status: PDJS.Core.Files.FileStatus.PENDING,
                                    documentType: this.defaultDocumentType,
                                    upload: {
                                        id: file.id,
                                        status: file.status,
                                        percent: file.percent
                                    }
                                }),
                                onSelected: (item) => {
                                    this.updateContext();
                                },
                                onChange: (item) => {
                                    Jade.Application.instance.contexts.current.events.publish(Explorer.Events.FileChangeEvent, item);
                                }
                            };
                            let uploadFile = new FileFolder.UploadFile(options);
                            files.add(uploadFile);
                            this.controls.add(uploadFile);
                        });
                        this.files.last().node.get(0).scrollIntoView();
                        this.updateContext();
                        this.onFilesAddedCallback(files);
                    }
                    uploader_onQueueChanged(files) {
                        if (this.uploader.files.count > 0) {
                            this.removeEmptyMessage();
                        }
                        else {
                            this.addEmptyMessage();
                        }
                        this.updateContext();
                        this.onQueueChangedCallback(new Jade.Collection(this.files.toArray()));
                    }
                    uploader_onUploadComplete(files) {
                        this.m_status = UploadStatus.STOPPED;
                        let uploadFiles = new Jade.Collection();
                        let ids = [];
                        files.each((file) => {
                            let uploadFile = this.files.getByUploadId(file.id);
                            if (uploadFile != null) {
                                ids[ids.length] = uploadFile.ID;
                                uploadFiles.add(uploadFile);
                            }
                        });
                        this.updateContext();
                        this.onUploadCompleteCallback(uploadFiles);
                        this.getFormData(ids);
                    }
                    uploader_onUploadProgress(e) {
                        this.m_status = UploadStatus.STARTED;
                        let file = this.files.getByUploadId(e.id);
                        if (file != null) {
                            file.source.upload.percent = e.percent;
                            file.source.upload.status = e.status;
                            this.onUploadProgressCallback(file);
                        }
                        this.updateContext();
                    }
                    template() {
                        return `
            <div class="-pdjs-upload-control">
                <div data-role="grid" data-controls></div>    
                <div data-role="uploader"></div>
            </div>`;
                    }
                    startUpload() {
                        this.uploader.startUpload();
                    }
                    stopUpload() {
                        this.uploader.stopUpload();
                    }
                    uploader_init() {
                        this.uploader = new FileFolder.Uploader({
                            insertAt: "[data-role=uploader]",
                            containerNode: this.containerNode,
                            selectButtonNode: this.selectButtonNode,
                            dropNode: this.node,
                            onBeforeUpload: _.bind(this.uploader_onBeforeUpload, this),
                            onError: _.bind(this.uploader_onError, this),
                            onFileRemoved: () => { },
                            onFilesAdded: _.bind(this.uploader_onFilesAdded, this),
                            onFileUploaded: _.bind(this.uploader_onFileUploaded, this),
                            onQueueChanged: _.bind(this.uploader_onQueueChanged, this),
                            onUploadComplete: _.bind(this.uploader_onUploadComplete, this),
                            onUploadProgress: _.bind(this.uploader_onUploadProgress, this)
                        });
                        this.controls.add(this.uploader);
                        this.m_status = UploadStatus.STOPPED;
                    }
                    addEmptyMessage() {
                        if (this.getMessage() == null) {
                            this.controls.add(new FileFolder.UploadMessage());
                        }
                    }
                    removeEmptyMessage() {
                        let message = this.getMessage();
                        if (message != null) {
                            this.controls.remove(message);
                        }
                    }
                    getMessage() {
                        var result = null;
                        this.controls.each((control) => {
                            if (control instanceof FileFolder.UploadMessage) {
                                result = control;
                                return false;
                            }
                        });
                        return result;
                    }
                    updateContext() {
                        Jade.Application
                            .instance
                            .contexts
                            .current
                            .commands
                            .setState({
                            "explorer/file-upload": {
                                files: this.files,
                                status: this.uploadStatus
                            }
                        }, { force: true });
                    }
                    getFormData(ids) {
                        _.each(ids, (id) => {
                            let file = this.files.getById(id);
                            if (file != null) {
                                file.source.setCanvasDocument();
                            }
                        });
                    }
                    getCustomError(e) {
                        let result = e;
                        switch (true) {
                            case e.code === -600:
                                result.message = `"${e.file.name}" exceeds the maximum upload size of 2 GB.`;
                                break;
                        }
                        return result;
                    }
                }
                FileFolder.Upload = Upload;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class UploadMessage extends Jade.UI.Control {
                    constructor() {
                        super({});
                    }
                    template() {
                        return `
                <table data-role="message" style="height:100%;width:100%;">
                    <tr>
                        <td style="vertical-align:middle;text-align:center;font-size:13px;">
                            <img src="${Jade.IconSet.get("pd").resolve("DOCUMENT_INTO.PNG", Jade.IconSetSizeSpecificDirectory.x48)}" /><br/><br/>
                            Drag files here or click the Add Files button above.
                        </td>
                    </tr>
                </table>
            `;
                    }
                }
                FileFolder.UploadMessage = UploadMessage;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                let UploaderErrorType;
                (function (UploaderErrorType) {
                    UploaderErrorType[UploaderErrorType["HTTP_ERROR"] = 400] = "HTTP_ERROR";
                    UploaderErrorType[UploaderErrorType["CANNOT_READ_FILE"] = -300] = "CANNOT_READ_FILE";
                    UploaderErrorType[UploaderErrorType["FILE_TOO_LARGE"] = -600] = "FILE_TOO_LARGE";
                    UploaderErrorType[UploaderErrorType["MAX_FILE_COUNT_EXCEEDED"] = 1000] = "MAX_FILE_COUNT_EXCEEDED";
                    UploaderErrorType[UploaderErrorType["CONTAINS_ZERO_BTYE_FILES"] = 1001] = "CONTAINS_ZERO_BTYE_FILES";
                })(UploaderErrorType = FileFolder.UploaderErrorType || (FileFolder.UploaderErrorType = {}));
                class Uploader extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                        this.MAX_FILE_UPLOAD = 50;
                    }
                    get containerNode() {
                        return this.state.get("containerNode");
                    }
                    get dropNode() {
                        return this.state.get("dropNode", null);
                    }
                    get selectButtonNode() {
                        return this.state.get("selectButtonNode");
                    }
                    get uploader() {
                        return this.state.get("uploader");
                    }
                    set uploader(value) {
                        this.state.set("uploader", value);
                    }
                    get uploadState() {
                        return this.uploader.state;
                    }
                    get onFileUploadedCallback() {
                        return this.state.get("onFileUploaded", () => { });
                    }
                    get onBeforeUploadCallback() {
                        return this.state.get("onBeforeUpload", () => { });
                    }
                    get onQueueChangedCallback() {
                        return this.state.get("onQueueChanged", () => { });
                    }
                    get onErrorCallback() {
                        return this.state.get("onError", () => { });
                    }
                    get onUploadProgressCallback() {
                        return this.state.get("onUploadProgress", () => { });
                    }
                    get onUploadCompleteCallback() {
                        return this.state.get("onUploadComplete", () => { });
                    }
                    get onFilesAddedCallback() {
                        return this.state.get("onFilesAdded", () => { });
                    }
                    get onFileRemovedCallback() {
                        return this.state.get("onFileRemoved", () => { });
                    }
                    get files() {
                        return new FileFolder.UploaderFileCollection(this.uploader.files, {
                            onAfterRemove: (e) => {
                                this.uploader.removeFile(e.item);
                                this.onFileRemovedCallback(e.item);
                            }
                        });
                    }
                    onActivate(e) {
                        this.uploader_init();
                    }
                    onBeforeUpload(sender, e) {
                        this.onBeforeUploadCallback(e);
                    }
                    onError(sender, e) {
                        this.uploader.stop();
                        if (e.file != null) {
                            e.file.status = plupload.FileStatus.FAILED;
                        }
                        this.onErrorCallback({
                            code: e.status === 400 ? 400 : e.code,
                            file: e.file,
                            message: e.message || "Error",
                            response: e.response
                        });
                    }
                    onFileUploaded(sender, e) {
                        this.onFileUploadedCallback(e);
                    }
                    onFilesAdded(sender, e) {
                        this.onFilesAddedCallback(new Jade.Collection(e));
                    }
                    onQueueChanged(sender, e) {
                        this.onQueueChangedCallback(new Jade.Collection(this.files.toArray()));
                    }
                    onStateChange(sender, e) {
                        if (this.uploader.state == plupload.UploaderState.STARTED) {
                        }
                    }
                    onUploadComplete(sender, e) {
                        this.uploader.stop();
                        this.onUploadCompleteCallback(new Jade.Collection(e));
                    }
                    onUploadProgress(sender, e) {
                        this.onUploadProgressCallback(e);
                    }
                    template() {
                        return `<div style="display:none;"></div>`;
                    }
                    startUpload() {
                        let hasErrors = !this.hasNoZeroLengthFiles() ||
                            !this.isMaxUploadValid();
                        if (hasErrors) {
                            return;
                        }
                        this.uploader.start();
                    }
                    stopUpload() {
                        this.uploader.stop();
                    }
                    uploader_init() {
                        this.uploader = new plupload.Uploader({
                            runtimes: "html5,silverlight,flash,html4",
                            container: this.containerNode.get(0),
                            browse_button: this.selectButtonNode.get(0),
                            drop_element: this.dropNode.get(0),
                            urlstream_upload: true,
                            max_file_size: "2gb",
                            chunk_size: "1024kb",
                            unique_names: true,
                            url: Jade.Path.resolve("~/application/handlers/Uploads.ashx"),
                            flash_swf_url: Jade.Path.resolve("~/areas/shared/assets/external/misc/plupload/moxie.swf"),
                            silverlight_xap_url: Jade.Path.resolve("~/areas/shared/assets/external/misc/plupload/moxie.xap")
                        });
                        this.uploader.bind(plupload.UploaderEvent.FilesAdded, _.bind(this.onFilesAdded, this));
                        this.uploader.bind(plupload.UploaderEvent.UploadProgress, _.bind(this.onUploadProgress, this));
                        this.uploader.bind(plupload.UploaderEvent.UploadComplete, _.bind(this.onUploadComplete, this));
                        this.uploader.bind(plupload.UploaderEvent.QueueChanged, _.bind(this.onQueueChanged, this));
                        this.uploader.bind(plupload.UploaderEvent.FileUploaded, _.bind(this.onFileUploaded, this));
                        this.uploader.bind(plupload.UploaderEvent.BeforeUpload, _.bind(this.onBeforeUpload, this));
                        this.uploader.bind(plupload.UploaderEvent.StateChanged, _.bind(this.onStateChange, this));
                        this.uploader.bind(plupload.UploaderEvent.Error, _.bind(this.onError, this));
                        this.uploader.init();
                        this.uploader.refresh();
                        this.uploader.stop();
                    }
                    isMaxUploadValid() {
                        let queueCount = this.files.getByStatus(plupload.FileStatus.QUEUED).count;
                        if (queueCount > this.MAX_FILE_UPLOAD) {
                            this.onError(this.uploader, {
                                code: UploaderErrorType.MAX_FILE_COUNT_EXCEEDED,
                                message: `There are ${queueCount} files in the upload queue, but no more than ${this.MAX_FILE_UPLOAD} files may be uploaded at one time.\n\n
                                Please remove ${queueCount - this.MAX_FILE_UPLOAD} file(s) and attempt your upload again.`
                            });
                            return false;
                        }
                        return true;
                    }
                    hasNoZeroLengthFiles() {
                        if (this.files.zeroLengthFiles().count > 0) {
                            this.onError(this.uploader, {
                                code: UploaderErrorType.CONTAINS_ZERO_BTYE_FILES
                            });
                            return false;
                        }
                        return true;
                    }
                }
                FileFolder.Uploader = Uploader;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Hub;
    (function (Hub) {
        var Explorer;
        (function (Explorer) {
            var FileFolder;
            (function (FileFolder) {
                class UploaderFileCollection extends Jade.ObservableCollection {
                    getByStatus(status) {
                        let result = new Jade.ObservableCollection();
                        this.each((file) => {
                            if (file.status === status) {
                                result.add(file);
                            }
                        });
                        return result;
                    }
                    zeroLengthFiles() {
                        let result = new Jade.ObservableCollection();
                        this.each((file) => {
                            if (file.size === 0) {
                                result.add(file);
                            }
                        });
                        return result;
                    }
                    removeById(id) {
                        let target = null;
                        this.each((file) => {
                            if (file.id === id) {
                                target = file;
                                return false;
                            }
                        });
                        if (target != null) {
                            this.remove(target);
                        }
                    }
                }
                FileFolder.UploaderFileCollection = UploaderFileCollection;
            })(FileFolder = Explorer.FileFolder || (Explorer.FileFolder = {}));
        })(Explorer = Hub.Explorer || (Hub.Explorer = {}));
    })(Hub = PDJS.Hub || (PDJS.Hub = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Views;
        (function (Views) {
            class RestrictAssignmentToDialog extends Jade.UI.Dialog {
                constructor(options) {
                    super(options, {
                        title: "Restrict Assignment To",
                        height: "400px",
                        width: "400px"
                    });
                }
                get cancelButtonNode() {
                    return this.node.find("button[data-command=cancel]");
                }
                get okButtonNode() {
                    return this.node.find("button[data-command=ok]");
                }
                get clearButtonNode() {
                    return this.node.find("button[data-command=clear]");
                }
                get multiSelectNode() {
                    return this.node.find("[data-role=multi-select]");
                }
                get selections() {
                    return this.state.get("selections", []);
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.init_multiselect();
                    this.cancelButtonNode.on("click", (e) => {
                        this.close();
                    });
                    this.okButtonNode.on("click", (e) => {
                        this.okAndClose();
                    });
                    this.clearButtonNode.on("click", (e) => {
                        this.multiSelectNode.find("input[type=checkbox]").removeAttr("checked");
                    });
                }
                template() {
                    return `
            <div class="-pdjs-restrict-assignement-to-dialog">
                <div data-role="instructions">
                    Restrict assignment of the document type to only the selected entity types listed below.
                </div>
                <div data-role="multi-select">
                </div>
                <div data-role="button-dock-left">
                    <button data-command="clear" class="-jadejs-button">Clear</button>
                </div>
                <div data-role="button-dock-right">
                    <button data-command="ok" class="-jadejs-button">OK</button>
                    <button data-command="cancel" class="-jadejs-button">Cancel</button>
                </div>
            </div>
            `;
                }
                static open(options) {
                    return new RestrictAssignmentToDialog(options);
                }
                init_multiselect() {
                    Jade.Ajax.call({
                        url: Jade.Path.resolve("~/Manage/EntityTypes/List"),
                        error: (e) => {
                            this.close();
                        },
                        success: (e) => {
                            _.each(e, (item) => {
                                let icon = Jade.IconSet.get("pd").resolve(item.icon, Jade.IconSetSizeSpecificDirectory.x16);
                                let node = $(`
                            <label data-role="multi-select-item" data-id="${item.id}">
                                <input type="checkbox"/>
                                <div data-role="item-content-label" style="background-image:url(${icon})">${item.name}</div>
                            </label>`);
                                node.data("data", item);
                                this.multiSelectNode.append(node);
                            });
                            _.each(this.selections, (item) => {
                                this.multiSelectNode.find(`label[data-id=${item.id}] input[type=checkbox]`).prop("checked", true);
                            });
                        }
                    });
                }
                okAndClose() {
                    let selections = [];
                    this.multiSelectNode
                        .find("label input:checked")
                        .each((index, elem) => {
                        let item = $(elem).closest("label").data("data");
                        selections[selections.length] = {
                            id: item.id,
                            name: item.name,
                            icon: item.icon
                        };
                    });
                    this.close({
                        command: "ok",
                        data: selections
                    });
                }
            }
            Views.RestrictAssignmentToDialog = RestrictAssignmentToDialog;
        })(Views = Manage.Views || (Manage.Views = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var EntityTypes;
        (function (EntityTypes) {
            class ExpressionAssignmentDialog extends Jade.UI.Dialog {
                constructor(options) {
                    super(options, {
                        title: "Expression Assigment",
                        height: "450px",
                        width: "800px"
                    });
                }
                get okButtonNode() {
                    return this.node.find("button[data-command=ok]");
                }
                get closeButtonNode() {
                    return this.node.find("button[data-command=close]");
                }
                get entityTypeId() {
                    return this.state.get("entityTypeId", null);
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.explorerModel_init();
                    this.toolbar_init();
                    this.closeButtonNode.on(Jade.BrowserEvent.CLICK, (e) => {
                        this.close();
                    });
                    this.okButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.okButton_onClick, this));
                }
                template() {
                    return `
            <div style="position:absolute;top:10px;left:10px;right:10px;bottom:10px;box-sizing:border-box;">
                <div role="toolbar" style="position:absolute;top:0;left:0;right:0;height:30px;overflow:hidden;"></div>
                <div role="tree" style="position:absolute;top:40px;left:0;right:0;bottom:34px;overflow:hidden;"></div>
                <div style="position:absolute;height:26px;bottom:0;left:0;right:0;text-align:right;">
                    <button data-command="ok" class="-jadejs-button">OK</button>
                    <button data-command="close" class="-jadejs-button">Close</button>
                </div>
            </div>
            `;
                }
                onResize() {
                    if (this.m_explorerModel) {
                        this.m_explorerModel.resize();
                    }
                }
                static open(options) {
                    return new ExpressionAssignmentDialog(options);
                }
                toolbar_init() {
                    this.m_toolbar = new Jade.UI.ToolBar({
                        insertAt: "div[role=toolbar]",
                        segments: [new EntityTypes.ExpressionAssignmentToolbarSegment()]
                    });
                    this.controls.add(this.m_toolbar);
                }
                explorerModel_init() {
                    this.m_explorerModel = new EntityTypes.ExpressionAssignmentExplorerModel({
                        insertAt: "[role=tree]",
                        entityTypeId: this.entityTypeId
                    });
                    this.controls.add(this.m_explorerModel);
                }
                okButton_onClick() {
                    let assignments = this.m_explorerModel.getAssignments();
                    let service = new PDJS.Services.Tags.ExpressionService();
                    if (assignments.length > 0) {
                        service.setFolderExpressions({
                            assignments: assignments,
                            success: (e) => {
                                this.close();
                            }
                        });
                    }
                    else {
                        this.close();
                    }
                }
            }
            EntityTypes.ExpressionAssignmentDialog = ExpressionAssignmentDialog;
        })(EntityTypes = Manage.EntityTypes || (Manage.EntityTypes = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var EntityTypes;
        (function (EntityTypes) {
            class ExpressionAssignmentExplorerModel extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                }
                get entityTypeId() {
                    return this.state.get("entityTypeId");
                }
                get tree() {
                    return this.m_tree;
                }
                get treeNode() {
                    return this.node.children("div[role=tree]");
                }
                get checkboxNodes() {
                    return this.treeNode.find("input[type=checkbox][role=folder-checkbox]");
                }
                resize() {
                    if (this.tree != null) {
                        this.tree.refresh();
                    }
                }
                template() {
                    return `<div style="position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid #CCCCCC;">
                        <div role="tree" style="border-width:0;"></div>
                    </div>`;
                }
                getAssignments() {
                    let result = [];
                    let view = this.tree.dataSource.view();
                    view.forEach((item) => {
                        if (item.get("changed")) {
                            result[result.length] = item.toJSON();
                        }
                    });
                    return result;
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.tree_init();
                    PDJS.Application
                        .instance
                        .contexts
                        .current
                        .events
                        .subscribe("expression/assign", _.bind(this.setFolderExpressions, this));
                    PDJS.Application
                        .instance
                        .contexts
                        .current
                        .events
                        .subscribe("expression/select-all-folders", _.bind(this.setAllFoldersSelectState, this));
                    this.treeNode.on(Jade.BrowserEvent.CLICK, "input[role=folder-checkbox]", _.bind(this.tree_checkbox_click, this));
                }
                tree_init() {
                    let x;
                    this.m_tree = this.treeNode.kendoTreeList({
                        height: "100%",
                        columns: [
                            {
                                field: "folderName",
                                title: "Folder",
                                width: 350,
                                attributes: { style: "position:relative;" },
                                template: (e) => {
                                    return `<label style="background-image:url(${Jade.IconSet.get("pd").resolve(e.folderIcon, Jade.IconSetSizeSpecificDirectory.x16)});background-position:20px center;background-repeat:no-repeat;padding-left:40px;position:relative;line-height:20px;box-sizing:border-box;height:19px;">
                                        <input role="folder-checkbox" data-folder-id="${e.folderId}" type="checkbox" style="position: absolute;top:5px; left:3px;" ${e.selected ? "checked" : ""}/>
                                        ${e.folderName}
                                    </label>`;
                                }
                            },
                            {
                                field: "expressionName",
                                title: "Expression",
                                template: (e) => {
                                    return `<div style="color:${e.updated ? "blue" : "black"};">${e.expressionName}</div>`;
                                }
                            }
                        ],
                        dataSource: this.tree_dataSource(),
                        resizable: true
                    }).data("kendoTreeList");
                }
                tree_dataSource() {
                    return new kendo.data.TreeListDataSource({
                        transport: {
                            read: ((e) => {
                                let data = e.data;
                                let folderId = e.data.id;
                                let service = new PDJS.Services.Tags.ExpressionService();
                                service.getFolderExpressions({
                                    entityTypeId: this.entityTypeId,
                                    folderId: folderId,
                                    success: (args) => {
                                        if (folderId == undefined) {
                                            args.data.forEach((item) => {
                                                item.parentId = null;
                                            });
                                        }
                                        args.data.forEach((item) => {
                                            item.expressionName = item.expressionName == null ? "" : item.expressionName;
                                        });
                                        e.success(args.data);
                                    }
                                });
                            })
                        },
                        schema: {
                            model: {
                                id: "folderId",
                                parentId: "parentId",
                                fields: {
                                    folderIcon: { type: "string" },
                                    folderName: { type: "string" },
                                    isTab: { type: "boolean" },
                                    expressionId: { type: "string" },
                                    expressionName: { type: "string" },
                                    selected: { type: "boolean" }
                                }
                            }
                        }
                    });
                }
                tree_checkbox_click(e) {
                    let node = $(e.target);
                    let record = this.tree.dataSource.get(node.data("folder-id"));
                    if (record != null) {
                        record.set("selected", node.is(":checked"));
                        record.set("selected", node.is(":checked"));
                    }
                }
                setFolderExpressions(e) {
                    let view = this.tree.dataSource.view();
                    view.forEach((item) => {
                        item.set("updated", false);
                        if (item.get("selected")) {
                            item.set("selected", false);
                            item.set("expressionId", e.expressionId);
                            item.set("expressionName", e.expressionName);
                            item.set("updated", true);
                            item.set("changed", true);
                        }
                    });
                }
                setAllFoldersSelectState(selected) {
                    let view = this.tree.dataSource.view();
                    view.forEach((item) => {
                        item.set("selected", selected);
                    });
                }
            }
            EntityTypes.ExpressionAssignmentExplorerModel = ExpressionAssignmentExplorerModel;
        })(EntityTypes = Manage.EntityTypes || (Manage.EntityTypes = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var EntityTypes;
        (function (EntityTypes) {
            class ExpressionAssignmentToolbarSegment extends Jade.UI.ToolBarSegment {
                onAddItems(e) {
                    e.registerItem(new Jade.UI.ToolBarButtonCommand({
                        commandId: "expression-assignment/dialog:expression/assign"
                    }));
                    e.registerItem(new Jade.UI.ToolBarButtonCommand({
                        commandId: "expression-assignment/dialog:expression/remove"
                    }));
                    e.registerItem(new Jade.UI.ToolBarButtonCommand({
                        commandId: "expression-assignment/dialog:expression/select-all"
                    }));
                    e.registerItem(new Jade.UI.ToolBarButtonCommand({
                        commandId: "expression-assignment/dialog:expression/deselect-all"
                    }));
                }
            }
            EntityTypes.ExpressionAssignmentToolbarSegment = ExpressionAssignmentToolbarSegment;
        })(EntityTypes = Manage.EntityTypes || (Manage.EntityTypes = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var EntityTypes;
        (function (EntityTypes) {
            class AssignExpressionsCommand extends Jade.Command {
                getDefaultValuesForProps() {
                    return {
                        id: "expression/assign",
                        label: "Assign Expression",
                        icon: "plus.png",
                        enabled: true,
                        display: "icon label",
                        iconSetId: "pdv2"
                    };
                }
                onStateChanged(state) {
                    super.onStateChanged(state);
                }
                onExecute(e) {
                    PDJS.Manage.Tags.ExpressionsSelectionDialog.open({
                        callbacks: {
                            ok: (sender, e) => {
                                sender.close();
                                PDJS.Application
                                    .instance
                                    .contexts
                                    .current
                                    .events
                                    .publish("expression/assign", e);
                            }
                        }
                    });
                }
            }
            EntityTypes.AssignExpressionsCommand = AssignExpressionsCommand;
        })(EntityTypes = Manage.EntityTypes || (Manage.EntityTypes = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var EntityTypes;
        (function (EntityTypes) {
            class DeselectAllFolderCommand extends Jade.Command {
                getDefaultValuesForProps() {
                    return {
                        id: "expression/deselect-all",
                        label: "Deselect All",
                        icon: "checkbox_unchecked.png",
                        enabled: true,
                        display: "icon label",
                        iconSetId: "pdv2"
                    };
                }
                onExecute(e) {
                    PDJS.Application
                        .instance
                        .contexts
                        .current
                        .events
                        .publish("expression/select-all-folders", false);
                }
            }
            EntityTypes.DeselectAllFolderCommand = DeselectAllFolderCommand;
        })(EntityTypes = Manage.EntityTypes || (Manage.EntityTypes = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var EntityTypes;
        (function (EntityTypes) {
            class ExpressionAssignmentDialogCommands extends Jade.CommandGroup {
                constructor() {
                    super("expression-assignment/dialog");
                }
                registerCommands(e) {
                    e.commands.add(new EntityTypes.AssignExpressionsCommand({}));
                    e.commands.add(new EntityTypes.RemoveExpressionsCommand({}));
                    e.commands.add(new EntityTypes.SelectAllFolderCommand({}));
                    e.commands.add(new EntityTypes.DeselectAllFolderCommand({}));
                }
            }
            EntityTypes.ExpressionAssignmentDialogCommands = ExpressionAssignmentDialogCommands;
            Jade.Application.onStart(() => {
                Jade.CommandGroups.add(ExpressionAssignmentDialogCommands);
            });
        })(EntityTypes = Manage.EntityTypes || (Manage.EntityTypes = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var EntityTypes;
        (function (EntityTypes) {
            class RemoveExpressionsCommand extends Jade.Command {
                getDefaultValuesForProps() {
                    return {
                        id: "expression/remove",
                        label: "Remove Expression",
                        icon: "delete.png",
                        enabled: true,
                        display: "icon label",
                        iconSetId: "pdv2"
                    };
                }
                onStateChanged(state) {
                    super.onStateChanged(state);
                }
                onExecute(e) {
                    PDJS.Application
                        .instance
                        .contexts
                        .current
                        .events
                        .publish("expression/assign", {
                        expressionId: null,
                        expressionName: ""
                    });
                }
            }
            EntityTypes.RemoveExpressionsCommand = RemoveExpressionsCommand;
        })(EntityTypes = Manage.EntityTypes || (Manage.EntityTypes = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var EntityTypes;
        (function (EntityTypes) {
            class SelectAllFolderCommand extends Jade.Command {
                getDefaultValuesForProps() {
                    return {
                        id: "expression/select-all",
                        label: "Select All",
                        icon: "checkbox.png",
                        enabled: true,
                        display: "icon label",
                        iconSetId: "pdv2"
                    };
                }
                onExecute(e) {
                    PDJS.Application
                        .instance
                        .contexts
                        .current
                        .events
                        .publish("expression/select-all-folders", true);
                }
            }
            EntityTypes.SelectAllFolderCommand = SelectAllFolderCommand;
        })(EntityTypes = Manage.EntityTypes || (Manage.EntityTypes = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var FeatureSets;
        (function (FeatureSets) {
            class MacroEditor extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                    this.m_adpatedEditor = options.adaptedEditor;
                    this.state.unset("adaptedEditor");
                    this.adaptedEditor.commit = _.bind(this.onCommit, this);
                    this.adaptedEditor.destroy = _.bind(this.onDestroy, this);
                    this.adaptedEditor.focus = _.bind(this.onFocus, this);
                    this.adaptedEditor.size = _.bind(this.onResize, this);
                    this.adaptedEditor.onValidationErrors = (errors) => {
                        let converted = [];
                        errors.forEach((error) => {
                            let data = error.toJSON();
                            converted[converted.length] = {
                                key: data.key,
                                code: data.code,
                                target: error.get_propertyName().toLowerCase(),
                                message: data.message,
                                tags: data.tags
                            };
                        });
                        this.onValidationErrors(converted);
                    };
                    this.onEditorReady();
                }
                get adaptedEditor() {
                    return this.m_adpatedEditor;
                }
                template() {
                    return `<div></div>`;
                }
                onEditorReady() {
                }
                onCommit() {
                }
                onDestroy() {
                }
                onFocus() {
                }
                onResize() {
                }
                onValidationErrors(errors) {
                }
                setValue(key, value) {
                    this.adaptedEditor.setValue(key, value);
                }
                getValue(key) {
                    return this.adaptedEditor.getValue(key);
                }
            }
            FeatureSets.MacroEditor = MacroEditor;
        })(FeatureSets = Shared.FeatureSets || (Shared.FeatureSets = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Licensing;
        (function (Licensing) {
            class LicenseContentFeature extends PDJS.Shared.FeatureSets.MacroEditor {
                constructor(options) {
                    super(options);
                }
                get editor() {
                    return this.m_editor;
                }
                get editorNode() {
                    return this.node.find("div[role=ace]");
                }
                template() {
                    return `<div>
                        <div role="ace" style="position:absolute;top:20px;right:0;bottom:0;left:0;"></div>
                    </div>`;
                }
                onEditorReady() {
                    this.editor_init();
                }
                editor_init() {
                    ace.config.set("basePath", Jade.Path.resolve("~/areas/shared/assets/external/ace"));
                    this.m_editor = ace.edit(this.editorNode.get(0));
                    this.editor.setReadOnly(true);
                    this.editor.setOption("displayIndentGuides", false);
                    this.editor.renderer.setShowPrintMargin(false);
                    this.editor.setShowFoldWidgets(false);
                    this.editor.getSession().setUseSoftTabs(true);
                    this.editor.setFontSize("14px");
                    this.editor.renderer.setShowGutter(false);
                    this.editor.renderer.setPadding(20);
                    this.editor.setHighlightActiveLine(false);
                    this.editor.setTheme("ace/theme/sqlserver");
                    this.editor.commands.removeCommand("find");
                    this.editor.commands.removeCommand("showSettingsMenu");
                    this.editor.session.setMode({ path: "ace/mode/xml", v: Date.now() });
                    this.editor.setValue(this.getValue("content") || "", 0);
                    this.editor.clearSelection();
                }
            }
            Licensing.LicenseContentFeature = LicenseContentFeature;
        })(Licensing = Manage.Licensing || (Manage.Licensing = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Licensing;
        (function (Licensing) {
            class LicensePropertiesFeature extends PDJS.Shared.FeatureSets.MacroEditor {
                constructor(options) {
                    super(options);
                }
                get properties() {
                    return this.getValue("properties");
                }
                template() {
                    return `<div>
                        <div role="grid" style="position:absolute;top:10px;left:10px;right:10px;bottom:10px;overflow:hidden;border:1px solid #CCCCCC;"></div>
                    </div>`;
                }
                onEditorReady() {
                    this.grid_init();
                }
                grid_init() {
                    let data = this.properties;
                    this.m_grid = new PD.Web.UI.Controls.Grid({
                        container: this.node.children("div[role=grid]"),
                        showToolbar: false,
                        height: "100%",
                        footer: {
                            visible: false
                        },
                        dataSource: {
                            data: Object.keys(data).map(function (key) {
                                return { label: Jade.String.toTitleCase(key), value: data[key] };
                            })
                        },
                        messaging: {
                            noRecordsMessage: "Column not referenced by any search groups."
                        },
                        selectionMode: "none",
                        resizable: true,
                        columns: [
                            new PD.Web.UI.Controls.GridColumn({
                                field: "label",
                                title: "Property",
                                width: "150px"
                            }),
                            new PD.Web.UI.Controls.GridColumn({
                                field: "value",
                                title: "Value",
                                width: "150px"
                            }),
                            new PD.Web.UI.Controls.GridFillColumn()
                        ]
                    });
                }
            }
            Licensing.LicensePropertiesFeature = LicensePropertiesFeature;
        })(Licensing = Manage.Licensing || (Manage.Licensing = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Reports;
        (function (Reports) {
            class ReportSelectionDialog extends Jade.UI.Dialog {
                constructor(options) {
                    super(_.extend(options, {
                        title: "Select Report"
                    }), {
                        height: "400px",
                        width: "600px",
                        maximized: false
                    });
                }
                get viewStateId() {
                    return this.state.get("viewStateId");
                }
                get grid() {
                    return this.m_grid;
                }
                get okButtonNode() {
                    return this.node.find("button[data-command=ok]");
                }
                get cancelButtonNode() {
                    return this.node.find("button[data-command=cancel]");
                }
                template() {
                    return `
            <div style="position:absolute;top:10px;left:10px;right:10px;bottom:10px;box-sizing:border-box;">
                <div data-role="grid" style="position:absolute;top:0;left:0;right:0;bottom:34px;border:1px solid #AAAAAA;">
                    
                </div>
                <div style="position:absolute;height:26px;bottom:0;left:0;right:0;text-align:right;">
                    <button data-command="ok" class="-jadejs-button">OK</button>
                    <button data-command="cancel" class="-jadejs-button">Cancel</button>
                </div>
            </div>
            `;
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.grid_init();
                    this.okButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.okButton_onClick, this));
                    this.cancelButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.cancelButton_onClick, this));
                }
                grid_init() {
                    this.m_grid = new PD.Web.UI.Controls.ViewGrid({
                        container: this.node.find("[data-role=grid]"),
                        selectionMode: "single",
                        viewStateId: this.viewStateId,
                        selectOnRightClick: false,
                        defaultSelectionEnabled: true,
                        selection: {
                            map: (e) => {
                                return _.map(e.selections.toArray(), (item, index) => {
                                    return {
                                        id: item.ObjectId,
                                        name: item.Name
                                    };
                                });
                            }
                        },
                        change: (e) => {
                            this.m_selection = e.selection;
                        },
                        dblclick: (e) => {
                            this.m_selection = e.selection;
                            this.closeAndReturn();
                        },
                        needContext: function (e) {
                            e.filters[e.filters.length] = {
                                id: "OnlyHTML"
                            };
                        }
                    });
                }
                okButton_onClick(e) {
                    this.closeAndReturn();
                }
                cancelButton_onClick(e) {
                    this.close();
                }
                closeAndReturn() {
                    if (this.m_selection != null) {
                        this.close({
                            command: "ok",
                            data: this.m_selection
                        });
                    }
                    else {
                        Jade.UI.MessageDialog.open({
                            dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                            dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                            title: "No Selection Made",
                            message: "No report has been selected. Select a report and try again.",
                            select: (e) => {
                                e.close();
                            }
                        });
                    }
                }
                static open(options) {
                    return new ReportSelectionDialog(options);
                }
            }
            Reports.ReportSelectionDialog = ReportSelectionDialog;
        })(Reports = Manage.Reports || (Manage.Reports = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Reports;
        (function (Reports) {
            class RuleScriptSelectionDialog extends Jade.UI.Dialog {
                constructor(options) {
                    super(_.extend(options, {
                        title: "Select Rule Script"
                    }), {
                        height: "400px",
                        width: "600px",
                        maximized: false
                    });
                }
                get viewStateId() {
                    return this.state.get("viewStateId");
                }
                get grid() {
                    return this.m_grid;
                }
                get okButtonNode() {
                    return this.node.find("button[data-command=ok]");
                }
                get cancelButtonNode() {
                    return this.node.find("button[data-command=cancel]");
                }
                template() {
                    return `
            <div style="position:absolute;top:10px;left:10px;right:10px;bottom:10px;box-sizing:border-box;">
                <div data-role="grid" style="position:absolute;top:0;left:0;right:0;bottom:34px;border:1px solid #AAAAAA;">
                    
                </div>
                <div style="position:absolute;height:26px;bottom:0;left:0;right:0;text-align:right;">
                    <button data-command="ok" class="-jadejs-button">OK</button>
                    <button data-command="cancel" class="-jadejs-button">Cancel</button>
                </div>
            </div>
            `;
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.grid_init();
                    this.okButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.okButton_onClick, this));
                    this.cancelButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.cancelButton_onClick, this));
                }
                grid_init() {
                    this.m_grid = new PD.Web.UI.Controls.ViewGrid({
                        container: this.node.find("[data-role=grid]"),
                        selectionMode: "single",
                        viewStateId: this.viewStateId,
                        selectOnRightClick: false,
                        defaultSelectionEnabled: true,
                        selection: {
                            map: (e) => {
                                return _.map(e.selections.toArray(), (item, index) => {
                                    return {
                                        id: item.ObjectId,
                                        name: item.Name
                                    };
                                });
                            }
                        },
                        change: (e) => {
                            this.m_selection = e.selection;
                        },
                        dblclick: (e) => {
                            this.m_selection = e.selection;
                            this.closeAndReturn();
                        },
                        needContext: (e) => {
                            e.filters[e.filters.length] = {
                                id: "NoEvents"
                            };
                        }
                    });
                }
                okButton_onClick(e) {
                    this.closeAndReturn();
                }
                cancelButton_onClick(e) {
                    this.close();
                }
                closeAndReturn() {
                    if (this.m_selection != null) {
                        this.close({
                            command: "ok",
                            data: this.m_selection
                        });
                    }
                    else {
                        Jade.UI.MessageDialog.open({
                            dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                            dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                            title: "No Selection Made",
                            message: "No rule script has been selected. Select a rule script and try again.",
                            select: (e) => {
                                e.close();
                            }
                        });
                    }
                }
                static open(options) {
                    return new RuleScriptSelectionDialog(options);
                }
            }
            Reports.RuleScriptSelectionDialog = RuleScriptSelectionDialog;
        })(Reports = Manage.Reports || (Manage.Reports = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Tags;
        (function (Tags) {
            class ExpressionGeneralFeature extends PDJS.Shared.FeatureSets.MacroEditor {
                constructor(options) {
                    super(options);
                }
                get name() {
                    return this.getValue("name");
                }
                set name(value) {
                    this.setValue("name", value);
                }
                get description() {
                    return this.getValue("description");
                }
                set description(value) {
                    this.setValue("description", value);
                }
                get expression() {
                    return this.getValue("text");
                }
                set expression(value) {
                    this.setValue("text", value);
                }
                get buttonNode() {
                    return this.node.children("button");
                }
                template() {
                    return `<div style="position:absolute;top:0;right:0;bottom:0;left:0;margin:10px;">
                        <button title="Insert tag..."><img src="${Jade.IconSet.get("pdv2").resolve("tags.png", Jade.IconSetSizeSpecificDirectory.x16)}"/></button>
                    </div>`;
                }
                onActivate(e) {
                    this.m_name = new PDJS.Shared.UI.Controls.Fields.StringField({
                        label: "Name",
                        required: true,
                    });
                    this.m_description = new PDJS.Shared.UI.Controls.Fields.StringField({
                        label: "Description",
                        multiline: true,
                        height: 110
                    });
                    this.m_editor = new PDJS.Shared.UI.Controls.Fields.ExpressionField({
                        label: "Expression",
                        required: true
                    });
                    this.controls.add(this.m_name);
                    this.controls.add(this.m_description);
                    this.controls.add(this.m_editor);
                    this.m_editor.node.css({
                        position: "absolute",
                        top: "160px",
                        right: 0,
                        left: 0,
                        bottom: 0
                    });
                    this.buttonNode.css({
                        padding: "1px",
                        minHeight: "20px",
                        maxHeight: "20px",
                        minWidth: "20px",
                        maxWidth: "20px",
                        position: "absolute",
                        top: "163px",
                        right: 0,
                        zIndex: 1,
                        boxSizing: "border-box"
                    });
                    this.buttonNode.on(Jade.BrowserEvent.CLICK, () => {
                        Tags.TagsSelectionDialog.open({
                            callbacks: {
                                ok: (sender, e) => {
                                    this.m_editor.insertTag(e.tagName);
                                    this.m_editor.focus();
                                },
                                cancel: () => {
                                    this.m_editor.focus();
                                }
                            }
                        });
                    });
                }
                onEditorReady() {
                    this.m_name.value = this.name;
                    this.m_description.value = this.description;
                    this.m_editor.value = this.expression;
                    this.m_name.focus();
                }
                onValidationErrors(errors) {
                    _.each(errors, (error) => {
                        switch (error.target) {
                            case "name":
                                this.m_name.errors.add(new PDJS.Shared.UI.Controls.Fields.FieldValidationError({
                                    message: error.message
                                }));
                                break;
                            case "description":
                                this.m_description.errors.add(new PDJS.Shared.UI.Controls.Fields.FieldValidationError({
                                    message: error.message
                                }));
                                break;
                            case "text":
                                this.m_editor.errors.add(new PDJS.Shared.UI.Controls.Fields.FieldValidationError({
                                    message: error.message
                                }));
                                if (error.tags["tags"]) {
                                    this.m_editor.highlight(error.tags["tags"]);
                                }
                                break;
                        }
                    });
                }
                onCommit() {
                    this.m_name.errors.clear();
                    this.m_description.errors.clear();
                    this.m_editor.errors.clear();
                    this.name = this.m_name.value;
                    this.description = this.m_description.value;
                    this.expression = this.m_editor.value;
                }
                onResize() {
                    this.m_editor.redraw();
                }
            }
            Tags.ExpressionGeneralFeature = ExpressionGeneralFeature;
        })(Tags = Manage.Tags || (Manage.Tags = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Tags;
        (function (Tags) {
            class ExpressionsSelectionDialog extends Jade.UI.Dialog {
                constructor(options) {
                    super(options);
                }
                get grid() {
                    return this.m_grid;
                }
                get cancelButtonNode() {
                    return this.node.find("button[data-command=cancel]");
                }
                get okButtonNode() {
                    return this.node.find("button[data-command=ok]");
                }
                get viewStateId() {
                    return this.state.get("viewStateId");
                }
                set viewStateId(value) {
                    this.state.set("viewStateId", value);
                }
                get selection() {
                    return this.state.get("selection");
                }
                set selection(value) {
                    this.state.set("selection", value);
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.okButtonNode.on("click", (e) => {
                        this.closeAndReturn();
                    });
                    this.cancelButtonNode.on("click", (e) => {
                        this.close({
                            command: "cancel"
                        });
                    });
                    this.startUp();
                }
                getWindowOptions() {
                    return _.merge(super.getWindowOptions(), {
                        title: "Expression Selection",
                        height: 350,
                        width: 500
                    });
                }
                template() {
                    return `
            <div style="position:absolute;top:10px;left:10px;right:10px;bottom:10px;box-sizing:border-box;">
                <div role="grid" style="position:absolute;top:0;left:0;right:0;bottom:36px;overflow:hidden;border: 1px solid #CCCCCC;"></div>
                <div style="position:absolute;height:26px;bottom:0;left:0;right:0;text-align:right;">
                    <button data-command="ok" class="-jadejs-button">OK</button>
                    <button data-command="cancel" class="-jadejs-button">Cancel</button>
                </div>
            </div>
            `;
                }
                static open(options) {
                    return new ExpressionsSelectionDialog(options);
                }
                grid_init() {
                    this.m_grid = new PD.Web.UI.Controls.ViewGrid({
                        container: this.node.find("[role=grid]"),
                        selectionMode: "single",
                        viewStateId: this.viewStateId,
                        selectOnRightClick: false,
                        defaultSelectionEnabled: true,
                        selection: {
                            map: (e) => {
                                return _.map(e.selections.toArray(), (item, index) => {
                                    return {
                                        expressionId: item.ObjectId,
                                        expressionName: item.ObjectName
                                    };
                                });
                            }
                        },
                        change: (e) => {
                            this.selection = e.selection;
                        },
                        dblclick: (e) => {
                            this.selection = e.selection;
                            this.closeAndReturn();
                        }
                    });
                }
                startUp() {
                    let service = new PDJS.Services.Views.ViewService();
                    if (this.viewStateId == null) {
                        service.getViewStateId({
                            viewCustomId: PDJS.Services.Views.BuiltInViews.EXPRESSION_SELECTION,
                            success: (e) => {
                                this.viewStateId = e.data.viewStateId;
                                this.grid_init();
                            }
                        });
                    }
                }
                closeAndReturn() {
                    if (this.selection != null) {
                        this.window.destroyContext();
                        this.close({
                            command: "ok",
                            data: this.selection
                        });
                    }
                    else {
                        Jade.UI.MessageDialog.open({
                            dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                            dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                            title: "No Selection Made",
                            message: "Nothing has been selected. Make a selection and try again.",
                            select: (e) => {
                                e.close();
                            }
                        });
                    }
                }
            }
            Tags.ExpressionsSelectionDialog = ExpressionsSelectionDialog;
        })(Tags = Manage.Tags || (Manage.Tags = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Tags;
        (function (Tags) {
            class TagsSelectionDialog extends Jade.UI.Dialog {
                constructor(options) {
                    super(options);
                }
                get grid() {
                    return this.m_grid;
                }
                get cancelButtonNode() {
                    return this.node.find("button[data-command=cancel]");
                }
                get okButtonNode() {
                    return this.node.find("button[data-command=ok]");
                }
                get viewStateId() {
                    return this.state.get("viewStateId");
                }
                set viewStateId(value) {
                    this.state.set("viewStateId", value);
                }
                get selection() {
                    return this.state.get("selection");
                }
                set selection(value) {
                    this.state.set("selection", value);
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.okButtonNode.on("click", (e) => {
                        this.closeAndReturn();
                    });
                    this.cancelButtonNode.on("click", (e) => {
                        this.close({
                            command: "cancel"
                        });
                    });
                    this.startUp();
                }
                getWindowOptions() {
                    return _.merge(super.getWindowOptions(), {
                        title: "Tag Selection",
                        height: 350,
                        width: 500
                    });
                }
                template() {
                    return `
            <div style="position:absolute;top:10px;left:10px;right:10px;bottom:10px;box-sizing:border-box;">
                <div role="grid" style="position:absolute;top:0;left:0;right:0;bottom:36px;overflow:hidden;border:1px solid #CCCCCC;"></div>
                <div style="position:absolute;height:26px;bottom:0;left:0;right:0;text-align:right;">
                    <button data-command="ok" class="-jadejs-button">OK</button>
                    <button data-command="cancel" class="-jadejs-button">Cancel</button>
                </div>
            </div>
            `;
                }
                static open(options) {
                    return new TagsSelectionDialog(options);
                }
                grid_init() {
                    this.m_grid = new PD.Web.UI.Controls.ViewGrid({
                        container: this.node.find("[role=grid]"),
                        selectionMode: "single",
                        viewStateId: this.viewStateId,
                        selectOnRightClick: false,
                        defaultSelectionEnabled: true,
                        selection: {
                            map: (e) => {
                                return _.map(e.selections.toArray(), (item, index) => {
                                    return {
                                        tagName: item.ObjectName
                                    };
                                });
                            }
                        },
                        change: (e) => {
                            this.selection = e.selection;
                        },
                        dblclick: (e) => {
                            this.selection = e.selection;
                            this.closeAndReturn();
                        }
                    });
                }
                startUp() {
                    let service = new PDJS.Services.Views.ViewService();
                    if (this.viewStateId == null) {
                        service.getViewStateId({
                            viewCustomId: PDJS.Services.Views.BuiltInViews.TAG_SELECTION,
                            success: (e) => {
                                this.viewStateId = e.data.viewStateId;
                                this.grid_init();
                            }
                        });
                    }
                }
                closeAndReturn() {
                    if (this.selection != null) {
                        this.window.destroyContext();
                        this.close({
                            command: "ok",
                            data: this.selection
                        });
                    }
                    else {
                        Jade.UI.MessageDialog.open({
                            dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                            dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                            title: "No Selection Made",
                            message: "Nothing has been selected. Make a selection and try again.",
                            select: (e) => {
                                e.close();
                            }
                        });
                    }
                }
            }
            Tags.TagsSelectionDialog = TagsSelectionDialog;
        })(Tags = Manage.Tags || (Manage.Tags = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Users;
        (function (Users) {
            class ChartPane extends Jade.UI.Control {
                template() {
                    return `<div style="position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto;border: 0 none;"></div>`;
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.addCharts();
                }
                addCharts() {
                    let chart = null;
                    chart = new PDJS.Manage.Users.BarChart({
                        title: "Logins Last 12 Months",
                        onRequestData: (e) => {
                            e.bind({
                                data: [[]],
                                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
                            });
                        }
                    });
                    this.controls.add(chart);
                    chart = new PDJS.Manage.Users.DonutChart({
                        title: "Top 10 Logins By Role",
                        onRequestData: (e) => {
                            e.bind({
                                data: [
                                    [{
                                            category: "Geologist",
                                            value: 100,
                                            visible: true
                                        }, {
                                            category: "Lamdman",
                                            value: 250,
                                            visible: true
                                        }, {
                                            category: "Exploration Manager",
                                            value: 1200,
                                            visible: true
                                        }, {
                                            category: "Geo Tech",
                                            value: 25,
                                            visible: true
                                        }]
                                ]
                            });
                        }
                    });
                    this.controls.add(chart);
                    chart = new PDJS.Manage.Users.DonutChart({
                        title: "Top 10 Logins By Department",
                        onRequestData: (e) => {
                            e.bind({
                                data: [
                                    [{
                                            category: "Information Technology",
                                            value: 100,
                                            visible: true
                                        }, {
                                            category: "Geophysics",
                                            value: 250,
                                            visible: true
                                        }, {
                                            category: "Drilling - US",
                                            value: 1200,
                                            visible: true
                                        }, {
                                            category: "Geology",
                                            value: 25,
                                            visible: true
                                        }, {
                                            category: "Procurement",
                                            value: 25,
                                            visible: true
                                        }, {
                                            category: "Land",
                                            value: 412,
                                            visible: true
                                        }, {
                                            category: "Accouting",
                                            value: 115,
                                            visible: true
                                        }, {
                                            category: "Drilling - SA",
                                            value: 199,
                                            visible: true
                                        }, {
                                            category: "Exploration - EU",
                                            value: 314,
                                            visible: true
                                        }]
                                ]
                            });
                        }
                    });
                    this.controls.add(chart);
                }
            }
            Users.ChartPane = ChartPane;
        })(Users = Manage.Users || (Manage.Users = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Users;
        (function (Users) {
            class ChartBase extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                }
                get chart() {
                    return this.chartNode.data("kendoChart");
                }
                get chartNode() {
                    return this.node.find("div[role=chart]");
                }
                get legendItems() {
                    return this.chart._plotArea.charts[0].legendItems;
                }
                get requestDataCallback() {
                    return this.state.get("onRequestData", () => { });
                }
                get title() {
                    return this.state.get("title");
                }
                get titleNode() {
                    return this.node.find("div[role=title]");
                }
                template() {
                    return `<div class="-pdjs-manage-users-chart">
                        <div role="title">${this.title}</div>
                        <div role="chart"></div>
                    </div>`;
                }
                getLegendItem(text) {
                    return this.legendItems.find((i) => {
                        return i.text == text;
                    });
                }
                chart_onToolTip(e) {
                    var legendItem = this.getLegendItem(e.category);
                    return `<div class="-pdjs-manage-users-chart-tooltip">
                        <div style="background-color:${legendItem.markerColor};"></div>
                        ${e.category} - ${e.value}
                    </div>`;
                }
            }
            Users.ChartBase = ChartBase;
        })(Users = Manage.Users || (Manage.Users = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Users;
        (function (Users) {
            class BarChart extends Users.ChartBase {
                constructor(options) {
                    super(options);
                }
                onActivate(e) {
                    this.requestDataCallback({ bind: (a) => {
                            this.chart_init(a);
                        } });
                }
                chart_init(e) {
                    this.chartNode.kendoChart({
                        theme: "bootstrap",
                        series: this.chart_generateSeries(e),
                        title: {
                            visible: false
                        },
                        categoryAxis: [this.chart_categoryAxisSettings(e.categories)],
                        seriesDefaults: {
                            labels: {
                                visible: true,
                                background: "transparent",
                                template: "#= value#"
                            }
                        },
                        tooltip: {
                            color: "#000000",
                            background: "#FFFFFF",
                            visible: true,
                            template: (e) => {
                                return this.chart_onToolTip(e);
                            }
                        }
                    });
                }
                chart_categoryAxisSettings(categories) {
                    return {
                        categories: categories,
                        justified: false,
                        labels: {
                            color: "#000000",
                            font: "12px Arial",
                            rotation: -90,
                            visible: true,
                            format: null
                        },
                        line: {
                            color: "#DDDDDD",
                            width: 1,
                            visible: undefined
                        },
                        majorGridLines: {
                            color: "#DDDDDD",
                            dashType: "solid",
                            visible: true
                        },
                        majorTicks: {
                            visible: true
                        },
                        minorGridLines: {
                            color: "#DDDDDD",
                            dashType: "solid",
                            visible: false
                        },
                        minorTicks: {
                            visible: true
                        },
                        title: {
                            color: "#000000",
                            font: "12px Arial",
                            position: "center",
                            rotation: -90,
                            text: null
                        }
                    };
                }
                chart_generateSeries(e) {
                    let result = [];
                    e.data.forEach(data => {
                        result[result.length] = {
                            data: this.chart_generateSeriesData(e.categories.length),
                            labels: {
                                format: "{0:n}"
                            }
                        };
                    });
                    return result;
                }
                chart_generateSeriesData(count) {
                    let result = [];
                    for (var i = 0; i < count; i++) {
                        result[i] = Jade.Arithmetic.randomInteger(0, 500);
                    }
                    return result;
                }
            }
            Users.BarChart = BarChart;
        })(Users = Manage.Users || (Manage.Users = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Users;
        (function (Users) {
            class DonutChart extends Users.ChartBase {
                onActivate(e) {
                    this.requestDataCallback({ bind: (a) => {
                            this.chart_init(a);
                        } });
                }
                chart_init(e) {
                    this.chartNode.kendoChart({
                        theme: "bootstrap",
                        series: [{
                                type: "donut",
                                data: e.data[0],
                                padding: 0
                            }],
                        title: {
                            visible: false
                        },
                        legend: {
                            position: "right",
                            labels: {
                                font: "13px Arial",
                                padding: 2
                            }
                        },
                        chartArea: {
                            margin: 0
                        },
                        plotArea: {
                            margin: 0
                        },
                        seriesDefaults: {
                            holeSize: 60,
                            labels: {
                                visible: false,
                                background: "transparent",
                                template: "#= category #: #= value#%"
                            }
                        },
                        tooltip: {
                            color: "#000000",
                            background: "#FFFFFF",
                            visible: true,
                            template: (e) => {
                                return this.chart_onToolTip(e);
                            }
                        },
                        legendItemClick: (e) => {
                            this.chart_onLegendItemClick(e);
                        }
                    });
                    this.chart_addDonutHole();
                }
                chart_onLegendItemClick(e) {
                    let value = 0;
                    let clone = [];
                    e.series.data.forEach((datum, index) => {
                        clone[index] = $.extend({}, datum);
                    });
                    clone.forEach((datum) => {
                        if (e.text == datum.category) {
                            datum.visible = !datum.visible;
                        }
                        if (datum.visible) {
                            value += datum.value;
                        }
                    });
                    $("#chart3total>div>div").html(`<div>${value}</div>`);
                }
                chart_addDonutHole() {
                }
            }
            Users.DonutChart = DonutChart;
        })(Users = Manage.Users || (Manage.Users = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Views;
        (function (Views) {
            class SearchGroups extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                    this.subscriptions.add(Views.SearchGroupEvent.onSearchGroupRefreshRequest, (e) => {
                        this.grid.refresh(e || {});
                    });
                }
                get grid() {
                    return this.state.get("grid");
                }
                set grid(value) {
                    this.state.add("grid", value);
                }
                get toolbar() {
                    return this.state.get("toolbar");
                }
                set toolbar(value) {
                    this.state.add("toolbar", value);
                }
                get entityTypeId() {
                    return this.state.get("entityTypeId", null);
                }
                get documentTypeId() {
                    return this.state.get("documentTypeId", null);
                }
                get viewStateId() {
                    return this.state.get("viewStateId", null);
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.grid_init();
                    this.toolbar_init();
                }
                template() {
                    return `
                <div style="background-color:#EEEEEE !important;position:absolute;top:0;left:0;right:0;bottom:0;">
                    <div style="position:absolute;top:0;left:0;right:0;height:30px;background-color:#EEEEEE;" class="-pd-title-minimal">Groups</div>
                    <div style="position:absolute;top:40px;left:0;right:0;height:30px;background-color:#EEEEEE;" data-id="toolbar"></div>
                    <div style="position:absolute;top:80px;left:0;right:0;bottom:0;border:1px solid #DDDDDD;" data-id="grid"></div>
                </div>`;
                }
                grid_init() {
                    this.grid = new window["PD"].Web.UI.Controls.ViewGrid({
                        container: this.node.find("[data-id='grid']"),
                        selectionMode: "single",
                        viewStateId: this.viewStateId,
                        selectOnRightClick: false,
                        defaultSelectionEnabled: true,
                        selection: {
                            map: (e) => {
                                return _.map(e.selections.toArray(), (item, index) => {
                                    return {
                                        id: item.ObjectId,
                                        name: item.Name
                                    };
                                });
                            }
                        },
                        change: (e) => {
                            let searchGroup = _.first(e.selections.toArray());
                            let searchGroupId = searchGroup == null ? Jade.Guid.empty() : searchGroup.id;
                            Jade.Application
                                .instance
                                .contexts
                                .current
                                .commands
                                .setState({
                                "views/searchgroups": {
                                    searchGroupId: searchGroupId
                                }
                            });
                            Jade.Application
                                .instance
                                .contexts
                                .current
                                .events
                                .publish("searchgroup/select", searchGroupId);
                        },
                        dblclick: function (e) {
                            Jade.Application
                                .instance
                                .contexts
                                .current
                                .commands
                                .execute("views/searchgroups:searchgroup/edit");
                        },
                        needContext: (e) => {
                            if (this.entityTypeId != null) {
                                e.filters[e.filters.length] = {
                                    id: "EntType",
                                    params: {
                                        id: this.entityTypeId
                                    }
                                };
                            }
                            if (this.documentTypeId != null) {
                                e.filters[e.filters.length] = {
                                    id: "DocType",
                                    params: {
                                        id: this.documentTypeId
                                    }
                                };
                            }
                        }
                    });
                }
                toolbar_init() {
                    this.toolbar = new Jade.UI.ToolBar({
                        insertAt: "[data-id=toolbar]",
                        segments: [new Views.SearchGroupsToolbarSegment()]
                    });
                    this.controls.add(this.toolbar);
                }
            }
            Views.SearchGroups = SearchGroups;
        })(Views = Manage.Views || (Manage.Views = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Views;
        (function (Views) {
            let DocumentTypeCommandKey;
            (function (DocumentTypeCommandKey) {
                DocumentTypeCommandKey["name"] = "pd/document-type";
            })(DocumentTypeCommandKey || (DocumentTypeCommandKey = {}));
            class SearchGroupsDialog extends Jade.UI.Dialog {
                constructor(options) {
                    super(options, {
                        title: "Search Groups",
                        height: "600px",
                        width: "800px",
                        maximized: true
                    });
                }
                get splitter() {
                    return this.state.get("splitter", null);
                }
                set splitter(value) {
                    this.state.set("splitter", value);
                }
                get splitterNode() {
                    return this.node.find("[data-id=splitter]");
                }
                get closeButtonNode() {
                    return this.node.find("button[data-command=close]");
                }
                get entityTypeId() {
                    return this.state.get("entityTypeId", null);
                }
                get documentTypeId() {
                    return this.state.get("documentTypeId", null);
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.splitter = this.splitterNode.kendoSplitter({
                        orientation: "horizontal",
                        panes: [
                            { size: "275px" },
                            {}
                        ],
                        resize: _.debounce(() => {
                            if (this.splitter != null) {
                                this.splitter.resize(true);
                            }
                        }, 50)
                    }).data("kendoSplitter");
                    Jade.Ajax.call({
                        url: Jade.Path.resolve("~/Manage/View/SearchGroups"),
                        success: (e) => {
                            this.loadControls(e);
                        }
                    });
                    Jade.Application
                        .instance
                        .contexts
                        .current
                        .commands
                        .setState({
                        "views/searchgroups": {
                            entityTypeId: this.entityTypeId,
                            documentTypeId: this.documentTypeId
                        }
                    });
                    this.closeButtonNode.on("click", (e) => {
                        this.close();
                    });
                }
                onDestroy(e) {
                    super.onDestroy(e);
                    if (this.splitter != null && this.splitter.element != null) {
                        this.splitter.destroy();
                    }
                }
                template() {
                    return `
            <div style="position:absolute;top:10px;left:10px;right:10px;bottom:10px;box-sizing:border-box;">
                <div style="position:absolute;top:0;left:0;right:0;bottom:34px;">
                    <div data-id="splitter" class="-pd-minimal-splitter" style="height:100%;">
                        <div data-role="groups"></div>
                        <div data-role="items"></div>
                    </div>
                </div>
                <div style="position:absolute;height:26px;bottom:0;left:0;right:0;text-align:right;">
                    <button data-command="close" class="-jadejs-button">Close</button>
                </div>
            </div>
            `;
                }
                static open(options) {
                    return new SearchGroupsDialog(options);
                }
                loadControls(e) {
                    this.controls.add(new Views.SearchGroups({
                        insertAt: "[data-role=groups]",
                        viewStateId: e.searchGroupsViewStateId,
                        entityTypeId: this.entityTypeId,
                        documentTypeId: this.documentTypeId
                    }));
                    this.controls.add(new Views.SearchItems({
                        insertAt: "[data-role=items]",
                        viewStateId: e.searchGroupItemsViewStateId,
                        entityTypeId: this.entityTypeId,
                        documentTypeId: this.documentTypeId
                    }));
                }
            }
            Views.SearchGroupsDialog = SearchGroupsDialog;
        })(Views = Manage.Views || (Manage.Views = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Views;
        (function (Views) {
            class SearchGroupsToolbarSegment extends Jade.UI.ToolBarSegment {
                onAddItems(e) {
                    e.registerItem(new Jade.UI.ToolBarButtonCommand({
                        commandId: "views/searchgroups:searchgroup/add"
                    }));
                    e.registerItem(new Jade.UI.ToolBarButtonCommand({
                        commandId: "views/searchgroups:searchgroup/edit"
                    }));
                    e.registerItem(new Jade.UI.ToolBarButtonCommand({
                        commandId: "views/searchgroups:searchgroup/remove"
                    }));
                }
            }
            Views.SearchGroupsToolbarSegment = SearchGroupsToolbarSegment;
        })(Views = Manage.Views || (Manage.Views = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Views;
        (function (Views) {
            class SearchItems extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                    this.m_grid = null;
                    this.m_toolbar = null;
                    this.m_selectedSearchGroupId = Jade.Guid.empty();
                    Jade.Application
                        .instance
                        .contexts
                        .current
                        .events
                        .subscribe("searchgroup/select", (id) => {
                        this.m_selectedSearchGroupId = id;
                        this.m_grid.refresh({
                            clear: true
                        });
                    });
                    this.subscriptions.add(Views.SearchItemEvent.onSearchItemRefreshRequest, (e) => {
                        this.m_grid.refresh(e || {});
                    });
                }
                get viewStateId() {
                    return this.state.get("viewStateId", null);
                }
                onActivate(e) {
                    this.grid_init();
                    this.toolbar_init();
                }
                template() {
                    return `
                <div style="background-color:#EEEEEE !important;position:absolute;top:0;left:0;right:0;bottom:0;">
                    <div style="position:absolute;top:0;left:0;right:0;height:30px;background-color:#EEEEEE;" class="-pd-title-minimal">Items</div>
                    <div style="position:absolute;top:40px;left:0;right:0;height:30px;background-color:#EEEEEE;" data-id="toolbar"></div>
                    <div style="position:absolute;top:80px;left:0;right:0;bottom:0;border:1px solid #DDDDDD;" data-id="grid"></div>
                </div>`;
                }
                grid_init() {
                    this.m_grid = new window["PD"].Web.UI.Controls.ViewGrid({
                        container: this.node.find("[data-id='grid']"),
                        selectionMode: "multiple",
                        viewStateId: this.viewStateId,
                        selectOnRightClick: false,
                        defaultSelectionEnabled: false,
                        selection: {
                            map: (e) => {
                                return _.map(e.selections.toArray(), (item, index) => {
                                    return {
                                        id: item.ObjectId,
                                        name: item.Name
                                    };
                                });
                            }
                        },
                        change: (e) => {
                            let searchItemIds = _.map(e.selections.toArray(), (e) => {
                                return e.id;
                            });
                            Jade.Application
                                .instance
                                .contexts
                                .current
                                .commands
                                .setState({
                                "views/searchgroups": {
                                    searchItemIds: searchItemIds
                                }
                            });
                        },
                        needContext: (e) => {
                            e.filters[e.filters.length] = {
                                id: "Group",
                                params: {
                                    id: this.m_selectedSearchGroupId
                                }
                            };
                        }
                    });
                }
                toolbar_init() {
                    this.m_toolbar = new Jade.UI.ToolBar({
                        insertAt: "[data-id=toolbar]",
                        segments: [new Views.SearchItemsToolbarSegment()]
                    });
                    this.controls.add(this.m_toolbar);
                }
            }
            Views.SearchItems = SearchItems;
        })(Views = Manage.Views || (Manage.Views = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Views;
        (function (Views) {
            class SearchItemsToolbarSegment extends Jade.UI.ToolBarSegment {
                onAddItems(e) {
                    e.registerItem(new Jade.UI.ToolBarButtonCommand({
                        commandId: "views/searchgroups:searchitem/add"
                    }));
                    e.registerItem(new Jade.UI.ToolBarButtonCommand({
                        commandId: "views/searchgroups:searchitem/remove"
                    }));
                }
            }
            Views.SearchItemsToolbarSegment = SearchItemsToolbarSegment;
        })(Views = Manage.Views || (Manage.Views = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Views;
        (function (Views) {
            class AddSearchGroupCommand extends Jade.Command {
                constructor(props) {
                    super(props);
                    this.state.set({
                        entityTypeId: null,
                        documentTypeId: null
                    });
                }
                getDefaultValuesForProps() {
                    return {
                        id: "searchgroup/add",
                        tooltip: "New",
                        label: "New",
                        icon: "plus.png",
                        enabled: true,
                        display: "icon label",
                        iconSetId: "pdv2"
                    };
                }
                get entityTypeId() {
                    return this.state.get("entityTypeId", null);
                }
                get documentTypeId() {
                    return this.state.get("documentTypeId", null);
                }
                onExecute(e) {
                    if (this.entityTypeId == null && this.documentTypeId == null) {
                        return;
                    }
                    window["ProspectDirector"].Web.UI.FeatureSets.NHibTargetEditorDialog.open({
                        config: {
                            title: `Add Search Group`,
                            height: "500px",
                            width: "650px"
                        },
                        data: {
                            targetArbiter: "ProspectDirector.Web.Manage.Modules.Views.SearchGroupArbiter",
                            targetType: "ProspectDirector.Web.Manage.Modules.Views.SearchGroupUIO",
                            layoutType: window["ProspectDirector"].Web.UI.FeatureSets.Layouts.TabStripLayout,
                            properties: {
                                entityTypeId: this.entityTypeId,
                                documentTypeId: this.documentTypeId
                            }
                        },
                        callbacks: {
                            ok: (sender, e) => {
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .events
                                    .publish(Views.SearchGroupEvent.onSearchGroupRefreshRequest, {
                                    clear: true,
                                    selections: [e.target.id]
                                });
                            }
                        }
                    });
                }
            }
            Views.AddSearchGroupCommand = AddSearchGroupCommand;
        })(Views = Manage.Views || (Manage.Views = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Views;
        (function (Views) {
            let SearchItemEvent;
            (function (SearchItemEvent) {
                SearchItemEvent["onSearchItemRefreshRequest"] = "searchitem/refresh-request";
            })(SearchItemEvent = Views.SearchItemEvent || (Views.SearchItemEvent = {}));
            class AddSearchItemCommand extends Jade.Command {
                constructor(props) {
                    super(props);
                    this.state.set({
                        searchGroupId: null
                    });
                }
                getDefaultValuesForProps() {
                    return {
                        id: "searchitem/add",
                        tooltip: "New",
                        label: "New",
                        icon: "plus.png",
                        enabled: true,
                        display: "icon label",
                        iconSetId: "pdv2"
                    };
                }
                get searchGroupId() {
                    return this.state.get("searchGroupId", null);
                }
                onStateChanged(e) {
                    this.enabled = this.searchGroupId != null;
                }
                onExecute(e) {
                    if (this.searchGroupId == null) {
                        return;
                    }
                    PDJS.Manage.Views.SearchItemsSelectionDialog.open({
                        searchGroupId: this.searchGroupId,
                        callbacks: {
                            ok: (sender, e) => {
                                Jade.Ajax.call({
                                    type: "POST",
                                    url: Jade.Path.resolve("~/Manage/View/AddSearchItems"),
                                    data: {
                                        searchGroupId: this.searchGroupId,
                                        ids: e.extensionColumnIds
                                    },
                                    success: (e2) => {
                                        Jade.Application
                                            .instance
                                            .contexts
                                            .current
                                            .events
                                            .publish(SearchItemEvent.onSearchItemRefreshRequest, e.extensionColumnIds);
                                    }
                                });
                            }
                        }
                    });
                }
            }
            Views.AddSearchItemCommand = AddSearchItemCommand;
        })(Views = Manage.Views || (Manage.Views = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Views;
        (function (Views) {
            let SearchGroupEvent;
            (function (SearchGroupEvent) {
                SearchGroupEvent["onSearchGroupRefreshRequest"] = "searchgroup/refresh-request";
                SearchGroupEvent["onSearchGroupSelected"] = "searchgroup/selected";
            })(SearchGroupEvent = Views.SearchGroupEvent || (Views.SearchGroupEvent = {}));
            class EditSearchGroupCommand extends Jade.Command {
                constructor(props) {
                    super(props);
                    this.state.set({
                        searchGroupId: null
                    });
                }
                getDefaultValuesForProps() {
                    return {
                        id: "searchgroup/edit",
                        tooltip: "Edit",
                        label: "Edit",
                        icon: "pencil.png",
                        enabled: true,
                        display: "icon label",
                        iconSetId: "pdv2"
                    };
                }
                get searchGroupId() {
                    return this.state.get("searchGroupId", null);
                }
                onStateChanged(e) {
                    this.enabled = this.searchGroupId != null;
                }
                onExecute(e) {
                    window["ProspectDirector"].Web.UI.FeatureSets.NHibTargetEditorDialog.open({
                        config: {
                            title: `Edit Search Group`,
                            height: "500px",
                            width: "650px"
                        },
                        data: {
                            targetId: this.searchGroupId,
                            targetArbiter: "ProspectDirector.Web.Manage.Modules.Views.SearchGroupArbiter",
                            targetType: "ProspectDirector.Web.Manage.Modules.Views.SearchGroupUIO",
                            layoutType: window["ProspectDirector"].Web.UI.FeatureSets.Layouts.TabStripLayout
                        },
                        callbacks: {
                            ok: (sender, e) => {
                                Jade.Application
                                    .instance
                                    .contexts
                                    .current
                                    .events
                                    .publish(SearchGroupEvent.onSearchGroupRefreshRequest, {
                                    clear: false
                                });
                            }
                        }
                    });
                }
            }
            Views.EditSearchGroupCommand = EditSearchGroupCommand;
        })(Views = Manage.Views || (Manage.Views = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Views;
        (function (Views) {
            class RemoveSearchGroupCommand extends Jade.Command {
                constructor(props) {
                    super(props);
                    this.state.set({
                        searchGroupId: null
                    });
                }
                getDefaultValuesForProps() {
                    return {
                        id: "searchgroup/remove",
                        tooltip: "Remove",
                        label: "Remove",
                        icon: "delete.png",
                        enabled: true,
                        display: "icon label",
                        iconSetId: "pdv2"
                    };
                }
                get searchGroupId() {
                    return this.state.get("searchGroupId", null);
                }
                onStateChanged(e) {
                    this.enabled = this.searchGroupId != null;
                }
                onExecute(e) {
                    if (this.searchGroupId == null) {
                        return;
                    }
                    Jade.UI.MessageDialog.open({
                        dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                        dialogButtons: Jade.UI.MessageDialogButtonStyle.OKCancel,
                        title: "Remove Search Group",
                        message: `Remove the selected search group?`,
                        select: (e) => {
                            if (e.button == Jade.UI.MessageDialogButton.ok) {
                                Jade.Ajax.call({
                                    type: "DELETE",
                                    url: Jade.Path.resolve("~/Manage/View/DeleteSearchGroup"),
                                    data: {
                                        id: this.searchGroupId
                                    },
                                    success: (e) => {
                                        Jade.Application
                                            .instance
                                            .contexts
                                            .current
                                            .events
                                            .publish(Views.SearchGroupEvent.onSearchGroupRefreshRequest, {
                                            clear: true
                                        });
                                    }
                                });
                            }
                            e.close();
                        }
                    });
                }
            }
            Views.RemoveSearchGroupCommand = RemoveSearchGroupCommand;
        })(Views = Manage.Views || (Manage.Views = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Views;
        (function (Views) {
            class RemoveSearchItemCommand extends Jade.Command {
                constructor(props) {
                    super(props);
                    this.state.set({
                        searchItemIds: null
                    });
                }
                getDefaultValuesForProps() {
                    return {
                        id: "searchitem/remove",
                        tooltip: "Remove",
                        label: "Remove",
                        icon: "delete.png",
                        enabled: false,
                        display: "icon label",
                        iconSetId: "pdv2"
                    };
                }
                get searchItemIds() {
                    return this.state.get("searchItemIds", []);
                }
                onStateChanged(e) {
                    this.enabled = this.searchItemIds.length > 0;
                }
                onExecute(e) {
                    Jade.UI.MessageDialog.open({
                        dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                        dialogButtons: Jade.UI.MessageDialogButtonStyle.OKCancel,
                        title: "Remove Search Item",
                        message: `Remove the selected search items?`,
                        select: (e) => {
                            if (e.button == Jade.UI.MessageDialogButton.ok) {
                                Jade.Ajax.call({
                                    type: "DELETE",
                                    url: Jade.Path.resolve("~/Manage/View/DeleteSearchItems"),
                                    data: {
                                        ids: this.searchItemIds
                                    },
                                    success: (e) => {
                                        Jade.Application
                                            .instance
                                            .contexts
                                            .current
                                            .events
                                            .publish(Views.SearchItemEvent.onSearchItemRefreshRequest, {
                                            clear: true
                                        });
                                    }
                                });
                            }
                            e.close();
                        }
                    });
                }
            }
            Views.RemoveSearchItemCommand = RemoveSearchItemCommand;
        })(Views = Manage.Views || (Manage.Views = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Views;
        (function (Views) {
            class SearchGroupCommands extends Jade.CommandGroup {
                constructor() {
                    super("views/searchgroups");
                }
                registerCommands(e) {
                    e.commands.add(new Views.AddSearchGroupCommand({}));
                    e.commands.add(new Views.EditSearchGroupCommand({}));
                    e.commands.add(new Views.RemoveSearchGroupCommand({}));
                    e.commands.add(new Views.AddSearchItemCommand({}));
                    e.commands.add(new Views.RemoveSearchItemCommand({}));
                }
            }
            Views.SearchGroupCommands = SearchGroupCommands;
        })(Views = Manage.Views || (Manage.Views = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
Jade.Application.onStart(function () {
    Jade.CommandGroups.add(PDJS.Manage.Views.SearchGroupCommands);
});
var PDJS;
(function (PDJS) {
    var Manage;
    (function (Manage) {
        var Views;
        (function (Views) {
            class SearchItemsSelectionDialog extends Jade.UI.Dialog {
                constructor(options) {
                    super(_.extend({
                        title: "Search Item Selection"
                    }, options), {
                        height: "450px",
                        width: "600px"
                    });
                    this.m_grid = null;
                }
                get cancelButtonNode() {
                    return this.node.find("button[data-command=cancel]");
                }
                get gridNode() {
                    return this.node.find("div[data-role=grid]");
                }
                get okButtonNode() {
                    return this.node.find("button[data-command=ok]");
                }
                get searchGroupId() {
                    return this.state.get("searchGroupId");
                }
                onActivate(e) {
                    super.onActivate(e);
                    Jade.Ajax.call({
                        url: Jade.Path.resolve("~/Manage/View/SearchItemsSelection"),
                        error: (e) => {
                            this.close();
                        },
                        success: (e) => {
                            this.init_grid(e.viewStateId);
                        }
                    });
                    this.cancelButtonNode.on("click", (e) => {
                        this.close();
                    });
                    this.okButtonNode.on("click", (e) => {
                        this.okAndClose();
                    });
                }
                template() {
                    return `
            <div style="position:absolute;top:10px;left:10px;right:10px;bottom:10px;box-sizing:border-box;">
                <div data-role="grid" style="position:absolute;top:0;left:0;right:0;bottom:34px;">
                    
                </div>
                <div style="position:absolute;height:26px;bottom:0;left:0;right:0;text-align:right;">
                    <button data-command="ok" class="-jadejs-button">OK</button>
                    <button data-command="cancel" class="-jadejs-button">Cancel</button>
                </div>
            </div>
            `;
                }
                static open(options) {
                    return new SearchItemsSelectionDialog(options);
                }
                init_grid(viewStateId) {
                    this.m_grid = new window["PD"].Web.UI.Controls.ViewGrid({
                        container: this.node.find("[data-role='grid']"),
                        selectionMode: "multiple",
                        viewStateId: viewStateId,
                        selectOnRightClick: true,
                        defaultSelectionEnabled: false,
                        selection: {
                            map: (e) => {
                                return _.map(e.selections.toArray(), (item, index) => {
                                    return {
                                        id: item.ObjectId,
                                        name: item.Name
                                    };
                                });
                            }
                        },
                        dblclick: (e) => {
                            this.okAndClose();
                        },
                        needContext: (e) => {
                            e.filters[e.filters.length] = {
                                id: "Group",
                                params: {
                                    id: this.searchGroupId
                                }
                            };
                        }
                    });
                    ;
                }
                okAndClose() {
                    let selections = _.map(this.m_grid.getSelections().toArray(), (item) => {
                        return item.id;
                    });
                    this.close({
                        command: "ok",
                        data: {
                            extensionColumnIds: selections
                        }
                    });
                }
            }
            Views.SearchItemsSelectionDialog = SearchItemsSelectionDialog;
        })(Views = Manage.Views || (Manage.Views = {}));
    })(Manage = PDJS.Manage || (PDJS.Manage = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        Jade.Application.onStart(() => {
            let service = new Services.Views.ViewService();
            service.getViewStateIds();
        });
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        class Error {
            constructor(options) {
                this.m_code = options.code;
                this.m_message = options.message;
            }
            get code() {
                return this.m_code;
            }
            get message() {
                return this.m_message;
            }
        }
        Services.Error = Error;
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        class HttpError extends Services.Error {
        }
        Services.HttpError = HttpError;
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        class Service {
        }
        Services.Service = Service;
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        class ServiceError extends Services.Error {
        }
        Services.ServiceError = ServiceError;
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        class ServicePipeline {
            constructor() {
                this.m_tasks = new Services.ServiceTaskCollection({
                    pipeline: this
                });
                this.m_stopped = false;
            }
            get tasks() {
                return this.m_tasks;
            }
            get request() {
                return this.m_request;
            }
            get response() {
                return this.m_response;
            }
            set response(value) {
                this.m_response = value;
            }
            get stopped() {
                return this.m_stopped;
            }
            set stopped(value) {
                this.m_stopped = value;
            }
            addBeforeSendTask(callback) {
                return this.addTask(Services.ServiceTaskType.OnBeforeSend, callback);
            }
            addErrorTask(callback) {
                return this.addTask(Services.ServiceTaskType.OnError, callback);
            }
            addSuccessTask(callback) {
                return this.addTask(Services.ServiceTaskType.OnSuccess, callback);
            }
            addCompleteTask(callback) {
                return this.addTask(Services.ServiceTaskType.OnComplete, callback);
            }
            createRequest(options) {
                this.m_request = new Services.ServiceRequestOf(options);
                return this;
            }
            sendRequest() {
                let ajaxSettings = _.extend({
                    contentType: this.request.contentType,
                    url: Jade.Path.resolve(this.request.url),
                    method: this.request.method,
                    data: this.request.getDataForAjaxRequest()
                }, {
                    beforeSend: _.bind(this.onBeforeSend, this),
                    error: _.bind(this.onError, this),
                    success: _.bind(this.onSuccess, this),
                    complete: _.bind(this.onComplete, this)
                });
                $.ajax(ajaxSettings);
            }
            abortRequestWithSuccess(timeout = 0) {
                this.request.xhr.abort();
                let success = () => {
                    this.onSuccess(this.response.data, "success", this.request.xhr);
                    this.onComplete(this.request.xhr, "complete");
                };
                if (timeout > 0) {
                    setTimeout(success, timeout);
                }
                else {
                    success();
                }
            }
            abortRequestWithError(timeout = 0) {
                this.request.xhr.abort();
                let error = () => {
                    this.onError(this.request.xhr, "error", "aborted by service");
                    this.onComplete(this.request.xhr, "complete");
                };
                if (timeout > 0) {
                    setTimeout(error, timeout);
                }
                else {
                    error();
                }
            }
            onBeforeSend(xhr, textStatus) {
                this.request.xhr = xhr;
                this.response = new Services.ServiceResponse({
                    xhr: xhr
                });
                this.tasks.execute(Services.ServiceTaskType.OnBeforeSend);
                this.request.complete(this.response);
            }
            onComplete(xhr, textStatus) {
                this.tasks.execute(Services.ServiceTaskType.OnComplete);
                this.request.complete(this.response);
            }
            onSuccess(data, textStatus, xhr) {
                this.response.data = data;
                this.response.statusText = textStatus;
                this.tasks.execute(Services.ServiceTaskType.OnSuccess);
                this.request.success(this.response);
            }
            onError(xhr, statueText, errorThrown) {
                this.response.error = new Services.HttpError({
                    code: xhr.status,
                    message: errorThrown
                });
                this.tasks.execute(Services.ServiceTaskType.OnError);
                this.request.error(this.response);
                if (!this.response.errorHandled) {
                    new Jade.AjaxErrorHandler({
                        jqXHR: xhr
                    });
                }
            }
            addTask(type, callback) {
                this.tasks.add(new Services.ServiceTask({
                    type: type,
                    callback: callback
                }));
                return this;
            }
            static createRequest(options) {
                let result = new ServicePipeline();
                result.createRequest(options);
                return result;
            }
        }
        Services.ServicePipeline = ServicePipeline;
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        let ContentType;
        (function (ContentType) {
            ContentType["JSON"] = "application/json";
            ContentType["HTML"] = "html";
        })(ContentType = Services.ContentType || (Services.ContentType = {}));
        class ServiceRequest {
            constructor(options) {
                this.m_callbacks = {};
                this.registerCallbacks(options.data);
                this.m_options = new Jade.StateBag(options);
            }
            get accepts() {
                return this.options.get("accepts");
            }
            set accepts(value) {
                this.options.get("accepts", value);
            }
            get async() {
                return this.options.get("async");
            }
            set async(value) {
                this.options.get("async", value);
            }
            get beforeSend() {
                return this.getCallback("beforeSend");
            }
            set beforeSend(value) {
                this.setCallback("beforeSend", value);
            }
            get cache() {
                return this.options.get("cache", false);
            }
            set cache(value) {
                this.options.get("cache", value);
            }
            get complete() {
                return this.getCallback("complete");
            }
            set complete(value) {
                this.setCallback("complete", value);
            }
            get contentType() {
                return this.options.get("contentType", ContentType.JSON);
            }
            set contentType(value) {
                this.options.get("contentType", value);
            }
            get error() {
                return this.getCallback("error");
            }
            set error(value) {
                this.setCallback("error", value);
            }
            get data() {
                return this.options.get("data", null);
            }
            set data(value) {
                this.options.set("data", value);
            }
            get options() {
                return this.m_options;
            }
            get success() {
                return this.getCallback("success");
            }
            set success(value) {
                this.setCallback("success", value);
            }
            get method() {
                return this.options.get("method");
            }
            set method(value) {
                this.options.get("method", value);
            }
            get url() {
                return this.options.get("url");
            }
            set url(value) {
                this.options.set("url", value);
            }
            get xhr() {
                return this.m_xhr;
            }
            set xhr(value) {
                this.m_xhr = value;
            }
            getDataForAjaxRequest() {
                let result;
                let shouldStringify = this.contentType === ContentType.JSON &&
                    (this.method === Jade.HttpVerb.POST || this.method === Jade.HttpVerb.PUT || this.method === Jade.HttpVerb.DELETE);
                if (shouldStringify) {
                    result = JSON.stringify(this.data);
                }
                else {
                    result = this.data;
                }
                return result;
            }
            getCallback(name) {
                let result = () => { };
                if (this.m_callbacks[name] != null) {
                    result = this.m_callbacks[name];
                }
                return result;
            }
            setCallback(name, callback) {
                this.m_callbacks[name] = callback;
            }
            registerCallbacks(callbacks) {
                this.beforeSend = callbacks.beforeSend;
                this.complete = callbacks.complete;
                this.error = callbacks.error;
                this.success = callbacks.success;
                delete callbacks.beforeSend;
                delete callbacks.complete;
                delete callbacks.error;
                delete callbacks.success;
            }
            send(arg1) { }
        }
        Services.ServiceRequest = ServiceRequest;
        class ServiceRequestOf extends ServiceRequest {
            constructor(options) {
                super(options);
            }
            get data() {
                return this.options.get("data", null);
            }
            set data(value) {
                this.options.set("data", value);
            }
            get beforeSend() {
                return this.getCallback("beforeSend");
            }
            set beforeSend(value) {
                this.setCallback("beforeSend", value);
            }
            get complete() {
                return this.getCallback("complete");
            }
            set complete(value) {
                this.setCallback("complete", value);
            }
            get error() {
                return this.getCallback("error");
            }
            set error(value) {
                this.setCallback("error", value);
            }
            get success() {
                return this.getCallback("success");
            }
            set success(value) {
                this.setCallback("success", value);
            }
        }
        Services.ServiceRequestOf = ServiceRequestOf;
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        class ServiceResponse {
            constructor(options) {
                this.m_error = options.error;
                this.m_xhr = options.xhr;
                this.m_data = options.data;
            }
            get hasError() {
                return this.m_error != null;
                ;
            }
            get errorHandled() {
                return this.m_errorHandled;
            }
            set errorHandled(value) {
                this.m_errorHandled = value;
            }
            get error() {
                return this.m_error;
            }
            set error(value) {
                this.m_error = value;
            }
            get statusText() {
                return this.m_statusText;
            }
            set statusText(value) {
                this.m_statusText = value;
            }
            get data() {
                return this.m_data;
            }
            set data(value) {
                this.m_data = value;
            }
            get xhr() {
                return this.m_xhr;
            }
            set xhr(value) {
                this.m_xhr = value;
            }
        }
        Services.ServiceResponse = ServiceResponse;
        class ServiceResponseOf extends ServiceResponse {
            constructor(options) {
                super(options);
            }
            get data() {
                return this.m_data;
            }
            set data(value) {
                this.m_data = value;
            }
        }
        Services.ServiceResponseOf = ServiceResponseOf;
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        let ServiceTaskType;
        (function (ServiceTaskType) {
            ServiceTaskType[ServiceTaskType["OnBeforeSend"] = 0] = "OnBeforeSend";
            ServiceTaskType[ServiceTaskType["OnError"] = 1] = "OnError";
            ServiceTaskType[ServiceTaskType["OnSuccess"] = 2] = "OnSuccess";
            ServiceTaskType[ServiceTaskType["OnComplete"] = 3] = "OnComplete";
        })(ServiceTaskType = Services.ServiceTaskType || (Services.ServiceTaskType = {}));
        class ServiceTask {
            constructor(options) {
                this.m_type = options.type;
                this.m_callback = options.callback;
            }
            get type() {
                return this.m_type;
            }
            execute(pipeline) {
                if (_.isFunction(this.m_callback)) {
                    _.bind(this.m_callback, this)(pipeline);
                }
            }
        }
        Services.ServiceTask = ServiceTask;
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        class ServiceTaskCollection extends Jade.Collection {
            constructor(options) {
                super([]);
                this.m_pipeline = options.pipeline;
            }
            get pipeline() {
                return this.m_pipeline;
            }
            execute(type) {
                this.each((item) => {
                    if (this.pipeline.stopped == false && item.type === type) {
                        item.execute(this.pipeline);
                    }
                });
            }
        }
        Services.ServiceTaskCollection = ServiceTaskCollection;
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        var Canvas;
        (function (Canvas) {
            class DocumentService {
                loadActualDocument(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Hub/Canvas/Document/Load",
                        method: Jade.HttpVerb.GET,
                        data: data
                    }).sendRequest();
                }
                loadDesignDocument(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Manage/Canvas/Document/Load",
                        method: Jade.HttpVerb.GET,
                        data: data
                    }).sendRequest();
                }
                saveDesignDocument(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Manage/Canvas/Document/Save",
                        method: Jade.HttpVerb.POST,
                        data: data
                    }).sendRequest();
                }
                closeDesignDocument(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Manage/Canvas/Document/Close",
                        method: Jade.HttpVerb.GET,
                        data: data
                    }).sendRequest();
                }
            }
            Canvas.DocumentService = DocumentService;
        })(Canvas = Services.Canvas || (Services.Canvas = {}));
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        var Canvas;
        (function (Canvas) {
            class ElementService {
                getCachedData(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Hub/Canvas/Element/GetCachedData",
                        method: Jade.HttpVerb.GET,
                        data: data
                    }).sendRequest();
                }
                createDesignElements(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Manage/Canvas/Element/Create",
                        method: Jade.HttpVerb.POST,
                        data: data
                    }).sendRequest();
                }
                deleteDesignElements(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Manage/Canvas/Element/Delete",
                        method: Jade.HttpVerb.POST,
                        data: data
                    }).sendRequest();
                }
            }
            Canvas.ElementService = ElementService;
        })(Canvas = Services.Canvas || (Services.Canvas = {}));
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        var Canvas;
        (function (Canvas) {
            class ListItemService {
                create(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Hub/Canvas/ListItem/Create",
                        method: Jade.HttpVerb.POST,
                        data: _.extend(data, {
                            document: data.document.toJSON()
                        })
                    }).sendRequest();
                }
                update(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Hub/Canvas/ListItem/Edit",
                        method: Jade.HttpVerb.POST,
                        data: _.extend(data, {
                            document: data.document.toJSON()
                        })
                    }).sendRequest();
                }
            }
            Canvas.ListItemService = ListItemService;
        })(Canvas = Services.Canvas || (Services.Canvas = {}));
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        var Canvas;
        (function (Canvas) {
            class ToolBoxService {
                load(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Manage/Canvas/ToolBox/Load",
                        method: Jade.HttpVerb.GET,
                        data: data
                    }).sendRequest();
                }
            }
            Canvas.ToolBoxService = ToolBoxService;
        })(Canvas = Services.Canvas || (Services.Canvas = {}));
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        var Canvas;
        (function (Canvas) {
            var Files;
            (function (Files) {
                class FileService {
                    create(data) {
                        Services.ServicePipeline.createRequest({
                            url: "~/Hub/Canvas/File/Create",
                            method: Jade.HttpVerb.POST,
                            data: data
                        }).sendRequest();
                    }
                    edit(data) {
                        Services.ServicePipeline.createRequest({
                            url: "~/Hub/Canvas/File/Edit",
                            method: Jade.HttpVerb.POST,
                            data: data
                        }).sendRequest();
                    }
                    getCanvasDocument(data) {
                        Services.ServicePipeline.createRequest({
                            url: "~/Hub/Canvas/File/GetCanvasDocument",
                            method: Jade.HttpVerb.POST,
                            data: data
                        }).sendRequest();
                    }
                }
                Files.FileService = FileService;
            })(Files = Canvas.Files || (Canvas.Files = {}));
        })(Canvas = Services.Canvas || (Services.Canvas = {}));
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        var Canvas;
        (function (Canvas) {
            var Forms;
            (function (Forms) {
                class FormFieldService {
                    entityFieldQuery(data) {
                        Services.ServicePipeline.createRequest({
                            url: Jade.Path.resolve("~/Hub/Canvas/FormField/EntityFieldQuery"),
                            method: Jade.HttpVerb.GET,
                            data: data
                        }).sendRequest();
                    }
                    entityParentFieldQuery(data) {
                        Services.ServicePipeline.createRequest({
                            url: Jade.Path.resolve("~/Hub/Canvas/FormField/EntityParentFieldQuery"),
                            method: Jade.HttpVerb.GET,
                            data: data
                        }).sendRequest();
                    }
                    userFieldQuery(data) {
                        Services.ServicePipeline.createRequest({
                            url: Jade.Path.resolve("~/Hub/Canvas/FormField/UserFieldQuery"),
                            method: Jade.HttpVerb.GET,
                            data: data
                        }).sendRequest();
                    }
                }
                Forms.FormFieldService = FormFieldService;
            })(Forms = Canvas.Forms || (Canvas.Forms = {}));
        })(Canvas = Services.Canvas || (Services.Canvas = {}));
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        var Canvas;
        (function (Canvas) {
            var Forms;
            (function (Forms) {
                class FormService {
                    submit(data) {
                        Services.ServicePipeline.createRequest({
                            url: "~/Hub/Canvas/Form/Save",
                            method: Jade.HttpVerb.POST,
                            data: data
                        }).sendRequest();
                    }
                    validate(data) {
                        Services.ServicePipeline.createRequest({
                            url: "~/Hub/Canvas/Form/Validate",
                            method: Jade.HttpVerb.POST,
                            data: data
                        }).sendRequest();
                    }
                }
                Forms.FormService = FormService;
            })(Forms = Canvas.Forms || (Canvas.Forms = {}));
        })(Canvas = Services.Canvas || (Services.Canvas = {}));
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        var DocumentTypes;
        (function (DocumentTypes) {
            class DocumentTypeService {
                loadDocumentType(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Shared/DocumentType/Load",
                        method: Jade.HttpVerb.GET,
                        data: data
                    }).sendRequest();
                }
                loadDocumentTypes(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Shared/DocumentTypes/Load",
                        method: Jade.HttpVerb.POST,
                        data: data
                    }).sendRequest();
                }
            }
            DocumentTypes.DocumentTypeService = DocumentTypeService;
        })(DocumentTypes = Services.DocumentTypes || (Services.DocumentTypes = {}));
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        var EntityTypes;
        (function (EntityTypes) {
            class ExplorerModelService {
                loadFolders(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Hub/ExplorerModel/GetFolders",
                        method: Jade.HttpVerb.GET,
                        data: data
                    }).sendRequest();
                }
            }
            EntityTypes.ExplorerModelService = ExplorerModelService;
        })(EntityTypes = Services.EntityTypes || (Services.EntityTypes = {}));
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        var Files;
        (function (Files) {
            class FileService {
                load(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Hub/File/Load",
                        method: Jade.HttpVerb.POST,
                        data: data
                    }).sendRequest();
                }
                getFileInfo(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Hub/File/GetFileInfo",
                        method: Jade.HttpVerb.GET,
                        data: _.extend(data, {
                            fileIds: JSON.stringify(data.fileIds)
                        })
                    }).sendRequest();
                }
            }
            Files.FileService = FileService;
        })(Files = Services.Files || (Services.Files = {}));
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        var Process;
        (function (Process) {
            class ProcessService {
                getProcesses(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Hub/Process/GetProcesses",
                        method: Jade.HttpVerb.POST,
                        data: data
                    }).sendRequest();
                }
                getStatuses(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Hub/Process/GetStatuses",
                        method: Jade.HttpVerb.GET,
                        data: data
                    }).sendRequest();
                }
                getKeys(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Hub/Process/GetKeys",
                        method: Jade.HttpVerb.GET,
                        data: data
                    }).sendRequest();
                }
                getStages(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Hub/Process/GetStages",
                        method: Jade.HttpVerb.GET,
                        data: data
                    }).sendRequest();
                }
                executeDecision(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Hub/Process/ExecuteDecision",
                        method: Jade.HttpVerb.GET,
                        data: data
                    }).sendRequest();
                }
            }
            Process.ProcessService = ProcessService;
        })(Process = Services.Process || (Services.Process = {}));
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        var Security;
        (function (Security) {
            class ActiveDirectoryService {
                delete(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Manage/ActiveDirectory/Delete",
                        method: Jade.HttpVerb.DELETE,
                        data: data
                    }).sendRequest();
                }
            }
            Security.ActiveDirectoryService = ActiveDirectoryService;
        })(Security = Services.Security || (Services.Security = {}));
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        var System;
        (function (System) {
            class IconService {
                search(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Hub/IconBrowser/Query",
                        data: _.extend({
                            take: 10,
                            skip: 0,
                            page: 1,
                            pageSize: 10
                        }, data)
                    }).sendRequest();
                }
            }
            System.IconService = IconService;
        })(System = Services.System || (Services.System = {}));
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        var Tags;
        (function (Tags) {
            class ExpressionService {
                delete(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Manage/Expressions/Delete",
                        method: Jade.HttpVerb.DELETE,
                        data: data
                    }).sendRequest();
                }
                getFolderExpressions(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Manage/Expressions/GetFolderExpressions",
                        method: Jade.HttpVerb.GET,
                        data: data
                    }).sendRequest();
                }
                setFolderExpressions(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Manage/Expressions/SetFolderExpressions",
                        method: Jade.HttpVerb.POST,
                        data: data
                    }).sendRequest();
                }
            }
            Tags.ExpressionService = ExpressionService;
        })(Tags = Services.Tags || (Services.Tags = {}));
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        var Tags;
        (function (Tags) {
            class TagService {
                delete(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Manage/Tags/Delete",
                        method: Jade.HttpVerb.DELETE,
                        data: data
                    }).sendRequest();
                }
            }
            Tags.TagService = TagService;
        })(Tags = Services.Tags || (Services.Tags = {}));
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Services;
    (function (Services) {
        var Views;
        (function (Views) {
            let BuiltInViews;
            (function (BuiltInViews) {
                BuiltInViews["APP_SETTINGS"] = "appSettings";
                BuiltInViews["BUILTIN_VIEWS"] = "builtInViews";
                BuiltInViews["DATA_LOADER_JOBS"] = "dataLoaderJobs";
                BuiltInViews["DOCUMENT_TYPES"] = "docTypes";
                BuiltInViews["DOCUMENT_TYPE_ASSIGNMENT"] = "docTypeAssignment";
                BuiltInViews["DOCUMENT_TYPE_SELECTION"] = "docTypeSelection";
                BuiltInViews["ENTITY_SECURITY"] = "entitySecurity";
                BuiltInViews["ENTITY_TYPE_SECURITY"] = "entTypeSecurity";
                BuiltInViews["ENTITY_TYPES"] = "entityTypes";
                BuiltInViews["EVENT_LOG"] = "eventLog";
                BuiltInViews["EXPRESSION_SELECTION"] = "expressionSelection";
                BuiltInViews["EXPRESSIONS"] = "expressions";
                BuiltInViews["EXTENSION_COLUMNS"] = "extensionColumns";
                BuiltInViews["EXTENSIONS"] = "extensions";
                BuiltInViews["EXTENSIONS_ALL"] = "extensionsAll";
                BuiltInViews["FORM_FIELD_SELECTION"] = "rormFieldSelection";
                BuiltInViews["GLOBAL_SEARCH"] = "entitySearch";
                BuiltInViews["GROUP_MEMBERS"] = "groupMembers";
                BuiltInViews["GROUP_USERS"] = "groupUsers";
                BuiltInViews["GROUPS"] = "groups";
                BuiltInViews["IDENTITY_SELECTION"] = "identitySearch";
                BuiltInViews["LICENSES"] = "licenses";
                BuiltInViews["MAIL_QUEUE"] = "mailQueue";
                BuiltInViews["PARENT_SELECTION"] = "parentSelection";
                BuiltInViews["PLUGINS"] = "plugins";
                BuiltInViews["PROCESSES"] = "processes";
                BuiltInViews["RECYCLE_BIN"] = "recycleBin";
                BuiltInViews["REPORTS"] = "reports";
                BuiltInViews["RESOURCES"] = "resources";
                BuiltInViews["RULES"] = "ruleScripts";
                BuiltInViews["SEARCH_GROUP_COLUMN_SELECTION"] = "searchColumnSelection";
                BuiltInViews["SEARCH_GROUP_ITEMS"] = "searchGroupItems";
                BuiltInViews["SEARCH_GROUPS"] = "searchGroups";
                BuiltInViews["SELECTION_LISTS"] = "selectionLists";
                BuiltInViews["SELECTION_LISTS_ALL"] = "selectionListsAll";
                BuiltInViews["TAG_SELECTION"] = "tagSelection";
                BuiltInViews["TAGS"] = "tags";
                BuiltInViews["USER_GROUPS"] = "userGroups";
                BuiltInViews["USERS"] = "users";
                BuiltInViews["VIEW_PUBLISHER"] = "viewPublisher";
            })(BuiltInViews = Views.BuiltInViews || (Views.BuiltInViews = {}));
            class ViewService {
                getViewStateId(data) {
                    this.getViewStateIds({
                        success: (e) => {
                            if (ViewService.cachedViewStateIds[data.viewCustomId] != null) {
                                data.success(new Services.ServiceResponseOf({
                                    xhr: e.xhr,
                                    data: {
                                        viewStateId: ViewService.cachedViewStateIds[data.viewCustomId]
                                    },
                                    statusText: e.statusText
                                }));
                            }
                            else {
                                if (_.isFunction(data.error)) {
                                    data.error(new Services.ServiceResponse({
                                        xhr: e.xhr,
                                        error: e.error,
                                        statusText: e.statusText
                                    }));
                                }
                            }
                        },
                        error: data.error
                    });
                }
                getViewStateIds(data = {}) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Shared/View/GetViewStateIds",
                        method: Jade.HttpVerb.GET,
                        data: data
                    }).addBeforeSendTask((pipeline) => {
                        let isCachedPopulated = ViewService.cachedViewStateIds != null;
                        if (isCachedPopulated) {
                            pipeline.response.data = ViewService.cachedViewStateIds;
                            pipeline.abortRequestWithSuccess();
                        }
                    }).addSuccessTask((pipeline) => {
                        let isCachedPopulated = ViewService.cachedViewStateIds != null;
                        if (!isCachedPopulated) {
                            ViewService.cachedViewStateIds = pipeline.response.data;
                        }
                    }).sendRequest();
                }
                getViewState(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Manage/View/GetViewState",
                        method: Jade.HttpVerb.GET,
                        data: data
                    }).sendRequest();
                }
                setViewState(data) {
                    Services.ServicePipeline.createRequest({
                        url: "~/Manage/View/SetViewState",
                        method: Jade.HttpVerb.POST,
                        data: data
                    }).sendRequest();
                }
            }
            Views.ViewService = ViewService;
        })(Views = Services.Views || (Services.Views = {}));
    })(Services = PDJS.Services || (PDJS.Services = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        class SessionState {
            constructor() {
            }
            static get interval() {
                return 2000;
            }
            get expires() {
                return 1200000;
            }
            get isCurrentlyExpired() {
                return this.m_expired;
            }
            set isCurrentlyExpired(value) {
                this.m_expired = value;
            }
            get isMonitoring() {
                return this.m_intervalId != null;
            }
            static get instance() {
                if (this.m_instance == null) {
                    this.m_instance = new SessionState();
                }
                return this.m_instance;
            }
            init() {
                if (PDJS.Application.instance.startUpData.isLocalAuth) {
                    this.startMonitor();
                }
            }
            resetMonitor(reload = false) {
                this.isCurrentlyExpired = false;
            }
            triggerSessionExpiration() {
                this.isCurrentlyExpired = true;
                Jade.Application
                    .instance
                    .contexts
                    .global
                    .events
                    .publish(SessionState.SESSION_EXPIRED_EVENT);
                this.expireLastRequestCookie();
            }
            triggerSessionResume() {
                this.isCurrentlyExpired = false;
                Jade.Application
                    .instance
                    .contexts
                    .global
                    .events
                    .publish(SessionState.SESSION_RESUME_EVENT);
            }
            startMonitor() {
                if (this.m_intervalId != null) {
                    return;
                }
                if (this.hasReachedExpiration()) {
                    this.triggerSessionExpiration();
                }
                this.m_intervalId = setInterval(() => {
                    if (this.hasReachedExpiration()) {
                        this.triggerSessionExpiration();
                    }
                    else {
                        if (this.isCurrentlyExpired) {
                            this.triggerSessionResume();
                        }
                    }
                }, SessionState.interval);
            }
            hasReachedExpiration() {
                let startTime = null;
                let stamp = this.getCookie("Last-Request");
                try {
                    startTime = Date.parse(stamp);
                }
                catch (ex) {
                    console.log(ex);
                }
                if (isNaN(startTime)) {
                    return true;
                }
                let elapsedTime = Date.now() - startTime;
                return elapsedTime > this.expires;
            }
            getCookie(name) {
                let result = null;
                let match = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
                if (match != null) {
                    result = match.pop();
                }
                return result;
            }
            expireLastRequestCookie() {
                document.cookie = `Last-Request=expired;path=${PDJS.Application.instance.virtualDirectory}`;
            }
        }
        SessionState.SESSION_EXPIRED_EVENT = "Session:Expired";
        SessionState.SESSION_RESUME_EVENT = "Session:Resume";
        Shared.SessionState = SessionState;
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var Dialogs;
        (function (Dialogs) {
            class IconBrowserDialog extends Jade.UI.Dialog {
                constructor(options) {
                    super(options, {});
                }
                get value() {
                    return this.getSelectedValue();
                }
                get grid() {
                    return this.m_grid;
                }
                get gridNode() {
                    return this.node.find("div[role=grid]");
                }
                get headNode() {
                    return this.node.find("div[role=head]");
                }
                get search() {
                    return this.m_search;
                }
                get okButtonNode() {
                    return this.node.find("button[data-id=button-ok]");
                }
                get cancelButtonNode() {
                    return this.node.find("button[data-id=button-cancel]");
                }
                template() {
                    return `
                <div>
                    <div 
                        role="head" 
                        style="position:absolute;top:10px;height:25px;left:10px;right:10px;text-align:right;">
                    </div>
                    <div 
                        style="position:absolute;top:40px;bottom:44px;left:10px;right:10px;">
                        <div role="grid"></div>
                    </div>
                    <div 
                        style="position:absolute;bottom:10px;left:10px;right:10px;text-align:right;">
                        <button 
                            data-id="button-ok"  
                            class="-jadejs-button"
                            style="margin-right:5px;">
                            OK
                        </button>
                        <button ,
                            data-id="button-cancel" 
                            class="-jadejs-button">
                            Cancel
                        </button>
                    </div>
                </div>
            `;
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.search_init();
                    this.grid_init();
                    this.okButtonNode.on(Jade.BrowserEvent.CLICK, (e) => {
                        this.closeAndReturn();
                    });
                    this.cancelButtonNode.on(Jade.BrowserEvent.CLICK, (e) => {
                        this.close();
                    });
                    this.search.focus();
                }
                getWindowOptions() {
                    return {
                        title: "Icon Selection",
                        height: 500,
                        width: 450,
                        minHeight: 250,
                        minWidth: 250
                    };
                }
                search_init() {
                    this.m_search = new PDJS.Shared.UI.Controls.SearchBox({
                        insertAt: "div[role=head]",
                        onSearch: (e) => {
                            this.grid.dataSource.page(0);
                            this.grid.dataSource.read();
                        }
                    });
                    this.controls.add(this.search);
                }
                grid_init() {
                    this.m_grid = this.gridNode.kendoGrid({
                        height: "100%",
                        sortable: {
                            allowUnsort: false
                        },
                        selectable: "row",
                        dataSource: {
                            serverPaging: true,
                            serverSorting: true,
                            pageSize: 100,
                            transport: {
                                read: {
                                    url: Jade.Path.resolve("~/Shared/Icon/Query"),
                                    data: () => {
                                        return {
                                            term: this.search.textValue
                                        };
                                    }
                                }
                            },
                            schema: {
                                data: "data",
                                total: "totalCount"
                            },
                            sort: {
                                field: "icon",
                                dir: "asc"
                            }
                        },
                        scrollable: {
                            virtual: true
                        },
                        columns: [
                            {
                                field: "icon",
                                title: "Icon",
                                template: (e) => {
                                    let icon = Jade.IconSet.get("pd").resolve(e.icon, Jade.IconSetSizeSpecificDirectory.x16);
                                    return `<div style="line-height:26px;height:24px;width:100%;background-repeat:no-repeat;background-position:5px center;padding-left:26px;background-image:url(${icon});">
                                        ${e.name}
                                    </div>`;
                                },
                                attributes: {
                                    style: "height:24px;position:relative;padding:0;"
                                }
                            }
                        ]
                    }).data("kendoGrid");
                    this.m_grid.content.on(Jade.BrowserEvent.DOUBLECLICK, "TR[role=row]", () => {
                        if (this.value != null) {
                            this.closeAndReturn();
                        }
                    });
                }
                getSelectedValue() {
                    let data = null;
                    let row = this.grid.select();
                    if (row.length > 0) {
                        data = this.grid.dataItem(row);
                    }
                    return data ? data.get("icon") : null;
                }
                closeAndReturn() {
                    this.close({
                        command: "ok",
                        data: {
                            value: this.value
                        }
                    });
                }
                static open(options) {
                    return new IconBrowserDialog(options);
                }
            }
            Dialogs.IconBrowserDialog = IconBrowserDialog;
        })(Dialogs = Shared.Dialogs || (Shared.Dialogs = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var Dialogs;
        (function (Dialogs) {
            class UploadDialog extends Jade.UI.Dialog {
                constructor(options) {
                    super(options);
                }
                get message() {
                    return this.state.get("message", "Select file to upload.");
                }
                get okButtonNode() {
                    return this.node.find("button[data-id=button-ok]");
                }
                get cancelButtonNode() {
                    return this.node.find("button[data-id=button-cancel]");
                }
                get uploadInput() {
                    return this.m_uploadInput;
                }
                template() {
                    return `
                <div>
                    <div 
                        role="head" 
                        style="position:absolute;top:10px;height:25px;left:10px;right:10px;text-align:left;font-size:12px;font-family:arial;">
                        ${this.message}
                    </div>
                    <div 
                        data-controls 
                        style="position:absolute;top:30px;bottom:44px;left:10px;right:10px;">
                    </div>
                    <div 
                        style="position:absolute;bottom:10px;left:10px;right:10px;text-align:right;">
                        <button 
                            data-id="button-ok"  
                            class="-jadejs-button"
                            style="margin-right:5px;">
                            OK
                        </button>
                        <button ,
                            data-id="button-cancel" 
                            class="-jadejs-button">
                            Cancel
                        </button>
                    </div>
                </div>
            `;
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.okButtonNode.on(Jade.BrowserEvent.CLICK, (e) => {
                        this.closeAndReturn();
                    });
                    this.cancelButtonNode.on(Jade.BrowserEvent.CLICK, (e) => {
                        this.close();
                    });
                    this.uploadInput_init();
                    this.okButtonNode.prop("disabled", true);
                }
                getWindowOptions() {
                    return {
                        height: 100,
                        width: 350,
                        title: "Upload"
                    };
                }
                uploadInput_init() {
                    this.m_uploadInput = new PDJS.Shared.UI.Controls.UploadInput({
                        onUploadComplete: () => {
                            this.okButtonNode.prop("disabled", false);
                        }
                    });
                    this.controls.add(this.m_uploadInput);
                }
                closeAndReturn() {
                    if (this.uploadInput.uploadId == null) {
                        return;
                    }
                    this.close({
                        command: "ok",
                        data: {
                            value: this.uploadInput.uploadUniqueName
                        }
                    });
                }
                static open(options) {
                    return new UploadDialog(options);
                }
            }
            Dialogs.UploadDialog = UploadDialog;
        })(Dialogs = Shared.Dialogs || (Shared.Dialogs = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var DocumentTypes;
        (function (DocumentTypes) {
            class DocumentTypeBrowserDialog extends Jade.UI.Dialog {
                constructor(options) {
                    super(_.extend(options));
                }
                get viewStateId() {
                    return Jade.Application
                        .instance
                        .contexts
                        .global
                        .store
                        .get("DocumentTypeSelectionDialog.viewStateId");
                }
                set viewStateId(value) {
                    Jade.Application
                        .instance
                        .contexts
                        .global
                        .store
                        .set("DocumentTypeSelectionDialog.viewStateId", value);
                }
                get viewCustomId() {
                    return this.state.get("viewCustomId", PDJS.Services.Views.BuiltInViews.DOCUMENT_TYPES);
                }
                get okButtonNode() {
                    return this.node.find("button[data-command=ok]");
                }
                get cancelButtonNode() {
                    return this.node.find("button[data-command=cancel]");
                }
                get grid() {
                    return this.m_grid;
                }
                get selectionMode() {
                    return this.state.get("selectionMode", PD.Web.UI.Controls.GridSelectionMode.multiple);
                }
                get selections() {
                    return _.map(this.grid.getSelections().toArray(), "id");
                }
                template() {
                    return `
            <div style="position:absolute;top:10px;left:10px;right:10px;bottom:10px;box-sizing:border-box;">
                <div data-role="grid" style="position:absolute;top:0;left:0;right:0;bottom:34px;border:1px solid #AAAAAA;">
                    
                </div>
                <div style="position:absolute;height:26px;bottom:0;left:0;right:0;text-align:right;">
                    <button data-command="ok" class="-jadejs-button">OK</button>
                    <button data-command="cancel" class="-jadejs-button">Cancel</button>
                </div>
            </div>
            `;
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.startUp();
                    this.grid_init();
                    this.okButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.okButton_onClick, this));
                    this.cancelButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.cancelButton_onClick, this));
                }
                getWindowOptions() {
                    return {
                        title: "Document Type Browser",
                        height: 400,
                        width: 600,
                        maximized: false
                    };
                }
                static open(options) {
                    return new DocumentTypeBrowserDialog(options);
                }
                grid_init() {
                    this.m_grid = new PD.Web.UI.Controls.ViewGrid({
                        container: this.node.find("[data-role=grid]"),
                        selectionMode: this.selectionMode,
                        viewStateId: this.viewStateId,
                        selectOnRightClick: false,
                        defaultSelectionEnabled: true,
                        selection: {
                            map: (e) => {
                                return _.map(e.selections.toArray(), (item, index) => {
                                    return {
                                        id: item.ObjectId
                                    };
                                });
                            }
                        },
                        dblclick: (e) => {
                            this.closeAndReturn();
                        }
                    });
                }
                okButton_onClick(e) {
                    this.closeAndReturn();
                }
                cancelButton_onClick(e) {
                    this.close();
                }
                closeAndReturn() {
                    if (this.selections.length > -1) {
                        let documentTypeService = new PDJS.Services.DocumentTypes.DocumentTypeService();
                        documentTypeService.loadDocumentTypes({
                            ids: this.selections,
                            success: (e) => {
                                this.close({
                                    command: "ok",
                                    data: e.data
                                });
                            },
                            error: (e) => {
                                this.close();
                            }
                        });
                    }
                    else {
                        Jade.UI.MessageDialog.open({
                            dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                            dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                            title: "No Selection Made",
                            message: "No document type has been selected. Select a document type and try again.",
                            select: (e) => {
                                e.close();
                            }
                        });
                    }
                }
                startUp() {
                    let service = new PDJS.Services.Views.ViewService();
                    if (this.viewStateId == null) {
                        service.getViewStateId({
                            viewCustomId: this.viewCustomId,
                            success: (e) => {
                                this.viewStateId = e.data.viewStateId;
                            }
                        });
                    }
                }
            }
            DocumentTypes.DocumentTypeBrowserDialog = DocumentTypeBrowserDialog;
        })(DocumentTypes = Shared.DocumentTypes || (Shared.DocumentTypes = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Entities;
    (function (Entities) {
        class EntityDialogs {
            static showCreate(options) {
                let contextId = UUID.genV4().toString();
                Jade.Application.instance.contexts.createContext({
                    id: contextId,
                    makeDefault: true,
                    name: "Create Entities Dialog"
                });
                window["ProspectDirector"].Web.UI.FeatureSets.NHibTargetEditorDialog.open({
                    config: {
                        title: ``,
                        height: "500px",
                        width: "680px"
                    },
                    data: {
                        targetArbiter: "ProspectDirector.Web.Hub.Entities.CreateDialogArbiter",
                        targetType: "ProspectDirector.Web.Hub.Entities.CreateDialogUIO",
                        layoutType: PDJS.JS.ProspectDirector.Web.UI.FeatureSets.Layouts.TabStripLayout,
                        properties: {
                            entityTypeId: options.entityTypeId,
                            parentId: options.parentId ? options.parentId : null
                        }
                    },
                    callbacks: {
                        ok: (sender, e) => {
                            Jade.Application.instance.contexts.destroyContext({
                                id: contextId,
                            });
                            if (_.isFunction(options.onCreate)) {
                                options.onCreate(sender, e);
                            }
                            if (options.promptToOpen !== false) {
                                this.promptToExplore(e);
                            }
                        },
                        cancel: (sender, e) => {
                            Jade.Application.instance.contexts.destroyContext({
                                id: contextId,
                            });
                        }
                    }
                });
            }
            static showProperties(options) {
                let contextId = UUID.genV4().toString();
                Jade.Application.instance.contexts.createContext({
                    id: contextId,
                    makeDefault: true,
                    name: "Properties Dialog"
                });
                window["ProspectDirector"].Web.UI.FeatureSets.NHibTargetEditorDialog.open({
                    config: {
                        title: ``,
                        height: "500px",
                        width: "680px"
                    },
                    data: {
                        targetArbiter: "ProspectDirector.Web.Hub.Entities.PropertiesDialogArbiter",
                        targetType: "ProspectDirector.Web.Hub.Entities.PropertiesDialogUIO",
                        layoutType: PDJS.JS.ProspectDirector.Web.UI.FeatureSets.Layouts.TabStripLayout,
                        properties: {
                            entityId: parseInt(options.entityId)
                        }
                    },
                    callbacks: {
                        ok: (sender, e) => {
                            Jade.Application.instance.contexts.destroyContext({
                                id: contextId,
                            });
                            if (_.isFunction(options.onSave)) {
                                options.onSave(sender, e);
                            }
                        },
                        cancel: (sender, e) => {
                            Jade.Application.instance.contexts.destroyContext({
                                id: contextId,
                            });
                        }
                    }
                });
            }
            static promptToExplore(data) {
                let entityTypeName = data.target.entityTypeName;
                let entityName = data.target.entityName;
                let entityId = data.target.entityID;
                Jade.UI.MessageDialog.open({
                    dialogButtons: Jade.UI.MessageDialogButtonStyle.YesNo,
                    dialogStyle: Jade.UI.MessageDialogStyle.Success,
                    title: `${entityTypeName} Creation Success`,
                    message: `The new ${entityTypeName} "${entityName}" was created successfully. Would you like to open it now?`,
                    select: (e) => {
                        e.close();
                        switch (e.button) {
                            case Jade.UI.MessageDialogButton.yes:
                                window.location.href = Jade.Path.resolve(`~/Explore/${entityId}`);
                                break;
                            case Jade.UI.MessageDialogButton.no:
                                e.close();
                                break;
                        }
                    }
                });
            }
        }
        Entities.EntityDialogs = EntityDialogs;
    })(Entities = PDJS.Entities || (PDJS.Entities = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var Entities;
        (function (Entities) {
            class EntityBrowserDialog extends Jade.UI.Dialog {
                get filters() {
                    return this.state.get("filters", []);
                }
                set filters(value) {
                    this.state.set("filters", value);
                }
                get viewStateId() {
                    return this.state.get("viewStateId", null);
                }
                set viewStateId(value) {
                    this.state.set("viewStateId", value);
                }
                get entityTypeId() {
                    return this.state.get("entityTypeId", null);
                }
                set entityTypeId(value) {
                    this.state.set("entityTypeId", value);
                }
                get okButtonNode() {
                    return this.node.find("button[data-command=ok]");
                }
                get cancelButtonNode() {
                    return this.node.find("button[data-command=cancel]");
                }
                template() {
                    return `
            <div style="position:absolute;top:10px;left:10px;right:10px;bottom:10px;box-sizing:border-box;">
                <div data-role="grid" style="position:absolute;top:0;left:0;right:0;bottom:34px;border:1px solid #AAAAAA;">
                    
                </div>
                <div style="position:absolute;height:26px;bottom:0;left:0;right:0;text-align:right;">
                    <button data-command="ok" class="-jadejs-button">OK</button>
                    <button data-command="cancel" class="-jadejs-button">Cancel</button>
                </div>
            </div>
            `;
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.startUp();
                    this.grid_init();
                    this.okButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.okButton_onClick, this));
                    this.cancelButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.cancelButton_onClick, this));
                }
                getWindowOptions() {
                    return {
                        title: "Entity Browser",
                        height: 400,
                        width: 600,
                        maximized: false
                    };
                }
                static open(options) {
                    let result = new EntityBrowserDialog(options);
                    return result;
                }
                grid_init() {
                    this.m_grid = new PD.Web.UI.Controls.ViewGrid({
                        container: this.node.find("[data-role=grid]"),
                        selectionMode: "single",
                        viewStateId: this.viewStateId,
                        selectOnRightClick: false,
                        defaultSelectionEnabled: true,
                        selection: {
                            map: (e) => {
                                return _.map(e.selections.toArray(), (item, index) => {
                                    return {
                                        entityId: item.ObjectId,
                                        entityName: item.ObjectName,
                                        entityTypeIcon: item.d0_general_TypeIcon,
                                        entityTypeName: item.d0_general_TypeName
                                    };
                                });
                            }
                        },
                        change: (e) => {
                            this.m_selection = e.selection;
                        },
                        dblclick: (e) => {
                            this.m_selection = e.selection;
                            this.closeAndReturn();
                        },
                        needContext: (e) => {
                            this.filters.forEach((item) => {
                                e.filters[e.filters.length] = item.toJSON();
                            });
                        }
                    });
                }
                okButton_onClick(e) {
                    this.closeAndReturn();
                }
                cancelButton_onClick(e) {
                    this.close();
                }
                closeAndReturn() {
                    if (this.m_selection != null) {
                        this.window.destroyContext();
                        this.close({
                            command: "ok",
                            data: this.m_selection
                        });
                    }
                    else {
                        Jade.UI.MessageDialog.open({
                            dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                            dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                            title: "No Selection Made",
                            message: "No entity has been selected. Select a document type and try again.",
                            select: (e) => {
                                e.close();
                            }
                        });
                    }
                }
                startUp() {
                    let service = new PDJS.Services.Views.ViewService();
                    if (this.viewStateId == null) {
                        service.getViewStateId({
                            viewCustomId: PDJS.Services.Views.BuiltInViews.PARENT_SELECTION,
                            success: (e) => {
                                this.viewStateId = e.data.viewStateId;
                            }
                        });
                    }
                }
            }
            Entities.EntityBrowserDialog = EntityBrowserDialog;
        })(Entities = Shared.Entities || (Shared.Entities = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var Entities;
        (function (Entities) {
            class TagsFeature extends PDJS.Shared.FeatureSets.MacroEditor {
                constructor(options) {
                    super(options);
                }
                get entityTags() {
                    return this.getValue("tags");
                }
                template() {
                    return `<div>
                        <div role="grid" style="position:absolute;top:10px;left:10px;right:10px;bottom:10px;overflow:hidden;border:1px solid #CCCCCC;"></div>
                    </div>`;
                }
                onEditorReady() {
                    this.grid_init();
                }
                grid_init() {
                    let data = [];
                    this.entityTags.forEach((value) => {
                        data[data.length] = { tag: value };
                    });
                    this.m_grid = new PD.Web.UI.Controls.Grid({
                        container: this.node.children("div[role=grid]"),
                        showToolbar: false,
                        height: "100%",
                        footer: {
                            visible: false
                        },
                        dataSource: {
                            data: data
                        },
                        messaging: {
                            noRecordsMessage: "No tags exist."
                        },
                        selectionMode: "none",
                        resizable: true,
                        columns: [
                            new PD.Web.UI.Controls.GridColumn({
                                field: "tag",
                                title: "Tag",
                                width: "450px"
                            }),
                            new PD.Web.UI.Controls.GridFillColumn()
                        ]
                    });
                }
            }
            Entities.TagsFeature = TagsFeature;
        })(Entities = Shared.Entities || (Shared.Entities = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var Files;
        (function (Files) {
            class EditFiles {
                static showProperties(options) {
                    let contextId = UUID.genV4().toString();
                    Jade.Application.instance.contexts.createContext({
                        id: contextId,
                        makeDefault: true,
                        name: "Properties Dialog"
                    });
                    window["ProspectDirector"].Web.UI.FeatureSets.NHibTargetEditorDialog.open({
                        config: {
                            title: ``,
                            height: "500px",
                            width: "680px"
                        },
                        data: {
                            targetId: options.entityId,
                            targetArbiter: "ProspectDirector.Web.Hub.Files.FilePropertiesDialogArbiter",
                            targetType: "ProspectDirector.Web.Hub.Files.FilePropertiesDialogUIO",
                            layoutType: PDJS.JS.ProspectDirector.Web.UI.FeatureSets.Layouts.TabStripLayout,
                            properties: {
                                entityId: parseInt(options.entityId)
                            }
                        },
                        callbacks: {
                            ok: (sender, e) => {
                                Jade.Application.instance.contexts.destroyContext({
                                    id: contextId,
                                });
                                if (_.isFunction(options.onSave)) {
                                    options.onSave(sender, e);
                                }
                            },
                            cancel: (sender, e) => {
                                Jade.Application.instance.contexts.destroyContext({
                                    id: contextId,
                                });
                            }
                        }
                    });
                }
            }
            Files.EditFiles = EditFiles;
        })(Files = Shared.Files || (Shared.Files = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
Jade.Application.onStart(() => {
    $(function () {
        kendo.ui.Window.fn._keydown = function (originalFn) {
            return function (e) {
                let kendoWindow = $(e.target).data("kendoWindow");
                let alternate = kendoWindow != null ?
                    kendoWindow.onEscKey : null;
                if (e.which == Jade.KeyCode.Escape && _.isFunction(alternate)) {
                    alternate(e);
                }
                else {
                    originalFn.call(this, e);
                }
            };
        }(kendo.ui.Window.fn._keydown);
    });
});
var PDJS;
(function (PDJS) {
    var Security;
    (function (Security) {
        class AclEditor extends Jade.UI.Control {
            get permissions() {
                return this.state.get("permissions", []);
            }
            get aces() {
                return this.state.get("aces", []);
            }
            set aces(value) {
                this.state.get("aces", value);
            }
            get securableId() {
                return this.state.get("securableId", null);
            }
            get enabled() {
                return this.state.get("enabled", false);
            }
            get hasChanges() {
                return this.state.get("hasChanges", false);
            }
            get userDisplayName() {
                return this.state.get("userDisplayName", false);
            }
            get aclGrid() {
                return this.state.get("aclGrid");
            }
            set aclGrid(value) {
                this.state.set("aclGrid", value);
            }
            get aceGrid() {
                return this.state.get("aceGrid");
            }
            set aceGrid(value) {
                this.state.set("aceGrid", value);
            }
            get effectivePermissions() {
                return this.state.get("effectivePermissions");
            }
            set effectivePermissions(value) {
                this.state.set("effectivePermissions", value);
            }
            get isAdvancedAllowed() {
                return this.state.get("isAdvancedAllowed");
            }
            get aclGridContainer() {
                return this.node.find("DIV[role=acl-grid-container]");
            }
            get aceGridContainer() {
                return this.node.find("DIV[role=ace-grid-container]");
            }
            get addButton() {
                return this.node.find("INPUT[type=button][data-command=add]");
            }
            get removeButton() {
                return this.node.find("INPUT[type=button][data-command=remove]");
            }
            get advancedButton() {
                return this.node.find("INPUT[type=button][data-command=advanced]");
            }
            get effectivePermissionsButton() {
                return this.node.find("INPUT[type=button][data-command=effective-permissions]");
            }
            onActivate(e) {
                this.aceGrid_onInit();
                this.aclGrid_onInit();
                this.addButton.on("click", $.proxy(this.addButton_onClick, this));
                this.removeButton.on("click", $.proxy(this.removeButton_onClick, this));
                this.advancedButton.on("click", $.proxy(this.advancedButton_onClick, this));
                this.effectivePermissionsButton.on("click", $.proxy(this.effectivePermissionsButton_onClick, this));
                this.node.disableTextSelection();
                this.subscriptions.add("entityParentChanged", (e) => {
                    this.parent_onChange(e);
                });
                CanvasJS.Actual.Environment
                    .events
                    .publish("entityParentRequested");
                this.effectivePermissions = {
                    securableId: this.securableId,
                    identity: {
                        id: PDJS.JS.PD.ENVIRONMENT.USER_ID,
                        displayName: this.userDisplayName
                    },
                    acl: []
                };
                this.commit();
            }
            addButton_onClick(e) {
                this.aclGrid.addAce();
            }
            removeButton_onClick(e) {
                this.aclGrid.removeAce();
            }
            advancedButton_onClick(e) {
                window["ProspectDirector"].Modules.Security.AclAdvancedDialog.Dialog.show({
                    params: {
                        id: this.securableId,
                        hasChanges: this.hasChanges
                    }
                });
            }
            effectivePermissionsButton_onClick(e) {
                PDJS.JS.PD.Shared.Dialogs.EffectivePermissions.open({
                    entityId: this.effectivePermissions.securableId,
                    identity: this.effectivePermissions.identity,
                    acl: this.aclGrid.getAcl(),
                    callbacks: {
                        close: (sender, e) => {
                            if (e.identity != null) {
                                this.effectivePermissions.identity = e.identity;
                            }
                        }
                    }
                });
            }
            aclGrid_onInit() {
                this.aclGrid = new PDJS.JS.PD.Web.UI.Controls.Security.AclEditor({
                    container: this.aclGridContainer,
                    aces: this.aces,
                    change: _.bind(this.aclGrid_onChange, this)
                });
            }
            aceGrid_onInit() {
                this.aceGrid = new PDJS.JS.PD.Web.UI.Controls.Security.AceEditor({
                    container: this.aceGridContainer,
                    permissions: this.permissions,
                    change: _.bind(this.aceGrid_onChange, this),
                    enabled: this.enabled
                });
            }
            aclGrid_onChange(e) {
                this.aceGrid.loadAce(e);
                this.commit();
            }
            aceGrid_onChange(e) {
                this.aclGrid.updateAce(e);
                this.commit();
            }
            parent_onChange(e) {
                Jade.Ajax.call({
                    url: Jade.Path.resolve("~/Entity/GetSecurity"),
                    data: {
                        entityTypeId: e.entityTypeId,
                        parentId: e.parentId,
                        entityId: this.securableId
                    },
                    success: (e) => {
                        this.aclGrid.clear();
                        if (e.acl !== null && e.acl.aces !== null) {
                            this.aclGrid.addAce(e.acl.aces, true);
                        }
                        this.aceGrid.set_enabled(e.isEditable);
                        this.advancedButton.css({
                            display: e.isCascadeAllowed ? "" : "none"
                        });
                    }
                });
            }
            redraw() {
                this.aceGrid.redraw();
                this.aclGrid.redraw();
            }
            template() {
                return `<div class="-pdjs-acl-editor">
                        <div role="acl-grid-container"></div>
                        <div role="button-deck">
                            ${this.buildButtonDeck()}
                        </div>
                        <div
                            role="ace-grid-container">
                        </div>
                    </div>`;
            }
            buildButtonDeck() {
                let result = "";
                result += `<div role="advanced-buttons">`;
                result += `<input type="button"
                            value="Advanced..."
                            data-command="advanced"
                            class="app-button" style="display:${this.isAdvancedAllowed ? "" : "none"}" /> `;
                result += `<input type="button"
                        value="Effective Permissions"
                        data-command="effective-permissions"
                        class="app-button"
                        style="display:${this.securableId != null ? "" : "none"}" /> `;
                result += `</div>`;
                result += `
                <div role="add-remove-buttons">
                    <input type="button"
                            value="Add"
                            data-command="add"
                            class="app-button"
                            ${this.enabled ? "" : "disabled"} />

                    <input type="button"
                            value="Remove"
                            data-command="remove"
                            class="app-button"
                            ${this.enabled ? "" : "disabled"} />

                </div>`;
                return result;
            }
            getAcl() {
                return this.aclGrid.getAcl();
            }
            commit() {
                if (this.aclGrid != null) {
                    this.aces = this.aclGrid.getAcl();
                }
            }
        }
        Security.AclEditor = AclEditor;
    })(Security = PDJS.Security || (PDJS.Security = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var Security;
        (function (Security) {
            class IdentityBrowserDialog extends Jade.UI.Dialog {
                get filters() {
                    return this.state.get("filters", []);
                }
                get viewStateId() {
                    return this.state.get("viewStateId", null);
                }
                set viewStateId(value) {
                    this.state.set("viewStateId", value);
                }
                get okButtonNode() {
                    return this.node.find("button[data-command=ok]");
                }
                get cancelButtonNode() {
                    return this.node.find("button[data-command=cancel]");
                }
                get selectionMode() {
                    return this.state.get("selectionMode", PD.Web.UI.Controls.GridSelectionMode.multiple);
                }
                get selections() {
                    return this.m_grid.getSelections().toArray();
                }
                template() {
                    return `
            <div style="position:absolute;top:10px;left:10px;right:10px;bottom:10px;box-sizing:border-box;">
                <div data-role="grid" style="position:absolute;top:0;left:0;right:0;bottom:34px;border:1px solid #AAAAAA;">
                    
                </div>
                <div style="position:absolute;height:26px;bottom:0;left:0;right:0;text-align:right;">
                    <button data-command="ok" class="-jadejs-button">OK</button>
                    <button data-command="cancel" class="-jadejs-button">Cancel</button>
                </div>
            </div>
            `;
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.startUp();
                    this.grid_init();
                    this.okButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.okButton_onClick, this));
                    this.cancelButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.cancelButton_onClick, this));
                }
                getWindowOptions() {
                    return {
                        title: "Identity Browser",
                        height: 400,
                        width: 600,
                        maximized: false
                    };
                }
                static open(options, windowOptions) {
                    return new IdentityBrowserDialog(options, windowOptions);
                }
                grid_init() {
                    this.m_grid = new PD.Web.UI.Controls.ViewGrid({
                        container: this.node.find("[data-role=grid]"),
                        selectionMode: this.selectionMode,
                        viewStateId: this.viewStateId,
                        selectOnRightClick: false,
                        defaultSelectionEnabled: true,
                        selection: {
                            map: (e) => {
                                return _.map(e.selections.toArray(), (item, index) => {
                                    return {
                                        id: item.ObjectId,
                                        name: item.ObjectName,
                                        type: item.ObjectType
                                    };
                                });
                            }
                        },
                        dblclick: (e) => {
                            this.closeAndReturn();
                        },
                        needContext: (e) => {
                            _.each(this.filters, (item) => {
                                e.filters[e.filters.length] = item.toJSON();
                            });
                        }
                    });
                }
                okButton_onClick(e) {
                    this.closeAndReturn();
                }
                cancelButton_onClick(e) {
                    this.close();
                }
                closeAndReturn() {
                    if (this.selections.length > -1) {
                        this.close({
                            command: "ok",
                            data: this.selections
                        });
                    }
                    else {
                        Jade.UI.MessageDialog.open({
                            dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                            dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                            title: "No Identity Selected",
                            message: "No identity has been selected. Select an identity type and try again.",
                            select: (e) => {
                                e.close();
                            }
                        });
                    }
                }
                startUp() {
                    let service = new PDJS.Services.Views.ViewService();
                    service.getViewStateId({
                        viewCustomId: PDJS.Services.Views.BuiltInViews.IDENTITY_SELECTION,
                        success: (e) => {
                            this.viewStateId = e.data.viewStateId;
                        }
                    });
                }
            }
            Security.IdentityBrowserDialog = IdentityBrowserDialog;
        })(Security = Shared.Security || (Shared.Security = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var Security;
        (function (Security) {
            class LoginDialog extends Jade.UI.Dialog {
                constructor() {
                    super({}, {});
                }
                get loginButtonNode() {
                    return this.node.find("button[data-id=login]");
                }
                static get instance() {
                    if (this.m_instance == null) {
                        this.m_instance = new LoginDialog();
                    }
                    return this.m_instance;
                }
                static set instance(value) {
                    this.m_instance = value;
                }
                static get opened() {
                    return this.m_instance != null;
                }
                get userNameLabelNode() {
                    return this.node.find("label[role=username]");
                }
                get userNameNode() {
                    return this.node.find("input[role=username]");
                }
                get passwordLabelNode() {
                    return this.node.find("label[role=password]");
                }
                get passwordNode() {
                    return this.node.find("input[role=password]");
                }
                get errorNode() {
                    return this.node.find(".-pd-account-box-error");
                }
                get spinnerNode() {
                    return this.node.find("img[role=spinner]");
                }
                template() {
                    return `
                <div style="position:absolute;top:0;right:0;bottom:0;left:0;box-sizing:border-box;background-color:#FFFFFF;">

                    <div style="position:absolute;top:40px;right:40px;bottom:40px;left:40px;box-sizing:border-box;">

                        <div data-controls
                            style="position:absolute;top:0;bottom:44px;left:0;right:0;font-size:14px;">
                    
                            <div style="border:1px solid black;border-width:0 0 1px 0;padding-bottom:5px;margin-bottom:15px;font-size:20px;font-weight:bold;">Session Expired</div>

                            <div style="margin-bottom:5px;">Please login again to resume your session.</div>
                            <form>
                            <label class="-pd-account-box-label" role="username">User Name</label><br>
                            <input class="-pd-account-box-textbox" role="username" type="text" autocomplete="username" name="username" value=""><br>
                            <label class="-pd-account-box-label" role="password" autocomplete="current-password" name="password">Password</label><br>
                            <input class="-pd-account-box-textbox" role="password" type="password"><br>
                            </form>
                            <div class="-pd-account-box-error" style="color:red;margin-top:10px;margin-bottom:5px;height:24px;line-height:24px;"></div>
                        </div>
                        <div 
                            style="position:absolute;bottom:0;left:0;right:0;text-align:right;">
                            <img src="${Jade.IconSet.get("pd").resolve("ICON_CIRCLE_ANIMATED_36X36.GIF", Jade.IconSetSizeSpecificDirectory.misc)}" role="spinner" style="height:20px;width:20px;inline-block;"/>
                            <button 
                                data-id="login"  
                                class="-jadejs-button"
                                style="margin-right:5px;">
                                Login
                            </button>
                        </div>

                    </div>

                </div>`;
                }
                close(options) {
                    super.close(options);
                    LoginDialog.instance = null;
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.spinnerNode.css({
                        position: "relative",
                        top: "4px"
                    });
                    this.spinnerNode.hide();
                    this.userNameLabelNode.css({
                        marginTop: "5px",
                        padding: "3px 3px 3px 0",
                        fontSize: "12px",
                        fontFamily: "Arial",
                        display: "inline-block",
                        height: "20px",
                        lineHeight: "20px"
                    });
                    this.userNameNode.css({
                        padding: "4px",
                        fontSize: "12px",
                        fontFamily: "Arial",
                        border: "1px solid #aaa",
                        boxSizing: "border-box",
                        width: "100%",
                        height: "26px",
                        lineHeight: "22px"
                    });
                    this.passwordLabelNode.css({
                        marginTop: "5px",
                        padding: "3px 3px 3px 0",
                        fontSize: "12px",
                        fontFamily: "Arial",
                        display: "inline-block",
                        height: "20px",
                        lineHeight: "20px"
                    });
                    this.passwordNode.css({
                        padding: "4px",
                        fontSize: "12px",
                        fontFamily: "Arial",
                        border: "1px solid #aaa",
                        boxSizing: "border-box",
                        width: "100%",
                        height: "26px",
                        lineHeight: "22px"
                    });
                    this.loginButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.login_onClick, this));
                    this.userNameNode.on(Jade.BrowserEvent.KEYPRESS, (e) => {
                        if (e.keyCode == Jade.KeyCode.Enter) {
                            this.login_onClick();
                        }
                    });
                    this.passwordNode.on(Jade.BrowserEvent.KEYPRESS, (e) => {
                        if (e.keyCode == Jade.KeyCode.Enter) {
                            this.login_onClick();
                        }
                    });
                }
                getWindowOptions() {
                    return {
                        title: false,
                        height: 340,
                        width: 400,
                        minHeight: 250,
                        minWidth: 250,
                        resizable: false,
                        actions: []
                    };
                }
                login_onClick() {
                    this.spinnerNode.show();
                    if (Jade.String.isNullOrWhiteSpace(this.userNameNode.val())) {
                        this.errorNode.text("User Name is required.");
                        return;
                    }
                    if (Jade.String.isNullOrWhiteSpace(this.passwordNode.val())) {
                        this.errorNode.text("Password is required.");
                        return;
                    }
                    let userName = this.userNameNode.val();
                    let loginWithDifferentUsername = userName.toLowerCase() !== PDJS.Application
                        .instance
                        .startUpData
                        .currentUser
                        .accountName
                        .toLowerCase();
                    this.loginButtonNode.prop("disabled", true);
                    Jade.Ajax.call({
                        type: "POST",
                        url: Jade.Path.resolve("~/Shared/Account/Relogin"),
                        contentType: "application/json",
                        data: JSON.stringify({
                            userName: this.userNameNode.val(),
                            password: this.passwordNode.val()
                        }),
                        success: (e, status, jqXHR) => {
                            if (e.error === null) {
                                PDJS.Shared.SessionState.instance.resetMonitor(loginWithDifferentUsername);
                                if (loginWithDifferentUsername) {
                                    setTimeout(() => {
                                        window.location.reload();
                                    }, Shared.SessionState.interval);
                                }
                                else {
                                    this.close();
                                }
                            }
                            else {
                                this.loginButtonNode.prop("disabled", false);
                                this.errorNode.text(e.error);
                                jqXHR.suppressEvent = true;
                            }
                        },
                        error: () => {
                            this.loginButtonNode.prop("disabled", false);
                        },
                        complete: () => {
                            this.spinnerNode.hide();
                        }
                    });
                }
                static open() {
                    return LoginDialog.instance;
                }
            }
            Security.LoginDialog = LoginDialog;
        })(Security = Shared.Security || (Shared.Security = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            let CssClass;
            (function (CssClass) {
                CssClass["Disabled"] = "-pdjs-disabled";
            })(CssClass = UI.CssClass || (UI.CssClass = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            let KeyCodes;
            (function (KeyCodes) {
                KeyCodes[KeyCodes["Backspace"] = 8] = "Backspace";
                KeyCodes[KeyCodes["Tab"] = 9] = "Tab";
                KeyCodes[KeyCodes["Return"] = 13] = "Return";
                KeyCodes[KeyCodes["Space"] = 32] = "Space";
                KeyCodes[KeyCodes["End"] = 35] = "End";
                KeyCodes[KeyCodes["Home"] = 36] = "Home";
                KeyCodes[KeyCodes["ArrowLeft"] = 37] = "ArrowLeft";
                KeyCodes[KeyCodes["ArrowUp"] = 38] = "ArrowUp";
                KeyCodes[KeyCodes["ArrowRight"] = 39] = "ArrowRight";
                KeyCodes[KeyCodes["ArrowDown"] = 40] = "ArrowDown";
                KeyCodes[KeyCodes["Delete"] = 46] = "Delete";
            })(KeyCodes = UI.KeyCodes || (UI.KeyCodes = {}));
            class KeyCode {
                static get actionKeys() {
                    return [
                        KeyCodes.ArrowDown,
                        KeyCodes.ArrowLeft,
                        KeyCodes.ArrowRight,
                        KeyCodes.ArrowUp,
                        KeyCodes.Backspace,
                        KeyCodes.Delete,
                        KeyCodes.End,
                        KeyCodes.Home,
                        KeyCodes.Return,
                        KeyCodes.Space,
                        KeyCodes.Tab,
                    ];
                }
                static get navigationKeys() {
                    return [
                        KeyCodes.ArrowDown,
                        KeyCodes.ArrowLeft,
                        KeyCodes.ArrowRight,
                        KeyCodes.ArrowUp,
                        KeyCodes.End,
                        KeyCodes.Home
                    ];
                }
                static isActionKey(keyCode, ...exclude) {
                    let keys = this.actionKeys.slice(0);
                    if (_.isArray(exclude)) {
                        keys = _.difference(keys, exclude);
                    }
                    return keys.indexOf(keyCode) > 0;
                }
                static isNavigationKey(keyCode, ...exclude) {
                    let keys = this.navigationKeys.slice(0);
                    if (_.isArray(exclude)) {
                        keys = _.difference(keys, exclude);
                    }
                    return keys.indexOf(keyCode) > 0;
                }
            }
            UI.KeyCode = KeyCode;
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            class StyleInjector {
                constructor(options) {
                    this.m_id = options.id;
                    this.m_idEscaped = this.id.replace(/\-+/g, "_");
                    this.m_styles = {};
                }
                get id() {
                    return this.m_id;
                }
                get idEscaped() {
                    return this.m_idEscaped;
                }
                get idStyleTag() {
                    return `${this.idEscaped}-style`;
                }
                get rootClass() {
                    return `_${this.idEscaped}`;
                }
                get styles() {
                    return this.m_styles;
                }
                addStyle(selector, style, options) {
                    options = options || { useRootClass: true };
                    if (options.useRootClass) {
                        this.m_styles[`.${this.rootClass} ${selector}`] = style;
                    }
                    else {
                        this.m_styles[selector] = style;
                    }
                    return this;
                }
                inject() {
                    let styleNode = $(`#${this.idStyleTag}`);
                    styleNode.remove();
                    let styles = [];
                    Object.keys(this.m_styles).forEach(name => {
                        styles[styles.length] = this.getStyle(name, this.styles[name]);
                    });
                    $(document.head).append(`<style id="${this.idStyleTag}">${styles.join(" ")}</style>`);
                }
                remove() {
                    $(`#${this.idStyleTag}`).remove();
                }
                getStyle(name, style) {
                    let result = [];
                    Object.keys(style).forEach(name => {
                        result[result.length] = `${this.getFormattedAttributeName(name)}:${style[name]}`;
                    });
                    return `${name} {${result.join(";")}}`;
                }
                getFormattedAttributeName(name) {
                    return name.replace(/([a-z]*)([A-Z])([a-z]*)/g, (match, $1, $2, $3) => {
                        return `${$1}${"-" + $2.toLowerCase()}${$3}`;
                    });
                }
            }
            UI.StyleInjector = StyleInjector;
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                let CssClass;
                (function (CssClass) {
                    CssClass["ACTIVE"] = "-pdjs-active";
                    CssClass["MaskedTextBox"] = "-pd-masked-textbox";
                    CssClass["ComboBox"] = "-pdjs-combo-box";
                })(CssClass = Controls.CssClass || (Controls.CssClass = {}));
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                let DataAttributes;
                (function (DataAttributes) {
                    DataAttributes["triggerDefaultButtonOnCarriageReturn"] = "triggerDefaultButtonOnCarriageReturn";
                })(DataAttributes = Controls.DataAttributes || (Controls.DataAttributes = {}));
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class BatchFieldChangeEvent {
                }
                Controls.BatchFieldChangeEvent = BatchFieldChangeEvent;
                class BatchField extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get list() {
                        return this.m_list;
                    }
                    get button() {
                        return this.m_button;
                    }
                    get filter() {
                        return this.m_filter;
                    }
                    get dialogViewStateId() {
                        return this.state.get("dialogViewStateId");
                    }
                    get dialogMapId() {
                        return this.state.get("dialogMapId");
                    }
                    get dialogMapLabel() {
                        return this.state.get("dialogMapLabel");
                    }
                    get dialogMapIcon() {
                        return this.state.get("dialogMapIcon");
                    }
                    get dialogTitle() {
                        return this.state.get("dialogTitle");
                    }
                    get dialogHeight() {
                        return this.state.get("dialogHeight");
                    }
                    get dialogWidth() {
                        return this.state.get("dialogWidth");
                    }
                    get dialogFilters() {
                        return this.state.get("dialogFilters", []);
                    }
                    get items() {
                        return this.state.get("items");
                    }
                    set items(value) {
                        this.state.set("items", value);
                    }
                    get tabIndex() {
                        return this.state.get("tabIndex", -1);
                    }
                    get changeCallback() {
                        return this.state.get("change", () => { });
                    }
                    get showCheckboxes() {
                        return this.state.get("showCheckboxes", false);
                    }
                    set showCheckboxes(value) {
                        this.state.set("showCheckboxes", value);
                    }
                    template() {
                        return `<div></div>`;
                    }
                    focus() {
                        this.filter.focus();
                    }
                    reload(items, filterTerm) {
                        this.items.splice(0, this.items.length);
                        items.forEach((item) => {
                            this.items[this.items.length] = item;
                        });
                        this.list.refresh();
                        this.list.filter(filterTerm);
                        this.filter.setTerm(filterTerm);
                    }
                    onInit(e) {
                        super.onInit(e);
                        this.items = [];
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.list_init();
                        this.button_init();
                        this.filter_init();
                        this.node.addClass("-pdjs-batch-field");
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.list.showCheckboxes = this.showCheckboxes;
                    }
                    list_init() {
                        this.m_list = new Controls.BatchFieldList({
                            items: this.items,
                            showCheckboxes: this.showCheckboxes,
                            change: () => {
                                this.changeCallback(this.items);
                            }
                        });
                        this.controls.add(this.list);
                    }
                    button_init() {
                        this.m_button = new Controls.BatchFieldButton({
                            openDialog: _.bind(this.dialog_open, this),
                            list: this.list,
                            showCheckboxes: this.showCheckboxes,
                            tabIndex: this.tabIndex
                        });
                        this.controls.add(this.button);
                    }
                    filter_init() {
                        this.m_filter = new Controls.BatchFieldFilter({
                            list: this.list,
                            tabIndex: this.tabIndex,
                            change: (term) => {
                                this.list.filter(term);
                                this.changeCallback(this.items);
                            }
                        });
                        this.controls.add(this.filter);
                    }
                    dialog_open() {
                        Controls.BatchFieldDialog.open({
                            title: this.dialogTitle,
                            viewStateId: this.dialogViewStateId,
                            mapId: this.dialogMapId,
                            mapLabel: this.dialogMapLabel,
                            mapIcon: this.dialogMapIcon,
                            filters: this.dialogFilters,
                            callbacks: {
                                ok: (sender, e) => {
                                    sender.close();
                                    _.each(this.items, (item) => {
                                        item.selected = false;
                                    });
                                    _.each(e, (item) => {
                                        if (_.findIndex(this.items, { id: item.id }) < 0) {
                                            this.items[this.items.length] = item;
                                        }
                                    });
                                    this.items = _.sortBy(this.items, ["label"]);
                                    this.list.refresh();
                                }
                            }
                        }, {
                            height: this.dialogHeight,
                            width: this.dialogWidth
                        });
                    }
                }
                Controls.BatchField = BatchField;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class BatchFieldButton extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get popUp() {
                        return this.m_popUp;
                    }
                    get tabIndex() {
                        return this.state.get("tabIndex", -1);
                    }
                    get openDialogCallback() {
                        return this.state.get("openDialog", () => { });
                    }
                    get commandCallback() {
                        return this.state.get("command", () => { });
                    }
                    get dialogButtonNode() {
                        return this.node.find("button[role=dialog]");
                    }
                    get popUpButtonNode() {
                        return this.node.find("button[role=popup]");
                    }
                    get list() {
                        return this.state.get("list");
                    }
                    get showCheckboxes() {
                        return this.state.get("showCheckboxes", false);
                    }
                    template() {
                        let icon = Jade.IconSet.get("pd")
                            .resolve("sort_desc.png", Jade.IconSetSizeSpecificDirectory.misc);
                        return `<div role="deck">
                        <button role="dialog" tabIndex="${this.tabIndex}">
                            Select...
                        </button>
                        <button role="popup" tabIndex="${this.tabIndex}">
                            <img src="${icon}"/>
                        </button>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.dialogButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.dialogButton_onClick, this));
                        this.popUpButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.popUpButton_onClick, this));
                        this.popUp_init();
                    }
                    popUp_init() {
                        this.m_popUp =
                            new PDJS.Shared.UI.Controls.PopUp({
                                anchor: this.popUpButtonNode,
                                width: 150,
                                tipped: {
                                    skin: "white-no-padding",
                                    position: "topright",
                                    offset: {
                                        x: 1,
                                        y: -3
                                    }
                                }
                            });
                        this.controls.add(this.m_popUp);
                        if (this.showCheckboxes) {
                            this.popUp.controls.add(new PDJS.Shared.UI.Controls.PopUpItem({
                                data: {
                                    id: "activateAll",
                                    label: "Activate All"
                                },
                                click: () => {
                                    this.popUp.hide();
                                    this.list.activateAll();
                                }
                            }));
                            this.popUp.controls.add(new PDJS.Shared.UI.Controls.PopUpItem({
                                data: {
                                    id: "deactivateAll",
                                    label: "Deactivate All"
                                },
                                click: () => {
                                    this.popUp.hide();
                                    this.list.deactivateAll();
                                }
                            }));
                        }
                        this.popUp.controls.add(new PDJS.Shared.UI.Controls.PopUpItem({
                            data: {
                                id: "selectAll",
                                label: "Select All"
                            },
                            click: () => {
                                this.popUp.hide();
                                this.list.selectAll();
                            }
                        }));
                        this.popUp.controls.add(new PDJS.Shared.UI.Controls.PopUpItem({
                            data: {
                                id: "deselectAll",
                                label: "Deselect All"
                            },
                            click: () => {
                                this.m_popUp.hide();
                                this.list.deselectAll();
                            }
                        }));
                        this.popUp.controls.add(new PDJS.Shared.UI.Controls.PopUpItem({
                            data: {
                                id: "removeAll",
                                label: "Remove All"
                            },
                            click: () => {
                                this.popUp.hide();
                                this.list.removeAll();
                            }
                        }));
                        this.popUp.controls.add(new PDJS.Shared.UI.Controls.PopUpItem({
                            data: {
                                id: "removeSelected",
                                label: "Remove Selected"
                            },
                            click: () => {
                                this.popUp.hide();
                                this.list.removeSelected();
                            }
                        }));
                    }
                    dialogButton_onClick(e) {
                        this.openDialogCallback();
                    }
                    popUpButton_onClick(e) {
                        if (this.popUp.visible) {
                            this.popUp.hide();
                        }
                        else {
                            this.popUp.show();
                        }
                    }
                }
                Controls.BatchFieldButton = BatchFieldButton;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class BatchFieldDialog extends Jade.UI.Dialog {
                    constructor(options, windowOptions) {
                        super(options, windowOptions);
                    }
                    get filters() {
                        return this.state.get("filters", []);
                    }
                    get viewStateId() {
                        return this.state.get("viewStateId", null);
                    }
                    set viewStateId(value) {
                        this.state.set("viewStateId", value);
                    }
                    get okButtonNode() {
                        return this.node.find("button[data-command=ok]");
                    }
                    get cancelButtonNode() {
                        return this.node.find("button[data-command=cancel]");
                    }
                    get selections() {
                        return this.m_grid.getSelections().toArray();
                    }
                    get mapId() {
                        return this.state.get("mapId", "ObjectId");
                    }
                    get mapLabel() {
                        return this.state.get("mapName", "ObjectName");
                    }
                    get mapIcon() {
                        return this.state.get("mapIcon", null);
                    }
                    template() {
                        return `
            <div style="position:absolute;top:10px;left:10px;right:10px;bottom:10px;box-sizing:border-box;">
                <div data-role="grid" style="position:absolute;top:0;left:0;right:0;bottom:34px;border:1px solid #AAAAAA;">
                    
                </div>
                <div style="position:absolute;height:26px;bottom:0;left:0;right:0;text-align:right;">
                    <button data-command="ok" class="-jadejs-button">OK</button>
                    <button data-command="cancel" class="-jadejs-button">Cancel</button>
                </div>
            </div>
            `;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.grid_init();
                        this.okButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.okButton_onClick, this));
                        this.cancelButtonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.cancelButton_onClick, this));
                    }
                    static open(options, windowOptions) {
                        return new BatchFieldDialog(options, windowOptions);
                    }
                    grid_init() {
                        this.m_grid = new PD.Web.UI.Controls.ViewGrid({
                            container: this.node.find("[data-role=grid]"),
                            selectionMode: "multiple",
                            viewStateId: this.viewStateId,
                            selectOnRightClick: false,
                            defaultSelectionEnabled: true,
                            selection: {
                                map: (e) => {
                                    return _.map(e.selections.toArray(), (item, index) => {
                                        return {
                                            id: item[this.mapId],
                                            label: item[this.mapLabel],
                                            icon: item[this.mapIcon],
                                            active: true,
                                            selected: true
                                        };
                                    });
                                }
                            },
                            dblclick: (e) => {
                                this.closeAndReturn();
                            },
                            needContext: (e) => {
                                _.each(this.filters, (item) => {
                                    e.filters[e.filters.length] = item.toJSON();
                                });
                            }
                        });
                    }
                    okButton_onClick(e) {
                        this.closeAndReturn();
                    }
                    cancelButton_onClick(e) {
                        this.close();
                    }
                    closeAndReturn() {
                        if (this.selections.length > -1) {
                            this.close({
                                command: "ok",
                                data: this.selections
                            });
                        }
                        else {
                            Jade.UI.MessageDialog.open({
                                dialogStyle: Jade.UI.MessageDialogStyle.Warning,
                                dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                                title: "No Item Selected",
                                message: "No item has been selected. Select an item and try again.",
                                select: (e) => {
                                    e.close();
                                }
                            });
                        }
                    }
                }
                Controls.BatchFieldDialog = BatchFieldDialog;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class BatchFieldFilter extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get mask() {
                        return this.m_mask;
                    }
                    get changeCallback() {
                        return this.state.get("change", () => { });
                    }
                    get hasValue() {
                        return this.mask != null &&
                            !Jade.String.isNullOrWhiteSpace(this.value);
                    }
                    get value() {
                        return this.mask.textValue;
                    }
                    template() {
                        return `<div role="filter"></div>`;
                    }
                    focus() {
                        this.mask.focus();
                    }
                    setTerm(term) {
                        this.mask.textValue = term;
                        if (this.hasValue) {
                            this.mask.showText();
                        }
                        else {
                            this.mask.showMask();
                        }
                        this.changeCallback(this.value);
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.filter_init();
                    }
                    filter_init() {
                        this.m_mask = new PDJS.Shared.UI.Controls.MaskedTextBox({
                            defaultMaskText: "Filter...",
                            onMaskFocus: (e) => {
                                this.mask.showText();
                                this.mask.focusText();
                            },
                            onTextFocus: (e) => {
                                this.mask.focusText();
                            },
                            onTextBlur: (e) => {
                                if (this.hasValue) {
                                    this.mask.showText();
                                }
                                else {
                                    this.mask.showMask();
                                }
                            },
                            onTextKeyUp: (e) => {
                                this.changeCallback(this.value);
                            }
                        });
                        this.controls.add(this.mask);
                        this.mask.maskNode.css({
                            color: "#AAAAAA",
                            fontStyle: "italic"
                        });
                    }
                }
                Controls.BatchFieldFilter = BatchFieldFilter;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class BatchFieldList extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get items() {
                        return this.state.get("items");
                    }
                    get batchFieldListItems() {
                        return this.controls.getByType(Controls.BatchFieldListItem);
                    }
                    get tabIndex() {
                        return this.state.get("tabIndex", -1);
                    }
                    get changeCallback() {
                        return this.state.get("change", () => { });
                    }
                    get showCheckboxes() {
                        return this.state.get("showCheckboxes", false);
                    }
                    set showCheckboxes(value) {
                        this.state.set("showCheckboxes", value);
                    }
                    template() {
                        return `<div role="list"></div>`;
                    }
                    filter(term) {
                        let isFiltered = !Jade.String.isNullOrWhiteSpace(term);
                        let countOfMatches = 0;
                        let countOfItems = this.batchFieldListItems.count;
                        if (countOfItems == 0) {
                            return;
                        }
                        this.batchFieldListItems
                            .each((item) => {
                            let isMatch = !isFiltered ||
                                (isFiltered && item.label.toLowerCase().indexOf(term) > -1);
                            item.visible = isMatch;
                            countOfMatches += isMatch ? 1 : 0;
                        });
                        if (countOfMatches == 0) {
                            this.addMessage(`No items matched "${term}".`);
                        }
                        else {
                            this.removeMessage();
                        }
                        this.changeCallback();
                    }
                    selectAll() {
                        this.batchFieldListItems
                            .each((item) => {
                            item.selected = true;
                        });
                        this.items.forEach((item) => {
                            item.selected = false;
                        });
                        this.changeCallback();
                    }
                    deselectAll() {
                        this.batchFieldListItems
                            .each((item) => {
                            item.selected = false;
                        });
                        this.items.forEach((item) => {
                            item.selected = false;
                        });
                        this.changeCallback();
                    }
                    activateAll() {
                        this.batchFieldListItems
                            .each((item) => {
                            item.active = true;
                        });
                        this.items.forEach((item) => {
                            item.active = true;
                        });
                        this.changeCallback();
                    }
                    deactivateAll() {
                        this.batchFieldListItems
                            .each((item) => {
                            item.active = false;
                        });
                        this.items.forEach((item) => {
                            item.active = false;
                        });
                        this.changeCallback();
                    }
                    removeAll() {
                        this.controls.clear();
                        this.items.splice(0, this.items.length);
                        if (this.batchFieldListItems.count == 0) {
                            this.addNoItemsMessage();
                        }
                        this.changeCallback();
                    }
                    removeSelected() {
                        let removeItems = [];
                        let removeIds = [];
                        this.batchFieldListItems.each((item) => {
                            if (item.selected) {
                                removeItems[removeItems.length] = item;
                                removeIds[removeIds.length] = item.itemId;
                            }
                        });
                        removeItems.forEach((item) => {
                            this.controls.remove(item);
                        });
                        _.remove(this.items, (item) => {
                            return removeIds.indexOf(item.id) > -1;
                        });
                        this.changeCallback();
                        if (this.batchFieldListItems.count == 0) {
                            this.addNoItemsMessage();
                        }
                    }
                    refresh() {
                        this.controls.clear();
                        this.node.hide();
                        this.items.forEach((item) => {
                            this.controls.add(new Controls.BatchFieldListItem({
                                data: item,
                                showCheckbox: this.showCheckboxes,
                                tabIndex: this.tabIndex,
                                remove: (e) => {
                                    this.removeItem(e);
                                },
                                select: (e, isMultiSelect) => {
                                    this.items.forEach((item) => {
                                        if (isMultiSelect) {
                                            if (item.id == e.itemId) {
                                                item.selected = e.selected;
                                            }
                                        }
                                        else {
                                            item.selected = item.id == e.itemId;
                                        }
                                    });
                                    this.batchFieldListItems.each((item) => {
                                        if (isMultiSelect) {
                                            if (item.itemId == e.itemId) {
                                                item.selected = e.selected;
                                            }
                                        }
                                        else {
                                            item.selected = item.itemId == e.itemId;
                                        }
                                    });
                                    this.changeCallback();
                                },
                                check: (e) => {
                                    this.items.forEach((item) => {
                                        if (item.id == e.itemId) {
                                            item.active = e.active;
                                        }
                                    });
                                    this.changeCallback();
                                }
                            }));
                        });
                        this.node.show();
                        this.changeCallback();
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.addNoItemsMessage();
                        this.node.addClass(PDJS.Canvas.Shared.CanvasCss.FormFieldAnimationTarget);
                    }
                    removeItem(item) {
                        _.remove(this.items, (record) => {
                            return record.id == item.itemId;
                        });
                        this.controls.remove(item);
                        this.changeCallback();
                    }
                    removeMessage() {
                        let message = this.controls
                            .getByType(PDJS.Shared.UI.Controls.Message).first();
                        if (message != null) {
                            this.controls.remove(message);
                        }
                    }
                    addMessage(text) {
                        let message = new PDJS.Shared.UI.Controls.Message({
                            message: text
                        });
                        this.removeMessage();
                        this.controls.add(message);
                        message.messageNode.css({
                            color: "#AAAAAA"
                        });
                    }
                    addNoItemsMessage() {
                        this.addMessage("No items in list.");
                    }
                }
                Controls.BatchFieldList = BatchFieldList;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class BatchFieldListItem extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get itemId() {
                        return this.state.get("data.id", "");
                    }
                    get label() {
                        return this.state.get("data.label", "");
                    }
                    get icon() {
                        return this.state.get("data.icon", "");
                    }
                    get active() {
                        return this.state.get("data.active", true);
                    }
                    set active(value) {
                        this.state.set("data.active", value);
                    }
                    get selected() {
                        return this.state.get("data.selected", true);
                    }
                    set selected(value) {
                        this.state.set("data.selected", value);
                    }
                    get tabIndex() {
                        return this.state.get("tabIndex", -1);
                    }
                    get checkBoxNode() {
                        return this.node.children("input[type=checkbox]");
                    }
                    get labelNode() {
                        return this.node.children("span");
                    }
                    get imgNode() {
                        return this.node.children("img");
                    }
                    get showCheckbox() {
                        return this.state.get("showCheckbox", false);
                    }
                    get visible() {
                        return this.state.get("visible", true);
                    }
                    set visible(value) {
                        this.state.set("visible", value);
                    }
                    get removeCallback() {
                        return this.state.get("remove", () => { });
                    }
                    get checkCallback() {
                        return this.state.get("check", () => { });
                    }
                    get selectCallback() {
                        return this.state.get("select", () => { });
                    }
                    template() {
                        let img = Jade.IconSet.get("pd")
                            .resolve("cancel.png", Jade.IconSetSizeSpecificDirectory.misc);
                        return `<div role="item" data-id="${this.itemId}" data-selected="${this.selected ? "true" : "false"}" 
                        class="-pdjs-batch-field-item ${this.showCheckbox ? "-pdjs-batch-field-item-checkbox" : ""}" 
                        style="display:${this.visible ? "none" : ""}">
                            <input type="checkbox" tabIndex="${this.tabIndex}" ${this.active ? "checked" : ""} />
                            <span>${this.label}</span>
                            <img src="${img}"/>
                    </div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.imgNode.on(Jade.BrowserEvent.CLICK, _.bind(this.onRemove, this));
                        this.node.on(Jade.BrowserEvent.CLICK, _.bind(this.onSelect, this));
                        this.checkBoxNode.on(Jade.BrowserEvent.CLICK, _.bind(this.onCheck, this));
                    }
                    onLoad(e) {
                        super.onLoad(e);
                        this.m_iconPath = Jade.IconSet.get("pd")
                            .resolve(this.icon, Jade.IconSetSizeSpecificDirectory.x16);
                    }
                    onStateChanged() {
                        if (this.icon != null) {
                            this.labelNode.css({
                                backgroundImage: `url(${this.m_iconPath})`
                            });
                        }
                        if (this.visible) {
                            this.node.show();
                        }
                        else {
                            this.node.hide();
                        }
                        this.node.attr("data-selected", this.selected ? "true" : "false");
                        this.checkBoxNode.prop("checked", this.active);
                    }
                    onRemove(e) {
                        this.removeCallback(this);
                    }
                    onCheck(e) {
                        e.stopPropagation();
                        this.active = this.checkBoxNode.prop("checked");
                        this.checkCallback(this);
                    }
                    onSelect(e) {
                        let isCurrentlySelected = this.node.data("selected");
                        this.selected = !isCurrentlySelected;
                        this.node.attr("data-selected", !isCurrentlySelected ? "true" : "false");
                        this.selectCallback(this, e.ctrlKey);
                    }
                }
                Controls.BatchFieldListItem = BatchFieldListItem;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class ComboBoxButton extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get visible() {
                        return this.state.get("visible", true);
                    }
                    set visible(value) {
                        this.state.set("visible", value);
                    }
                    get enabled() {
                        return this.state.get("enabled", true);
                    }
                    set enabled(value) {
                        this.state.set("enabled", value);
                    }
                    get mode() {
                        return this.state.get("mode");
                    }
                    get onShowDialogCallback() {
                        return this.state.get("onShowDialog", () => { });
                    }
                    get onShowListCallback() {
                        return this.state.get("onShowList", () => { });
                    }
                    template() {
                        return `<button role="${this.mode == Controls.ComboBoxMode.List ? "list" : "dialog"}" tabIndex="-1"></button>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.node.css({
                            position: "absolute",
                            width: "21px",
                            bottom: 0,
                            backgroundPosition: "center center",
                            backgroundRepeat: "no-repeat",
                            boxSizing: "border-box",
                            padding: 0
                        });
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        let iconPath = Jade.IconSet
                            .get("pd")
                            .resolve("ddl-grip.png", Jade.IconSetSizeSpecificDirectory.misc);
                        this.node.empty();
                        this.node.text(this.mode === Controls.ComboBoxMode.List ? "" : "...");
                        this.node.css({
                            backgroundImage: this.mode === Controls.ComboBoxMode.List ? `url(${iconPath})` : "",
                            opacity: this.enabled ? "1" : ".5",
                            cursor: this.enabled ? "pointer" : "default"
                        });
                        if (this.visible) {
                            this.node.show();
                        }
                        else {
                            this.node.hide();
                        }
                        this.enableClickHandlers(this.enabled);
                    }
                    enableClickHandlers(enabled) {
                        if (this.enabled) {
                            if (this.mode == Controls.ComboBoxMode.List) {
                                this.node.on(Jade.BrowserEvent.CLICK, _.bind(this.onShowListCallback, this));
                            }
                            else {
                                this.node.on(Jade.BrowserEvent.CLICK, _.bind(this.onShowDialogCallback, this));
                            }
                        }
                        else {
                            this.node.off(Jade.BrowserEvent.CLICK);
                        }
                    }
                }
                Controls.ComboBoxButton = ComboBoxButton;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class PopUp extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                        this.m_popUpCreated = false;
                    }
                    get anchor() {
                        return this.state.get("anchor");
                    }
                    get height() {
                        return this.state.get("height", null);
                    }
                    get width() {
                        return this.state.get("width", 200);
                    }
                    get visible() {
                        return !!Tipped.visible(this.anchor);
                    }
                    get tipped() {
                        return this.state.get("tipped", {});
                    }
                    get onCreateCallback() {
                        return this.state.get("onCreate", () => { });
                    }
                    template() {
                        return `<div style="height:${this.height}px;width:${this.width}px;display:none;"></div>`;
                    }
                    show() {
                        this.ensureTippedPopUp();
                        Tipped.show(this.anchor);
                    }
                    hide() {
                        Tipped.hide(this.anchor);
                    }
                    destroy() {
                        Tipped.remove(this.anchor.get(0));
                        super.destroy();
                    }
                    popUp_onCreate() {
                        this.onCreateCallback();
                    }
                    ensureTippedPopUp() {
                        if (this.m_popUpCreated == false) {
                            this.node.detach();
                            Tipped.create(this.anchor, this.node, this.getPopUpOptions());
                            this.node.show();
                            this.popUp_onCreate();
                            this.m_popUpCreated = true;
                        }
                    }
                    getPopUpOptions(options) {
                        return _.merge({
                            skin: "white",
                            radius: false,
                            shadow: false,
                            stem: false,
                            position: "bottomleft",
                            showOn: false,
                            hideAfter: 500,
                            hideDelay: 500,
                            maxWidth: this.width,
                            fadeOut: 100,
                            showDelay: 0,
                            hideOn: "click-outside",
                            hideOthers: true,
                            detach: true
                        }, options || {}, this.tipped);
                    }
                }
                Controls.PopUp = PopUp;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class ComboBoxDataSourceFilterEvent {
                    constructor(options) {
                        this.m_term = options.term;
                        this.m_result = new Jade.Collection();
                        this.m_callback = options.callback;
                    }
                    get term() {
                        return this.m_term;
                    }
                    get result() {
                        return this.m_result;
                    }
                    complete() {
                        if (_.isFunction(this.m_callback)) {
                            this.m_callback(this.result);
                        }
                    }
                }
                Controls.ComboBoxDataSourceFilterEvent = ComboBoxDataSourceFilterEvent;
                class ComboBoxDataSource extends Jade.ObservableCollection {
                    constructor(options) {
                        super(options.data, {
                            onAfterAdd: (e) => {
                                this.onChangeCallback(this);
                            },
                            onAfterRemove: (e) => {
                                this.onChangeCallback(this);
                            }
                        });
                        this.m_key = options.key;
                    }
                    get key() {
                        return this.m_key || "id";
                    }
                    get label() {
                        return this.m_label || "label";
                    }
                    get onChangeCallback() {
                        return this.m_onChange || (() => { });
                    }
                    set onChangeCallback(value) {
                        this.m_onChange = value;
                    }
                    get onFilterCallback() {
                        return this.m_onFilter || (() => { });
                    }
                    set onFilterCallback(value) {
                        this.m_onFilter = value;
                    }
                    onFilter(e) {
                        if (this.m_throttledFilterFunction == null) {
                            this.m_throttledFilterFunction =
                                _.throttle(_.bind((e) => { this.onFilterCallback(e); }, this), 500);
                        }
                        this.m_throttledFilterFunction(e);
                    }
                    filter(term) {
                        let args = new ComboBoxDataSourceFilterEvent({
                            term: term,
                            callback: (data) => {
                                this.onChangeCallback(data);
                            }
                        });
                        this.onFilter(args);
                    }
                    bind() {
                        this.onChangeCallback(this);
                    }
                }
                Controls.ComboBoxDataSource = ComboBoxDataSource;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class ComboBoxEvent {
                    constructor(options) {
                        this.m_comboBox = options.comboBox;
                    }
                    get comboBox() {
                        return this.m_comboBox;
                    }
                }
                Controls.ComboBoxEvent = ComboBoxEvent;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class ComboBoxIcon extends Jade.UI.Control {
                    constructor(options) {
                        super(options || {});
                    }
                    get path() {
                        return this.state.get("path");
                    }
                    set path(value) {
                        this.state.set("path", value);
                    }
                    get enabled() {
                        return this.state.get("enabled", true);
                    }
                    set enabled(value) {
                        this.state.set("enabled", value);
                    }
                    get title() {
                        return this.state.get("title", "");
                    }
                    set title(value) {
                        this.state.set("title", value);
                    }
                    get visible() {
                        return this.state.get("visible", true);
                    }
                    set visible(value) {
                        this.state.set("visible", value);
                    }
                    template() {
                        return `<div role="icon">&nbsp;</div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.node.css({
                            position: "absolute",
                            top: 0,
                            left: 0,
                            width: "21px",
                            bottom: 0,
                            backgroundPosition: "5px center",
                            backgroundRepeat: "no-repeat",
                        });
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.setIconPath();
                        let isVisible = !Jade.String.isNullOrWhiteSpace(this.path) && this.visible;
                        if (isVisible) {
                            this.node.show();
                        }
                        else {
                            this.node.hide();
                        }
                        this.node.attr("title", this.title);
                    }
                    setIconPath() {
                        if (Jade.String.isNullOrWhiteSpace(this.path)) {
                            this.node.css({
                                backgroundImage: ""
                            });
                            return;
                        }
                        let path;
                        if (!Jade.Path.isVirtual(this.path)) {
                            path = Jade.IconSet.get("pd").resolve(this.path, Jade.IconSetSizeSpecificDirectory.x16);
                        }
                        this.node.css({
                            backgroundImage: `url(${path})`
                        });
                    }
                }
                Controls.ComboBoxIcon = ComboBoxIcon;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                let ComboBoxInputEventSource;
                (function (ComboBoxInputEventSource) {
                    ComboBoxInputEventSource[ComboBoxInputEventSource["mask"] = 0] = "mask";
                    ComboBoxInputEventSource[ComboBoxInputEventSource["text"] = 1] = "text";
                })(ComboBoxInputEventSource = Controls.ComboBoxInputEventSource || (Controls.ComboBoxInputEventSource = {}));
                class ComboBoxInputEvent extends Controls.ComboBoxEvent {
                    constructor(options) {
                        super(options);
                        this.m_event = options.event;
                        this.m_eventType = options.eventType;
                        this.m_source = options.source;
                    }
                    get input() {
                        return this.comboBox.input;
                    }
                    get list() {
                        return this.comboBox.list;
                    }
                    get source() {
                        return this.m_source;
                    }
                    get event() {
                        return this.m_event;
                    }
                    get eventType() {
                        return this.m_eventType;
                    }
                    get isFilterKey() {
                        return [
                            Jade.KeyCode.Enter,
                            Jade.KeyCode.Tab,
                            Jade.KeyCode.Home,
                            Jade.KeyCode.End,
                            Jade.KeyCode.ArrowLeft,
                            Jade.KeyCode.ArrowUp,
                            Jade.KeyCode.ArrowRight,
                            Jade.KeyCode.ArrowDown,
                            Jade.KeyCode.Shift
                        ].indexOf(this.keyCode) == -1;
                    }
                    get isNavigateUpCommand() {
                        return this.isSourceEventType(ComboBoxInputEventSource.text, Jade.BrowserEvent.KEYDOWN)
                            && this.isKeyCode(Jade.KeyCode.ArrowUp);
                    }
                    get isNavigateDownCommand() {
                        return this.isSourceEventType(ComboBoxInputEventSource.text, Jade.BrowserEvent.KEYDOWN)
                            && this.isKeyCode(Jade.KeyCode.ArrowDown);
                    }
                    get isSelectCommand() {
                        return this.isSourceEventType(ComboBoxInputEventSource.text, Jade.BrowserEvent.KEYPRESS)
                            && this.isKeyCode(Jade.KeyCode.Enter)
                            && this.comboBox.list.visible;
                    }
                    get isDeleteCommand() {
                        return this.isSourceEventType(ComboBoxInputEventSource.mask, Jade.BrowserEvent.KEYUP)
                            && this.isKeyCode(Jade.KeyCode.Backspace, Jade.KeyCode.Delete);
                    }
                    get isFilterCommand() {
                        return this.isSourceEventType(ComboBoxInputEventSource.text, Jade.BrowserEvent.KEYUP)
                            && this.isFilterKey;
                    }
                    get isTabOutCommand() {
                        return (this.isSourceEventType(ComboBoxInputEventSource.mask, Jade.BrowserEvent.KEYDOWN)
                            || this.isSourceEventType(ComboBoxInputEventSource.text, Jade.BrowserEvent.KEYDOWN))
                            && this.isKeyCode(Jade.KeyCode.Tab)
                            && this.comboBox.list.visible;
                    }
                    get isShowListCommand() {
                        return this.source === ComboBoxInputEventSource.mask
                            && this.eventType === Jade.BrowserEvent.KEYDOWN
                            && this.isKeyCode(Jade.KeyCode.ArrowUp, Jade.KeyCode.ArrowDown, Jade.KeyCode.Space);
                    }
                    get isSwitchToTextCommand() {
                        return this.isSourceEventType(ComboBoxInputEventSource.mask, Jade.BrowserEvent.KEYDOWN)
                            && !this.isKeyCode(Jade.KeyCode.Backspace, Jade.KeyCode.Delete, Jade.KeyCode.Shift)
                            && !this.isShowListCommand
                            && !this.isTabOutCommand
                            && !this.isKeyCode(Jade.KeyCode.Tab, Jade.KeyCode.Enter);
                    }
                    get isMaskIgnoreEnterKey() {
                        return this.isSourceEventType(ComboBoxInputEventSource.mask, Jade.BrowserEvent.KEYPRESS)
                            && this.isKeyCode(Jade.KeyCode.Enter)
                            && this.comboBox.list.visible;
                    }
                    get isMaskDoubleClick() {
                        return this.isSourceEventType(ComboBoxInputEventSource.mask, Jade.BrowserEvent.DOUBLECLICK);
                    }
                    get isTextBlur() {
                        return this.isSourceEventType(ComboBoxInputEventSource.text, Jade.BrowserEvent.BLUR);
                    }
                    get isMaskFocus() {
                        return this.isSourceEventType(ComboBoxInputEventSource.mask, Jade.BrowserEvent.FOCUS);
                    }
                    get keyCode() {
                        return this.event.which;
                    }
                    get filterTerm() {
                        return this.input.textValue;
                    }
                    get hasFilterTerm() {
                        return !Jade.String.isNullOrWhiteSpace(this.filterTerm);
                    }
                    execute() {
                        switch (true) {
                            case this.isTextBlur:
                                this.comboBox.showMask();
                                this.input.textValue = "";
                                break;
                            case this.isMaskDoubleClick:
                                this.comboBox.showList();
                                break;
                            case this.isDeleteCommand:
                                this.event.stopPropagation();
                                this.comboBox.selection = null;
                                this.comboBox.focusMask();
                                this.comboBox.data.filter(this.filterTerm);
                                this.comboBox.hideList();
                                break;
                            case this.isSelectCommand:
                                this.event.stopPropagation();
                                this.list.selectActiveItem();
                                this.comboBox.showMask();
                                this.comboBox.focusMask();
                                this.comboBox.hideList();
                                break;
                            case this.isSwitchToTextCommand:
                                this.comboBox.showList();
                                this.comboBox.showText();
                                this.comboBox.focusText();
                                break;
                            case this.isFilterCommand:
                                if (this.hasFilterTerm) {
                                    this.comboBox.showList();
                                }
                                else {
                                    this.comboBox.hideList();
                                }
                                this.comboBox.data.filter(this.filterTerm);
                                break;
                            case this.isNavigateUpCommand:
                                this.comboBox.showList();
                                this.list.navigateUp();
                                break;
                            case this.isNavigateDownCommand:
                                this.comboBox.showList();
                                this.list.navigateDown();
                                break;
                            case this.isShowListCommand:
                                this.comboBox.showList();
                                this.comboBox.showText();
                                this.comboBox.focusText();
                                this.comboBox.data.filter(this.filterTerm);
                                this.event.returnValue = false;
                                break;
                            case this.isTabOutCommand:
                                this.input.textValue = "";
                                this.comboBox.showMask();
                                this.comboBox.hideList();
                                break;
                            case this.isMaskIgnoreEnterKey:
                                this.event.stopPropagation();
                                break;
                        }
                    }
                    isKeyCode(...keyCodes) {
                        return keyCodes.indexOf(this.keyCode) > -1;
                    }
                    isSourceEventType(source, eventType) {
                        return this.source === source && this.eventType === eventType;
                    }
                }
                Controls.ComboBoxInputEvent = ComboBoxInputEvent;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class ComboBoxList extends Controls.PopUp {
                    constructor(options) {
                        super(options);
                        this.ITEM_SELECTOR = "div[data-role=item]";
                        this.m_comboBox = options.comboBox;
                        this.state.unset("comboBox");
                    }
                    get comboBox() {
                        return this.m_comboBox;
                    }
                    get activeItem() {
                        return this.m_activeItem;
                    }
                    set activeItem(value) {
                        this.m_activeItem = value;
                    }
                    get items() {
                        return this.controls.getByType(Controls.ComboBoxListItem);
                    }
                    get message() {
                        return this.controls.getByType(Controls.Message).first();
                    }
                    destroy() {
                        this.hide();
                        super.destroy();
                    }
                    toggle() {
                        if (this.visible) {
                            this.hide();
                        }
                        else {
                            this.show();
                        }
                    }
                    hide() {
                        super.hide();
                    }
                    show() {
                        if (!this.visible) {
                            this.comboBox.data.bind();
                        }
                        this.node.css({
                            width: `${this.comboBox.node.outerWidth(true) - 2}px`
                        });
                        super.show();
                    }
                    clear() {
                        this.activeItem = null;
                        this.controls.clear();
                    }
                    navigateUp() {
                        let items = this.items;
                        let prev = this.activeItem;
                        let nextIndex = null;
                        let result = null;
                        if (items.count > 0) {
                            if (prev == null) {
                                result = items.first();
                            }
                            else {
                                nextIndex = this.items.indexOf(prev) - 1;
                                if (nextIndex >= 0) {
                                    result = items.item(nextIndex);
                                }
                                else {
                                    result = items.last();
                                }
                            }
                        }
                        if (result != null) {
                            this.setActiveItem(result);
                        }
                        return result;
                    }
                    navigateDown() {
                        let items = this.items;
                        let prev = this.activeItem;
                        let nextIndex = null;
                        let result = null;
                        if (items.count > 0) {
                            if (prev == null) {
                                result = items.first();
                            }
                            else {
                                nextIndex = items.indexOf(prev) + 1;
                                if (nextIndex < items.count) {
                                    result = items.item(nextIndex);
                                }
                                else {
                                    result = items.first();
                                }
                            }
                        }
                        if (result != null) {
                            this.setActiveItem(result);
                        }
                        return result;
                    }
                    selectActiveItem() {
                        if (this.activeItem != null) {
                            this.comboBox.selection = this.activeItem.data;
                        }
                        else {
                            this.comboBox.selection = null;
                        }
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.node.on(Jade.BrowserEvent.CLICK, this.ITEM_SELECTOR, (e) => {
                            let selectedListItem = this.controls.getById($(e.target).attr("id"));
                            if (selectedListItem != null) {
                                this.selectActiveItem();
                                this.hide();
                            }
                        });
                        this.node.on(Jade.BrowserEvent.MOUSEENTER, this.ITEM_SELECTOR, (e) => {
                            let activeListItem = this.controls.getById($(e.target).attr("id"));
                            this.setActiveItem(activeListItem);
                        });
                        this.node.on(Jade.BrowserEvent.MOUSELEAVE, this.ITEM_SELECTOR, (e) => {
                            let activeListItem = this.controls.getById($(e.target).attr("id"));
                            this.setActiveItem(activeListItem);
                        });
                        this.node.css({
                            overflowY: "auto"
                        });
                    }
                    showMessage(text) {
                        if (this.message != null) {
                            this.message.message = text;
                        }
                        this.controls.add(new Controls.Message({
                            message: text
                        }));
                    }
                    setActiveItem(item) {
                        this.node.find(`.${Controls.CssClass.ACTIVE}`).removeClass(Controls.CssClass.ACTIVE);
                        if (item != null) {
                            item.node.addClass(Controls.CssClass.ACTIVE);
                        }
                        this.activeItem = item;
                    }
                    getPopUpOptions() {
                        return _.extend(super.getPopUpOptions(), {
                            skin: "white-no-padding",
                            position: "bottomright",
                            offset: { x: 0, y: 1 },
                            afterHide: () => {
                                this.m_activeItem = null;
                            }
                        });
                    }
                }
                Controls.ComboBoxList = ComboBoxList;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class ComboBoxListItem extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get data() {
                        return this.state.get("data", {});
                    }
                    get uid() {
                        return this.resolveMap(this.uidMap);
                    }
                    get uidMap() {
                        return this.state.get("uidMap", "uid");
                    }
                    get label() {
                        return this.resolveMap(this.labelMap);
                    }
                    get labelMap() {
                        return this.state.get("labelMap", "label");
                    }
                    get icon() {
                        return this.resolveMap(this.iconMap);
                    }
                    get iconMap() {
                        return this.state.get("iconMap", "icon");
                    }
                    template() {
                        let result = $(`<div data-role="item" data-id="${this.uid}" title="${this.label}" class="-pdjs-combo-box-pop-up-item">${this.label}</div>`);
                        if (this.icon != null) {
                            result.css({
                                paddingLeft: "25px",
                                backgroundImage: `url(${Jade.IconSet.get("pd").resolve(this.icon, Jade.IconSetSizeSpecificDirectory.x16)})`
                            });
                        }
                        return result;
                    }
                    resolveMap(id, defaultValue) {
                        return this.state.get(`data.${id}`, defaultValue);
                    }
                }
                Controls.ComboBoxListItem = ComboBoxListItem;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class LoadingMessageControl extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get message() {
                        return this.state.get("message", "");
                    }
                    set message(value) {
                        this.state.set("message", value);
                    }
                    get margin() {
                        return this.state.get("margin", 0);
                    }
                    get showLoadingIcon() {
                        return this.state.get("showLoadingIcon", true);
                    }
                    get messageNode() {
                        return this.node.find("div[role=message]");
                    }
                    get tableNode() {
                        return this.node.children("table");
                    }
                    get tableCellNode() {
                        return this.node.find("table > tbody > tr > td");
                    }
                    template() {
                        return `<div>
                        <table>
                            <tr>
                                <td>
                                    <div style="text-align:center;vertical-align:center;">
                                        <div role="message" data-controls>
                                            ${this.message}
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
            `;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.node.css({
                            position: "absolute",
                            top: 0,
                            right: 0,
                            bottom: 0,
                            left: 0,
                            margin: `${this.margin}px`
                        });
                        this.tableNode.css({
                            height: "100%",
                            width: "100%",
                            boxSizing: "border-box"
                        });
                        this.tableCellNode.css({
                            backgroundColor: "#FFFFFF"
                        });
                        this.messageNode.css({
                            display: "inline-block",
                            height: "40px",
                            lineHeight: "40px",
                            fontFamily: "arial",
                            fontSize: "20px",
                            paddingLeft: `${this.showLoadingIcon ? 45 : 0}px`,
                            backgroundRepeat: "no-repeat",
                            backgroundPosition: "0 center"
                        });
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        if (this.showLoadingIcon) {
                            this.messageNode.css({
                                backgroundImage: `url(${Jade.IconSet.get("pd").resolve("ICON_CIRCLE_ANIMATED_36X36.GIF", Jade.IconSetSizeSpecificDirectory.misc)})`
                            });
                        }
                    }
                }
                Controls.LoadingMessageControl = LoadingMessageControl;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class Message extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get message() {
                        return this.state.get("message", "");
                    }
                    set message(value) {
                        this.state.set("message", value);
                    }
                    get messageNode() {
                        return this.node.find("span[role=message]");
                    }
                    get messageCellNode() {
                        return this.node.find("tbody > tr > td");
                    }
                    get tableNode() {
                        return this.node.find("span[role=message]");
                    }
                    template() {
                        return `
                <table>
	                <tr>
		                <td>
			                <span 
                                role="message">
				                ${this.message}
			                </span>
		                </td>
	                </tr>
                </table>
            `;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.node.css({
                            height: "100%",
                            width: "100%",
                            boxSizing: "border-box",
                            position: "absolute",
                            top: 0,
                            left: 0
                        });
                        this.tableNode.css({
                            height: "100%",
                            width: "100%"
                        });
                        this.messageCellNode.css({
                            textAlign: "center",
                            verticalAlign: "middle",
                            backgroundColor: "#FFFFFF",
                            cursor: "default"
                        });
                        this.messageNode.css({
                            fontSize: "12px"
                        });
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.messageNode.html(this.message);
                    }
                }
                Controls.Message = Message;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                let MaskedTextBoxEventNames;
                (function (MaskedTextBoxEventNames) {
                    MaskedTextBoxEventNames["onTextFocus"] = "onTextFocus";
                    MaskedTextBoxEventNames["onTextBlur"] = "onTextBlur";
                    MaskedTextBoxEventNames["onTextKeyDown"] = "onTextKeyDown";
                    MaskedTextBoxEventNames["onTextKeyPress"] = "onTextKeyPress";
                    MaskedTextBoxEventNames["onTextKeyUp"] = "onTextKeyUp";
                    MaskedTextBoxEventNames["onTextDoubleClick"] = "onTextDoubleClick";
                    MaskedTextBoxEventNames["onMaskFocus"] = "onMaskFocus";
                    MaskedTextBoxEventNames["onMaskBlur"] = "onMaskBlur";
                    MaskedTextBoxEventNames["onMaskKeyDown"] = "onMaskKeyDown";
                    MaskedTextBoxEventNames["onMaskKeyPress"] = "onMaskKeyPress";
                    MaskedTextBoxEventNames["onMaskKeyUp"] = "onMaskKeyUp";
                    MaskedTextBoxEventNames["onMaskDoubleClick"] = "onMaskDoubleClick";
                })(MaskedTextBoxEventNames || (MaskedTextBoxEventNames = {}));
                class MaskedTextBox extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get maskValue() {
                        return this.maskNode.val();
                    }
                    set maskValue(value) {
                        this.maskNode.val(value == null ? "" : value);
                    }
                    get textValue() {
                        return this.textNode.val();
                    }
                    set textValue(value) {
                        this.textNode.val(value == null ? "" : value);
                    }
                    get textNode() {
                        return this.node.find("input[role=text]");
                    }
                    get maskNode() {
                        return this.node.find("input[role=mask]");
                    }
                    get isInputVisible() {
                        return this.textNode.is(":visible");
                    }
                    get isMaskVisible() {
                        return this.maskNode.is(":visible");
                    }
                    get isTextFocused() {
                        return this.textNode.is(":focus");
                    }
                    get isMaskFocused() {
                        return this.maskNode.is(":focus");
                    }
                    get defaultMaskText() {
                        return this.state.get("defaultMaskText");
                    }
                    set defaultMaskText(value) {
                        this.state.set("defaultMaskText", value);
                    }
                    get textAndMaskNode() {
                        return this.node.find("div[data-role=input-and-mask]");
                    }
                    get enabled() {
                        return this.state.get("enabled", true);
                    }
                    set enabled(value) {
                        this.state.set("enabled", value);
                    }
                    get tabIndex() {
                        return this.state.get("tabIndex", -1);
                    }
                    set tabIndex(value) {
                        this.state.set("tabIndex", value);
                    }
                    onTextBlur(e) {
                    }
                    onTextFocus(e) {
                    }
                    onTextKeyDown(e) {
                    }
                    onTextKeyPress(e) {
                    }
                    onTextKeyUp(e) {
                    }
                    onTextDoubleClick(e) {
                    }
                    onTextShow() {
                    }
                    onTextHide() {
                    }
                    onMaskBlur(e) {
                    }
                    onMaskFocus(e) {
                    }
                    onMaskKeyDown(e) {
                    }
                    onMaskKeyPress(e) {
                    }
                    onMaskKeyUp(e) {
                    }
                    onMaskDoubleClick(e) {
                    }
                    onMaskShow() {
                    }
                    onMaskHide() {
                    }
                    onActivate(e) {
                        this.textNode.on(Jade.BrowserEvent.BLUR, _.bind((e) => {
                            this.onTextBlur(e);
                            this.state.get(MaskedTextBoxEventNames.onTextBlur, () => { })(e);
                        }, this));
                        this.textNode.on(Jade.BrowserEvent.FOCUS, _.bind((e) => {
                            this.onTextFocus(e);
                            this.state.get(MaskedTextBoxEventNames.onTextFocus, () => { })(e);
                        }, this));
                        this.textNode.on(Jade.BrowserEvent.KEYDOWN, _.bind((e) => {
                            this.onTextKeyDown(e);
                            this.state.get(MaskedTextBoxEventNames.onTextKeyDown, () => { })(e);
                        }, this));
                        this.textNode.on(Jade.BrowserEvent.KEYPRESS, _.bind((e) => {
                            this.onTextKeyPress(e);
                            this.state.get(MaskedTextBoxEventNames.onTextKeyPress, () => { })(e);
                        }, this));
                        this.textNode.on(Jade.BrowserEvent.KEYUP, _.bind((e) => {
                            this.onTextKeyUp(e);
                            this.state.get(MaskedTextBoxEventNames.onTextKeyUp, () => { })(e);
                        }, this));
                        this.textNode.on(Jade.BrowserEvent.DOUBLECLICK, _.bind((e) => {
                            this.onTextDoubleClick(e);
                            this.state.get(MaskedTextBoxEventNames.onTextDoubleClick, () => { })(e);
                        }, this));
                        this.maskNode.on(Jade.BrowserEvent.BLUR, _.bind((e) => {
                            this.onMaskBlur(e);
                            this.state.get(MaskedTextBoxEventNames.onMaskBlur, () => { })(e);
                        }, this));
                        this.maskNode.on(Jade.BrowserEvent.FOCUS, _.bind((e) => {
                            this.focusMask();
                            this.onMaskFocus(e);
                            this.state.get(MaskedTextBoxEventNames.onMaskFocus, () => { })(e);
                        }, this));
                        this.maskNode.on(Jade.BrowserEvent.KEYDOWN, _.bind((e) => {
                            this.onMaskKeyDown(e);
                            this.state.get(MaskedTextBoxEventNames.onMaskKeyDown, () => { })(e);
                        }, this));
                        this.maskNode.on(Jade.BrowserEvent.KEYPRESS, _.bind((e) => {
                            this.onMaskKeyPress(e);
                            this.state.get(MaskedTextBoxEventNames.onMaskKeyPress, () => { })(e);
                        }, this));
                        this.maskNode.on(Jade.BrowserEvent.KEYUP, _.bind((e) => {
                            this.onMaskKeyUp(e);
                            this.state.get(MaskedTextBoxEventNames.onMaskKeyUp, () => { })(e);
                        }, this));
                        this.maskNode.on(Jade.BrowserEvent.DOUBLECLICK, _.bind((e) => {
                            this.onMaskDoubleClick(e);
                            this.state.get(MaskedTextBoxEventNames.onMaskDoubleClick, () => { })(e);
                        }, this));
                    }
                    showMask() {
                        this.textNode.hide();
                        this.onTextHide();
                        this.maskNode.show();
                        if (Jade.String.isNullOrWhiteSpace(this.maskValue)) {
                            this.maskValue = this.defaultMaskText;
                        }
                        this.onMaskShow();
                    }
                    showText() {
                        this.maskNode.hide();
                        this.onMaskHide();
                        this.textNode.show();
                        this.onTextShow();
                    }
                    focusMask() {
                        if (!this.isMaskFocused) {
                            this.maskNode.get(0).focus();
                        }
                        this.maskNode.get(0).select();
                    }
                    focusText() {
                        if (!this.isTextFocused) {
                            this.textNode.get(0).focus();
                        }
                        this.textNode.get(0).select();
                    }
                    focus() {
                        this.showText();
                        this.focusText();
                    }
                    template() {
                        return `<div class="${Controls.CssClass.MaskedTextBox}">   
                        <div data-role="input-and-mask">
                            <input 
                                type="text" 
                                role="text"
                                tabIndex="-1"
                                class="${PDJS.Canvas.Shared.CanvasCss.FormFieldAnimationTarget}"
                                style="height:22px;"/>
                            <input 
                                type="text" 
                                role="mask"
                                readonly
                                tabIndex="${this.tabIndex}"
                                class="${PDJS.Canvas.Shared.CanvasCss.FormFieldAnimationTarget}"
                                style="height:22px;" />
                        </div>
                    </div>`;
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        if (Jade.String.isNullOrWhiteSpace(this.maskValue)) {
                            this.maskValue = this.defaultMaskText;
                        }
                        this.maskNode.prop("disabled", !this.enabled);
                        this.textNode.prop("disabled", !this.enabled);
                        this.maskNode.attr("tabIndex", this.tabIndex);
                        if (!this.enabled) {
                            this.node.addClass(Shared.UI.CssClass.Disabled);
                        }
                        else {
                            this.node.removeClass(Shared.UI.CssClass.Disabled);
                        }
                    }
                }
                Controls.MaskedTextBox = MaskedTextBox;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class SearchBox extends Controls.MaskedTextBox {
                    constructor(options) {
                        super(options);
                        this.defaultMaskText = "Search...";
                    }
                    get buttonNode() {
                        return this.node.find("button[role=search]");
                    }
                    get onSearchCallback() {
                        return this.state.get("onSearch", () => { });
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_iconSearch = Jade.IconSet.get("pd").resolve("ICON_SEARCH_16X16.GIF", Jade.IconSetSizeSpecificDirectory.misc);
                        this.m_iconCancel = Jade.IconSet.get("pd").resolve("cancel.png", Jade.IconSetSizeSpecificDirectory.misc);
                        this.node.append(`<button role="search"></button>`);
                        this.buttonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.searchButton_onClick, this));
                        this.buttonNode.css({
                            position: "absolute",
                            top: "4px",
                            right: "4px",
                            height: "16px",
                            width: "16px",
                            minHeight: "16px",
                            maxHeight: "16px",
                            minWidth: "16px",
                            maxWidth: "16px",
                            padding: 0,
                            backgroundImage: `url(${this.m_iconSearch})`,
                            backgroundRepeat: "no-repeat",
                            backgroundPosition: "center center",
                            backgroundColor: "transparent",
                            border: "0 none transparent"
                        });
                    }
                    onMaskFocus(e) {
                        this.showText();
                        this.focusText();
                    }
                    onTextBlur(e) {
                        if (Jade.String.isNullOrWhiteSpace(this.textValue)) {
                            this.textValue = "";
                            this.buttonMode(false);
                            this.showMask();
                        }
                    }
                    onTextKeyPress(e) {
                        if (e.keyCode == UI.KeyCodes.Return) {
                            if (!Jade.String.isNullOrWhiteSpace(this.textValue)) {
                                this.submitSearch();
                            }
                            else {
                                this.clearSearch();
                            }
                        }
                    }
                    submitSearch() {
                        this.m_searchSubmitted = true;
                        this.m_searchSubmittedTerm = this.textValue;
                        this.buttonMode(true);
                        this.onSearchCallback({
                            term: this.textValue
                        });
                    }
                    clearSearch() {
                        this.m_searchSubmitted = false;
                        this.textValue = "";
                        this.showMask();
                        this.focusMask();
                        this.buttonMode(false);
                        this.onSearchCallback({
                            term: this.textValue
                        });
                    }
                    searchButton_onClick(e) {
                        if (this.m_searchSubmitted || Jade.String.isNullOrWhiteSpace(this.textValue)) {
                            this.clearSearch();
                        }
                        else {
                            this.submitSearch();
                        }
                    }
                    buttonMode(isSearchMode) {
                        this.buttonNode.css({
                            backgroundImage: isSearchMode ? `url(${this.m_iconCancel})` : `url(${this.m_iconSearch})`
                        });
                    }
                }
                Controls.SearchBox = SearchBox;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class DateTextBox extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                        this.m_popUp = null;
                    }
                    get popUp() {
                        return this.m_popUp;
                    }
                    get format() {
                        return this.state.get("format");
                    }
                    set format(value) {
                        this.state.get("format", value);
                    }
                    get mask() {
                        return this.maskNode.val();
                    }
                    set mask(value) {
                        this.maskNode.val(value);
                    }
                    get value() {
                        return this.inputNode.val();
                    }
                    set value(value) {
                        this.inputNode.val(value);
                    }
                    get enabled() {
                        return this.state.get("enabled", true);
                    }
                    set enabled(value) {
                        this.state.set("enabled", value);
                    }
                    get inputNode() {
                        return this.node.find("input[role=text]");
                    }
                    get buttonNode() {
                        return this.node.find("input[type=button]");
                    }
                    get maskNode() {
                        return this.node.find("input[role=mask]");
                    }
                    get tabIndex() {
                        return this.state.get("tabIndex", -1);
                    }
                    set tabIndex(value) {
                        this.state.set("tabIndex", value);
                    }
                    get onChangeCallback() {
                        return this.state.get("onChange", (e) => { });
                    }
                    input_onBlur(e) {
                        this.onChangeCallback({ isValid: this.isValid(), value: this.value });
                        this.setValue(this.value);
                        this.maskNode.show();
                        this.inputNode.removeClass(PDJS.Canvas.Shared.CanvasCss.FormFieldFocus);
                    }
                    input_onFocus(e) {
                        this.maskNode.hide();
                        this.inputNode.addClass(PDJS.Canvas.Shared.CanvasCss.FormFieldFocus);
                    }
                    mask_onFocus(e) {
                        this.maskNode.hide();
                        this.inputNode.focus();
                        this.inputNode.select();
                    }
                    button_onClick(e) {
                        this.popUp.show();
                    }
                    onActivate(e) {
                        this.inputNode.on(Jade.BrowserEvent.BLUR, _.bind(this.input_onBlur, this));
                        this.inputNode.on(Jade.BrowserEvent.FOCUS, _.bind(this.input_onFocus, this));
                        this.inputNode.on(Jade.BrowserEvent.DOUBLECLICK, () => {
                            this.popUp.show();
                        });
                        this.maskNode.on(Jade.BrowserEvent.FOCUS, _.bind(this.mask_onFocus, this));
                        this.buttonNode.on(Jade.BrowserEvent.CLICK, _.bind(this.button_onClick, this));
                        this.setValue(this.value);
                        this.m_popUp = new Controls.PopUpCalendar({
                            skin: "white-no-padding",
                            anchor: this.buttonNode,
                            height: 210,
                            width: 200,
                            position: {
                                target: "bottomright",
                                tooltip: "topright"
                            },
                            offsetX: 4,
                            offsetY: 4,
                            onChange: (e) => {
                                this.onChangeCallback({ isValid: this.isValid(), value: e.formattedValue });
                                this.setValue(e.formattedValue);
                                this.popUp.hide();
                            }
                        });
                        this.controls.add(this.popUp);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.maskNode.prop("disabled", !this.enabled);
                        this.inputNode.prop("disabled", !this.enabled);
                        this.buttonNode.prop("disabled", !this.enabled);
                        if (!this.enabled) {
                            this.node.addClass(Shared.UI.CssClass.Disabled);
                        }
                        else {
                            this.node.removeClass(Shared.UI.CssClass.Disabled);
                        }
                        this.maskNode.attr("tabIndex", this.tabIndex);
                        this.inputNode.attr("tabIndex", this.tabIndex);
                    }
                    destroy() {
                        if (this.popUp != null) {
                            this.popUp.destroy();
                        }
                        super.destroy();
                    }
                    isValid() {
                        let result = true;
                        let regex = /^((0|1)?\d{1})\/((0|1|2|3)?\d{1})\/((19|20)\d{2})$/g;
                        if (!this.isNull()) {
                            result = regex.test(this.value);
                        }
                        return result;
                    }
                    getValue() {
                        let result = null;
                        if (!this.isNull()) {
                            result = kendo.parseDate(this.value);
                        }
                        return result;
                    }
                    setValue(value) {
                        this.value = value;
                        if (this.isValid()) {
                            this.maskNode.val(kendo.toString(kendo.parseDate(this.value), this.format));
                        }
                        else {
                            this.maskNode.val(value || "");
                        }
                    }
                    template() {
                        return `<div class="-pd-date-textbox">   
                        <input
                            type="text"
                            role="text"
                            class="${PDJS.Canvas.Shared.CanvasCss.FormFieldAnimationTarget}"
                            style="height:22px;" />
                        <input 
                            type="text" 
                            role="mask"
                            readonly
                            class="${PDJS.Canvas.Shared.CanvasCss.FormFieldAnimationTarget}"
                            style="height:22px;" />
                        <input 
                            type="button" 
                            value="..." tabIndex="0" />
                    </div>`;
                    }
                    setFormat(format) {
                        this.format = format;
                        this.maskNode.val(kendo.toString(kendo.parseDate(this.value), this.format));
                    }
                    isNull() {
                        return Jade.String.isNullOrWhiteSpace(this.value);
                    }
                }
                Controls.DateTextBox = DateTextBox;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class PopUpCalendar extends Controls.PopUp {
                    constructor(options) {
                        super(options);
                    }
                    get value() {
                        return this.state.get("value", null);
                    }
                    get calendar() {
                        return this.calendarNode.data("kendoCalendar");
                    }
                    get calendarNode() {
                        return this.node.find("[role=calendar]");
                    }
                    get onChangeCallback() {
                        return this.state.get("onChange", () => { });
                    }
                    popUp_onCreate() {
                        this.calendarNode.kendoCalendar({
                            change: (e) => {
                                this.onChangeCallback({
                                    value: this.calendar.value(),
                                    formattedValue: kendo.toString(this.calendar.value(), "M/d/yyyy")
                                });
                            }
                        });
                        if (this.value != null) {
                            this.setValue(this.value);
                        }
                    }
                    getPopUpOptions() {
                        return _.extend(super.getPopUpOptions(), {
                            skin: "white-no-padding",
                            position: "bottomright",
                            offset: { x: 4, y: 3 }
                        });
                    }
                    template() {
                        return `<div class="-pdjs-control-popup-calendar">
                        <div role="calendar" style="height:${this.height}px;width:${this.width}px;"></div>
                    </div>`;
                    }
                    setValue(value) {
                        this.calendar.value(value);
                    }
                }
                Controls.PopUpCalendar = PopUpCalendar;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class GridContextMenu extends Jade.UI.ContextMenu {
                    constructor(options) {
                        super({
                            container: `div[id=${options.grid.get_id()}]`,
                            filter: `TR[role=row][data-uid]`,
                            segments: options.segments
                        });
                    }
                }
                Controls.GridContextMenu = GridContextMenu;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class MultiSelect extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get items() {
                        let result = new Jade.Collection();
                        this.controls.each((control) => {
                            if (control instanceof Controls.MultiSelectItem) {
                                result.add(control);
                            }
                        });
                        return result;
                    }
                    get enabled() {
                        return this.state.get("enabled");
                    }
                    set enabled(value) {
                        this.state.set("enabled", value);
                    }
                    get onItemCheckedCallback() {
                        return this.state.get("onItemChecked", () => { });
                    }
                    get tabIndex() {
                        return this.state.get("tabIndex", -1);
                    }
                    set tabIndex(value) {
                        this.state.set("tabIndex", value);
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.node.on(Jade.BrowserEvent.CHANGE, "label input[type=checkbox]", _.bind(this.item_onChecked, this));
                    }
                    onStateChanged() {
                        if (this.node) {
                            this.node.prop("disabled", !this.enabled);
                        }
                        this.items.each((item) => {
                            item.enabled = this.enabled;
                            item.tabIndex = this.tabIndex;
                        });
                    }
                    focus() {
                        let item = this.items.first();
                        if (item != null) {
                            item.focus();
                        }
                    }
                    template() {
                        return `<div class="-pdjs-control-msl"></div>`;
                    }
                    item_onChecked(e) {
                        let controlId = $(e.target).parent().attr("id");
                        let control = this.controls.getById(controlId);
                        if (control != null && control instanceof Controls.MultiSelectItem) {
                            this.onItemCheckedCallback({
                                itemId: control.itemId,
                                checked: control.checked,
                                item: control
                            });
                        }
                    }
                }
                Controls.MultiSelect = MultiSelect;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class MultiSelectItem extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get itemId() {
                        return this.state.get("itemId");
                    }
                    get icon() {
                        return this.state.get("icon");
                    }
                    get label() {
                        return this.state.get("label");
                    }
                    get checked() {
                        return this.checkBoxNode.is(":checked");
                    }
                    set checked(value) {
                        this.checkBoxNode.prop("checked", value);
                    }
                    get enabled() {
                        return this.state.get("enabled");
                    }
                    set enabled(value) {
                        this.state.set("enabled", value);
                    }
                    get checkBoxNode() {
                        return this.node.find("input[type=checkbox]");
                    }
                    get labeNode() {
                        return this.node.find("span");
                    }
                    get tabIndex() {
                        return this.state.get("tabIndex", -1);
                    }
                    set tabIndex(value) {
                        this.state.set("tabIndex", value);
                    }
                    focus() {
                        this.checkBoxNode.focus();
                    }
                    template() {
                        if (this.icon != null) {
                            let url = Jade.IconSet.get("pd").resolve(this.icon, Jade.IconSetSizeSpecificDirectory.x16);
                            return `<label role="item">
                            <input type="checkbox" data-id="${this.itemId}" tabIndex="${this.tabIndex}" />
                            <span style="background-image:url(${url});">${this.label}</span>
                        </label>`;
                        }
                        return `<label role="item">
                        <input type="checkbox" data-id="${this.itemId}" tabIndex="${this.tabIndex}" />
                        <span style="padding-left:2px;">${this.label}</span>
                    </label>`;
                    }
                    onStateChanged() {
                        if (this.node) {
                            this.node.prop("disabled", !this.enabled);
                            this.checkBoxNode.prop("disabled", !this.enabled);
                            this.checkBoxNode.attr("tabIndex", this.tabIndex);
                            this.labeNode.css({
                                opacity: this.enabled ? 1 : .5
                            });
                        }
                    }
                }
                Controls.MultiSelectItem = MultiSelectItem;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                let NumericTextBoxType;
                (function (NumericTextBoxType) {
                    NumericTextBoxType[NumericTextBoxType["integer"] = 1] = "integer";
                    NumericTextBoxType[NumericTextBoxType["decimal"] = 2] = "decimal";
                })(NumericTextBoxType = Controls.NumericTextBoxType || (Controls.NumericTextBoxType = {}));
                class NumericTextBox extends Controls.MaskedTextBox {
                    constructor(options) {
                        super(options);
                    }
                    get numericType() {
                        return this.state.get("numericType");
                    }
                    get format() {
                        return this.state.get("format");
                    }
                    get value() {
                        return this.textNode.val();
                    }
                    set value(value) {
                        this.textNode.val(value);
                    }
                    get tabIndex() {
                        return this.state.get("tabIndex", -1);
                    }
                    set tabIndex(value) {
                        this.state.set("tabIndex", value);
                    }
                    get onValidateCallback() {
                        return this.state.get("onValidate", (isValid) => { });
                    }
                    input_onBlur(e) {
                        this.onValidateCallback(this.isValid());
                        this.setValue(this.value);
                        this.maskNode.show();
                        this.textNode.removeClass(PDJS.Canvas.Shared.CanvasCss.FormFieldFocus);
                    }
                    input_onFocus(e) {
                        this.onValidateCallback(this.isValid());
                        this.maskNode.hide();
                        this.textNode.addClass(PDJS.Canvas.Shared.CanvasCss.FormFieldFocus);
                    }
                    mask_onFocus(e) {
                        this.onValidateCallback(this.isValid());
                        this.maskNode.hide();
                        this.textNode.focus();
                        this.textNode.select();
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.textNode.on(Jade.BrowserEvent.BLUR, _.bind(this.input_onBlur, this));
                        this.textNode.on(Jade.BrowserEvent.FOCUS, _.bind(this.input_onFocus, this));
                        this.maskNode.on(Jade.BrowserEvent.FOCUS, _.bind(this.mask_onFocus, this));
                        this.setValue(this.value);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.maskNode.prop("disabled", !this.enabled);
                        this.textNode.prop("disabled", !this.enabled);
                        this.maskNode.attr("tabIndex", this.tabIndex);
                        this.textNode.attr("tabIndex", this.tabIndex);
                    }
                    isValid() {
                        let result = true;
                        let regex = null;
                        switch (this.numericType) {
                            case NumericTextBoxType.integer:
                                regex = /^[^a-zA-Z\.]+$/;
                                break;
                            case NumericTextBoxType.decimal:
                                regex = /^[^a-zA-Z]+$/;
                                break;
                        }
                        if (!this.isNull()) {
                            result = regex.test(this.value);
                        }
                        return result;
                    }
                    getValue() {
                        let result = null;
                        if (!this.isNull()) {
                            switch (this.numericType) {
                                case NumericTextBoxType.decimal:
                                    result = this.value;
                                    break;
                                case NumericTextBoxType.integer:
                                    result = this.value;
                                    break;
                            }
                        }
                        return result;
                    }
                    setValue(value) {
                        this.value = value == null ? "" : value;
                        if (this.isValid()) {
                            this.maskNode.val(kendo.toString(kendo.parseFloat(this.value), this.format));
                        }
                        else {
                            this.maskNode.val(this.value);
                        }
                    }
                    isNull() {
                        return this.value == null || this.value == "";
                    }
                }
                Controls.NumericTextBox = NumericTextBox;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class PanelMenuAction extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get description() {
                        return this.state.get("description", "");
                    }
                    get descriptionNode() {
                        return this.node.find("div[role=description]");
                    }
                    get icon() {
                        return this.state.get("icon", null);
                    }
                    get iconSet() {
                        return this.state.get("iconSet", "pd");
                    }
                    get label() {
                        return this.state.get("label", "");
                    }
                    get labelNode() {
                        return this.node.find("div[role=label]");
                    }
                    get url() {
                        return this.state.get("url", "#");
                    }
                    get hasUrl() {
                        return this.url != "#";
                    }
                    get clickCallback() {
                        return this.state.get("click");
                    }
                    template() {
                        return `<a href="${this.url}" class="-pdjs-ui-panel-menu-action">
                        <div role="label">${this.label}</div>
                        <div role="description">
                            ${this.description}
                        </div>
                    </a>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        if (this.hasUrl == false && this.clickCallback != null) {
                            this.node.on(Jade.BrowserEvent.CLICK, (e) => {
                                this.clickCallback(e);
                            });
                        }
                        this.descriptionNode.css({
                            display: Jade.String.isNullOrWhiteSpace(this.description) ? "none" : ""
                        });
                        if (!Jade.String.isNullOrWhiteSpace(this.icon)) {
                            this.node.css({
                                backgroundImage: `url(${Jade.IconSet.get(this.iconSet)
                                    .resolve(this.icon, Jade.IconSetSizeSpecificDirectory.x24)})`,
                                paddingLeft: this.icon != null ? "40px" : "10px"
                            });
                        }
                    }
                }
                Controls.PanelMenuAction = PanelMenuAction;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class PanelMenuHeading extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get label() {
                        return this.state.get("label", "");
                    }
                    template() {
                        return `<div class="-pdjs-ui-panel-menu-heading">${this.label}</div>`;
                    }
                }
                Controls.PanelMenuHeading = PanelMenuHeading;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class PanelMenuItem extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                }
                Controls.PanelMenuItem = PanelMenuItem;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class PanelMenuLink extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get url() {
                        return this.state.get("url", "#");
                    }
                    get label() {
                        return this.state.get("label", "");
                    }
                    get description() {
                        return this.state.get("description");
                    }
                    get clickCallback() {
                        return this.state.get("click");
                    }
                    get largeText() {
                        return this.state.get("largeText", false);
                    }
                    get linkNode() {
                        return this.node.children("a");
                    }
                    get target() {
                        return this.state.get("target");
                    }
                    template() {
                        return `<div class="-pdjs-ui-panel-menu-link"><a href="#">${this.label}</a></div>`;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        if (this.url != null) {
                            let url = Jade.Path.resolve(this.url);
                            this.linkNode.attr("href", url);
                        }
                        else if (this.clickCallback != null) {
                            this.node.on(Jade.BrowserEvent.CLICK, (e) => {
                                this.clickCallback(e);
                            });
                        }
                        if (this.largeText) {
                            this.linkNode.css({
                                fontSize: "16px"
                            });
                        }
                        if (this.target != null) {
                            this.linkNode.attr("target", this.target);
                        }
                        this.ensureTooltip();
                    }
                    ensureTooltip() {
                        if (Jade.String.isNullOrWhiteSpace(this.description)) {
                            return;
                        }
                        Tipped.create(this.linkNode, this.description, {
                            skin: "white",
                            radius: false,
                            shadow: false,
                            stem: true,
                            position: "leftmiddle",
                            showOn: "mouseenter",
                            hideAfter: 500,
                            hideDelay: 500,
                            maxWidth: 300,
                            fadeOut: 100,
                            showDelay: 0,
                            hideOn: "mouseleave",
                            hideOthers: true,
                            detach: true
                        });
                    }
                }
                Controls.PanelMenuLink = PanelMenuLink;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class PanelMenuSeperator extends Jade.UI.Control {
                    constructor() {
                        super({});
                    }
                    template() {
                        return "<hr/>";
                    }
                }
                Controls.PanelMenuSeperator = PanelMenuSeperator;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class PanelMenuTitle extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get label() {
                        return this.state.get("label", "");
                    }
                    template() {
                        return `<div class="-pdjs-ui-panel-menu-title">${this.label}</div>`;
                    }
                }
                Controls.PanelMenuTitle = PanelMenuTitle;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class PopUpItem extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get data() {
                        return this.state.get("data", {});
                    }
                    get uid() {
                        return this.resolveMap(this.uidMap);
                    }
                    get uidMap() {
                        return this.state.get("uidMap", "uid");
                    }
                    get label() {
                        return this.resolveMap(this.labelMap);
                    }
                    get labelMap() {
                        return this.state.get("labelMap", "label");
                    }
                    get icon() {
                        return this.resolveMap(this.iconMap);
                    }
                    get iconMap() {
                        return this.state.get("iconMap", "icon");
                    }
                    get clickCallback() {
                        return this.state.get("click", null);
                    }
                    template() {
                        let result = $(`<div data-role="item" data-id="${this.uid}" title="${this.label}" class="-pdjs-pop-up-item">${this.label}</div>`);
                        if (this.icon != null) {
                            result.css({
                                paddingLeft: "25px",
                                backgroundImage: `url(${Jade.IconSet.get("pd").resolve(this.icon, Jade.IconSetSizeSpecificDirectory.x16)})`
                            });
                        }
                        return result;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        if (_.isFunction(this.clickCallback)) {
                            this.node.on(Jade.BrowserEvent.CLICK, _.bind(this.clickCallback, this));
                        }
                    }
                    resolveMap(id, defaultValue) {
                        return this.state.get(`data.${id}`, defaultValue);
                    }
                }
                Controls.PopUpItem = PopUpItem;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class ProgressBar extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get backgroundColor() {
                        return this.state.get("backgroundColor", "#00FF00");
                    }
                    set backgroundColor(value) {
                        this.state.set("backgroundColor", value);
                    }
                    get color() {
                        return this.state.get("color", "#000000");
                    }
                    set color(value) {
                        this.state.set("color", value);
                    }
                    get height() {
                        return this.state.get("height", "25px");
                    }
                    get width() {
                        return this.state.get("width", "100%");
                    }
                    get showMessage() {
                        return this.state.get("showMessage", false);
                    }
                    get message() {
                        return this.state.get("message", null);
                    }
                    set message(value) {
                        this.state.set("message", value);
                    }
                    get percent() {
                        return this.state.get("percent", null);
                    }
                    set percent(value) {
                        this.state.set("percent", value);
                    }
                    get labelNode() {
                        return this.node.children("div[role=label]");
                    }
                    get barNode() {
                        return this.node.children("div[role=bar]");
                    }
                    template() {
                        return `
            <div class="-pdjs-progress-bar" style="height:${this.height};width:${this.width};">
                <div role="bar">&nbsp;</div>
                <div role="label" style="line-height:${this.height};">Label</div>
            </div>`;
                    }
                    update(args) {
                        if (args.backgroundColor != undefined) {
                            this.backgroundColor = args.backgroundColor;
                        }
                        if (args.color != undefined) {
                            this.color = args.color;
                        }
                        if (args.message != undefined) {
                            this.message = args.message;
                        }
                        if (args.percent != undefined) {
                            this.percent = args.percent;
                        }
                    }
                    onActivate(e) {
                        super.onActivate(e);
                    }
                    onStateChanged() {
                        super.onStateChanged();
                        this.labelNode.html(this.message);
                        this.node.css({
                            backgroundColor: "#FFFFFF"
                        });
                        this.labelNode.css({
                            color: this.color,
                            backgroundColor: "transparent"
                        });
                        this.barNode.css({
                            width: `${this.percent}%`,
                            color: this.color,
                            backgroundColor: this.backgroundColor
                        });
                    }
                }
                Controls.ProgressBar = ProgressBar;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class SingleSelectList extends Controls.ComboBoxOf {
                    constructor(options) {
                        super(options);
                    }
                    onSelectionChange(selection) {
                        super.onSelectionChange(selection);
                        if (this.selection != null) {
                            this.iconValue = selection.icon;
                            this.maskValue = selection.label;
                        }
                    }
                    createListItem(data) {
                        return new Controls.SingleSelectListItem({
                            data: data,
                            uidMap: "id",
                            labelMap: "label",
                            iconMap: "icon",
                        });
                    }
                    onFilter(e) {
                        if (!Jade.String.isNullOrWhiteSpace(e.term)) {
                            this.data.each((item) => {
                                if (item["label"].toLowerCase().indexOf(e.term.toLowerCase()) > -1) {
                                    e.result.add(item);
                                }
                            });
                        }
                        else {
                            e.result.insertRange(this.data.toArray());
                        }
                        e.complete();
                    }
                }
                Controls.SingleSelectList = SingleSelectList;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class SingleSelectListField extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get label() {
                        return this.state.get("label");
                    }
                    set label(value) {
                        this.state.set("label", value);
                    }
                    get labelNode() {
                        return this.node.find("div[role=label]");
                    }
                    get width() {
                        return this.state.get("width");
                    }
                    set width(value) {
                        this.state.set("width", value);
                    }
                    get input() {
                        return this.m_input;
                    }
                    get onValueChangedCallback() {
                        return this.state.get("onValueChanged", () => { });
                    }
                    get items() {
                        return this.state.get("items");
                    }
                    template() {
                        return `
                <div style="position:relative;height:50px;">
                    <div role="label" style="height:26px;position:absolute;top:0;right:0;left:0;font-family:arial;font-size:12px;line-height:26px;">${this.label}:</div>
                    <div role="input" style="height:24px;position:absolute;top:26px;right:0;left:0;" data-controls></div>
                </div>
            `;
                    }
                    onActivate(e) {
                        super.onActivate(e);
                        this.m_input = new Controls.SingleSelectList({
                            insertAt: "div[role=input]",
                            data: this.items,
                            onSelectionChanged: (e) => {
                                let item = this.input.selection;
                                if (item != null) {
                                    this.onValueChangedCallback({
                                        id: item.uid,
                                        label: item.label,
                                        icon: item.icon
                                    });
                                }
                                else {
                                    this.onValueChangedCallback(null);
                                }
                            }
                        });
                        this.controls.add(this.input);
                    }
                }
                Controls.SingleSelectListField = SingleSelectListField;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class SingleSelectListItem extends Controls.ComboBoxListItem {
                }
                Controls.SingleSelectListItem = SingleSelectListItem;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                class UploadInput extends Jade.UI.Control {
                    constructor(options) {
                        super(options);
                    }
                    get browseButtonNode() {
                        return this.node.find(".-pd-upload-input-button");
                    }
                    get labelNode() {
                        return this.node.find(".-pd-upload-input-label");
                    }
                    get scaleNode() {
                        return this.node.find(".-pd-upload-input-scale");
                    }
                    get uploadId() {
                        return this.m_uploadFile != null ? this.m_uploadFile.id : null;
                    }
                    get uploadName() {
                        return this.m_uploadFile != null ? this.m_uploadFile.name : null;
                    }
                    get uploadExtension() {
                        return this.m_uploadFile != null ? Jade.Path.getFileExtension(this.uploadName) : null;
                    }
                    get uploadUniqueName() {
                        return this.uploadId + this.uploadExtension;
                    }
                    get onFileSelectedCallback() {
                        return this.state.get("onFileSelected", () => { });
                    }
                    get onUploadStartCallback() {
                        return this.state.get("onUploadStart", () => { });
                    }
                    get onUploadCompleteCallback() {
                        return this.state.get("onUploadComplete", () => { });
                    }
                    template() {
                        return `
                <div class='-pd-upload-input'>
                    <div class='-pd-upload-input-progress'>
                        <div class='-pd-upload-input-background'></div>
                        <div class='-pd-upload-input-scale'>&nbsp;</div>
                        <div class='-pd-upload-input-label'>&nbsp;</div>
                    </div>
                    <input type='button' value='...' class='-pd-upload-input-button'/>
                </div>
            `;
                    }
                    onActivate(e) {
                        this.m_upload = new PDJS.JS.PD.Web.UI.Controls.Upload({
                            browse_button: this.browseButtonNode.get(0),
                            container: this.ID,
                            multi_selection: false,
                            onFileAdded: _.bind(this.upload_onFilesAdded, this),
                            onUploadStart: _.bind(this.upload_onStart, this),
                            onUploadProgress: _.bind(this.upload_onProgress, this),
                            onUploadComplete: _.bind(this.upload_onComplete, this),
                            onError: _.bind(this.upload_onError, this)
                        });
                    }
                    upload_onFilesAdded(e) {
                        this.m_uploadFile = _.first(e);
                        this.onFileSelectedCallback(this.m_uploadFile);
                        this.m_upload.start();
                    }
                    upload_onStart(e) {
                        this.browseButtonNode.prop("disabled", true);
                        this.onUploadStartCallback(this.m_uploadFile);
                    }
                    upload_onProgress(e) {
                        this.labelNode.text("Uploading file... " + e.percent + " %");
                        this.scaleNode.css({
                            width: e.percent + "%"
                        });
                    }
                    upload_onComplete(e) {
                        this.labelNode.text(this.uploadName);
                        this.scaleNode.css({
                            width: "0"
                        });
                        this.browseButtonNode.prop("disabled", false);
                        this.onUploadCompleteCallback(this.m_uploadFile);
                    }
                    upload_onError(e) {
                        Jade.UI.MessageDialog.open({
                            title: e.error.title,
                            message: e.error.message,
                            dialogStyle: Jade.UI.MessageDialogStyle.Error,
                            dialogButtons: Jade.UI.MessageDialogButtonStyle.OK,
                            select: (e) => {
                                e.close();
                            }
                        });
                        this.browseButtonNode.prop("disabled", false);
                    }
                }
                Controls.UploadInput = UploadInput;
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                var Fields;
                (function (Fields) {
                    class Field extends Jade.UI.Control {
                        constructor(options) {
                            super(options);
                            this.m_errors = new Jade.ObservableCollection(null, {
                                onAfterAdd: (e) => {
                                    this.onValidationErrorChange();
                                },
                                onAfterRemove: (e) => {
                                    this.onValidationErrorChange();
                                }
                            });
                            this.m_validators = new Jade.ObservableCollection(null, {
                                onAfterAdd: (e) => {
                                    e.item.field = this;
                                }
                            });
                        }
                        get enabled() {
                            return this.state.get("enabled", true);
                        }
                        set enabled(value) {
                            this.state.set("enabled", value);
                        }
                        get errors() {
                            return this.m_errors;
                        }
                        get validators() {
                            return this.m_validators;
                        }
                        get isValid() {
                            return this.errors.count == 0;
                        }
                        get label() {
                            return this.state.get("label");
                        }
                        get labelColor() {
                            return this.state.get("labelColor", "#000000");
                        }
                        get labelNode() {
                            return this.node.children("[role=label]");
                        }
                        get tooltip() {
                            return this.state.get("tooltip");
                        }
                        get required() {
                            return this.state.get("required", false);
                        }
                        get controlNode() {
                            return this.node.children("[role=control]");
                        }
                        focus() {
                        }
                        validate() {
                            this.errors.clear();
                            this.removeValidationErrorToolTip();
                            this.validators.each((validator) => {
                                if (!this.validatorValidate(validator)) {
                                    this.errors.add(new Fields.FieldValidationError({
                                        message: validator.getMessage(this.label)
                                    }));
                                }
                                ;
                            });
                            this.onValidationErrorChange();
                        }
                        template() {
                            return `<div class="-pdjs-shared-ui-field">
                        <div role="label">:</div>
                        <div role="control" data-controls></div>
                    </div>`;
                        }
                        hasValue() {
                            return true;
                        }
                        onInit(e) {
                            super.onInit(e);
                        }
                        onActivate(e) {
                            super.onActivate(e);
                            this.labelNode.css({
                                position: "absolute",
                                top: 0,
                                left: 0,
                                right: 0,
                                height: "26px",
                                lineHeight: "26px",
                                overflow: "hidden",
                                textOverflow: "ellipsis",
                                whiteSpace: "nowrap",
                                fontSize: "12px"
                            });
                            this.controlNode.css({
                                position: "absolute",
                                border: "1px solid #aaa",
                                backgroundColor: "#FFFFFF",
                                top: "26px",
                                left: 0,
                                right: 0,
                                bottom: 0,
                                boxSizing: "border-box"
                            });
                            if (this.required) {
                                this.validators.add(new Fields.FieldValidatorRequired());
                            }
                        }
                        onStateChanged() {
                            super.onStateChanged();
                            this.labelNode.text(`${this.label}:`);
                            this.labelNode.css({
                                color: this.required ? "#FF0000" : "#000000"
                            });
                            if (this.enabled) {
                                this.controlNode.removeClass(PDJS.Shared.UI.CssClass.Disabled);
                            }
                            else {
                                this.controlNode.addClass(PDJS.Shared.UI.CssClass.Disabled);
                            }
                        }
                        onValidationErrorChange() {
                            if (this.errors.count > 0) {
                                this.addValidationErrorToolTip();
                            }
                            else {
                                this.removeValidationErrorToolTip();
                            }
                        }
                        validatorValidate(validator) {
                            return true;
                        }
                        addValidationErrorToolTip() {
                            this.removeValidationErrorToolTip();
                            let message = "";
                            let icon = Jade.IconSet.get("pdjs").resolve("sign_warning.png", Jade.IconSetSizeSpecificDirectory.x16);
                            this.errors.each((error) => {
                                message += error.message;
                            });
                            Tipped.create(this.labelNode, message, {
                                skin: "validation-error"
                            });
                            this.node.addClass("-pdjs-validation-errors");
                            this.labelNode.css({
                                backgroundImage: `url(${icon})`
                            });
                        }
                        removeValidationErrorToolTip() {
                            Tipped.remove(this.labelNode);
                            this.node.removeClass("-pdjs-validation-errors");
                            this.labelNode.css({
                                backgroundImage: ""
                            });
                        }
                    }
                    Fields.Field = Field;
                })(Fields = Controls.Fields || (Controls.Fields = {}));
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                var Fields;
                (function (Fields) {
                    class ExpressionField extends Fields.Field {
                        get aceNode() {
                            return this.controlNode.children("[role=ace]");
                        }
                        get editor() {
                            return this.m_editor;
                        }
                        get value() {
                            return this.editor.getValue();
                        }
                        set value(value) {
                            this.editor.setValue(value || "", 0);
                            this.editor.clearSelection();
                        }
                        insertTag(text) {
                            this.editor.insert(`${text} ` || "");
                        }
                        focus() {
                            this.m_editor.focus();
                        }
                        blur() {
                            this.m_editor.blur();
                        }
                        hasValue() {
                            return !Jade.String.isNullOrWhiteSpace(this.value);
                        }
                        redraw() {
                            this.editor.resize();
                            this.editor.renderer.updateFull(true);
                        }
                        highlight(texts) {
                            let regex = new RegExp(texts.split(", ").join("|"), "gim");
                            this.editor.moveCursorTo(0, 0);
                            this.editor.clearSelection();
                            this.editor.findAll(null, {
                                needle: regex,
                                wholeWord: true,
                                range: null,
                                regEx: true,
                                backwards: true
                            }, true);
                        }
                        onActivate(e) {
                            super.onActivate(e);
                            this.controlNode.append(`<div role="ace" style="position:absolute;top:3px;right:0;bottom:0;left:0;"></div>`);
                            ace.config.set("basePath", Jade.Path.resolve("~/areas/shared/assets/external/ace"));
                            this.m_editor = ace.edit(this.aceNode.get(0));
                            this.editor.renderer.setShowPrintMargin(false);
                            this.editor.setShowFoldWidgets(false);
                            this.editor.getSession().setUseSoftTabs(true);
                            this.editor.setFontSize("14px");
                            this.editor.renderer.setShowGutter(false);
                            this.editor.setHighlightActiveLine(false);
                            this.editor.setTheme("ace/theme/pdjsexpression");
                            this.editor.commands.removeCommand("find");
                            this.editor.commands.removeCommand("showSettingsMenu");
                            this.editor.session.setMode({ path: "ace/mode/pdjsexpression", v: Date.now() });
                        }
                    }
                    Fields.ExpressionField = ExpressionField;
                })(Fields = Controls.Fields || (Controls.Fields = {}));
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                var Fields;
                (function (Fields) {
                    class FieldValidationError {
                        constructor(options) {
                            this.m_message = options.message;
                        }
                        get message() {
                            return this.m_message;
                        }
                    }
                    Fields.FieldValidationError = FieldValidationError;
                })(Fields = Controls.Fields || (Controls.Fields = {}));
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                var Fields;
                (function (Fields) {
                    class BooleanField extends Fields.Field {
                        constructor(options) {
                            super(options);
                        }
                        get checkboxLabel() {
                            return this.state.get("checkboxLabel");
                        }
                        get checkboxLabelNode() {
                            return this.controlNode.find("div[role=input-label]");
                        }
                        get checkboxNode() {
                            return this.controlNode.find("input[type=checkbox]");
                        }
                        get value() {
                            return this.state.get("value");
                        }
                        set value(value) {
                            this.state.set("value", value);
                        }
                        focus() {
                            this.checkboxNode.focus();
                        }
                        onActivate(e) {
                            super.onActivate(e);
                            this.node.css({
                                height: "50px"
                            });
                            this.controlNode.append(`<label>
                                        <input type="checkbox" ${this.value ? "checked" : ""} />
                                        <div role="input-label">
                                            ${this.checkboxLabel}
                                        </div>
                                    </label>`);
                            this.checkboxNode.prop("checked", this.value);
                            this.checkboxNode.css({
                                position: "absolute",
                                top: "4px",
                                left: "4px",
                            });
                            this.checkboxLabelNode.css({
                                position: "absolute",
                                top: 0,
                                left: "22px",
                                bottom: 0,
                                lineHeight: "22px"
                            });
                            this.controlNode.addClass(PDJS.Canvas.Shared.CanvasCss.BooleanField);
                        }
                    }
                    Fields.BooleanField = BooleanField;
                })(Fields = Controls.Fields || (Controls.Fields = {}));
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                var Fields;
                (function (Fields) {
                    class IntegerField extends Fields.Field {
                        get inputNode() {
                            return this.controlNode.find("input");
                        }
                        get value() {
                            let result = parseInt(this.inputNode.val());
                            return result == Number.NaN ? null : result;
                        }
                        set value(value) {
                            if (value == null) {
                                this.rawValue = "";
                            }
                            else {
                                this.rawValue = value.toString();
                            }
                        }
                        get rawValue() {
                            return this.inputNode.val();
                        }
                        set rawValue(value) {
                            this.inputNode.val(value);
                        }
                        focus() {
                            this.inputNode.get(0).focus();
                            this.inputNode.get(0).select();
                        }
                        hasValue() {
                            return !Jade.String.isNullOrWhiteSpace(this.value);
                        }
                        onActivate(e) {
                            super.onActivate(e);
                            this.controlNode.append(`<input type="text style=""/>`);
                            this.inputNode.css({
                                border: "0 none transparent",
                                height: "22px",
                                width: "100%",
                                paddingLeft: "5px",
                                boxSizing: "border-box",
                                position: "absolute",
                                top: 0,
                                right: 0,
                                left: 0,
                                fontSize: "12px"
                            });
                            this.node.css({
                                height: "50px"
                            });
                            this.validators.add(new Fields.FieldValidatorRegex({
                                message: `Value must be a number.`,
                                regularExpression: "^\\d*$",
                                expectedResult: true
                            }));
                            this.inputNode.on(Jade.BrowserEvent.BLUR, () => {
                                this.validate();
                            });
                        }
                        validatorValidate(validator) {
                            return validator.isValid(this.rawValue);
                        }
                    }
                    Fields.IntegerField = IntegerField;
                })(Fields = Controls.Fields || (Controls.Fields = {}));
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                var Fields;
                (function (Fields) {
                    class ProcessComboBox extends PDJS.Shared.UI.Controls.SingleSelectList {
                        get entityTypeId() {
                            return this.state.get("entityTypeId");
                        }
                        set entityTypeId(value) {
                            this.state.set("entityTypeId", value);
                        }
                        onActivate(e) {
                            super.onActivate(e);
                            if (this.entityTypeId != null) {
                                this.getRemoteData();
                            }
                        }
                        onStateChanged() {
                            super.onStateChanged();
                            if (this.state.hasChanged("entityTypeId")) {
                                this.getRemoteData();
                            }
                        }
                        getRemoteData() {
                            let service = new PDJS.Services.Process.ProcessService();
                            service.getProcesses({
                                entityTypeId: this.entityTypeId,
                                success: (e) => {
                                    let items = [];
                                    _.each(e.data, (item) => {
                                        items[items.length] = {
                                            id: item.id,
                                            label: item.name,
                                            icon: null
                                        };
                                    });
                                    this.data.clear();
                                    this.data.addRange(items);
                                    this.selection = null;
                                }
                            });
                        }
                    }
                    Fields.ProcessComboBox = ProcessComboBox;
                })(Fields = Controls.Fields || (Controls.Fields = {}));
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                var Fields;
                (function (Fields) {
                    class ProcessField extends Fields.Field {
                        constructor(options) {
                            super(options);
                        }
                        get entityTypeId() {
                            return this.state.get("entityTypeId");
                        }
                        set entityTypeId(value) {
                            this.state.set("entityTypeId", value);
                        }
                        get input() {
                            return this.m_input;
                        }
                        get onSelectionChangedCallback() {
                            return this.state.get("onSelectionChanged", () => { });
                        }
                        get processId() {
                            return this.input.selection != null
                                ? this.input.selection.id : null;
                        }
                        get processName() {
                            return this.input.selection != null
                                ? this.input.selection.label : null;
                        }
                        hasValue() {
                            return this.processId != null;
                        }
                        onInit(e) {
                            super.onInit(e);
                            this.m_input = new Fields.ProcessComboBox({
                                defaultMaskText: "Select...",
                                entityTypeId: this.entityTypeId,
                                onSelectionChanged: (e) => {
                                    let item = this.input.selection;
                                    let selection = null;
                                    if (item != null) {
                                        selection = {
                                            id: item.id,
                                            label: item.label,
                                            icon: item.icon
                                        };
                                    }
                                    this.onSelectionChangedCallback(selection);
                                }
                            });
                            this.controls.add(this.m_input);
                        }
                        onActivate(e) {
                            super.onActivate(e);
                            this.controlNode.css({
                                borderWidth: 0
                            });
                            this.node.addClass("-pdjs-shared-ui-single-select-field");
                            this.input.input.maskNode.removeAttr("tabIndex");
                        }
                        validatorValidate(validator) {
                            return validator.isValid(this.processId);
                        }
                    }
                    Fields.ProcessField = ProcessField;
                })(Fields = Controls.Fields || (Controls.Fields = {}));
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                var Fields;
                (function (Fields) {
                    class ProcessStatusComboBox extends PDJS.Shared.UI.Controls.SingleSelectList {
                        get processId() {
                            return this.state.get("processId");
                        }
                        set processId(value) {
                            this.state.set("processId", value);
                        }
                        onActivate(e) {
                            super.onActivate(e);
                            if (this.processId != null) {
                                this.getRemoteData();
                            }
                        }
                        onStateChanged() {
                            super.onStateChanged();
                            if (this.state.hasChanged("processId")) {
                                this.getRemoteData();
                            }
                        }
                        getRemoteData() {
                            let service = new PDJS.Services.Process.ProcessService();
                            if (this.processId == null) {
                                this.data.clear();
                                this.selection = null;
                                return;
                            }
                            service.getStatuses({
                                processId: this.processId,
                                success: (e) => {
                                    let items = [];
                                    _.each(e.data, (item) => {
                                        items[items.length] = {
                                            id: item.id,
                                            label: item.name,
                                            icon: item.icon
                                        };
                                    });
                                    this.data.clear();
                                    this.data.addRange(items);
                                    this.selection = null;
                                }
                            });
                        }
                    }
                    Fields.ProcessStatusComboBox = ProcessStatusComboBox;
                })(Fields = Controls.Fields || (Controls.Fields = {}));
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                var Fields;
                (function (Fields) {
                    class ProcessStatusField extends Fields.Field {
                        constructor(options) {
                            super(options);
                        }
                        get processId() {
                            return this.state.get("processId");
                        }
                        set processId(value) {
                            this.state.set("processId", value);
                        }
                        get statusId() {
                            return this.input.selection != null
                                ? this.input.selection.id : null;
                        }
                        get statusName() {
                            return this.input.selection != null
                                ? this.input.selection.label : null;
                        }
                        get statusIcon() {
                            return this.input.selection != null
                                ? this.input.selection.icon : null;
                        }
                        get input() {
                            return this.m_input;
                        }
                        get onSelectionChangedCallback() {
                            return this.state.get("onSelectionChanged", () => { });
                        }
                        hasValue() {
                            return this.statusId != null;
                        }
                        onStateChanged() {
                            super.onStateChanged();
                            this.input.processId = this.processId;
                            this.input.enabled = this.processId != null && this.enabled;
                        }
                        onInit(e) {
                            super.onInit(e);
                            this.m_input = new Fields.ProcessStatusComboBox({
                                defaultMaskText: "Select...",
                                processId: this.processId,
                                onSelectionChanged: (e) => {
                                    let item = this.input.selection;
                                    let selection = null;
                                    if (item != null) {
                                        selection = {
                                            id: item.id,
                                            label: item.label,
                                            icon: item.icon
                                        };
                                    }
                                    this.onSelectionChangedCallback(selection);
                                }
                            });
                            this.controls.add(this.m_input);
                        }
                        onActivate(e) {
                            super.onActivate(e);
                            this.controlNode.css({
                                borderWidth: 0
                            });
                            this.node.addClass("-pdjs-shared-ui-single-select-field");
                            this.input.input.maskNode.removeAttr("tabIndex");
                        }
                        validatorValidate(validator) {
                            return validator.isValid(this.statusId);
                        }
                    }
                    Fields.ProcessStatusField = ProcessStatusField;
                })(Fields = Controls.Fields || (Controls.Fields = {}));
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                var Fields;
                (function (Fields) {
                    class SingleSelectField extends Fields.Field {
                        get inputNode() {
                            return this.controlNode.find("input");
                        }
                        get input() {
                            return this.m_input;
                        }
                        get data() {
                            return this.input.data;
                        }
                        get value() {
                            let result = parseInt(this.inputNode.val());
                            return result == Number.NaN ? null : result;
                        }
                        set value(value) {
                            if (value == null) {
                                this.rawValue = "";
                            }
                            else {
                                this.rawValue = value.toString();
                            }
                        }
                        get rawValue() {
                            return this.inputNode.val();
                        }
                        set rawValue(value) {
                            this.inputNode.val(value);
                        }
                        get onValueChangedCallback() {
                            return this.state.get("onValueChanged", () => { });
                        }
                        hasValue() {
                            return !Jade.String.isNullOrWhiteSpace(this.value);
                        }
                        clear() {
                            this.input.data.clear();
                        }
                        onInit(e) {
                            super.onInit(e);
                            this.m_input = new Controls.SingleSelectList({
                                defaultMaskText: "Select...",
                                onSelectionChanged: (e) => {
                                    let item = this.input.selection;
                                    let selection = null;
                                    if (item != null) {
                                        selection = {
                                            id: item.id,
                                            label: item.label,
                                            icon: item.icon
                                        };
                                    }
                                    this.onValueChangedCallback(selection);
                                }
                            });
                            this.controls.add(this.m_input);
                        }
                        onActivate(e) {
                            super.onActivate(e);
                            this.controlNode.css({
                                borderWidth: 0
                            });
                            this.inputNode.on(Jade.BrowserEvent.BLUR, () => {
                                this.validate();
                            });
                            this.node.addClass("-pdjs-shared-ui-single-select-field");
                            this.input.input.maskNode.removeAttr("tabIndex");
                        }
                        validatorValidate(validator) {
                            return validator.isValid(this.rawValue);
                        }
                    }
                    Fields.SingleSelectField = SingleSelectField;
                })(Fields = Controls.Fields || (Controls.Fields = {}));
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                var Fields;
                (function (Fields) {
                    class StringField extends Fields.Field {
                        constructor(options) {
                            super(options);
                        }
                        get inputNode() {
                            return this.controlNode.find("input, textarea");
                        }
                        get value() {
                            return this.inputNode.val();
                        }
                        set value(value) {
                            this.inputNode.val(value);
                        }
                        get height() {
                            return this.state.get("height", 50);
                        }
                        get minLength() {
                            return this.state.get("minLength", 0);
                        }
                        get maxLength() {
                            return this.state.get("maxLength", null);
                        }
                        get multiline() {
                            return this.state.get("multiline", null);
                        }
                        get validateOnBlur() {
                            return this.state.get("validateOnBlur", true);
                        }
                        focus() {
                            this.inputNode.get(0).focus();
                            this.inputNode.get(0).select();
                        }
                        hasValue() {
                            return !Jade.String.isNullOrWhiteSpace(this.value);
                        }
                        onActivate(e) {
                            super.onActivate(e);
                            if (this.multiline) {
                                this.controlNode.append(`<textarea></textarea>`);
                            }
                            else {
                                this.controlNode.append(`<input type="text" />`);
                            }
                            this.inputNode.css({
                                border: "0 none transparent",
                                height: `100%`,
                                width: "100%",
                                paddingLeft: "5px",
                                boxSizing: "border-box",
                                position: "absolute",
                                top: 0,
                                right: 0,
                                left: 0,
                                fontSize: "12px"
                            });
                            this.node.css({
                                height: `${this.height}px`
                            });
                            this.inputNode.css({
                                position: "absolute",
                                boxSizing: "border-box",
                                top: 0,
                                right: 0,
                                left: 0,
                                bottom: 0
                            });
                            this.inputNode.on(Jade.BrowserEvent.BLUR, () => {
                                if (this.validateOnBlur) {
                                    this.validate();
                                }
                            });
                            if (!Jade.String.isNullOrWhiteSpace(this.value)) {
                                this.inputNode.val(this.value);
                            }
                        }
                        validatorValidate(validator) {
                            return validator.isValid(this.value);
                        }
                    }
                    Fields.StringField = StringField;
                })(Fields = Controls.Fields || (Controls.Fields = {}));
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                var Fields;
                (function (Fields) {
                    class FieldValidator {
                        constructor(options) {
                            this.m_message = options.message;
                        }
                        get field() {
                            return this.m_field;
                        }
                        set field(value) {
                            this.m_field = value;
                        }
                        get message() {
                            return this.m_message;
                        }
                        isValid(value) {
                            return true;
                        }
                        getMessage(fieldLabel) {
                            return Jade.String.format(this.message, fieldLabel);
                        }
                    }
                    Fields.FieldValidator = FieldValidator;
                })(Fields = Controls.Fields || (Controls.Fields = {}));
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                var Fields;
                (function (Fields) {
                    class FieldValidatorMultipleOf extends Fields.FieldValidator {
                        constructor(options) {
                            super(_.extend({
                                message: `Value must be a multiple of ${options.multipleOf}.`
                            }, options));
                            this.m_multipleOf = options.multipleOf;
                        }
                        get multipleOf() {
                            return this.m_multipleOf;
                        }
                        isValid(value) {
                            if (Jade.String.isNullOrWhiteSpace(value)) {
                                return true;
                            }
                            let numericValue = parseInt(value);
                            let result = true;
                            if (numericValue != null) {
                                result = (numericValue % this.multipleOf) == 0;
                            }
                            return result;
                        }
                    }
                    Fields.FieldValidatorMultipleOf = FieldValidatorMultipleOf;
                })(Fields = Controls.Fields || (Controls.Fields = {}));
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                var Fields;
                (function (Fields) {
                    class FieldValidatorRegex extends Fields.FieldValidator {
                        constructor(options) {
                            super(options);
                            this.m_expectedResult = options.expectedResult;
                            this.m_flags = options.flags;
                            this.m_regularExpression = options.regularExpression;
                        }
                        get expectedResult() {
                            return this.m_expectedResult;
                        }
                        get flags() {
                            return this.m_flags;
                        }
                        get regularExpression() {
                            return this.m_regularExpression;
                        }
                        isValid(value) {
                            let result = true;
                            let regEx = null;
                            if (Jade.String.isNullOrWhiteSpace(this.flags)) {
                                regEx = new RegExp(this.regularExpression);
                            }
                            else {
                                regEx = new RegExp(this.regularExpression, this.flags);
                            }
                            if (!Jade.String.isNullOrWhiteSpace(this.regularExpression) && !Jade.String.isNullOrWhiteSpace(value)) {
                                result = regEx.test(value) == this.expectedResult;
                            }
                            return result;
                        }
                    }
                    Fields.FieldValidatorRegex = FieldValidatorRegex;
                })(Fields = Controls.Fields || (Controls.Fields = {}));
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
var PDJS;
(function (PDJS) {
    var Shared;
    (function (Shared) {
        var UI;
        (function (UI) {
            var Controls;
            (function (Controls) {
                var Fields;
                (function (Fields) {
                    class FieldValidatorRequired extends Fields.FieldValidator {
                        constructor() {
                            super({ message: "Value is required." });
                        }
                        isValid(value) {
                            return !Jade.String.isNullOrWhiteSpace(value);
                        }
                    }
                    Fields.FieldValidatorRequired = FieldValidatorRequired;
                })(Fields = Controls.Fields || (Controls.Fields = {}));
            })(Controls = UI.Controls || (UI.Controls = {}));
        })(UI = Shared.UI || (Shared.UI = {}));
    })(Shared = PDJS.Shared || (PDJS.Shared = {}));
})(PDJS || (PDJS = {}));
//# sourceMappingURL=pdjs.js.map