var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        let CssClass;
        (function (CssClass) {
            CssClass["MultiMessageDialog"] = "-jadejs-multi-msg-dialog";
            CssClass["MultiMessageDialogTitle"] = "-jadejs-multi-msg-dialog-title";
            CssClass["MultiMessageDialogContent"] = "-jadejs-multi-msg-dialog-content";
            CssClass["MultiMessageDialogContentItem"] = "-jadejs-multi-msg-dialog-content-item";
            CssClass["MultipleChoiceDialog"] = "-jadejs-multi-choice-dialog";
            CssClass["MultipleChoiceDialogContent"] = "-jadejs-multi-choice-dialog-content";
            CssClass["MultipleChoiceDialogContentItem"] = "-jadejs-multi-choice-dialog-content-item";
            CssClass["MultipleChoiceDialogContentHeader"] = "-jadejs-multi-choice-dialog-content-header";
        })(CssClass = UI.CssClass || (UI.CssClass = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
Jade.Application.onStart(function () {
    $(window).resize(_.debounce(() => {
        Jade.Application
            .instance
            .contexts
            .global
            .events
            .publish(Jade.Events.BrowserResizedEvent);
    }, 250));
    $(window).focus(() => {
        Jade.Application
            .instance
            .contexts
            .global
            .events
            .publish(Jade.Events.BrowserFocusedEvent);
    });
});
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class Control {
            constructor(options) {
                this.m_node = null;
                this.m_state = null;
                this.m_controls = null;
                this.m_container = null;
                this.m_tags = null;
                this.m_firedEvents = new Jade.Collection();
                this.m_controls = new UI.ControlCollection(this);
                this.m_tags = new UI.ControlTagCollection();
                let init = () => {
                    this.setControlOptions(options);
                    this.wrapEventMethods();
                    this.setDomAttachment();
                };
                if (_.isFunction(options.beforeInit)) {
                    options.beforeInit({ continue: init });
                }
                else {
                    init();
                }
            }
            get type() {
                return this.constructor.toString();
            }
            get ID() {
                return this.state.get("id");
            }
            get controls() {
                return this.m_controls;
            }
            get state() {
                return this.m_state;
            }
            get node() {
                return this.m_node;
            }
            get insertAt() {
                return this.state.get("insertAt");
            }
            get container() {
                return this.m_container;
            }
            set container(value) {
                this.m_container = value;
            }
            get subscriptions() {
                return this.m_subscriptions;
            }
            get tags() {
                return this.m_tags;
            }
            get isDetached() {
                return this.node != null
                    && this.node.length > 0
                    && !$.contains(document.documentElement, this.node.get(0));
            }
            get isBrowserResizeAware() {
                return this.state.get("isBrowserResizeAware", false);
            }
            set isBrowserResizeAware(value) {
                this.setBrowserResizeAwareness(value);
                this.state.set("isBrowserResizeAware", value, {
                    silent: this.node == null
                });
            }
            onBrowserResize() {
            }
            onInit(e) {
            }
            onLoad(e) {
            }
            onTemplate(e) {
            }
            onTemplated(e) {
            }
            onRender(e) {
            }
            onActivate(e) {
            }
            onComplete(e) {
            }
            onDestroy(e) {
            }
            onDetach(e) {
            }
            onAttach(e) {
            }
            onStateChanged() {
            }
            template() {
                return "<div></div>";
            }
            destroy() {
                this.subscriptions.clear();
                this.onDestroy(new UI.ControlEventArgs(this));
                if (this.node != null) {
                    this.node.remove();
                }
            }
            detach() {
                this.onDetach(new UI.ControlEventArgs(this));
                this.node.detach();
            }
            attachToDOM(e) {
                if (this.container instanceof jQuery) {
                    if (this.state.get("replaceContainer") === true) {
                        this.container.replaceWith(this.node);
                    }
                    else {
                        this.container.append(this.node);
                    }
                    return;
                }
                var children = e.parent.controls, parentNode = this.insertAt != null ? e.node.find(this.insertAt) : e.insertAtNode, insertNode = $(), countOfChildren = children.count, insertAtIndex = children.indexOf(this), insertAtChild = null;
                if (insertAtIndex < countOfChildren) {
                    insertAtChild = children.item(insertAtIndex + 1);
                    if (insertAtChild != null) {
                        insertNode = parentNode.children("#" + insertAtChild.ID);
                    }
                }
                if (insertNode.length === 1) {
                    insertNode.before(this.node);
                }
                else {
                    parentNode.append(this.node);
                }
                this.onAttach(new UI.ControlEventArgs(this));
            }
            setControlOptions(options) {
                let mustCreateModel = this.m_state == null;
                let extendedOptions = null;
                if (mustCreateModel) {
                    extendedOptions = _.extend(this.getDefaultOptions(), options);
                    this.m_state = new Jade.StateBag();
                    this.m_state.set(extendedOptions);
                }
                if (!mustCreateModel) {
                    this.m_state.set(options);
                }
                if (options.id == null) {
                    this.state.set("id", UUID.genV4().toString(), { silent: true });
                }
                else {
                    this.state.set("id", options.id, { silent: true });
                }
            }
            getDefaultOptions() {
                return {};
            }
            fireEvent(eventName, args) {
                let isAttachedAndVaildEvent = !this.isDetached && !this.m_firedEvents.contains(eventName);
                let isDetachedAndVaildEvent = this.isDetached && UI.ControlEvents.detachedControlEvents.contains(eventName);
                if (isAttachedAndVaildEvent || isDetachedAndVaildEvent) {
                    this[eventName](args);
                    this.m_firedEvents.add(eventName);
                }
            }
            wrapEventMethods() {
                let encapsulatedFunctions = {};
                encapsulatedFunctions[UI.ControlEvent.onTemplate] = (e) => {
                    this.setTemplate(e);
                };
                encapsulatedFunctions[UI.ControlEvent.onRender] = (e) => {
                    this.attachToDOM(e);
                };
                encapsulatedFunctions[UI.ControlEvent.onComplete] = () => {
                    this.state.on("change", (e) => {
                        this.onStateChanged();
                    }, this);
                    this.onStateChanged();
                };
                encapsulatedFunctions[UI.ControlEvent.onDestroy] = (e) => {
                    this.controls.each((control) => {
                        if (control != null) {
                            control.destroy();
                        }
                    });
                };
                this.m_subscriptions = new UI.ControlEventSubscriptions();
                UI.ControlEvents.autoInvokedControlEvents.each((eventName) => {
                    this.wrapAndAssignEventMethod(eventName, encapsulatedFunctions[eventName]);
                });
                this.wrapAndAssignEventMethod(UI.ControlEvent.onDestroy, encapsulatedFunctions[UI.ControlEvent.onDestroy]);
            }
            wrapAndAssignEventMethod(eventName, encapsulatedFunction) {
                let eventFn = this[eventName];
                let eventStartFn = this[eventName + "Start"];
                let eventCompleteFn = this[eventName + "Complete"];
                let eventFunctionWrapped = null;
                eventFunctionWrapped = (e) => {
                    if (eventStartFn != null) {
                        eventStartFn.call(this, e);
                    }
                    if (_.isFunction(encapsulatedFunction)) {
                        encapsulatedFunction(e);
                    }
                    eventFn.call(this, e);
                    this.controls.controlEvents.fireEvent(eventName);
                    if (eventCompleteFn != null) {
                        eventCompleteFn.call(this, e);
                    }
                };
                this[eventName] = eventFunctionWrapped;
            }
            fireEvents() {
                var args = new UI.ControlEventArgs(this);
                UI.ControlEvents.autoInvokedControlEvents.each((eventName) => {
                    if (!this.m_firedEvents.contains(eventName)) {
                        this.fireEvent(eventName, args);
                        this.m_firedEvents.add(eventName);
                    }
                });
            }
            wrapTemplate(template) {
                return template;
            }
            setTemplate(e) {
                var template = this.parseTemplate();
                template = this.wrapTemplate(template);
                template.attr("id", this.ID);
                this.m_node = template;
            }
            parseTemplate() {
                var template = this.template();
                var result = null;
                if (template == null) {
                    throw "Call to method \"template\" returned a NULL value.";
                }
                switch (true) {
                    case template instanceof jQuery:
                        result = template;
                        break;
                    case _.isArray(template):
                        result = $(template.join(""));
                        break;
                    case _.isString(template):
                        result = $(template);
                        break;
                    default:
                        throw "The value returned by the \"template\" method is invalid.";
                }
                if (result != null) {
                    if (result.get(0) != null && result.get(0).hasAttribute("data-controls")) {
                        result.data("controls", this.ID);
                        result.attr("data-controls", this.ID);
                    }
                    else {
                        result.find("[data-controls]").data("controls", this.ID);
                        result.find("[data-controls]").attr("data-controls", this.ID);
                    }
                }
                return result;
            }
            setDomAttachment() {
                let container = this.state.get("container");
                if (_.isString(container)) {
                    container = $(container);
                }
                if (container instanceof jQuery) {
                    this.container = container;
                    this.fireEvents();
                    return;
                }
                let insertAt = this.state.get("insertAt");
                if (_.isString(insertAt)) {
                    insertAt = $(insertAt);
                }
            }
            setBrowserResizeAwareness(isAware) {
                if (isAware) {
                    this.m_onBrowserResizeSubscription =
                        this.subscriptions.add(Jade.Events.BrowserResizedEvent, () => {
                            this.onBrowserResize();
                        }, Jade.Application.instance.contexts.global.events);
                }
                else {
                    if (this.m_onBrowserResizeSubscription != null) {
                        this.m_onBrowserResizeSubscription.unsubscribe();
                    }
                }
            }
        }
        UI.Control = Control;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ContextMenu extends UI.Control {
            constructor(options) {
                super(options);
            }
            get closeCallback() {
                return this.m_closeCallback || ((e) => { });
            }
            get filter() {
                return this.state.get("filter");
            }
            get items() {
                return this.m_items;
            }
            get segments() {
                return this.m_segments;
            }
            get instance() {
                return this.m_instance;
            }
            get openCallback() {
                return this.m_openCallback || ((e) => { });
            }
            onInit(e) {
                this.m_items = new UI.ContextMenuItemCollection();
                this.m_segments = new Jade.Collection();
            }
            onActivate(e) {
                var items = [];
                this.items.each((item) => {
                    items[items.length] = item.toJSON();
                });
                this.iterateNodes(items, function (item) {
                    delete item.imageUrl;
                    delete item.spriteCssClass;
                });
                if (this.state.get("open")) {
                    this.m_openCallback = this.state.get("open");
                    this.state.unset("open");
                }
                if (this.state.get("close")) {
                    this.m_closeCallback = this.state.get("close");
                    this.state.unset("close");
                }
                let options = this.mergeOptions({
                    dataSource: items,
                    select: _.bind(this.onClick, this),
                    open: _.bind(this.onOpen, this),
                    filter: this.filter,
                    close: _.bind(this.onClose, this),
                });
                this.m_instance = this.node.kendoContextMenu(options).data("kendoContextMenu");
            }
            onClick(e) {
                let item = null;
                let node = $(e.item);
                let id = node.find(".k-link:first > [data-id]").data("id");
                this.iterateItems(this.items, function (i) {
                    if (i.ID === id) {
                        item = i;
                        return false;
                    }
                });
                this.segments.each((segment) => {
                    segment.click(this, node, item);
                });
            }
            onClose(e) {
                this.closeCallback(e);
            }
            onOpen(e) {
                let node = $(e.target);
                this.segments.each((segment) => {
                    segment.open(this, node);
                });
                this.openCallback(e);
            }
            onTemplate(e) {
                super.onTemplate(e);
                this.addSegments(e);
                this.addItems(e);
            }
            onDestroy(e) {
                if (this.instance != null) {
                    this.instance.destroy();
                }
            }
            template() {
                return "<ul class='-jadejs-context-menu'></ul>";
            }
            mergeOptions(settings) {
                let result = null;
                result = this.state.extend(settings, {
                    animation: {
                        open: {
                            effects: "fadeIn",
                            duration: 150
                        },
                        close: {
                            effects: "none"
                        }
                    },
                    target: this.state.get("target", undefined),
                    filter: this.state.get("filter", undefined),
                    showOn: this.state.get("showOn", undefined),
                    direction: this.state.get("direction", "default"),
                    alignToAnchor: this.state.get("alignToAnchor", false),
                    orientation: this.state.get("orientation", "vertical")
                });
                return result;
            }
            addSegments(e) {
                let pendingSegments = this.state.get("segments", []);
                if (!_.isArray(pendingSegments)) {
                    pendingSegments = [pendingSegments];
                }
                let resolvedSegments = this.resolveSegments(pendingSegments);
                resolvedSegments.each((segment) => {
                    if (segment.meetsLoadConditions(e)) {
                        this.segments.add(segment);
                    }
                });
            }
            resolveSegments(source) {
                let result = new Jade.Collection();
                _.each(source, (item) => {
                    let type = Jade.Type.getType(item.type);
                    let ctxt = item.context || (() => { });
                    let instance = new type(ctxt);
                    result.add(instance);
                });
                return result;
            }
            addItems(e) {
                this.segments.each((segment) => {
                    segment.onAddItems(new UI.ContextMenuOnAddItemsEventArgs({
                        menu: this,
                        items: this.items,
                        segment: segment
                    }));
                });
            }
            iterateItems(items, callback) {
                let abort = false;
                items.each((item) => {
                    var abort = false;
                    if (_.isFunction(callback)) {
                        abort = callback(item) === false;
                    }
                    return !abort;
                });
            }
            iterateNodes(items, callback) {
                let abort = false;
                _.each(items, (item) => {
                    if (_.isFunction(callback)) {
                        abort = callback(item) === false;
                    }
                    if (!abort && item.items) {
                        this.iterateNodes(item.items, callback);
                    }
                });
            }
        }
        UI.ContextMenu = ContextMenu;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ContextMenuEventArgs {
            constructor(options) {
                this.m_menu = options.menu;
                this.m_target = options.target;
                this.m_context = UI.ContextMenuUtil.transformContext(options.context);
            }
            get menu() {
                return this.m_menu;
            }
            get target() {
                return this.m_target;
            }
            get context() {
                return this.m_context;
            }
        }
        UI.ContextMenuEventArgs = ContextMenuEventArgs;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ContextMenuItemBase {
            constructor(options) {
                this.m_state = null;
                this.m_items = null;
                this.m_items = [];
                this.setOptions(options);
            }
            get items() {
                return this.m_items;
            }
            get state() {
                return this.m_state;
            }
            get ID() {
                return this.state.get("id");
            }
            onInit(e) {
                this.state.set(this.getDefaultOptions());
            }
            onLoad(e) {
            }
            onComplete(e) {
            }
            onClick(e) {
            }
            onOpen(e) {
                let openCallback = this.state.get("open", () => { });
                if (_.isFunction(openCallback)) {
                    openCallback(e);
                }
            }
            init(e = {}) {
                this.onInit(e);
            }
            load(e = {}) {
                this.onLoad(e);
            }
            complete(e = {}) {
                this.onComplete(e);
            }
            click(e = {}) {
                this.onClick(e);
            }
            open(e = {}) {
                let id = this.state.get("id");
                let selector = Jade.String.format("[data-id={0}]", this.ID);
                let node = $(e.menu.instance.element).find(selector).closest("LI");
                this.onOpen(new UI.ContextMenuItemOpenEventArgs({
                    menu: e.menu,
                    item: this,
                    node: node,
                    target: e.target,
                    context: e.context
                }));
            }
            toJSON() {
                let result = null;
                result = _.extend(this.state.toJSON(), {
                    text: this.applyTemplate(),
                    encoded: false,
                    attributes: {
                        "data-id": this.state.get("id")
                    }
                });
                return result;
            }
            getDefaultOptions() {
                return {
                    imageUrl: null,
                    id: UUID.genV4().toString(),
                    enable: true,
                    open: true,
                    overflow: "auto",
                    text: "",
                    type: "button",
                    cssClass: ""
                };
            }
            setOptions(options) {
                let mustCreateModel = this.m_state == null;
                let extendedOptions = null;
                if (mustCreateModel) {
                    extendedOptions = _.extend(this.getDefaultOptions(), options);
                    this.m_state = new Jade.StateBag(extendedOptions);
                }
                else {
                    this.m_state.set(options);
                }
            }
            applyTemplate(data) {
                let template = this.state.get("template");
                data = data || this.state.toJSON();
                if (!template) {
                    template = new UI.ContextMenuItemTemplate();
                }
                return template.apply(data);
            }
        }
        UI.ContextMenuItemBase = ContextMenuItemBase;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ContextMenuItem extends UI.ContextMenuItemBase {
            constructor(options) {
                super(options);
            }
            get command() {
                return this.m_command;
            }
            onInit(e) {
                super.onInit(e);
                this.assignCommand(this.state.toJSON());
            }
            onClick(e) {
                if (_.isFunction(this.command)) {
                    this.command(e);
                }
            }
            assignCommand(e) {
                let isFunction = _.isFunction(e);
                let isObjectWithCommand = _.isObject(e) && _.isFunction(e.command);
                let isCommandObject = _.isObject(e) && _.isFunction(e.execute);
                switch (true) {
                    case isFunction || isCommandObject:
                        this.m_command = e;
                        break;
                    case isObjectWithCommand:
                        this.m_command = e.command;
                        break;
                }
            }
        }
        UI.ContextMenuItem = ContextMenuItem;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ContextMenuItemCollection extends Jade.Collection {
            contains(item) {
                var result = false;
                result = _.find(this.innerList, (menuItem) => {
                    return item.ID === menuItem.ID;
                }) != null;
                return result;
            }
        }
        UI.ContextMenuItemCollection = ContextMenuItemCollection;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ContextMenuItemCommand extends UI.ContextMenuItemBase {
            constructor(options) {
                super(options);
                this.m_commandBag = new UI.CommandBag({
                    contextId: this.state.get("contextId"),
                    commandId: this.state.get("commandId")
                });
            }
            get commandBag() {
                return this.m_commandBag;
            }
            onClick(e) {
                if (this.commandBag.command.enabled) {
                    this.commandBag.execute(e);
                }
            }
            onOpen(e) {
                this.commandBag.bind();
                if (!this.commandBag.isCommandResolved()) {
                    return;
                }
                var bindingFn = () => {
                    _.bind(this.bind, this)(e);
                };
                this.commandBag.command.bind(bindingFn);
            }
            bind(e) {
                let template = null;
                let item = e.node.find(".-jadejs-ctx-menu-item");
                let command = this.commandBag.command;
                item.empty();
                template = this.getTemplate({
                    id: this.ID,
                    text: command.props.get("label"),
                    imageUrl: command.getIcon(Jade.IconSetSizeSpecificDirectory.x16, command.props.get("icon"))
                });
                if (command.props.get("visible")) {
                    e.node.removeClass("hidden");
                }
                else {
                    e.node.addClass("hidden");
                }
                e.menu.instance.enable(item, command.props.get("enabled"));
                item.html(template.html());
            }
            getTemplate(data) {
                let result = this.applyTemplate(data);
                return $(result);
            }
            setDefaultValues(e) {
            }
        }
        UI.ContextMenuItemCommand = ContextMenuItemCommand;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ContextMenuItemOpenEventArgs {
            constructor(options) {
                this.m_menu = options.menu;
                this.m_item = options.item;
                this.m_node = options.node;
                this.m_target = options.target;
                this.m_context = options.context;
            }
            get menu() {
                return this.m_menu;
            }
            get item() {
                return this.m_item;
            }
            get node() {
                return this.m_node;
            }
            get target() {
                return this.m_target;
            }
            get context() {
                return this.m_context;
            }
            enabled(value) {
                this.menu.instance.enable(this.node, value);
            }
            label(value) {
                this.node.find(".-pd-menu-text").empty();
                this.node.find(".-pd-menu-text").append(value);
            }
            icon(value) {
            }
            visible(value) {
                value === true ? this.node.show() : this.node.hide();
            }
        }
        UI.ContextMenuItemOpenEventArgs = ContextMenuItemOpenEventArgs;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ContextMenuItemTemplate {
            apply(e = {}) {
                let result = "";
                if (e.separator) {
                    result = `<div class='-jadejs-ctx-menu-sep'></div>`;
                }
                else {
                    result = [
                        "<span data-id='" + e.id + "' class='-jadejs-ctx-menu-item'>",
                        "<span class='-jadejs-ctx-menu-icon'>",
                        e.imageUrl != null ? "<img src='" + e.imageUrl + "'>" : "",
                        "</span>",
                        "<span class='-jadejs-ctx-menu-text'>",
                        e.text || e.label,
                        "</span>",
                        "</span>"
                    ].join("");
                }
                return result;
            }
        }
        UI.ContextMenuItemTemplate = ContextMenuItemTemplate;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ContextMenuOnAddItemsEventArgs {
            constructor(options) {
                this.m_items = options.items;
                this.m_menu = options.menu;
                this.m_segment = options.segment;
            }
            addItem(item) {
                this.m_items.add(item);
                this.m_segment.items.add(item);
            }
            addSeparator() {
                this.addItem(new UI.ContextMenuItem({
                    separator: true,
                    cssClass: "separator"
                }));
            }
        }
        UI.ContextMenuOnAddItemsEventArgs = ContextMenuOnAddItemsEventArgs;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ContextMenuSegment {
            constructor(context) {
                this.m_items = new UI.ContextMenuItemCollection();
                this.m_oldContext = context;
                this.m_newContext = UI.ContextMenuUtil.transformContext(context);
            }
            get oldContext() {
                return this.m_newContext;
            }
            get context() {
                return this.m_newContext;
            }
            get items() {
                return this.m_items;
            }
            onAddItems(e) {
            }
            meetsLoadConditions(e) {
                return true;
            }
            open(menu, target) {
                let args = new UI.ContextMenuEventArgs({
                    menu: menu,
                    target: target,
                    context: this.oldContext
                });
                this.onOpen(args);
                this.items.each((item) => {
                    item.open(args);
                });
                this.hidePairedSeparators(menu);
            }
            click(menu, target, item) {
                let args = new UI.ContextMenuEventArgs({
                    menu: menu,
                    target: target,
                    context: this.oldContext
                });
                this.onClick(args);
                item.click(args);
            }
            onOpen(e) {
            }
            onClick(e) {
            }
            hidePairedSeparators(menu) {
                let items = menu.instance.element.find("LI");
                items.each((index, element) => {
                    var item = $(element);
                    var isCurrSeparator = item.hasClass("separator");
                    if (isCurrSeparator) {
                        let prev = item.prev("LI").not(".hidden").first();
                        let isPrevSeparator = prev.hasClass("separator");
                        let hasNoVisibleSibling = prev.length === 0;
                        if (isPrevSeparator || hasNoVisibleSibling) {
                            item.addClass("hidden");
                        }
                        else {
                            item.removeClass("hidden");
                        }
                    }
                });
                var last = items.not(".hidden").last();
                if (last.hasClass("separator")) {
                    last.addClass("hidden");
                }
            }
        }
        UI.ContextMenuSegment = ContextMenuSegment;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ContextMenuUtil {
            static transformContext(context, target = {}) {
                let result = {};
                switch (true) {
                    case _.isFunction(context):
                        result = context(target);
                        break;
                    case _.isObject(context):
                        result = context;
                        break;
                }
                return result;
            }
        }
        UI.ContextMenuUtil = ContextMenuUtil;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class CommandBag {
            constructor(options) {
                this.m_options = new Jade.StateBag(options);
                this.bind();
            }
            get context() {
                return this.ensureContext();
            }
            get contextId() {
                return this.options.get("contextId");
            }
            get commandContext() {
                return this.context.commands;
            }
            get commandId() {
                return this.options.get("commandId");
            }
            get command() {
                return this.m_command;
            }
            get options() {
                return this.m_options;
            }
            execute(e) {
                if (this.command != null) {
                    this.commandContext.execute(this.commandId, e);
                }
            }
            bind() {
                this.ensureCommandInfo();
            }
            isCommandResolved() {
                return this.m_commandInfo != null &&
                    this.m_commandInfo.command != null;
            }
            ensureCommandInfo() {
                if (this.m_commandInfo != null || this.commandId == null) {
                    return;
                }
                this.m_commandInfo = this.commandContext.resolve(this.commandId);
                if (this.isCommandResolved()) {
                    this.m_command = this.m_commandInfo.command;
                }
            }
            ensureContext() {
                let result = Jade
                    .Application
                    .instance
                    .contexts
                    .getContextById(this.contextId);
                if (result == null) {
                    result = Jade
                        .Application
                        .instance
                        .contexts
                        .current;
                }
                return result;
            }
        }
        UI.CommandBag = CommandBag;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ControlCollection extends Jade.ObservableMappedCollection {
            constructor(parent, callbacks) {
                super({ key: "ID", data: new Array() });
                this.m_parent = null;
                this.m_controlEvents = new UI.ControlCollectionControlEvents(this);
                this.m_parent = parent;
            }
            get parent() {
                return this.m_parent;
            }
            get controlEvents() {
                return this.m_controlEvents;
            }
            add(item) {
                var result = false;
                this.executeChange("Add", item, this.count - 1, () => {
                    result = super.add(item);
                    if (result) {
                        this.controlEvents.syncControlEvents(item);
                    }
                });
                return result;
            }
            detach(item) {
                this.executeChange("Detach", item, this.indexOf(item), () => {
                    super.remove(item);
                    if (item.node != null) {
                        item.node.detach();
                    }
                });
            }
            insert(item, index) {
                var result = false;
                this.executeChange("Insert", item, index, () => {
                    result = super.insert(item, index);
                    if (result) {
                        this.controlEvents.syncControlEvents(item);
                    }
                });
                return result;
            }
            remove(item) {
                this.executeChange("Remove", item, this.indexOf(item), () => {
                    super.remove(item);
                    item.destroy();
                });
                return item;
            }
            clear() {
                let copy = this.innerList.slice(0);
                _.each(copy, (item) => {
                    this.remove(item);
                });
            }
            reverse() {
                _.reverse(this.innerList);
            }
            getById(id) {
                return this.map[id];
            }
        }
        UI.ControlCollection = ControlCollection;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ControlCollectionControlEvents {
            constructor(collection) {
                this.m_collection = null;
                this.m_firedEvents = [];
                this.m_collection = collection;
            }
            get collection() {
                return this.m_collection;
            }
            get firedEvents() {
                return this.m_firedEvents;
            }
            hasEventFired(eventName) {
                return this.firedEvents.indexOf(eventName) > -1;
            }
            fireEvent(eventName) {
                this.collection.each((control) => {
                    this.fireControlEvent(control, eventName);
                });
                this.addToFiredEvents(eventName);
            }
            syncControlEvents(item) {
                _.each(this.firedEvents, (eventName) => {
                    this.fireControlEvent(item, eventName);
                });
            }
            fireControlEvent(item, eventName) {
                item.fireEvent(eventName, new UI.ControlEventArgs(this.collection.parent));
            }
            addToFiredEvents(eventName) {
                var eventHasBeenFired = _.indexOf(this.firedEvents, eventName) > -1;
                if (!eventHasBeenFired) {
                    this.firedEvents[this.firedEvents.length] = eventName;
                }
            }
        }
        UI.ControlCollectionControlEvents = ControlCollectionControlEvents;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ControlEventArgs {
            constructor(parent) {
                this.m_parent = null;
                this.m_parent = parent;
            }
            get parent() {
                return this.m_parent;
            }
            get node() {
                return this.parent.node;
            }
            get insertAtNode() {
                let result = this.node;
                let insert = null;
                if (this.parent.node != null) {
                    insert = this.parent.node.find(`[data-controls='${this.parent.ID}']`).first();
                }
                if (insert != null && insert.length > 0) {
                    result = insert;
                }
                return result;
            }
        }
        UI.ControlEventArgs = ControlEventArgs;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ControlEventSubscriptions {
            constructor() {
                this.m_subscriptions = [];
            }
            get subscriptions() {
                return this.m_subscriptions;
            }
            get eventBus() {
                return Jade.Application.instance.contexts.current.events;
            }
            add(args1, args2, args3) {
                let result = null;
                if (args1 instanceof Jade.EventBusSubscription) {
                    result = args1;
                    this.subscriptions.push(result);
                }
                if (_.isString(args1) && _.isFunction(args2)) {
                    args3 = args3 || this.eventBus;
                    result = args3.subscribe(args1, args2);
                    this.subscriptions.push(result);
                }
                return result;
            }
            clear() {
                this.subscriptions.forEach(subscription => {
                    subscription.unsubscribe();
                });
                this.m_subscriptions = [];
            }
        }
        UI.ControlEventSubscriptions = ControlEventSubscriptions;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        let ControlEvent;
        (function (ControlEvent) {
            ControlEvent["onInit"] = "onInit";
            ControlEvent["onLoad"] = "onLoad";
            ControlEvent["onTemplate"] = "onTemplate";
            ControlEvent["onRender"] = "onRender";
            ControlEvent["onActivate"] = "onActivate";
            ControlEvent["onComplete"] = "onComplete";
            ControlEvent["onDestroy"] = "onDestroy";
            ControlEvent["onDetach"] = "onDetach";
        })(ControlEvent = UI.ControlEvent || (UI.ControlEvent = {}));
        class ControlEvents {
            static get autoInvokedControlEvents() {
                return this.m_autoInvokedControlEvents;
            }
            static get detachedControlEvents() {
                return this.m_detachedControlEvents;
            }
        }
        ControlEvents.m_autoInvokedControlEvents = new Jade.Collection([
            ControlEvent.onInit,
            ControlEvent.onLoad,
            ControlEvent.onTemplate,
            ControlEvent.onRender,
            ControlEvent.onActivate,
            ControlEvent.onComplete
        ]);
        ControlEvents.m_detachedControlEvents = new Jade.Collection([
            ControlEvent.onRender
        ]);
        UI.ControlEvents = ControlEvents;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ControlTagCollection {
            constructor() {
                this.m_collection = {};
            }
            add(tags) {
                switch (true) {
                    case _.isArray(tags):
                        this.addTags(tags);
                        break;
                    case _.isString(tags):
                        this.addTag(tags);
                        break;
                }
            }
            remove(tags) {
                switch (true) {
                    case _.isArray(tags):
                        this.removeTags(tags);
                        break;
                    case _.isString(tags):
                        this.removeTag(tags);
                        break;
                }
            }
            match(tags, exactMatch = false) {
                let result = null;
                _.each(tags, (tag) => {
                    if (exactMatch) {
                        if (result !== false) {
                            result = tag in this.m_collection;
                        }
                    }
                    else {
                        if (result !== true) {
                            result = tag in this.m_collection;
                        }
                    }
                });
                if (result === null) {
                    result = false;
                }
                return result;
            }
            addTag(tag) {
                if (tag == null) {
                    return;
                }
                tag = tag.toLowerCase();
                if (!(tag in this.m_collection)) {
                    this.m_collection[tag] = true;
                }
            }
            addTags(tags) {
                _.each(tags, (tag) => {
                    this.addTag(tag);
                });
            }
            removeTag(tag) {
                if (tag == null) {
                    return;
                }
                tag = tag.toLowerCase();
                if (tag in this.m_collection) {
                    delete this.m_collection[tag];
                }
            }
            removeTags(tags) {
                _.each(tags, (tag) => {
                    this.addTag(tag);
                });
            }
        }
        UI.ControlTagCollection = ControlTagCollection;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ToolBar extends UI.Control {
            constructor(options) {
                super(options);
            }
            get segments() {
                return this.m_segments;
            }
            get items() {
                return this.m_items;
            }
            get instance() {
                return this.m_instance;
            }
            onInit(e) {
                this.m_items = new UI.ToolBarItemCollection();
                this.m_segments = new Jade.ObservableCollection([], {
                    onAfterAdd: (e) => {
                        this.controls.clear();
                        if (this.controls.controlEvents.hasEventFired(UI.ControlEvent.onTemplate)) {
                        }
                        this.segments.each((segment) => {
                            if (segment.meetsLoadConditions(e)) {
                            }
                        });
                    },
                    onAfterRemove: () => { }
                });
            }
            onTemplate(e) {
                super.onTemplate(e);
                this.addSegments(e);
                this.addItems(e);
            }
            onActivate(e) {
                var items = this.items.transform((item) => {
                    item.toolbar = this;
                    return item.toJSON();
                });
                this.m_instance = this.node.kendoToolBar({
                    items: items,
                    click: (e) => {
                        this.onClick(e);
                    },
                    toggle: (e) => {
                        this.onClick(e);
                    }
                }).data("kendoToolBar");
                this.items.each((item) => {
                    if (_.isFunction(item.activate)) {
                        item.activate();
                    }
                });
            }
            onToggle(e) {
                let id = $(e.target).data("id");
                this.onToggleOrClick(id);
            }
            onClick(e) {
                let id = $(e.target).data("id");
                this.onToggleOrClick(id);
            }
            onToggleOrClick(id) {
                let target = null;
                this.iterateItems(this.items, (item) => {
                    if (item.ID === id) {
                        target = item;
                        return false;
                    }
                    ;
                });
                if (target) {
                    this.segments.each((segment) => {
                        segment.click(new UI.ToolBarItemOnClickEventArgs({
                            toolBar: this,
                            item: target
                        }));
                    });
                }
            }
            template() {
                return "<div class='-jadejs-toolbar " + this.state.get("cssClass", "-jadejs-primary-toolbar") + "'></div>";
            }
            addSegments(e) {
                let pendingSegments = this.state.get("segments", []);
                if (!_.isArray(pendingSegments)) {
                    pendingSegments = [pendingSegments];
                }
                _.each(pendingSegments, (segment) => {
                    if (segment.meetsLoadConditions(e)) {
                        this.segments.add(segment);
                    }
                });
            }
            addItems(e) {
                this.segments.each((segment) => {
                    segment.onAddItems(new UI.ToolbarOnAddItemsEventArgs({
                        toolBar: this,
                        items: this.items,
                        segment: segment
                    }));
                });
            }
            iterateItems(items, callback) {
                items.each((item) => {
                    var abort = false;
                    if (_.isFunction(callback)) {
                        abort = callback(item) === false;
                    }
                    return !abort;
                });
            }
        }
        UI.ToolBar = ToolBar;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ToolBarItemCollection extends Jade.Collection {
        }
        UI.ToolBarItemCollection = ToolBarItemCollection;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ToolBarItemOnClickEventArgs {
            constructor(options) {
                this.m_toolBar = options.toolBar;
                this.m_item = options.item;
            }
            get toolBar() {
                return this.m_toolBar;
            }
            get item() {
                return this.m_item;
            }
        }
        UI.ToolBarItemOnClickEventArgs = ToolBarItemOnClickEventArgs;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ToolBarItemOnCommandChangeEventArgs {
            constructor(options) {
                this.m_toolbar = options.toolbar;
                this.m_node = options.node;
                this.m_command = options.command;
                this.m_context = options.context;
            }
            get toolbar() {
                return this.m_toolbar;
            }
            get node() {
                return this.m_node;
            }
            get command() {
                return this.m_command;
            }
            get context() {
                return this.m_context;
            }
        }
        UI.ToolBarItemOnCommandChangeEventArgs = ToolBarItemOnCommandChangeEventArgs;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ToolbarOnRefreshEventArgs {
            constructor(options) {
                this.m_toolbar = options.toolbar;
                this.m_item = options.item;
                this.m_node = options.node;
                this.m_context = options.context;
            }
            get item() {
                return this.m_item;
            }
            get toolbar() {
                return this.m_toolbar;
            }
            get context() {
                return this.m_context;
            }
            get node() {
                return this.m_node;
            }
            enabled(value) {
                this.toolbar.instance.enable(this.node, value);
            }
            visible(value) {
                if (!value) {
                    this.toolbar.instance.remove(this.node);
                }
            }
        }
        UI.ToolbarOnRefreshEventArgs = ToolbarOnRefreshEventArgs;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ToolBarSegment {
            constructor(context) {
                this.m_items = new UI.ToolBarItemCollection();
                this.m_oldContext = context || {};
            }
            get oldContext() {
                return this.m_newContext;
            }
            get context() {
                return this.m_newContext;
            }
            get items() {
                return this.m_items;
            }
            onAddItems(e) {
            }
            onRefresh(e) {
            }
            onClick(e) {
            }
            meetsLoadConditions(e) {
                return true;
            }
            refresh(e) {
                this.onRefresh(e);
            }
            click(e) {
                this.onClick(e);
                e.item.click(e);
            }
        }
        UI.ToolBarSegment = ToolBarSegment;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ToolbarOnAddItemsEventArgs {
            constructor(options) {
                this.m_toolBar = options.toolBar;
                this.m_items = options.items;
                this.m_segment = options.segment;
            }
            get toolBar() {
                return this.m_toolBar;
            }
            get items() {
                return this.m_items;
            }
            get segment() {
                return this.m_segment;
            }
            registerItem(item) {
                this.segment.items.add(item);
                this.items.add(item);
            }
        }
        UI.ToolbarOnAddItemsEventArgs = ToolbarOnAddItemsEventArgs;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ToolBarItem {
            constructor(options = {}) {
                this.m_state = new Jade.StateBag(options);
                this.onInit();
                this.onLoad();
            }
            onInit(e = {}) {
                this.state.set({
                    id: UUID.genV4().toString()
                });
                this.state.set(this.setDefaultOptions());
            }
            onLoad(e = {}) {
            }
            onActivate(e = {}) {
            }
            onComplete(e = {}) {
            }
            onClick(e) {
            }
            get ID() {
                return this.state.get("id");
            }
            get state() {
                return this.m_state;
            }
            get toolbar() {
                return this.m_toolBar;
            }
            set toolbar(value) {
                if (this.m_toolBar == null) {
                    this.m_toolBar = value;
                }
            }
            get node() {
                return this.toolbar.instance.element.find("[data-id='" + this.ID + "']");
            }
            click(e) {
                this.onClick(e);
            }
            toJSON() {
                return this.state.toJSON();
            }
            activate(e = {}) {
                this.onActivate(e);
            }
            refresh(e) {
                let refresh = this.state.get("refresh");
                if (!_.isFunction(refresh)) {
                    return;
                }
                refresh(new UI.ToolbarOnRefreshEventArgs({
                    item: this,
                    node: this.node,
                    context: null,
                    toolbar: this.toolbar
                }));
            }
            setDefaultOptions() {
            }
        }
        UI.ToolBarItem = ToolBarItem;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ToolBarItemCommand extends UI.ToolBarItem {
            constructor(options) {
                super(options);
                this.m_label = null;
                this.m_icon = null;
                this.m_tooltip = null;
                this.m_visible = null;
                this.m_enabled = null;
                this.m_value = null;
                this.m_label = options.label;
                this.m_icon = options.icon;
                this.m_tooltip = options.tooltip;
                this.m_visible = options.visible;
                this.m_enabled = options.enabled;
                this.m_value = options.value;
            }
            get commandId() {
                return this.state.get("commandId", null);
            }
            get commandSubscriber() {
                return this.state.get("$commandSubscriber", null);
            }
            set commandSubscriber(value) {
                this.state.set("$commandSubscriber", value);
            }
            get label() {
                return this.getValue("label", "Label");
            }
            get icon() {
                let result = this.getValue("icon", null);
                if (this.commandSubscriber != null) {
                    result = this.commandSubscriber.command.getIcon(Jade.IconSetSizeSpecificDirectory.x16, result);
                }
                return result;
            }
            get display() {
                return this.getValue("display", "");
            }
            get enabled() {
                return this.getValue("enabled", true);
            }
            get tooltip() {
                return this.getValue("tooltip", "");
            }
            get visible() {
                return this.getValue("visible", true);
            }
            get value() {
                return this.getValue("value", null);
            }
            onInit(e) {
                if (this.commandId != null) {
                    this.commandSubscriber = new Jade.CommandSubscriber();
                    this.commandSubscriber.subscribe(this.commandId, () => {
                        this.onPropertiesChanged();
                    });
                }
                super.onInit(e);
            }
            toJSON() {
                return this.state.toJSON();
            }
            click(e) {
                if (this.commandSubscriber != null) {
                    this.commandSubscriber.execute(this.value);
                }
            }
            refresh() {
                if (this.commandSubscriber != null) {
                    this.onPropertiesChanged();
                }
            }
            template() {
                return "";
            }
            onPropertiesChanged() {
                let toolbar = this.toolbar.node.data("kendoToolBar");
                if (toolbar != null || this.node != null) {
                    return;
                }
                toolbar.enable(this.node, this.enabled);
                if (this.visible) {
                    this.node.removeClass("k-state-hidden");
                }
                else {
                    this.node.addClass("k-state-hidden");
                }
            }
            getValue(id, defaultValue) {
                let result = null;
                if (this["m_" + id] != null) {
                    result = this["m_" + id];
                }
                else if (this.commandSubscriber != null) {
                    result = this.commandSubscriber[id];
                }
                else {
                    result = this.state.get(id);
                }
                if (result == null) {
                    result = defaultValue;
                }
                return result;
            }
        }
        UI.ToolBarItemCommand = ToolBarItemCommand;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        class ToolBarButtonCommand extends UI.ToolBarItemCommand {
            constructor(options) {
                super(options);
            }
            get command() {
                return this.commandSubscriber?.command;
            }
            onActivate(e) {
                super.onActivate(e);
                if (this.commandId != null) {
                    this.onPropertiesChanged();
                }
            }
            onPropertiesChanged() {
                super.onPropertiesChanged();
                let content = this.template();
                this.toolbar.instance.enable(this.node, this.commandSubscriber.command.enabled);
                this.node.prop("title", this.tooltip);
                this.node.empty();
                this.node.addClass("k-button-icontext");
                this.node.html(content);
            }
            toJSON() {
                let result = this.state.toJSON();
                result = {
                    type: "button",
                    id: this.ID,
                    enable: this.enabled,
                    imageUrl: this.icon,
                    overflow: "auto",
                    text: this.label,
                    display: this.display,
                    attributes: {
                        "data-id": this.ID,
                        "title": this.tooltip,
                        "class": this.getCssClass()
                    }
                };
                return result;
            }
            template(e = null) {
                let command = this.commandSubscriber.command;
                let showLabel = this.showLabel();
                let showIcon = this.showIcon();
                let result = [
                    showIcon ? "<img src='" + this.icon + "' class='k-image'/>" : "",
                    showLabel ? command.label : "&nbsp;"
                ];
                return result.join("");
            }
            showIcon() {
                let icon = this.icon;
                let display = this.display;
                return icon != null
                    && icon != ""
                    && (display == null || (display != null && display.indexOf("icon") != -1));
            }
            showLabel() {
                let label = this.label;
                let display = this.display;
                return label != null
                    && label != ""
                    && (display == null || (display != null && display.indexOf("label") != -1));
            }
            getCssClass() {
                var result = undefined;
                if (!this.showLabel()) {
                    result = "-jadejs-btn-no-text";
                }
                return result;
            }
        }
        UI.ToolBarButtonCommand = ToolBarButtonCommand;
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class ContextMenu extends UI.Control {
                constructor(options) {
                    super(options);
                    this.m_parent = null;
                    this.m_visible = false;
                    this.m_x = 0;
                    this.m_y = 0;
                    this.m_items = new Jade.MappedCollection({ key: "ID" });
                    this.m_groups = new Jade.MappedCollection({ key: "ID" });
                }
                get items() {
                    return this.m_items;
                }
                get groups() {
                    return this.m_groups;
                }
                get attachTo() {
                    return this.state.get("attachTo", $("body"));
                }
                get parent() {
                    return this.m_parent;
                }
                get x() {
                    return this.m_x;
                }
                get y() {
                    return this.m_y;
                }
                get visible() {
                    return this.m_visible;
                }
                onTemplate(e) {
                    this.node.on("click", ".-jadejs-contextmenu-item", (e) => {
                        let onClick = this.state.get("onClick");
                        let item = this.controls.getById($(e.target).attr("id"));
                        if (item != null && item.enabled) {
                            item.click(e);
                            if (item.closeOnClick) {
                                if (this.parent != null) {
                                    this.parent.hide();
                                }
                                this.hide();
                            }
                            if (_.isFunction(onClick)) {
                                onClick(item);
                            }
                        }
                    });
                    $(document).on("mousedown", "DIV:not(.-jadejs-contextmenu,.-jadejs-contextmenu-item)", (e) => {
                        if ($(e.target).closest(".-jadejs-contextmenu").length == 0) {
                            this.hide();
                        }
                    });
                    this.node.on("contextmenu", (e) => { return false; });
                }
                template() {
                    return `<div class="-jadejs-contextmenu" style="top:400px;left:400px;display:none;"></div>`;
                }
                show(e) {
                    this.m_parent = e.parent;
                    this.m_visible = true;
                    this.m_x = e.x;
                    this.m_y = e.y;
                    this.showGroups(e.groups);
                    let position = this.getPosition();
                    this.node.css({
                        top: position.y,
                        left: position.x,
                        zIndex: "100000",
                        display: "inline-block"
                    });
                    this.node.stop(true, true);
                    this.node.fadeIn(200);
                }
                hide() {
                    let onHide = this.state.get("onHide");
                    this.m_parent = null;
                    this.m_visible = false;
                    this.m_x = 0;
                    this.m_y = 0;
                    this.node.stop(true, true);
                    this.node.fadeOut(200);
                    if (_.isFunction(onHide)) {
                        onHide();
                    }
                }
                getPosition() {
                    let height = this.node.outerHeight(false);
                    let width = this.node.outerWidth(false);
                    let offsetTop = this.container.offset().top;
                    let offsetLeft = this.container.offset().left;
                    let offsetBottom = offsetTop + this.container.outerHeight(true);
                    let offsetRight = offsetLeft + this.container.outerWidth(true);
                    let top = this.y - offsetTop;
                    let left = this.x - offsetLeft;
                    if (this.y + height > offsetBottom) {
                        top = top - ((this.y - offsetBottom) + height);
                    }
                    if (this.x + width > offsetRight) {
                        left = left - ((this.x - offsetRight) + width);
                    }
                    return { x: left - 8, y: top - 8 };
                }
                showGroups(groupIds) {
                    this.groups.each((group) => {
                        group.hide(this);
                    });
                    _.each(groupIds, (groupId) => {
                        let group = null;
                        if (this.groups.get(groupId) == null) {
                            group = Controls.ContextMenuGroups.get(groupId);
                            if (group != null) {
                                this.groups.add(group);
                            }
                        }
                    });
                    this.groups.each((group) => {
                        if (_.indexOf(groupIds, group.ID) > -1) {
                            group.show(this);
                        }
                    });
                }
            }
            Controls.ContextMenu = ContextMenu;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class ContextMenuItemBase extends UI.Control {
                constructor() {
                    super(...arguments);
                    this.m_parent = null;
                }
                get parent() {
                    return this.m_parent;
                }
                set parent(value) {
                    this.m_parent = value;
                }
                template() {
                    return `<div></div>`;
                }
                click(e) {
                }
                refresh() {
                }
            }
            Controls.ContextMenuItemBase = ContextMenuItemBase;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class ContextMenuDivider extends Controls.ContextMenuItemBase {
                constructor() {
                    super({});
                }
                template() {
                    return `<div class="-jadejs-contextmenu-divider"><div></div></div>`;
                }
            }
            Controls.ContextMenuDivider = ContextMenuDivider;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class ContextMenuGroup {
                constructor(options) {
                    this.m_items = new Jade.Collection();
                    this.m_id = options.id;
                    this.onPopulate();
                }
                get ID() {
                    return this.m_id;
                }
                get items() {
                    return this.m_items;
                }
                hide(contextMenu) {
                    this.items.each((item) => {
                        contextMenu.controls.detach(item);
                        item.parent = null;
                    });
                }
                show(contextMenu) {
                    if (this.meetsLoadConditions()) {
                        this.items.each((item) => {
                            contextMenu.controls.add(item);
                            item.refresh();
                            item.parent = contextMenu;
                        });
                    }
                }
                onPopulate() {
                }
                meetsLoadConditions() {
                    return true;
                }
            }
            Controls.ContextMenuGroup = ContextMenuGroup;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class ContextMenuGroups {
                static get groups() {
                    return this.m_groups;
                }
                static add(group) {
                    this.groups.add(group);
                }
                static remove(groupId) {
                    let group = this.groups.get(groupId);
                    if (group != null) {
                        this.groups.remove(group);
                    }
                }
                static get(groupId) {
                    return this.groups.get(groupId);
                }
                static clear() {
                    this.m_groups = new Jade.MappedCollection({ key: "ID" });
                }
                static reset() {
                    let groups = new Array();
                    this.groups.each((group) => {
                        let instance = new group.constructor({
                            id: group.ID
                        });
                        groups[groups.length] = instance;
                    });
                    this.clear();
                    _.each(groups, (group) => {
                        this.add(group);
                    });
                }
            }
            ContextMenuGroups.m_groups = new Jade.MappedCollection({ key: "ID" });
            Controls.ContextMenuGroups = ContextMenuGroups;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class ContextMenuItem extends Controls.ContextMenuItemBase {
                constructor(options) {
                    super(options);
                    this.m_commandSubscriber = null;
                    this.m_label = null;
                    this.m_icon = null;
                    this.m_tooltip = null;
                    this.m_visible = null;
                    this.m_enabled = null;
                    this.m_value = null;
                    this.m_label = options.label;
                    this.m_icon = options.icon;
                    this.m_tooltip = options.tooltip;
                    this.m_visible = options.visible;
                    this.m_enabled = options.enabled;
                    this.m_value = options.value;
                }
                get label() {
                    return this.getValue("label", "Label");
                }
                get icon() {
                    let result = this.getValue("icon", null);
                    if (this.commandSubscriber != null) {
                        result = this.commandSubscriber.command.getIcon(Jade.IconSetSizeSpecificDirectory.x16, result);
                    }
                    return result;
                }
                get enabled() {
                    return this.getValue("enabled", true);
                }
                get tooltip() {
                    return this.getValue("tooltip", "");
                }
                get visible() {
                    return this.getValue("visible", true);
                }
                get value() {
                    return this.getValue("value", null);
                }
                get closeOnClick() {
                    return this.getValue("closeOnClick", true);
                }
                get commandSubscriber() {
                    return this.m_commandSubscriber;
                }
                template() {
                    return `<div class="-jadejs-contextmenu-item">${this.label}</div>`;
                }
                click(e) {
                    if (this.m_commandSubscriber != null) {
                        this.m_commandSubscriber.execute(this.value);
                    }
                }
                refresh() {
                    if (this.commandSubscriber != null) {
                        this.onPropertiesChanged();
                    }
                }
                onTemplateStart(e) {
                    if (this.state.get("commandId") != null) {
                        this.m_commandSubscriber = new Jade.CommandSubscriber();
                        this.m_commandSubscriber.subscribe(this.state.get("commandId"), () => {
                            this.onPropertiesChanged();
                        });
                    }
                }
                onTemplateComplete(e) {
                    if (this.state.get("commandId") != null) {
                        this.onPropertiesChanged();
                    }
                }
                onPropertiesChanged() {
                    if (this.enabled) {
                        this.node.removeAttr("disabled");
                    }
                    else {
                        this.node.attr("disabled", "");
                    }
                    if (this.m_commandSubscriber.display.indexOf("icon") > -1) {
                        if (this.icon != null) {
                            this.node.css({
                                backgroundImage: `url(${this.icon})`
                            });
                        }
                    }
                    this.node.text(this.label);
                }
                onStateChanged() {
                    if (this.enabled) {
                        this.node.removeAttr("disabled");
                    }
                    else {
                        this.node.attr("disabled", "");
                    }
                }
                getValue(id, defaultValue) {
                    let result = null;
                    if (this["m_" + id] != null) {
                        result = this["m_" + id];
                    }
                    else if (this.m_commandSubscriber != null) {
                        result = this.m_commandSubscriber[id];
                    }
                    else {
                        result = this.state.get(id);
                    }
                    if (result == null) {
                        result = defaultValue;
                    }
                    return result;
                }
            }
            Controls.ContextMenuItem = ContextMenuItem;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class ContextMenuItemTemplate extends Controls.ContextMenuItem {
                onPropertiesChanged() {
                    if (this.enabled) {
                        this.node.removeAttr("disabled");
                    }
                    else {
                        this.node.attr("disabled", "");
                    }
                    if (this.commandSubscriber.display.indexOf("icon") > -1) {
                        if (this.icon != null) {
                            this.node.css({
                                backgroundImage: `url(${this.icon})`
                            });
                        }
                    }
                }
            }
            Controls.ContextMenuItemTemplate = ContextMenuItemTemplate;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class ContextMenuItemColorPalette extends Controls.ContextMenuItemTemplate {
                constructor(options) {
                    super(options);
                    this.m_palette = null;
                }
                get palette() {
                    return this.m_palette;
                }
                template() {
                    return `<div class="-jadejs-contextmenu-item-color-palette-large"><div role="palette"></div></div>`;
                }
                click(e) {
                    if (this.commandSubscriber != null) {
                        this.commandSubscriber.execute({ color: this.palette.value() });
                    }
                }
                onActivate(e) {
                    this.node.find("div[role=palette]").kendoColorPalette({
                        palette: this.state.get("palette", []),
                        columns: 10,
                        change: (e) => {
                            this.onColorSelect(e.sender.value());
                            if (this.closeOnClick) {
                                this.parent.hide();
                            }
                        }
                    });
                }
                onColorSelect(color) {
                    if (this.commandSubscriber != null) {
                        this.commandSubscriber.execute(color);
                    }
                }
            }
            Controls.ContextMenuItemColorPalette = ContextMenuItemColorPalette;
            class ContextMenuItemColorPalettes {
                static get standardColors() {
                    return ["#000000", "#7f7f7f", "#880015", "#ed1c24", "#ff7f27", "#fff200", "#22b14c", "#00a2e8", "#3f48cc", "#a349a4"];
                }
                static get themeColors() {
                    return [
                        "#ffffff", "#000000", "#e7e6e6", "#44546a", "#4472c4", "#ed7d31", "#a5a5a5", "#ffc000", "#5b9bd5", "#70ad47",
                        "#f2f2f2", "#7f7f7f", "#d0cece", "#d6dce4", "#d9e2f3", "#fbe5d5", "#ededed", "#fff2cc", "#deebf6", "#e2efd9",
                        "#d8d8d8", "#595959", "#aeabab", "#adb9ca", "#b4c6e7", "#f7cbac", "#dbdbdb", "#fee599", "#bdd7ee", "#c5e0b3",
                        "#bfbfbf", "#3f3f3f", "#757070", "#8496b0", "#8eaadb", "#f4b183", "#c9c9c9", "#ffd965", "#9cc3e5", "#a8d08d",
                        "#a5a5a5", "#262626", "#3a3838", "#323f4f", "#2f5496", "#c55a11", "#7b7b7b", "#bf9000", "#2e75b5", "#538135",
                        "#7f7f7f", "#0c0c0c", "#171616", "#222a35", "#1f3864", "#833c0b", "#525252", "#7f6000", "#1e4e79", "#375623"
                    ];
                }
            }
            Controls.ContextMenuItemColorPalettes = ContextMenuItemColorPalettes;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class ContextMenuItemHeader extends Controls.ContextMenuItemBase {
                constructor(options) {
                    super(options);
                    this.m_commandSubscriber = null;
                }
                get label() {
                    return this.state.get("label", "Label");
                }
                template() {
                    return `<div class="-jadejs-contextmenu-item-header">${this.label}</div>`;
                }
            }
            Controls.ContextMenuItemHeader = ContextMenuItemHeader;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class ContextMenuItemSubMenu extends Controls.ContextMenuItem {
                constructor(options) {
                    super(options);
                    this.m_mouseIsOverContextMenu = false;
                    this.m_mouseIsOverItem = false;
                    this.m_contextMenu = null;
                    this.m_hasMouseHandlers = false;
                }
                get contextMenu() {
                    return this.m_contextMenu;
                }
                set contextMenu(value) {
                    this.m_contextMenu = value;
                }
                get menu() {
                    return this.state.get("menu", []);
                }
                get closeOnClick() {
                    return false;
                }
                template() {
                    return `<div class="-jadejs-contextmenu-item -jadejs-contextmenu-item-submenu">${this.label}</div>`;
                }
                click(e) {
                }
                onActivate(e) {
                    this.node.on("mouseenter", (e) => {
                        this.m_mouseIsOverItem = true;
                        this.createContextMenu();
                        setTimeout(() => {
                            if (this.m_mouseIsOverItem) {
                                this.onMouseEnter(e);
                            }
                        }, 250);
                    });
                    this.node.on("mouseleave", (e) => {
                        this.m_mouseIsOverItem = false;
                        setTimeout(() => {
                            if (!this.m_mouseIsOverContextMenu) {
                                this.contextMenu.hide();
                            }
                        }, 10);
                    });
                    this.node.css({
                        backgroundImage: `url(${Jade.IconSet.get("jadejs").resolve("context-menu-arrow.png", Jade.IconSetSizeSpecificDirectory.misc)}`
                    });
                }
                onMouseEnter(e) {
                    if (this.contextMenu != null) {
                        this.contextMenu.show({
                            groups: this.menu,
                            x: this.node.offset().left + this.node.outerWidth() + 4,
                            y: this.node.offset().top + 4,
                            parent: this.parent
                        });
                        if (!this.m_hasMouseHandlers) {
                            this.contextMenu.node.on("mouseenter", (e) => {
                                this.contextMenu_onMouseEnter(e);
                            });
                            this.contextMenu.node.on("mouseleave", (e) => {
                                this.contextMenu_onMouseLeave(e);
                            });
                            this.m_hasMouseHandlers = true;
                        }
                        return;
                    }
                }
                contextMenu_onMouseEnter(e) {
                    this.m_mouseIsOverContextMenu = true;
                }
                contextMenu_onMouseLeave(e) {
                    this.contextMenu.hide();
                    this.m_mouseIsOverContextMenu = false;
                }
                createContextMenu() {
                    if (this.menu.length > 0) {
                        if (this.contextMenu == null) {
                            this.contextMenu = new Controls.ContextMenu({
                                container: "BODY",
                                onClick: () => {
                                }
                            });
                        }
                    }
                }
            }
            Controls.ContextMenuItemSubMenu = ContextMenuItemSubMenu;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class RibbonBar extends UI.Control {
                constructor() {
                    super(...arguments);
                    this.m_selectedSectionId = null;
                    this.m_tabStrip = new Controls.RibbonBarTabStrip({
                        insertAt: "DIV[role=tabs]"
                    });
                    this.m_sections = null;
                }
                get tabStrip() {
                    return this.m_tabStrip;
                }
                get sections() {
                    return this.m_sections;
                }
                get selectedSectionId() {
                    return this.m_selectedSectionId;
                }
                onInit(e) {
                    this.m_sections = new Jade.MappedCollection({ key: "ID" });
                }
                onActivate(e) {
                    this.controls.add(this.tabStrip);
                    this.node.on("click", ".-jadejs-ribbonbar-tab", $.proxy(this.onTabClick, this));
                    Controls.RibbonBarSections.sections.each((section) => {
                        this.sections.add(section);
                    });
                }
                onTabClick(e) {
                    this.node.find(".-jadejs-ribbonbar-tab.selected").removeClass("selected");
                    let target = $(e.target);
                    target.addClass("selected");
                    this.m_selectedSectionId = target.data("section-id");
                    this.selectTab(this.m_selectedSectionId);
                }
                template() {
                    return `<div class="-jadejs-ribbonbar">
                        <div role="tabs"></div>
                        <div role="content" data-controls></div>
                    </div>`;
                }
                show(toolingIds) {
                    let validSections = [];
                    let invalidSections = [];
                    this.sections.each((section) => {
                        if (section.alwaysShow || _.indexOf(toolingIds, section.toolingId) > -1) {
                            validSections[validSections.length] = section.ID;
                        }
                        else {
                            invalidSections[invalidSections.length] = section.ID;
                        }
                    });
                    _.each(this.controls.toArray(), (section) => {
                        if (invalidSections.indexOf(section.ID) > -1) {
                            this.controls.detach(section);
                        }
                    });
                    this.tabStrip.controls.clear();
                    this.sections.each((section) => {
                        if (_.indexOf(validSections, section.ID) > -1) {
                            this.controls.add(section);
                            section.show(toolingIds);
                            this.tabStrip.controls.add(new Controls.RibbonBarTab({ label: section.label, sectionId: section.ID }));
                        }
                    });
                    if (_.indexOf(validSections, this.selectedSectionId) > -1) {
                        this.selectTab(this.selectedSectionId);
                    }
                    else {
                        this.m_selectedSectionId = null;
                        this.controls.each((section) => {
                            if (section instanceof Controls.RibbonBarSection) {
                                if (!section.alwaysShow) {
                                    this.m_selectedSectionId = section.ID;
                                    return false;
                                }
                            }
                        });
                        this.selectTab(this.selectedSectionId);
                    }
                }
                selectTab(sectionId) {
                    let section = null;
                    if (sectionId != null) {
                        section = this.controls.getById(sectionId);
                        if (section != null) {
                            sectionId = section.ID;
                        }
                        else {
                            sectionId = null;
                        }
                    }
                    if (sectionId == null) {
                        section = this.getFirstSection();
                        if (section != null) {
                            sectionId = section.ID;
                        }
                    }
                    if (sectionId != null) {
                        this.node.find(`.-jadejs-ribbonbar-tab[data-section-id=${sectionId}]`).addClass("selected");
                        this.node.find(`[role=content] > DIV`).hide();
                        this.node.find(`[role=content] > DIV#${sectionId}`).show();
                    }
                    this.m_selectedSectionId = sectionId;
                }
                getFirstSection() {
                    let result = null;
                    this.controls.each((control) => {
                        if (control instanceof Controls.RibbonBarSection) {
                            result = control;
                            return false;
                        }
                    });
                    return result;
                }
                static registerTooltipFunction(fn) {
                    this.m_tooltipCreateFn = fn;
                }
                static createTooltip(handle, label, content, options) {
                    if (_.isFunction(this.m_tooltipCreateFn)) {
                        this.m_tooltipCreateFn(handle, label, content, options);
                    }
                }
            }
            Controls.RibbonBar = RibbonBar;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class RibbonBarGroup extends UI.Control {
                constructor(options) {
                    super(options);
                    this.onPopulate();
                }
                get label() {
                    return this.state.get("label");
                }
                get toolingId() {
                    return this.state.get("toolingId");
                }
                get alwaysShow() {
                    return this.m_alwaysShow || false;
                }
                template() {
                    return `<div class="-jadejs-ribbonbar-group"><div role="controls" data-controls></div><div role="label">${this.label}</div></div>`;
                }
                onPopulate() {
                }
                onActivateComplete(e) {
                    this.node.on("click", ".-jadejs-ribbonbar-item", (e) => {
                        let node = $(e.currentTarget);
                        let item = this.controls.getById(node.attr("ID"));
                        if (item != null) {
                            item.click(e);
                        }
                    });
                }
                shouldAlwaysShow(value) {
                    this.m_alwaysShow = value;
                }
            }
            Controls.RibbonBarGroup = RibbonBarGroup;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class RibbonBarGroups {
                static get groups() {
                    return this.m_groups;
                }
                static add(tab) {
                    this.groups.add(tab);
                }
                static remove(groupId) {
                    let group = this.groups.get(groupId);
                    if (group != null) {
                        this.groups.remove(group);
                    }
                }
                static get(groupId) {
                    return this.groups.get(groupId);
                }
                static clear() {
                    this.m_groups = new Jade.MappedCollection({ key: "ID" });
                }
                static reset() {
                    let groups = new Array();
                    this.groups.each((group) => {
                        let instance = new group.constructor({
                            id: group.ID
                        });
                        groups[groups.length] = instance;
                    });
                    this.clear();
                    _.each(groups, (group) => {
                        this.add(group);
                    });
                }
            }
            RibbonBarGroups.m_groups = new Jade.MappedCollection({ key: "ID" });
            Controls.RibbonBarGroups = RibbonBarGroups;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class RibbonBarSection extends UI.Control {
                constructor(options) {
                    super(options);
                    this.m_groups = new Jade.MappedCollection({ key: "ID" });
                    this.onPopulate();
                }
                get groups() {
                    return this.m_groups;
                }
                get label() {
                    return this.state.get("label");
                }
                get toolingId() {
                    return this.state.get("toolingId");
                }
                get alwaysShow() {
                    return false;
                }
                template() {
                    return `<div class="-jadejs-ribbonbar-section"></div>`;
                }
                show(toolingIds) {
                    this.groups.each((group) => {
                        this.controls.detach(group);
                    });
                    _.each(toolingIds, (toolingId) => {
                        let group = null;
                        if (this.groups.get(toolingId) == null) {
                            group = Controls.RibbonBarGroups.get(toolingId);
                            if (group != null) {
                                this.groups.add(group);
                            }
                        }
                    });
                    this.groups.each((group) => {
                        if (group.alwaysShow || _.indexOf(toolingIds, group.toolingId) > -1) {
                            this.controls.add(group);
                        }
                    });
                }
                onPopulate() {
                }
            }
            Controls.RibbonBarSection = RibbonBarSection;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class RibbonBarSections {
                static get sections() {
                    return this.m_sections;
                }
                static add(section) {
                    this.sections.add(section);
                }
                static remove(sectionId) {
                    let section = this.sections.get(sectionId);
                    if (section != null) {
                        this.sections.remove(section);
                    }
                }
                static get(sectionId) {
                    return this.sections.get(sectionId);
                }
                static clear() {
                    this.m_sections = new Jade.MappedCollection({ key: "toolingId" });
                }
                static reset() {
                    let sections = new Array();
                    this.sections.each((group) => {
                        let instance = new group.constructor({
                            id: group.ID
                        });
                        sections[sections.length] = instance;
                    });
                    this.clear();
                    _.each(sections, (section) => {
                        this.add(section);
                    });
                }
            }
            RibbonBarSections.m_sections = new Jade.MappedCollection({ key: "toolingId" });
            Controls.RibbonBarSections = RibbonBarSections;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class RibbonBarSet extends UI.Control {
                constructor(options) {
                    super(options);
                    this.onPopulate();
                }
                get items() {
                    return this.state.get("items", []);
                }
                get width() {
                    return this.state.get("width", 100);
                }
                template() {
                    return `<div class="-jadejs-ribbonbar-set"></div>`;
                }
                onPopulate() {
                    _.each(this.items, (item) => {
                        this.controls.add(item);
                    });
                }
                onActivateComplete(e) {
                    this.node.on("click", ".-jadejs-ribbonbar-item", (e) => {
                        let node = $(e.currentTarget);
                        let item = this.controls.getById(node.attr("ID"));
                        if (item != null) {
                            item.click(e);
                        }
                        e.cancelBubble = true;
                        e.stopPropagation();
                    });
                    this.node.css({
                        width: `${this.width}px`
                    });
                }
            }
            Controls.RibbonBarSet = RibbonBarSet;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class RibbonBarTab extends Jade.UI.Control {
                get label() {
                    return this.state.get("label");
                }
                get sectionId() {
                    return this.state.get("sectionId");
                }
                template() {
                    return `<div class="-jadejs-ribbonbar-tab" data-section-id="${this.sectionId}">${this.label}</div>`;
                }
            }
            Controls.RibbonBarTab = RibbonBarTab;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class RibbonBarTabStrip extends Jade.UI.Control {
                get tabs() {
                    return this.controls.getByType(Controls.RibbonBarTab);
                }
                template() {
                    return `<div class="-jadejs-ribbonbar-tabstrip"></div>`;
                }
                getTabBySectionId(sectionId) {
                    let result = null;
                    this.tabs.each((control) => {
                        if (control instanceof Controls.RibbonBarTab && control.sectionId == sectionId) {
                            result = control;
                            return false;
                        }
                    });
                    return result;
                }
            }
            Controls.RibbonBarTabStrip = RibbonBarTabStrip;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class RibbionFluid {
                get contractions() {
                    return;
                }
                contract() {
                }
                expand() {
                }
                canContract() {
                    return false;
                }
                canExpand() {
                    return false;
                }
            }
            Controls.RibbionFluid = RibbionFluid;
            class RibbonFluidPriority {
                get priority1() {
                    return 0;
                }
                get priority2() {
                    return 0;
                }
                get priority3() {
                    return 0;
                }
                get priority4() {
                    return 0;
                }
                get priority5() {
                    return 0;
                }
            }
            Controls.RibbonFluidPriority = RibbonFluidPriority;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class RibbonBarItem extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                    this.m_commandSubscriber = null;
                    this.m_contextMenu = null;
                    this.m_label = null;
                    this.m_icon = null;
                    this.m_tooltip = null;
                    this.m_visible = null;
                    this.m_enabled = null;
                    this.m_value = null;
                    this.m_label = options.label;
                    this.m_icon = options.icon;
                    this.m_tooltip = options.tooltip;
                    this.m_visible = options.visible;
                    this.m_enabled = options.enabled;
                    this.m_value = options.value;
                }
                get label() {
                    return this.getValue("label", "Label");
                }
                get icon() {
                    return this.getValue("icon", null);
                }
                get enabled() {
                    return this.getValue("enabled", true);
                }
                set enabled(value) {
                    this.m_enabled = value;
                    this.onPropertiesChanged();
                }
                get tooltip() {
                    return this.getValue("tooltip", "");
                }
                get visible() {
                    return this.getValue("visible", true);
                }
                get value() {
                    return this.getValue("value", null);
                }
                get contextMenu() {
                    return this.m_contextMenu;
                }
                set contextMenu(value) {
                    this.m_contextMenu = value;
                }
                get menu() {
                    return this.state.get("menu", []);
                }
                get commandSubscriber() {
                    return this.m_commandSubscriber;
                }
                click(e) {
                    this.createContextMenu();
                    if (this.contextMenu != null && this.enabled) {
                        this.contextMenu.show({
                            groups: this.menu,
                            x: this.node.offset().left + 8,
                            y: this.node.offset().top + this.node.outerHeight(true) + 8
                        });
                        return;
                    }
                    if (this.commandSubscriber != null && this.enabled) {
                        this.commandSubscriber.execute(this.value);
                    }
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.onPropertiesChanged();
                    this.createTooltip();
                }
                onDestroy(e) {
                    super.onDestroy(e);
                    this.removeTooltip();
                }
                onTemplateStart(e) {
                    if (this.state.get("commandId") != null) {
                        this.m_commandSubscriber = new Jade.CommandSubscriber();
                        this.commandSubscriber.subscribe(this.state.get("commandId"), () => {
                            this.onPropertiesChanged();
                        });
                    }
                }
                onTemplateComplete(e) {
                    if (this.commandSubscriber != null) {
                        this.onPropertiesChanged();
                    }
                }
                onPropertiesChanged() {
                    if (this.enabled) {
                        this.node.removeAttr("disabled");
                    }
                    else {
                        this.node.attr("disabled", "");
                    }
                }
                wrapTemplate(template) {
                    return template;
                }
                createContextMenu() {
                    if (this.menu.length > 0) {
                        if (this.contextMenu == null) {
                            this.contextMenu = new Controls.ContextMenu({ container: "BODY" });
                        }
                    }
                }
                createTooltip() {
                    Controls.RibbonBar.createTooltip(this.node, this.label, this.tooltip);
                }
                removeTooltip() {
                    Tipped.remove(this.node);
                }
                getValue(id, defaultValue) {
                    let result = null;
                    if (this["m_" + id] != null) {
                        result = this["m_" + id];
                    }
                    else if (this.m_commandSubscriber != null) {
                        result = this.m_commandSubscriber[id];
                    }
                    else {
                        result = this.state.get(id);
                    }
                    if (result == null) {
                        result = defaultValue;
                    }
                    return result;
                }
            }
            Controls.RibbonBarItem = RibbonBarItem;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class RibbonBarToggle extends Controls.RibbonBarItem {
                click(e) {
                }
            }
            Controls.RibbonBarToggle = RibbonBarToggle;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class RibbonBarButton extends Controls.RibbonBarItem {
                constructor(options) {
                    super(options);
                }
                get labelNode() {
                    return this.node.find("div[role=label]");
                }
                get imageNode() {
                    return this.node.find("img");
                }
                get icon() {
                    let result = this.getValue("icon", null);
                    if (this.commandSubscriber != null) {
                        result = this.commandSubscriber.command.getIcon(Jade.IconSetSizeSpecificDirectory.x32, result);
                    }
                    return result;
                }
                get width() {
                    return this.state.get("width", null);
                }
                onPropertiesChanged() {
                    super.onPropertiesChanged();
                    this.labelNode.html(this.getLabel());
                    this.imageNode.attr("src", this.icon);
                    this.setWidth();
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.setWidth();
                }
                template() {
                    return `<div class="-jadejs-ribbonbar-item -jadejs-ribbonbar-button large"">
                        <img src="${this.icon}"/><br/>
                        <div role="label">
                            ${this.getLabel()}
                        </div>
                    </div>`;
                }
                getLabel() {
                    return `${this.label} ${this.menu.length > 0 ? "<div style='font-size:8px;margin-left:3px;display:inline-block;'>▼</div>" : ""}`;
                }
                setWidth() {
                    this.node.css({
                        width: this.width == null ? "" : `${this.width}px`,
                        minWidth: this.width == null ? "" : `${this.width}px`
                    });
                }
            }
            Controls.RibbonBarButton = RibbonBarButton;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class RibbonBarButtonSmall extends Controls.RibbonBarItem {
                get icon() {
                    let result = this.getValue("icon", null);
                    if (this.commandSubscriber != null) {
                        result = this.commandSubscriber.command.getIcon(Jade.IconSetSizeSpecificDirectory.x16, result);
                    }
                    return result;
                }
                template() {
                    return `<div class="-jadejs-ribbonbar-item -jadejs-ribbonbar-button small">
                        <div role="icon">
                            <img src="${this.icon}" />
                        </div>
                        <div role="label">
                            ${this.label}${this.menu.length > 0 ? "<span style='font-size:8px;margin-left:3px;'>▼</span>" : ""}
                        </div>
                    </div>`;
                }
            }
            Controls.RibbonBarButtonSmall = RibbonBarButtonSmall;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class RibbonBarList extends Controls.RibbonBarItem {
            }
            Controls.RibbonBarList = RibbonBarList;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class RibbonBarToggleButton extends UI.Control {
            }
            Controls.RibbonBarToggleButton = RibbonBarToggleButton;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Controls;
        (function (Controls) {
            class Tooling {
                constructor() {
                    this.m_set = {};
                }
                add(tag) {
                    this.m_set[tag] = true;
                }
                remove(tag) {
                    if (this.m_set[tag] != undefined) {
                        this.m_set[tag];
                    }
                }
                clear() {
                    this.m_set = {};
                }
                contains(tag) {
                    let result = false;
                    if (this.m_set[tag] != undefined) {
                        result = this.m_set[tag];
                    }
                    return result;
                }
                toArray() {
                    let result = new Array();
                    for (let key in this.m_set) {
                        result[result.length] = key;
                    }
                    return result;
                }
                static getCommon(toolings) {
                    let result = new Array();
                    _.each(toolings, (tooling) => {
                        result = result.concat(tooling.toArray());
                    });
                    result = _.uniq(result);
                    return result;
                }
            }
            Controls.Tooling = Tooling;
            function toolingTags(...tags) {
                return function _toolingTags(constr) {
                    return class extends constr {
                        constructor(...args) {
                            super(...args);
                            _.each(tags, (tag) => {
                                this.tooling.add(tag);
                            });
                        }
                    };
                };
            }
            Controls.toolingTags = toolingTags;
        })(Controls = UI.Controls || (UI.Controls = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Dialogs;
        (function (Dialogs) {
            class DialogButtons extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                }
                get autoButtons() {
                    return this.state.get("autoButtons", []);
                }
                get buttons() {
                    return this.controls.getByType(Dialogs.DialogButton).toArray();
                }
                get clickCallback() {
                    return this.state.get("click", () => { });
                }
                get hasButtons() {
                    return this.buttons.length > 0;
                }
                get paneLeftNode() {
                    return this.node.children(".-jadeui-dialog-box-pane-l");
                }
                get paneRightNode() {
                    return this.node.children("-jadeui-dialog-box-pane-r");
                }
                addAutoButtons(...autoButtons) {
                    let definitions = [
                        { name: "yes", label: "Yes" },
                        { name: "no", label: "No" },
                        { name: "ok", label: "OK" },
                        { name: "cancel", label: "Cancel" },
                        { name: "close", label: "Close" }
                    ];
                    autoButtons.forEach(name => {
                        let definition = _.first(definitions
                            .filter(def => def.name == name));
                        if (definition != null) {
                            this.addButton(definition);
                        }
                    });
                }
                addButton(options) {
                    let copiedOptions = _.extend(_.clone(options), {
                        click: (e) => { this.clickCallback(e); },
                        insertAt: ".-jadeui-dialog-box-pane-r"
                    });
                    if (this.buttonExists(copiedOptions.name)) {
                        return;
                    }
                    let button = new Dialogs.DialogButton(copiedOptions);
                    this.controls.add(button);
                }
                getButton(name) {
                    return _.first(this.buttons.filter(button => {
                        return button.name.toLowerCase() == name.toLowerCase();
                    }));
                }
                template() {
                    return `<div class="-jadeui-dialog-box-buttons">
                        <div class="-jadeui-dialog-box-pane-l"></div>
                        <div class="-jadeui-dialog-box-pane-r"></div>
                    </div>`;
                }
                buttonExists(name) {
                    return this.buttons.filter(button => {
                        return button.name.toLowerCase() == name.toLowerCase();
                    }).length > 0;
                }
            }
            Dialogs.DialogButtons = DialogButtons;
        })(Dialogs = UI.Dialogs || (UI.Dialogs = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Dialogs;
        (function (Dialogs) {
            class Window extends Jade.UI.Control {
                constructor(options) {
                    options.container = Window.windowsNode;
                    options.beforeInit = (e) => {
                        let doc = document;
                        doc.startViewTransition != null ?
                            doc.startViewTransition(() => e.continue()) :
                            e.continue();
                    };
                    super(options);
                }
                get context() {
                    return Jade.Application.instance.contexts.getContextById(this.ID);
                }
                get destroyContextTrigger() {
                    return this.state.get("destroyContext", "BeforeClose");
                }
                get isMaximized() {
                    return this.window?.options?.isMaximized == true;
                }
                get isMinimized() {
                    return this.window?.options?.isMinimized == true;
                }
                get newContext() {
                    return this.state.get("newContext", true);
                }
                get windowId() {
                    return this.m_windowId;
                }
                set windowId(value) {
                    this.m_windowId = value;
                }
                get windowNode() {
                    this.ensureWindowNode();
                    return this.m_windowNode;
                }
                static get windowsNode() {
                    this.ensureWindowsNode();
                    return $("body > DIV[data-role=windows]");
                }
                get window() {
                    return this.m_window;
                }
                set window(value) {
                    this.m_window = value;
                }
                center() {
                    this.window.center();
                }
                close() {
                    this.window.close();
                }
                hide() {
                }
                maximize() {
                    this.window.maximize();
                }
                minimize() {
                    this.window.minimize();
                }
                restore() {
                    this.window.restore();
                }
                setWindowOptions(options = {}) {
                    if (this.window != null) {
                        this.window.setOptions(options);
                        this.setWindowIcons();
                    }
                }
                show() {
                }
                template(content = "") {
                    return `<div class="-jadeui-window-content">${content}</div>`;
                }
                createContext() {
                    if (!this.newContext) {
                        return;
                    }
                    Jade.Application
                        .instance
                        .contexts
                        .createContext({
                        id: this.ID,
                        name: this.window.title(),
                        isDialogContext: true,
                        contextNode: this.node
                    });
                }
                destroyContext() {
                    let context = Jade.Application
                        .instance
                        .contexts
                        .getContextById(this.ID);
                    if (context == null) {
                        return;
                    }
                    Jade.Application
                        .instance
                        .contexts
                        .destroyContext({
                        id: this.ID
                    });
                }
                onBrowserResize() {
                    if (!this.isMaximized) {
                        this.center();
                    }
                }
                onClosing(e) {
                    this.destroyContextTrigger == "BeforeClose" ?
                        this.destroyContext() : null;
                }
                onClose(e) {
                }
                onClosed(e) {
                    this.destroyContextTrigger == "AfterClose" ?
                        this.destroyContext() : null;
                }
                onComplete(e) {
                    super.onComplete(e);
                    this.window.center();
                    this.setDefaultInputFocus();
                    this.setDefaultInputReturnKeystrokeBehavior();
                }
                onDestroy(e) {
                    super.onDestroy(e);
                    if (this.window != null) {
                        this.window.destroy();
                    }
                    if (this.m_browserResizeSubscription != null) {
                        this.m_browserResizeSubscription.unsubscribe();
                    }
                }
                onInit(e) {
                    super.onInit(e);
                    this.windowId = Jade.Guid.new();
                }
                onInputReturnKeystroke() {
                }
                onTemplate(e) {
                    super.onTemplate(e);
                    this.window_init();
                }
                setDefaultInputFocus() {
                    let input = this.node.find(`input:not([disabled]), 
                                select:not([disabled]),
                                textarea:not([disabled]),
                                button:not([disabled])`).first();
                    input.select();
                    input.focus();
                }
                setDefaultInputReturnKeystrokeBehavior() {
                    this.node.on(Jade.BrowserEvent.KEYUP, "input, select", (e) => {
                        if (e.keyCode === Jade.KeyCode.Enter) {
                            this.onInputReturnKeystroke();
                        }
                    });
                }
                onWindowResize() {
                }
                setWindowIcons() {
                    let close = this.container
                        .find(".k-i-close");
                    close.addClass("icofont-close");
                    close.empty();
                    let maximize = this.container
                        .find(".k-i-maximize");
                    maximize.addClass("icofont-maximize");
                    maximize.empty();
                    let restore = this.container
                        .find(".k-i-restore");
                    restore.addClass("icofont-restore");
                    restore.empty();
                }
                ensureWindowNode() {
                    if (this.m_windowNode == null) {
                        this.m_windowNode = this.window.element.closest("k-window");
                    }
                }
                static ensureWindowsNode() {
                    if ($("body > DIV[data-role=windows]").length === 0) {
                        $("body").append("<div data-role='windows'></div>");
                    }
                }
                getOptions() {
                    return _.extend(this.getDefaultOptions(), this.state.toJSON());
                }
                window_init() {
                    let options = this.getOptions();
                    let defaultOptions = _.extend(this.getOptions(), {
                        actions: options.actions || [],
                        title: options.title !== false ? this.getOptions().title : false,
                        modal: { preventScroll: true },
                        animation: false,
                        close: (e) => {
                            this.window_close({ windowTriggered: e.userTriggered });
                        },
                        resize: () => {
                            this.onWindowResize();
                        },
                        refresh: null,
                        visible: false
                    });
                    defaultOptions.actions;
                    this.node.detach();
                    this.container = null;
                    this.m_window = this.node
                        .kendoWindow(defaultOptions)
                        .data("kendoWindow");
                    this.container = this.window.wrapper;
                    this.node.parent().addClass("-jadeui-window");
                    this.node.parent().attr("window-id", this.ID);
                    this.formatTitleBar();
                    this.window.center();
                    this.window.open();
                    this.window.refresh({});
                    this.createContext();
                    this.setWindowIcons();
                    this.m_browserResizeSubscription =
                        Jade.Application
                            .instance
                            .contexts
                            .global
                            .events
                            .subscribe("Window:Resized", () => {
                            this.onBrowserResize();
                        });
                }
                formatTitleBar() {
                    let titleBar = this
                        .container.find(".k-window-titlebar");
                    let titleBarTitle = titleBar.find(".k-window-title");
                    let titleBarActions = titleBar.find(".k-window-actions");
                    titleBarTitle.detach();
                    titleBarActions.detach();
                    titleBar.empty();
                    titleBar.append(titleBarTitle);
                    titleBar.append(titleBarActions);
                }
                window_close(e) {
                    this.onClosing(e);
                    this.onClose(e);
                    this.onClosed(e);
                    this.destroy();
                }
            }
            Dialogs.Window = Window;
        })(Dialogs = UI.Dialogs || (UI.Dialogs = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Dialogs;
        (function (Dialogs) {
            ;
            ;
            class DialogOf extends Dialogs.Window {
                constructor(options) {
                    super(options);
                }
                get boxNode() {
                    return this.node.find(".-jadeui-dialog-box");
                }
                get contentNode() {
                    return this.node.find(".-jadeui-dialog-box-content");
                }
                get buttonsDeck() {
                    return this.m_buttonsDeck;
                }
                get buttons() {
                    return this.state.get("buttons", []);
                }
                get select() {
                    return this.state.get("select");
                }
                get padding() {
                    return this.state.get("padding", 10);
                }
                template(content = "") {
                    let template = `<div class="-jadeui-dialog-box">
                                        <div class="-jadeui-dialog-box-content">
                                            ${content}
                                        </div>
                                    </div>`;
                    return super.template(template);
                }
                close(args) {
                    let button = null;
                    let hasName = args?.name != null;
                    if (hasName) {
                        button = this.buttonsDeck.getButton(args.name);
                    }
                    super.close();
                    if (!hasName) {
                        return;
                    }
                    this.fireSelectCallback({
                        dialog: this,
                        button: button,
                        close: null,
                        handled: false,
                        name: args.name
                    }, args.data);
                }
                static open(options) {
                    return new Dialogs.Dialog(options);
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.buttons_init();
                    this.buttons_add();
                }
                onClose(e) {
                    if (e.windowTriggered) {
                        this.close({
                            name: "cancel"
                        });
                    }
                }
                onComplete(e) {
                    super.onComplete(e);
                    this.setButtonsDeckVisibility();
                }
                onDialogSelect(e, data) {
                }
                getResultData(data = {}) {
                    return {};
                }
                onTemplate(e) {
                    super.onTemplate(e);
                    this.boxNode.css({
                        padding: this.padding > 0 ? `${this.padding}px` : 0
                    });
                }
                buttons_add() {
                    this.buttons.forEach(definition => {
                        this.buttonsDeck.addButton(definition);
                    });
                }
                buttons_init() {
                    this.m_buttonsDeck = new Dialogs.DialogButtons({
                        insertAt: ".-jadeui-dialog-box",
                        click: (e) => {
                            this.fireButtonClickHandler(e);
                        }
                    });
                    this.controls.add(this.m_buttonsDeck);
                }
                fireButtonClickHandler(e, data = {}) {
                    let args = {
                        dialog: this,
                        button: e.button,
                        close: () => { super.close(); },
                        handled: false,
                        name: e.name
                    };
                    data = this.getResultData(data);
                    this.onDialogSelect(args, data);
                    this.fireSelectCallback(args, data);
                }
                fireSelectCallback(e, data) {
                    e.dialog = this;
                    e.close = (e) => { super.close(); };
                    if (data == null) {
                        data = this.getResultData();
                    }
                    if (e.handled) {
                        return;
                    }
                    if (this.select == null) {
                        return;
                    }
                    if (_.isFunction(this.select)) {
                        this.select(e, data);
                        return;
                    }
                    for (let name in this.select) {
                        if (name.toLowerCase() == e.name.toLowerCase()) {
                            this.select[name](e, data);
                        }
                    }
                }
                setButtonsDeckVisibility() {
                    this.buttonsDeck.hasButtons ?
                        this.buttonsDeck.node.show() :
                        this.buttonsDeck.node.hide();
                    this.buttonsDeck.hasButtons ?
                        this.boxNode.css({
                            gridTemplateRows: "auto maxcontent",
                            gridGap: "10px"
                        }) :
                        this.boxNode.css({
                            gridTemplateRows: "auto",
                            gridGap: "0"
                        });
                }
            }
            Dialogs.DialogOf = DialogOf;
        })(Dialogs = UI.Dialogs || (UI.Dialogs = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Dialogs;
        (function (Dialogs) {
            class Dialog extends Dialogs.DialogOf {
                constructor(options = {}) {
                    super(options);
                }
            }
            Dialogs.Dialog = Dialog;
        })(Dialogs = UI.Dialogs || (UI.Dialogs = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Dialogs;
        (function (Dialogs) {
            ;
            class DialogButton extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                }
                get name() {
                    return this.state.get("name");
                }
                get clickCallback() {
                    return this.state.get("click", () => { });
                }
                get contentNode() {
                    return this.node.find("div[role=content]");
                }
                get icon() {
                    return this.state.get("icon");
                }
                get iconNode() {
                    return this.node.find("div[role=icon]");
                }
                get iconSet() {
                    return this.state.get("iconSet");
                }
                get iconSetSize() {
                    return this.state.get("iconSetSize");
                }
                get imageNode() {
                    return this.node.find("img");
                }
                get label() {
                    return this.state.get("label");
                }
                get labelNode() {
                    return this.node.find("div[role=label]");
                }
                get value() {
                    return this.state.get("value");
                }
                template() {
                    return `<button class="-jadeui-dialog-button">
                        <div role="content"></div>
                    </button>`;
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.setContent();
                }
                onStateChanged() {
                    super.onStateChanged();
                    this.setContent();
                    this.node.on(Jade.BrowserEvent.CLICK, (e) => {
                        this.clickCallback({
                            button: this,
                            name: this.name
                        });
                    });
                }
                setIconNodeVisibility(visible) {
                    if (!visible) {
                        this.iconNode.remove();
                        return;
                    }
                    if (this.iconNode.length === 0) {
                        this.contentNode.append(this.iconTemplate());
                    }
                }
                setLabelNodeVisibility(visible) {
                    if (!visible) {
                        this.labelNode.remove();
                        return;
                    }
                    if (this.labelNode.length === 0) {
                        this.contentNode.append(this.labelTemplate());
                    }
                }
                iconTemplate() {
                    return `<div role="icon" >
                        <img src="${Jade.IconSet.get(this.iconSet).resolve(this.icon, this.iconSetSize)}"/ >
                    </div>`;
                }
                labelTemplate() {
                    return `<div role="label">${this.label}</div>`;
                }
                setContent() {
                    let hasIcon = this.icon != null;
                    let hasLabel = this.label != null;
                    this.setIconNodeVisibility(hasIcon);
                    this.setLabelNodeVisibility(hasLabel);
                    this.contentNode.css({
                        gridTemplateColumns: `${hasIcon ? "max-context" : ""} (${hasLabel ? "auto" : ""}`
                    });
                }
            }
            Dialogs.DialogButton = DialogButton;
        })(Dialogs = UI.Dialogs || (UI.Dialogs = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Dialogs;
        (function (Dialogs) {
            let MessageDialogStyle;
            (function (MessageDialogStyle) {
                MessageDialogStyle[MessageDialogStyle["Success"] = 1] = "Success";
                MessageDialogStyle[MessageDialogStyle["Error"] = 2] = "Error";
                MessageDialogStyle[MessageDialogStyle["Warning"] = 3] = "Warning";
                MessageDialogStyle[MessageDialogStyle["Information"] = 4] = "Information";
                MessageDialogStyle[MessageDialogStyle["Question"] = 5] = "Question";
            })(MessageDialogStyle = Dialogs.MessageDialogStyle || (Dialogs.MessageDialogStyle = {}));
            let MessageDialogButtonStyle;
            (function (MessageDialogButtonStyle) {
                MessageDialogButtonStyle[MessageDialogButtonStyle["None"] = 0] = "None";
                MessageDialogButtonStyle[MessageDialogButtonStyle["OK"] = 1] = "OK";
                MessageDialogButtonStyle[MessageDialogButtonStyle["OKCancel"] = 2] = "OKCancel";
                MessageDialogButtonStyle[MessageDialogButtonStyle["YesNo"] = 3] = "YesNo";
                MessageDialogButtonStyle[MessageDialogButtonStyle["YesNoCancel"] = 4] = "YesNoCancel";
            })(MessageDialogButtonStyle = Dialogs.MessageDialogButtonStyle || (Dialogs.MessageDialogButtonStyle = {}));
            let MessageDialogButton;
            (function (MessageDialogButton) {
                MessageDialogButton["ok"] = "ok";
                MessageDialogButton["cancel"] = "cancel";
                MessageDialogButton["yes"] = "yes";
                MessageDialogButton["no"] = "no";
            })(MessageDialogButton = Dialogs.MessageDialogButton || (Dialogs.MessageDialogButton = {}));
            class StyledDialogOf extends Dialogs.DialogOf {
                constructor(options) {
                    super(options);
                }
                get dialogStyle() {
                    return this.state.get("dialogStyle", MessageDialogStyle.Warning);
                }
                get dialogButtons() {
                    return this.state.get("dialogButtons", MessageDialogButtonStyle.OK);
                }
                get contentNode() {
                    return this.node.find(`.${this.contentNodeCssClass}`);
                }
                get contentNodeCssClass() {
                    return "-jadeui-styled-dialog-content";
                }
                get iconNode() {
                    return this.node.find(`.${this.iconNodeCssClass}`);
                }
                get iconNodeCssClass() {
                    return "-jadeui-styled-dialog-icon";
                }
                get imageNode() {
                    return this.node.find(`.${this.iconNodeCssClass} > i`);
                }
                template(content = "") {
                    return super.template(`<div class="-jadeui-styled-dialog-template">
                                        <div class="-jadeui-styled-dialog-icon"><i></i></div>
                                        <div class="-jadeui-styled-dialog-content" data-controls>${content}</div>
                                   </div>`);
                }
                getDefaultOptions() {
                    return {
                        title: "Message",
                        resizable: false,
                        width: 450
                    };
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.addMessageDialogStyle();
                    this.addMessageDialogButtons();
                }
                onDialogSelect(e, data) {
                    super.onDialogSelect(e, data);
                    if (!this.isHandlerRegistered(e.name)) {
                        this.close();
                    }
                }
                addMessageDialogStyle() {
                    let prefix = "-jadejs-message-dialog-";
                    switch (this.dialogStyle) {
                        case MessageDialogStyle.Error:
                            this.imageNode.addClass("icofont-error");
                            this.node.addClass(`${prefix}error`);
                            break;
                        case MessageDialogStyle.Information:
                            this.imageNode.addClass("icofont-info-circle");
                            this.node.addClass(`${prefix}info`);
                            break;
                        case MessageDialogStyle.Question:
                            this.imageNode.addClass("icofont-question-circle");
                            this.node.addClass(`${prefix}question`);
                            break;
                        case MessageDialogStyle.Success:
                            this.imageNode.addClass("icofont-check-circled");
                            this.node.addClass(`${prefix}success`);
                            break;
                        case MessageDialogStyle.Warning:
                            this.imageNode.addClass("icofont-warning");
                            this.node.addClass(`${prefix}warn`);
                            break;
                    }
                    this.iconNode.css({
                        fontSize: "48px"
                    });
                }
                addMessageDialogButtons() {
                    switch (this.dialogButtons) {
                        case MessageDialogButtonStyle.OK:
                            this.buttonsDeck.addAutoButtons("ok");
                            break;
                        case MessageDialogButtonStyle.OKCancel:
                            this.buttonsDeck.addAutoButtons("ok", "cancel");
                            break;
                        case MessageDialogButtonStyle.YesNo:
                            this.buttonsDeck.addAutoButtons("yes", "no");
                            break;
                        case MessageDialogButtonStyle.YesNoCancel:
                            this.buttonsDeck.addAutoButtons("yes", "no", "cancel");
                            break;
                    }
                }
                isHandlerRegistered(name) {
                    return this.select != null &&
                        (_.isFunction(this.select) || this.select[name] != null);
                }
            }
            Dialogs.StyledDialogOf = StyledDialogOf;
        })(Dialogs = UI.Dialogs || (UI.Dialogs = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Dialogs;
        (function (Dialogs) {
            class StyledDialog extends Dialogs.StyledDialogOf {
                constructor(options = {}) {
                    super(options);
                }
                static open(options) {
                    return new StyledDialog(options);
                }
            }
            Dialogs.StyledDialog = StyledDialog;
        })(Dialogs = UI.Dialogs || (UI.Dialogs = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Dialogs;
        (function (Dialogs) {
            class MessageDialog extends Dialogs.StyledDialog {
                constructor(options) {
                    super(options);
                }
                get message() {
                    return this.state.get("message");
                }
                static open(options) {
                    return new MessageDialog(options);
                }
                template() {
                    return super.template(this.message);
                }
            }
            Dialogs.MessageDialog = MessageDialog;
        })(Dialogs = UI.Dialogs || (UI.Dialogs = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Dialogs;
        (function (Dialogs) {
            class MultiChoiceDialogOf extends Dialogs.StyledDialogOf {
                constructor(options) {
                    super(options);
                    options.select;
                }
                get content() {
                    return this.m_content;
                }
                get items() {
                    return this.state.get("items", []);
                }
                get header() {
                    return this.state.get("header");
                }
                getDefaultOptions() {
                    return {
                        title: "Application Message",
                        dialogStyle: Dialogs.MessageDialogStyle.Question,
                        dialogButtons: Jade.UI.Dialogs.MessageDialogButtonStyle.OKCancel,
                        resizable: true,
                        width: 450,
                        height: 300,
                        minHeight: 150,
                        minWidth: 200
                    };
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.m_content = new Dialogs.MultiChoiceDialogContent({
                        header: this.header,
                        items: this.items
                    });
                    this.controls.add(this.m_content);
                }
                getResultData(data) {
                    data.selections = [];
                    this.content.items.each(item => {
                        if (item.isSelected) {
                            data.selections.push(item.toJSON());
                        }
                    });
                    data.selection = _.first(data.selections);
                    return data;
                }
            }
            Dialogs.MultiChoiceDialogOf = MultiChoiceDialogOf;
        })(Dialogs = UI.Dialogs || (UI.Dialogs = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Dialogs;
        (function (Dialogs) {
            class MultiChoiceDialog extends Dialogs.MultiChoiceDialogOf {
                constructor(options) {
                    super(options);
                }
                static open(options) {
                    return new MultiChoiceDialog(options);
                }
            }
            Dialogs.MultiChoiceDialog = MultiChoiceDialog;
        })(Dialogs = UI.Dialogs || (UI.Dialogs = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Dialogs;
        (function (Dialogs) {
            class MultiChoiceDialogContent extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                }
                get itemsArray() {
                    return this.state.get("items", []);
                }
                get items() {
                    return this.controls.getByType(Dialogs.MultiChoiceDialogItem);
                }
                get header() {
                    return this.state.get("header");
                }
                get contentNodeCssClass() {
                    return "-jadeui-multi-choice-dialog-content";
                }
                get headerNodeCssClass() {
                    return "-jadeui-multi-choice-dialog-content-header";
                }
                get itemsNodeCssClass() {
                    return "-jadeui-multi-choice-dialog-content-items";
                }
                template() {
                    return `<div class="${this.contentNodeCssClass}">
                        <div class="${this.headerNodeCssClass}">${this.header}</div>
                        <div class="${this.itemsNodeCssClass}" data-controls></div>
                    </div>`;
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.itemsArray.forEach(item => {
                        this.controls.add(new Dialogs.MultiChoiceDialogItem({
                            title: item.title,
                            message: item.message,
                            selected: item.selected,
                            value: item.value,
                            group: this.ID
                        }));
                    });
                }
            }
            Dialogs.MultiChoiceDialogContent = MultiChoiceDialogContent;
        })(Dialogs = UI.Dialogs || (UI.Dialogs = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Dialogs;
        (function (Dialogs) {
            class MultiChoiceDialogItem extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                }
                get group() {
                    return this.state.get("group");
                }
                get contentNodeCssClass() {
                    return "-jadeui-multi-choice-dialog-item-content";
                }
                get contentTitleNodeCssClass() {
                    return "-jadeui-multi-choice-dialog-item-content-title";
                }
                get contentMessageNodeCssClass() {
                    return "-jadeui-multi-choice-dialog-item-content-message";
                }
                get controlNode() {
                    return this.node.find(`.${this.controlNodeCssClass}`);
                }
                get controlNodeCssClass() {
                    return "-jadeui-multi-choice-dialog-item-control";
                }
                get inputNode() {
                    return this.node.find(`.${this.controlNodeCssClass} > input`);
                }
                get isSelected() {
                    return this.inputNode.is(":checked");
                }
                get message() {
                    return this.state.get("message");
                }
                get selected() {
                    return this.state.get("selected");
                }
                get title() {
                    return this.state.get("title");
                }
                get value() {
                    return this.state.get("value");
                }
                template() {
                    return `<label class="-jadeui-multi-choice-dialog-item">
                        <div class="${this.controlNodeCssClass}">
                            <input
                                type="radio"
                                name="${this.group}" 
                                ${this.selected ? "checked" : ""}/>
                        </div>
                        <div class="${this.contentNodeCssClass}">
                            <div class="${this.contentTitleNodeCssClass}">${this.title}</div>
                            <div class="${this.contentMessageNodeCssClass}">${this.message}</div>
                        </div>
                    </label>`;
                }
                toJSON() {
                    return {
                        title: this.title,
                        message: this.message,
                        selected: this.isSelected,
                        value: this.value
                    };
                }
            }
            Dialogs.MultiChoiceDialogItem = MultiChoiceDialogItem;
        })(Dialogs = UI.Dialogs || (UI.Dialogs = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Dialogs;
        (function (Dialogs) {
            class MultiMessageDialog extends Dialogs.StyledDialog {
                constructor(options) {
                    super(options);
                }
                get messages() {
                    return this.state.get("messages", []);
                }
                get header() {
                    return this.state.get("header");
                }
                static open(options) {
                    return new MultiMessageDialog(options);
                }
                getDefaultOptions() {
                    return {
                        title: "Application Message",
                        dialogStyle: Dialogs.MessageDialogStyle.Information,
                        resizable: true,
                        width: 450,
                        height: 250,
                        minHeight: 150,
                        minWidth: 200
                    };
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.controls.add(new Dialogs.MultiMessageDialogContent({
                        header: this.header,
                        messages: this.messages
                    }));
                }
            }
            Dialogs.MultiMessageDialog = MultiMessageDialog;
        })(Dialogs = UI.Dialogs || (UI.Dialogs = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Dialogs;
        (function (Dialogs) {
            class MultiMessageDialogContent extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                }
                get header() {
                    return this.state.get("header");
                }
                get headerNode() {
                    return this.node.find(`.${this.headerNodeCssClass}`);
                }
                get headerNodeCssClass() {
                    return "-jadeui-multi-message-dialog-header";
                }
                get messages() {
                    return this.state.get("messages");
                }
                get messagesNode() {
                    return this.node.find(`.${this.messagesNodeCssClass}`);
                }
                get messagesNodeCssClass() {
                    return "-jadeui-multi-message-dialog-messages";
                }
                get messageNodeCssClass() {
                    return "-jadeui-multi-message-dialog-message";
                }
                template() {
                    return `<div class="-jadeui-multi-message-dialog-content">
                        <div class="${this.headerNodeCssClass}">${this.header}</div>
                        <div class="${this.messagesNodeCssClass}"></div>
                    </div>`;
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.addMessages();
                }
                addMessages() {
                    _.each(this.messages, (message) => {
                        let template = `
                    <div class="${this.messageNodeCssClass}">
                        <div><i class="icofont-simple-right"></i></div>
                        <div>${message}</div>
                    </div>`;
                        this.messagesNode.append(template);
                    });
                }
            }
            Dialogs.MultiMessageDialogContent = MultiMessageDialogContent;
        })(Dialogs = UI.Dialogs || (UI.Dialogs = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Dialogs;
        (function (Dialogs) {
            class TaggedMessageDialog extends Dialogs.StyledDialog {
                constructor(options) {
                    super(options);
                }
                get header() {
                    return this.state.get("header");
                }
                get messageName() {
                    return this.state.get("messageName");
                }
                get messages() {
                    return this.state.get("messages", []);
                }
                get tagsName() {
                    return this.state.get("tagsName");
                }
                static open(options) {
                    return new TaggedMessageDialog(options);
                }
                getDefaultOptions() {
                    return {
                        title: "Application Message",
                        dialogStyle: Dialogs.MessageDialogStyle.Information,
                        resizable: true,
                        width: 450,
                        height: 250,
                        minHeight: 150,
                        minWidth: 200
                    };
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.controls.add(new Dialogs.TaggedMessageDialogContent({
                        header: this.header,
                        messages: this.messages,
                        messageName: this.messageName,
                        tagsName: this.tagsName
                    }));
                }
            }
            Dialogs.TaggedMessageDialog = TaggedMessageDialog;
        })(Dialogs = UI.Dialogs || (UI.Dialogs = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
var Jade;
(function (Jade) {
    var UI;
    (function (UI) {
        var Dialogs;
        (function (Dialogs) {
            class TaggedMessageDialogContent extends Jade.UI.Control {
                constructor(options) {
                    super(options);
                }
                get header() {
                    return this.state.get("header", "Messages:");
                }
                get headerNodeCssClass() {
                    return "-jadeui-tagged-message-dialog-header";
                }
                get messageName() {
                    return this.state.get("messageName", "message");
                }
                get messages() {
                    return this.state.get("messages");
                }
                get messagesNodeCssClass() {
                    return "-jadeui-tagged-message-dialog-messages";
                }
                get messageNodeCssClass() {
                    return "-jadeui-tagged-message-dialog-message";
                }
                get messageTagNodeCssClass() {
                    return "-jadeui-tagged-message-dialog-message-tag";
                }
                get tagsName() {
                    return this.state.get("tagName", "tags");
                }
                get treeNode() {
                    return this.node.find(`.${this.treeNodeCssClass}`);
                }
                get treeNodeCssClass() {
                    return "-jadeui-tagged-message-dialog-tree";
                }
                template() {
                    return `<div class="-jadeui-tagged-message-dialog-content">
                        <div class="${this.headerNodeCssClass}">${this.header}</div>
                        <div class="${this.messagesNodeCssClass}">
                            <div class="${this.treeNodeCssClass}"></div>
                        </div>
                    </div>`;
                }
                onActivate(e) {
                    super.onActivate(e);
                    this.tree_init();
                }
                tree_data() {
                    let result = [];
                    _.each(this.messages, (item) => {
                        let node = {
                            text: item[this.messageName],
                            items: [],
                            expanded: true,
                            type: "message"
                        };
                        _.forOwn(item[this.tagsName], (value, key) => {
                            node.items.push({
                                text: Jade.String.humanize(key),
                                value: value,
                                expanded: true,
                                type: "tag"
                            });
                        });
                        result.push(node);
                    });
                    return result;
                }
                tree_init() {
                    this.treeNode.kendoTreeView({
                        dataSource: {
                            data: this.tree_data()
                        },
                        encoded: false,
                        select: (e) => {
                            e.preventDefault();
                        },
                        template: (e) => {
                            return this.tree_node_template(e.item);
                        }
                    });
                }
                tree_node_template(item) {
                    if (item.type === "tag") {
                        return `<span class="${this.messageTagNodeCssClass}">
                            <span>${item.text}:</span>
                            <span>${item.value != null ? item.value : ""}</span>
                        </span>`;
                    }
                    else {
                        return `<span class="${this.messageNodeCssClass}">
                            ${item.text}
                        </span>`;
                    }
                }
            }
            Dialogs.TaggedMessageDialogContent = TaggedMessageDialogContent;
        })(Dialogs = UI.Dialogs || (UI.Dialogs = {}));
    })(UI = Jade.UI || (Jade.UI = {}));
})(Jade || (Jade = {}));
