@easyquery/ui 7.2.3-rc03 → 7.2.4-beta03

package/dist/lib/widgets/query_panel.js

@@ -1,654 +1,676 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import { i18n } from '@easydata/core';
-import { DataType, utils as dataUtils } from '@easydata/core';
-import { Widget, WidgetGroup, eqconsts, CondTag, EqValueEditor, EqEditorTag, DataKind, QueryChangePart, QueryChangeAction, ConditionPart } from '@easyquery/core';
-import { domel } from '@easydata/ui';
-import { eqDragManager, DropEffect } from '@easydata/ui';
-import { QPEditablePart } from '../types/qp_editable_part';
-import { PopupMenu } from '../utils/popup_menu';
-import { SimpleConditionRenderer } from './renderers/querypanel/condition_renderer';
-import { ConditionGroupRenderer } from './renderers/querypanel/condition_group_renderer';
-import { InputExpressionRenderer } from './renderers/querypanel/input_expression_renderer';
-import { AttributeExpressionRenderer } from './renderers/querypanel/attribute_expression_renderer';
-import { AddRowRenderer } from './renderers/querypanel/addrow_renderer';
-import { ListExpressionRenderer, SqlListExpressionRenderer, CustomListExpressionRenderer } from './renderers/querypanel/list_expression_renderer';
-import { OperatorRenderer } from './renderers/querypanel/operator_renderer';
-import { DateTimeExpressionRenderer } from './renderers/querypanel/datetime_expression_render';
-import { SubQueryExpressionRenderer } from './renderers/querypanel/subquery_expression_renderer';
-import { eqCssPrefix, eqCssMobile, safeFocus } from '../utils/utils';
-import { browserUtils } from '../utils/browser_utils';
-import { BindToParentColumnExpressionRenderer } from './renderers/querypanel/bind_to_parent_column_expression_renderer';
-/**
- * The query panel wiget, implemented without JQuery.
- */
-var QueryPanel = /** @class */ (function (_super) {
-    __extends(QueryPanel, _super);
-    /**
-     * The default constructor.
-     * @param slot The html element.
-     */
-    function QueryPanel(slot, customQuery) {
-        var _this = _super.call(this, slot) || this;
-        _this.options = {
-            editableParts: QPEditablePart.All,
-            isSubQuery: false,
-            activeCondition: null,
-            entitiesPopupHandler: null,
-            entitiesListFilter: null,
-            menuContainer: document.body,
-            showRootRow: true,
-            showAddRow: true,
-            showCheckboxes: false,
-            allowParameterization: false,
-            allowInJoinConditions: false,
-            showPoweredBy: false,
-            buttons: {
-                condition: null,
-                group: null
-            },
-            alwaysShowButtonsInGroups: false,
-            alwaysShowButtonsInConditions: false,
-            showConjunctions: true,
-            accentActiveCondition: true,
-            activateRootOnStart: true,
-            yearRange: 'c-10:c+10',
-            oneClickDateSelection: true,
-            showDateTimeInput: false,
-            attrElementFormat: '{entity} {attr}',
-            menuOptions: {
-                showSearchBoxAfter: 30,
-                searchBoxAutoFocus: true,
-                activateOnMouseOver: true,
-                itemRenderedCallback: null
-            },
-            allowDragDrop: true,
-            attrPlacement: 0,
-            sortEntities: false,
-            subQueryDialogWidth: 600,
-            subQueryDialogHeight: 300,
-            dialogZIndex: 100000,
-            numberListSeparators: [',', ';'],
-            autoEditNewCondition: false,
-            onConditionRendered: null,
-            onGetConditionRenderer: null,
-            onGetExpressionRenderer: null,
-            onGetOperatorRenderer: null,
-            onOperatorRendered: null,
-            onGetAddRowRenderer: null,
-            defaultQuery: null
-        };
-        _this.customQuery = null;
-        _this.landingSlot = domel('div')
-            .addClass(_this.cssPrefix + "-cond-landing-slot")
-            .addChildElement(domel('div')
-            .toDOM())
-            .toDOM();
-        if (!_this.slot.classList.contains(_this.cssPrefix + "-panel")) {
-            _this.slot.classList.add(_this.cssPrefix + "-panel");
-        }
-        _this.group = WidgetGroup.Query;
-        if (customQuery) {
-            _this.customQuery = customQuery;
-        }
-        return _this;
-    }
-    Object.defineProperty(QueryPanel.prototype, "cssPrefix", {
-        get: function () {
-            return 'eqjs-qp';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    QueryPanel.prototype.getWidgetType = function () {
-        return 'queryPanel';
-    };
-    /**
-     * Initialize widget.
-     * @param context The context.
-     * @param options The options.
-     */
-    QueryPanel.prototype.init = function (context, options) {
-        var _this = this;
-        _super.prototype.init.call(this, context, options);
-        this.setOptions(options);
-        //detach previously defined query observer (if any)
-        this.detachQueryObserver();
-        this.attachQueryObserver();
-        eqDragManager.removeDropContainer(this.slot);
-        if (this.options.allowDragDrop) {
-            var model_1 = this.getContext().getModel();
-            eqDragManager.registerDropContainer({
-                element: this.slot,
-                scopes: ["entityAttr"],
-                onDragEnter: function (container, ev) {
-                    _this.slot.classList.add(eqCssPrefix + "-drophover");
-                    ev.dragImage.classList.add('eqjs-sortable-helper');
-                    _this.showLandingSlot();
-                    var attrId = ev.data.attrId;
-                    if (!model_1.checkAttrProperty(attrId, "useInConditions")) {
-                        ev.dropEffect = DropEffect.Forbid;
-                    }
-                },
-                onDragOver: function (container, ev) {
-                },
-                onDragLeave: function (container, ev) {
-                    ev.dragImage.classList.remove('eqjs-sortable-helper');
-                    ev.dragImage.style.removeProperty('width');
-                    _this.slot.classList.remove(eqCssPrefix + "-drophover");
-                    _this.hideLangindSlot();
-                },
-                onDrop: function (container, ev) {
-                    var query = _this.getQuery();
-                    var descr = {
-                        parent: query.getRootCondition(),
-                        attributeId: ev.data.attrId
-                    };
-                    var cond = query.addSimpleCondition(descr);
-                    if (cond) {
-                        query.fireConditionsChangedEvent(QueryChangeAction.Add, cond);
-                    }
-                }
-            });
-        }
-    };
-    QueryPanel.prototype.destroyCore = function () {
-        eqDragManager.removeDropContainer(this.slot);
-        this.detachQueryObserver();
-        this.slot.innerHTML = '';
-    };
-    QueryPanel.prototype.getEntitiesMenu = function () {
-        return this.entitiesMenu;
-    };
-    QueryPanel.prototype.getConditionMenu = function () {
-        return this.conditionMenu;
-    };
-    QueryPanel.prototype.getLinkTypeMenu = function () {
-        return this.linkTypeMenu;
-    };
-    QueryPanel.prototype.getConditionGroupMenu = function (isRoot) {
-        if (isRoot === void 0) { isRoot = false; }
-        return isRoot ? this.rootGroupMenu : this.groupMenu;
-    };
-    QueryPanel.prototype.attachQueryObserver = function () {
-        var _this = this;
-        var query = this.getQuery();
-        this.queryEventCallbackId = query.addChangedCallback(function (event) {
-            //if something has changed, and that change is related to conditions
-            var edata = event.data;
-            if (!edata || (edata.part != QueryChangePart.Conditions && edata.part != QueryChangePart.All)) {
-                return;
-            }
-            var focusedBefore = document.activeElement;
-            var isFocusInside = _this.slot.contains(focusedBefore) || focusedBefore == document.body;
-            switch (edata.action) {
-                case QueryChangeAction.Modify: {
-                    var conds = edata.changee;
-                    var modifyCondition_1 = function (cond, autoEdit) {
-                        var el = _this.slot.querySelector("div[data-id=" + cond.id + "]");
-                        if (el) {
-                            autoEdit = autoEdit
-                                && ((edata.condPart & ConditionPart.Operator) === ConditionPart.Operator)
-                                && cond.expressions.length > 1
-                                && (cond.expressions[1]._isDefaultValue || cond.expressions[1].value == '' ||
-                                    cond.expressions[1].value == null);
-                            var isActive = el.classList.contains('active');
-                            var renderer = _this.getConditionRenderer(cond, el);
-                            if (renderer) {
-                                var newEl = renderer.render(autoEdit);
-                                if (isActive) {
-                                    _this.toggleConditionPicked(cond);
-                                }
-                                if (isFocusInside && !autoEdit) {
-                                    var focusElem = newEl.querySelector('a') || newEl.querySelector('.eqjs-qp-condition-button');
-                                    if (focusElem) {
-                                        safeFocus(focusElem);
-                                    }
-                                }
-                            }
-                        }
-                    };
-                    var autoEdit_1 = _this.options.autoEditNewCondition;
-                    if (Array.isArray(conds)) {
-                        conds.forEach(function (cond) { return modifyCondition_1(cond, autoEdit_1); });
-                        autoEdit_1 = false;
-                    }
-                    else {
-                        modifyCondition_1(conds, autoEdit_1);
-                    }
-                    break;
-                }
-                case QueryChangeAction.Add: {
-                    var conds = edata.changee;
-                    var addCondition_1 = function (cond) {
-                        var renderer = _this.getConditionRenderer(cond);
-                        if (renderer) {
-                            var parent_1 = cond.getParent();
-                            var parentEl = _this.slot.querySelector("div[data-id=" + parent_1.id + "]");
-                            if (parentEl) {
-                                var newCondContainer = parentEl.lastChild;
-                                if (newCondContainer) {
-                                    var el = renderer.render(_this.options.autoEditNewCondition);
-                                    newCondContainer.appendChild(el);
-                                    el.scrollIntoView(false);
-                                    if (isFocusInside && !_this.options.autoEditNewCondition) {
-                                        el.querySelector("a").focus();
-                                    }
-                                }
-                            }
-                        }
-                    };
-                    if (Array.isArray(conds)) {
-                        conds.forEach(function (cond) { return addCondition_1(cond); });
-                    }
-                    else {
-                        addCondition_1(conds);
-                    }
-                    break;
-                }
-                case QueryChangeAction.Delete: {
-                    var conds = edata.changee;
-                    var deleteCondition_1 = function (cond) {
-                        var el = _this.slot.querySelector("div[data-id=" + cond.id + "]");
-                        if (el) {
-                            var parent_2 = _this.slot.querySelector("div[data-id=" + cond.getParent().id + "] > .eqjs-qp-row-group");
-                            ;
-                            var next = el.nextSibling;
-                            var prev = el.previousSibling;
-                            el.parentElement.removeChild(el);
-                            if (isFocusInside) {
-                                var focusCond = next || prev || parent_2;
-                                var focusElem = focusCond.querySelector('a') || focusCond.querySelector('.eqjs-qp-condition-button');
-                                if (focusElem) {
-                                    focusElem.focus();
-                                }
-                            }
-                        }
-                    };
-                    if (Array.isArray(conds)) {
-                        conds.forEach(function (cond) { return deleteCondition_1(cond); });
-                    }
-                    else {
-                        deleteCondition_1(conds);
-                    }
-                    break;
-                }
-                default:
-                    _this.refresh();
-                    break;
-            }
-        });
-    };
-    QueryPanel.prototype.detachQueryObserver = function () {
-        if (this.queryEventCallbackId) {
-            var query = this.getQuery();
-            query.removeChangedCallback(this.queryEventCallbackId);
-        }
-    };
-    QueryPanel.prototype.getQuery = function () {
-        if (this.customQuery) {
-            return this.customQuery;
-        }
-        return this.context.getQuery();
-    };
-    QueryPanel.prototype.refreshCore = function () {
-        this.clear();
-        this.render();
-    };
-    QueryPanel.prototype.setOptions = function (options) {
-        dataUtils.assignDeep(this.options, options);
-        // dateFormatValue & dateFormatDisplay back compatibility
-        if (this.options.dateFormatValue) {
-            i18n.updateLocaleSettings({
-                editDateFormat: this.options.dateFormatValue
-            });
-        }
-        if (this.options.dateFormatDisplay) {
-            i18n.updateLocaleSettings({
-                shortDateFormat: this.options.dateFormatDisplay
-            });
-        }
-        if (typeof this.options.editableParts === "undefined") {
-            this.options.editableParts = QPEditablePart.All;
-        }
-        if (browserUtils.isMobileMode()) {
-            this.options.buttons = this.options.buttons || {};
-            this.options.buttons.condition = ["menu"];
-            this.options.buttons.group = ["menu"];
-        }
-    };
-    QueryPanel.prototype.clear = function () {
-        this.slot.innerHTML = "";
-    };
-    QueryPanel.prototype.render = function () {
-        try {
-            this.entitiesMenu = this.createEntitiesMenu();
-            this.createConditionMenus();
-            this.createLinkTypeMenu();
-            this.rootContainer = domel('div', this.slot)
-                .toDOM();
-            domel(this.slot)
-                .removeClass(eqCssMobile)
-                .addClass(browserUtils.getMobileCssClass());
-            var query = this.getQuery();
-            var root = query.getRootCondition();
-            var renderer = this.getConditionRenderer(root, this.rootContainer);
-            if (renderer) {
-                renderer.render();
-            }
-            if (this.options.showAddRow) {
-                this.addRowElement = domel('div', this.slot)
-                    .toDOM();
-                var addrowRenderer = this.getAddRowRenderer(this.addRowElement);
-                if (addrowRenderer)
-                    addrowRenderer.render();
-            }
-        }
-        catch (err) {
-            var error = err;
-            this.context.throwError({
-                action: "QueryPanel rendering",
-                text: error.message,
-                sourceError: error
-            });
-        }
-    };
-    QueryPanel.prototype.getConditionRenderer = function (condition, slot) {
-        var renderer;
-        if (this.options.onGetConditionRenderer) {
-            renderer = this.options.onGetConditionRenderer(condition, slot);
-            if (renderer) {
-                return renderer;
-            }
-        }
-        switch (condition.tag) {
-            case CondTag.Simple:
-                return new SimpleConditionRenderer(this, condition, slot);
-            case CondTag.Group:
-                return new ConditionGroupRenderer(this, condition, slot);
-        }
-        return null;
-    };
-    QueryPanel.prototype.getExpressionRenderer = function (expression, slot) {
-        if (!expression) {
-            throw 'Expression is not defined in the condition';
-        }
-        var model = this.getContext().getModel();
-        var condition = expression.getParent();
-        var operator = model.getOperatorById(condition.getOperatorId());
-        var attribute = model.getAttributeByIdSafe(condition.expressions[0].value);
-        var operand = model.getOperand(attribute, operator, expression.getIndex());
-        var editor;
-        var tag;
-        if (operand && operand.editor && operand.editor.tag !== EqEditorTag.Unknown) {
-            editor = operand.editor;
-        }
-        else if (attribute && attribute.defaultEditor) {
-            editor = attribute.defaultEditor;
-        }
-        else {
-            editor = new EqValueEditor();
-        }
-        tag = editor.tag;
-        var exprType = expression.dataType;
-        if (exprType == DataType.Unknown) {
-            exprType = attribute.dataType;
-        }
-        if (expression.kind === DataKind.Attribute) {
-            if (expression.getIndex() === 0) { // Base attribute expression
-                return new AttributeExpressionRenderer(this, expression, this.entitiesMenu, slot);
-            }
-            else {
-                var attributeMenu = this.createEntitiesMenu(function (ent, attr) {
-                    if (attr) {
-                        return attr.useInConditions && attr.dataType === exprType;
-                    }
-                    return true;
-                });
-                return new AttributeExpressionRenderer(this, expression, attributeMenu, slot);
-            }
-        }
-        else if (expression.kind === DataKind.Query) {
-            tag = EqEditorTag.SubQuery;
-        }
-        else if (expression.kind === DataKind.Scalar) {
-            if (tag == EqEditorTag.Unknown && (expression.dataType === DataType.Date
-                || expression.dataType === DataType.DateTime || expression.dataType === DataType.Time)) {
-                tag = EqEditorTag.DateTime;
-            }
-        }
-        else if (expression.kind == DataKind.ParentColumn) {
-            tag = EqEditorTag.BindToParentColumn;
-        }
-        if (this.options.onGetExpressionRenderer) {
-            var renderer = this.options.onGetExpressionRenderer(this, expression, editor, slot);
-            if (renderer) {
-                return renderer;
-            }
-        }
-        switch (tag) {
-            case EqEditorTag.List:
-                return new ListExpressionRenderer(this, expression, editor, slot);
-            case EqEditorTag.SqlList:
-                return new SqlListExpressionRenderer(this, expression, editor, slot);
-            case EqEditorTag.CustomList:
-                return new CustomListExpressionRenderer(this, expression, editor, slot);
-            case EqEditorTag.DateTime:
-                return new DateTimeExpressionRenderer(this, expression, editor, slot);
-            case EqEditorTag.SubQuery:
-                return new SubQueryExpressionRenderer(this, expression, editor, slot);
-            //move to ERS later
-            case EqEditorTag.BindToParentColumn:
-                return new BindToParentColumnExpressionRenderer(this, expression, editor, slot);
-            default:
-                return new InputExpressionRenderer(this, expression, editor, slot);
-        }
-    };
-    QueryPanel.prototype.getOperatorRenderer = function (condition, text, slot) {
-        var renderer;
-        if (this.options.onGetOperatorRenderer)
-            renderer = this.options.onGetOperatorRenderer(condition, text, slot);
-        if (renderer)
-            return renderer;
-        return new OperatorRenderer(this, condition, text, slot);
-    };
-    QueryPanel.prototype.getAddRowRenderer = function (slot) {
-        var renderer;
-        if (this.options.onGetAddRowRenderer)
-            renderer = this.options.onGetAddRowRenderer(slot);
-        if (renderer)
-            return renderer;
-        return new AddRowRenderer(this, this.entitiesMenu, slot);
-    };
-    QueryPanel.prototype.createEntitiesMenu = function (filterFunc) {
-        var model = this.getContext().getModel();
-        if (!model || model.isEmpty())
-            return null;
-        var menuId = this.slot.id || "eq-querypanel";
-        menuId += '-EntitiesMenu';
-        var entitiesList = model.getEntitiesTree({
-            addUIC: true,
-            addUIR: false,
-            addUIS: false,
-            attrPlacement: this.options.attrPlacement,
-            sortEntities: this.options.sortEntities
-        }, filterFunc);
-        var options = {
-            items: entitiesList,
-            adjustHeight: this.options.adjustEntitiesMenuHeight,
-            id: menuId,
-            domWriteItemsId: this.options.domWriteItemsId
-        };
-        dataUtils.assign(options, this.options.menuOptions);
-        return new PopupMenu(options);
-    };
-    QueryPanel.prototype.showEntitiesMenu = function (options) {
-        this.entitiesMenu.showMenu(options);
-    };
-    QueryPanel.prototype.createConditionMenus = function () {
-        //ConditionMenu
-        {
-            var query = this.getQuery();
-            var menuId = this.slot.id || "eq-querypanel";
-            menuId += '-ConditionMenu';
-            var items = [
-                {
-                    id: "enable",
-                    text: i18n.getText('MenuEnable')
-                },
-                {
-                    id: "delete",
-                    text: i18n.getText('CmdDelete')
-                }
-            ];
-            if (query.isEx()) {
-                if (this.options.allowParameterization || this.options.allowInJoinConditions) {
-                    items.push({ id: "delimiter", text: "---" });
-                }
-                ;
-                if (this.options.allowParameterization) {
-                    items.push({
-                        id: "param",
-                        text: i18n.getText('MenuParameterization')
-                    });
-                }
-                ;
-                if (this.options.allowInJoinConditions) {
-                    items.push({
-                        id: "inJoin",
-                        text: i18n.getText('MenuJoinCond')
-                    });
-                }
-                ;
-            }
-            var options = { items: items, adjustHeight: this.options.adjustEntitiesMenuHeight, id: menuId, domWriteItemsId: this.options.domWriteItemsId, showSearchBoxAfter: 100, showSelected: true };
-            dataUtils.assign(options, this.options.menuOptions);
-            this.conditionMenu = new PopupMenu(options);
-        }
-        //groupMenu
-        {
-            var menuId = this.slot.id || "eq-querypanel";
-            menuId += '-GroupMenu';
-            var items = [
-                {
-                    id: "enable",
-                    text: i18n.getText('MenuEnable')
-                },
-                {
-                    id: "delete",
-                    text: i18n.getText('CmdDelete')
-                },
-                {
-                    id: "delimiter",
-                    text: "---"
-                },
-                {
-                    id: "addCondition",
-                    text: i18n.getText('CmdAddCondition')
-                },
-                {
-                    id: "addGroup",
-                    text: i18n.getText('CmdAddCondGroup')
-                }
-            ];
-            var options = { items: items, adjustHeight: this.options.adjustEntitiesMenuHeight, id: menuId, domWriteItemsId: this.options.domWriteItemsId, showSearchBoxAfter: 100, showSelected: true };
-            dataUtils.assign(options, this.options.menuOptions);
-            this.groupMenu = new PopupMenu(options);
-        }
-        //rootGroupMenu
-        {
-            var menuId = this.slot.id || "eq-querypanel";
-            menuId += '-RootGroupMenu';
-            var items = [
-                {
-                    id: "addCondition",
-                    text: i18n.getText('CmdAddCondition')
-                },
-                {
-                    id: "addGroup",
-                    text: i18n.getText('CmdAddCondGroup')
-                }
-            ];
-            var options = { items: items, adjustHeight: this.options.adjustEntitiesMenuHeight, id: menuId, domWriteItemsId: this.options.domWriteItemsId, showSearchBoxAfter: 100, showSelected: true };
-            dataUtils.assign(options, this.options.menuOptions);
-            this.rootGroupMenu = new PopupMenu(options);
-        }
-    };
-    QueryPanel.prototype.createLinkTypeMenu = function () {
-        var menuId = this.slot.id;
-        if (menuId) {
-            menuId += '-LinkTypeMenu';
-        }
-        var typeList = eqconsts.predicateLinkTypeList;
-        var itemList = typeList.map(function (item) {
-            return {
-                id: item.id,
-                text: i18n.getText(item.key)
-            };
-        });
-        var options = { items: itemList, adjustHeight: this.options.adjustEntitiesMenuHeight, id: menuId, domWriteItemsId: this.options.domWriteItemsId };
-        dataUtils.assign(options, this.options.menuOptions);
-        this.linkTypeMenu = new PopupMenu(options);
-    };
-    QueryPanel.prototype.toggleConditionPicked = function (condition, force) {
-        if (force === void 0) { force = undefined; }
-        var el;
-        var isActive;
-        if (condition) {
-            el = this.slot.querySelector("div[data-id=" + condition.id + "][data-condrow], div[data-id=" + condition.id + "] > div[data-group-row]");
-            if (el) {
-                isActive = el.classList.contains('active');
-            }
-        }
-        //clear 'active' in all rows
-        var rows = this.slot.querySelectorAll("." + this.cssPrefix + "-row");
-        for (var i = 0; i < rows.length; i++) {
-            var row = rows[i];
-            if (row.hasAttribute('data-group-row')) {
-                if (!this.options.alwaysShowButtonsInGroups) {
-                    domel(row)
-                        .data("show-buttons", null);
-                }
-            }
-            else {
-                if (!this.options.alwaysShowButtonsInConditions) {
-                    domel(row)
-                        .data("show-buttons", null);
-                }
-            }
-            domel(row)
-                .removeClass('active');
-        }
-        if (el && !isActive) {
-            domel(el)
-                .addClass('active')
-                .data("show-buttons", "");
-        }
-    };
-    QueryPanel.prototype.showLandingSlot = function () {
-        var container = this.slot.querySelector('.eqjs-qp-conditions-root');
-        if (container) {
-            container.appendChild(this.landingSlot);
-            this.landingSlot.scrollIntoView({ block: "center", behavior: "smooth" });
-        }
-    };
-    QueryPanel.prototype.hideLangindSlot = function () {
-        if (this.landingSlot.parentElement) {
-            this.landingSlot.parentElement.removeChild(this.landingSlot);
-        }
-    };
-    return QueryPanel;
-}(Widget));
-export { QueryPanel };
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { i18n } from '@easydata/core';
+import { DataType, utils as dataUtils } from '@easydata/core';
+import { Widget, WidgetGroup, eqconsts, CondTag, EqValueEditor, EqEditorTag, DataKind, QueryChangePart, QueryChangeAction, ConditionPart } from '@easyquery/core';
+import { domel } from '@easydata/ui';
+import { eqDragManager, DropEffect } from '@easydata/ui';
+import { QPEditablePart } from '../types/qp_editable_part';
+import { PopupMenu } from '../utils/popup_menu';
+import { SimpleConditionRenderer } from './renderers/querypanel/condition_renderer';
+import { ConditionGroupRenderer } from './renderers/querypanel/condition_group_renderer';
+import { InputExpressionRenderer } from './renderers/querypanel/input_expression_renderer';
+import { AttributeExpressionRenderer } from './renderers/querypanel/attribute_expression_renderer';
+import { AddRowRenderer } from './renderers/querypanel/addrow_renderer';
+import { ListExpressionRenderer, SqlListExpressionRenderer, CustomListExpressionRenderer } from './renderers/querypanel/list_expression_renderer';
+import { OperatorRenderer } from './renderers/querypanel/operator_renderer';
+import { DateTimeExpressionRenderer } from './renderers/querypanel/datetime_expression_render';
+import { SubQueryExpressionRenderer } from './renderers/querypanel/subquery_expression_renderer';
+import { eqCssPrefix, eqCssMobile, safeFocus } from '../utils/utils';
+import { browserUtils } from '../utils/browser_utils';
+import { BindToParentColumnExpressionRenderer } from './renderers/querypanel/bind_to_parent_column_expression_renderer';
+/**
+ * The query panel wiget, implemented without JQuery.
+ */
+var QueryPanel = /** @class */ (function (_super) {
+    __extends(QueryPanel, _super);
+    /**
+     * The default constructor.
+     * @param slot The html element.
+     */
+    function QueryPanel(slot, customQuery) {
+        var _this = _super.call(this, slot) || this;
+        _this.options = {
+            editableParts: QPEditablePart.All,
+            isSubQuery: false,
+            activeCondition: null,
+            entitiesPopupHandler: null,
+            entitiesListFilter: null,
+            menuContainer: document.body,
+            showRootRow: true,
+            showAddRow: true,
+            showCheckboxes: false,
+            allowParameterization: false,
+            allowInJoinConditions: false,
+            showPoweredBy: false,
+            buttons: {
+                condition: null,
+                group: null
+            },
+            alwaysShowButtonsInGroups: false,
+            alwaysShowButtonsInConditions: false,
+            showConjunctions: true,
+            accentActiveCondition: true,
+            activateRootOnStart: true,
+            yearRange: 'c-10:c+10',
+            oneClickDateSelection: true,
+            showDateTimeInput: false,
+            attrElementFormat: '{entity} {attr}',
+            menuOptions: {
+                showSearchBoxAfter: 30,
+                searchBoxAutoFocus: true,
+                activateOnMouseOver: true,
+                itemRenderedCallback: null
+            },
+            allowDragDrop: true,
+            attrPlacement: 0,
+            sortEntities: false,
+            subQueryDialogWidth: 600,
+            subQueryDialogHeight: 300,
+            dialogZIndex: 100000,
+            numberListSeparators: [',', ';'],
+            autoEditNewCondition: false,
+            onConditionRendered: null,
+            onGetConditionRenderer: null,
+            onGetExpressionRenderer: null,
+            onGetOperatorRenderer: null,
+            onOperatorRendered: null,
+            onGetAddRowRenderer: null,
+            defaultQuery: null,
+            showIndicatorOnLoad: true
+        };
+        _this.customQuery = null;
+        _this.landingSlot = domel('div')
+            .addClass("".concat(_this.cssPrefix, "-cond-landing-slot"))
+            .addChildElement(domel('div')
+            .toDOM())
+            .toDOM();
+        if (!_this.slot.classList.contains("".concat(_this.cssPrefix, "-panel"))) {
+            _this.slot.classList.add("".concat(_this.cssPrefix, "-panel"));
+        }
+        _this.group = WidgetGroup.Query;
+        if (customQuery) {
+            _this.customQuery = customQuery;
+        }
+        return _this;
+    }
+    Object.defineProperty(QueryPanel.prototype, "cssPrefix", {
+        get: function () {
+            return 'eqjs-qp';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    QueryPanel.prototype.getWidgetType = function () {
+        return 'queryPanel';
+    };
+    /**
+     * Initialize widget.
+     * @param context The context.
+     * @param options The options.
+     */
+    QueryPanel.prototype.init = function (context, options) {
+        var _this = this;
+        _super.prototype.init.call(this, context, options);
+        this.setOptions(options);
+        this.renderProgressBlock();
+        //detach previously defined query observer (if any)
+        this.detachQueryObserver();
+        this.attachQueryObserver();
+        eqDragManager.removeDropContainer(this.slot);
+        if (this.options.allowDragDrop) {
+            var model_1 = this.getContext().getModel();
+            eqDragManager.registerDropContainer({
+                element: this.slot,
+                scopes: ["entityAttr"],
+                onDragEnter: function (container, ev) {
+                    _this.slot.classList.add("".concat(eqCssPrefix, "-drophover"));
+                    ev.dragImage.classList.add('eqjs-sortable-helper');
+                    _this.showLandingSlot();
+                    var attrId = ev.data.attrId;
+                    if (!model_1.checkAttrProperty(attrId, "useInConditions")) {
+                        ev.dropEffect = DropEffect.Forbid;
+                    }
+                },
+                onDragOver: function (container, ev) {
+                },
+                onDragLeave: function (container, ev) {
+                    ev.dragImage.classList.remove('eqjs-sortable-helper');
+                    ev.dragImage.style.removeProperty('width');
+                    _this.slot.classList.remove("".concat(eqCssPrefix, "-drophover"));
+                    _this.hideLangindSlot();
+                },
+                onDrop: function (container, ev) {
+                    var query = _this.getQuery();
+                    var descr = {
+                        parent: query.getRootCondition(),
+                        attributeId: ev.data.attrId
+                    };
+                    var cond = query.addSimpleCondition(descr);
+                    if (cond) {
+                        query.fireConditionsChangedEvent(QueryChangeAction.Add, cond);
+                    }
+                }
+            });
+        }
+    };
+    QueryPanel.prototype.destroyCore = function () {
+        eqDragManager.removeDropContainer(this.slot);
+        this.detachQueryObserver();
+        this.slot.innerHTML = '';
+    };
+    QueryPanel.prototype.getEntitiesMenu = function () {
+        return this.entitiesMenu;
+    };
+    QueryPanel.prototype.getConditionMenu = function () {
+        return this.conditionMenu;
+    };
+    QueryPanel.prototype.getLinkTypeMenu = function () {
+        return this.linkTypeMenu;
+    };
+    QueryPanel.prototype.getConditionGroupMenu = function (isRoot) {
+        if (isRoot === void 0) { isRoot = false; }
+        return isRoot ? this.rootGroupMenu : this.groupMenu;
+    };
+    QueryPanel.prototype.attachQueryObserver = function () {
+        var _this = this;
+        var query = this.getQuery();
+        this.queryEventCallbackId = query.addChangedCallback(function (event) {
+            //if something has changed, and that change is related to conditions
+            var edata = event.data;
+            if (!edata || (edata.part != QueryChangePart.Conditions && edata.part != QueryChangePart.All)) {
+                return;
+            }
+            var focusedBefore = document.activeElement;
+            var isFocusInside = _this.slot.contains(focusedBefore) || focusedBefore == document.body;
+            switch (edata.action) {
+                case QueryChangeAction.Modify: {
+                    var conds = edata.changee;
+                    var modifyCondition_1 = function (cond, autoEdit) {
+                        var el = _this.slot.querySelector("div[data-id=".concat(cond.id, "]"));
+                        if (el) {
+                            autoEdit = autoEdit
+                                && ((edata.condPart & ConditionPart.Operator) === ConditionPart.Operator)
+                                && cond.expressions.length > 1
+                                && (cond.expressions[1]._isDefaultValue || cond.expressions[1].value == '' ||
+                                    cond.expressions[1].value == null);
+                            var isActive = el.classList.contains('active');
+                            var renderer = _this.getConditionRenderer(cond, el);
+                            if (renderer) {
+                                var newEl = renderer.render(autoEdit);
+                                if (isActive) {
+                                    _this.toggleConditionPicked(cond);
+                                }
+                                if (isFocusInside && !autoEdit) {
+                                    var focusElem = newEl.querySelector('a') || newEl.querySelector('.eqjs-qp-condition-button');
+                                    if (focusElem) {
+                                        safeFocus(focusElem);
+                                    }
+                                }
+                            }
+                        }
+                    };
+                    var autoEdit_1 = _this.options.autoEditNewCondition;
+                    if (Array.isArray(conds)) {
+                        conds.forEach(function (cond) { return modifyCondition_1(cond, autoEdit_1); });
+                        autoEdit_1 = false;
+                    }
+                    else {
+                        modifyCondition_1(conds, autoEdit_1);
+                    }
+                    break;
+                }
+                case QueryChangeAction.Add: {
+                    var conds = edata.changee;
+                    var addCondition_1 = function (cond) {
+                        var renderer = _this.getConditionRenderer(cond);
+                        if (renderer) {
+                            var parent_1 = cond.getParent();
+                            var parentEl = _this.slot.querySelector("div[data-id=".concat(parent_1.id, "]"));
+                            if (parentEl) {
+                                var newCondContainer = parentEl.lastChild;
+                                if (newCondContainer) {
+                                    var el = renderer.render(_this.options.autoEditNewCondition);
+                                    newCondContainer.appendChild(el);
+                                    el.scrollIntoView(false);
+                                    if (isFocusInside && !_this.options.autoEditNewCondition) {
+                                        el.querySelector("a").focus();
+                                    }
+                                }
+                            }
+                        }
+                    };
+                    if (Array.isArray(conds)) {
+                        conds.forEach(function (cond) { return addCondition_1(cond); });
+                    }
+                    else {
+                        addCondition_1(conds);
+                    }
+                    break;
+                }
+                case QueryChangeAction.Delete: {
+                    var conds = edata.changee;
+                    var deleteCondition_1 = function (cond) {
+                        var el = _this.slot.querySelector("div[data-id=".concat(cond.id, "]"));
+                        if (el) {
+                            var parent_2 = _this.slot.querySelector("div[data-id=".concat(cond.getParent().id, "] > .eqjs-qp-row-group"));
+                            ;
+                            var next = el.nextSibling;
+                            var prev = el.previousSibling;
+                            el.parentElement.removeChild(el);
+                            if (isFocusInside) {
+                                var focusCond = next || prev || parent_2;
+                                var focusElem = focusCond.querySelector('a') || focusCond.querySelector('.eqjs-qp-condition-button');
+                                if (focusElem) {
+                                    focusElem.focus();
+                                }
+                            }
+                        }
+                    };
+                    if (Array.isArray(conds)) {
+                        conds.forEach(function (cond) { return deleteCondition_1(cond); });
+                    }
+                    else {
+                        deleteCondition_1(conds);
+                    }
+                    break;
+                }
+                default:
+                    _this.refresh();
+                    break;
+            }
+        });
+    };
+    QueryPanel.prototype.detachQueryObserver = function () {
+        if (this.queryEventCallbackId) {
+            var query = this.getQuery();
+            query.removeChangedCallback(this.queryEventCallbackId);
+        }
+    };
+    QueryPanel.prototype.getQuery = function () {
+        if (this.customQuery) {
+            return this.customQuery;
+        }
+        return this.context.getQuery();
+    };
+    QueryPanel.prototype.refreshCore = function () {
+        this.clear();
+        this.render();
+    };
+    QueryPanel.prototype.setOptions = function (options) {
+        dataUtils.assignDeep(this.options, options);
+        // dateFormatValue & dateFormatDisplay back compatibility
+        if (this.options.dateFormatValue) {
+            i18n.updateLocaleSettings({
+                editDateFormat: this.options.dateFormatValue
+            });
+        }
+        if (this.options.dateFormatDisplay) {
+            i18n.updateLocaleSettings({
+                shortDateFormat: this.options.dateFormatDisplay
+            });
+        }
+        if (typeof this.options.editableParts === "undefined") {
+            this.options.editableParts = QPEditablePart.All;
+        }
+        if (browserUtils.isMobileMode()) {
+            this.options.buttons = this.options.buttons || {};
+            this.options.buttons.condition = ["menu"];
+            this.options.buttons.group = ["menu"];
+        }
+    };
+    QueryPanel.prototype.clear = function () {
+        this.slot.innerHTML = "";
+    };
+    QueryPanel.prototype.render = function () {
+        try {
+            this.entitiesMenu = this.createEntitiesMenu();
+            this.createConditionMenus();
+            this.createLinkTypeMenu();
+            this.rootContainer = domel('div', this.slot)
+                .toDOM();
+            domel(this.slot)
+                .removeClass(eqCssMobile)
+                .addClass(browserUtils.getMobileCssClass());
+            var query = this.getQuery();
+            var root = query.getRootCondition();
+            var renderer = this.getConditionRenderer(root, this.rootContainer);
+            if (renderer) {
+                renderer.render();
+            }
+            if (this.options.showAddRow) {
+                this.addRowElement = domel('div', this.slot)
+                    .toDOM();
+                var addrowRenderer = this.getAddRowRenderer(this.addRowElement);
+                if (addrowRenderer)
+                    addrowRenderer.render();
+            }
+        }
+        catch (err) {
+            var error = err;
+            this.context.throwError({
+                action: "QueryPanel rendering",
+                text: error.message,
+                sourceError: error
+            });
+        }
+    };
+    QueryPanel.prototype.getConditionRenderer = function (condition, slot) {
+        var renderer;
+        if (this.options.onGetConditionRenderer) {
+            renderer = this.options.onGetConditionRenderer(condition, slot);
+            if (renderer) {
+                return renderer;
+            }
+        }
+        switch (condition.tag) {
+            case CondTag.Simple:
+                return new SimpleConditionRenderer(this, condition, slot);
+            case CondTag.Group:
+                return new ConditionGroupRenderer(this, condition, slot);
+        }
+        return null;
+    };
+    QueryPanel.prototype.getExpressionRenderer = function (expression, slot) {
+        if (!expression) {
+            throw 'Expression is not defined in the condition';
+        }
+        var model = this.getContext().getModel();
+        var condition = expression.getParent();
+        var operator = model.getOperatorById(condition.getOperatorId());
+        var attribute = model.getAttributeByIdSafe(condition.expressions[0].value);
+        var operand = model.getOperand(attribute, operator, expression.getIndex());
+        var editor;
+        var tag;
+        if (operand && operand.editor && operand.editor.tag !== EqEditorTag.Unknown) {
+            editor = operand.editor;
+        }
+        else if (attribute && attribute.defaultEditor) {
+            editor = attribute.defaultEditor;
+        }
+        else {
+            editor = new EqValueEditor();
+        }
+        tag = editor.tag;
+        var exprType = expression.dataType;
+        if (exprType == DataType.Unknown) {
+            exprType = attribute.dataType;
+        }
+        if (expression.kind === DataKind.Attribute) {
+            if (expression.getIndex() === 0) { // Base attribute expression
+                return new AttributeExpressionRenderer(this, expression, this.entitiesMenu, slot);
+            }
+            else {
+                var attributeMenu = this.createEntitiesMenu(function (ent, attr) {
+                    if (attr) {
+                        return attr.useInConditions && attr.dataType === exprType;
+                    }
+                    return true;
+                });
+                return new AttributeExpressionRenderer(this, expression, attributeMenu, slot);
+            }
+        }
+        else if (expression.kind === DataKind.Query) {
+            tag = EqEditorTag.SubQuery;
+        }
+        else if (expression.kind === DataKind.Scalar) {
+            if (tag == EqEditorTag.Unknown && (expression.dataType === DataType.Date
+                || expression.dataType === DataType.DateTime || expression.dataType === DataType.Time)) {
+                tag = EqEditorTag.DateTime;
+            }
+        }
+        else if (expression.kind == DataKind.ParentColumn) {
+            tag = EqEditorTag.BindToParentColumn;
+        }
+        if (this.options.onGetExpressionRenderer) {
+            var renderer = this.options.onGetExpressionRenderer(this, expression, editor, slot);
+            if (renderer) {
+                return renderer;
+            }
+        }
+        switch (tag) {
+            case EqEditorTag.List:
+                return new ListExpressionRenderer(this, expression, editor, slot);
+            case EqEditorTag.SqlList:
+                return new SqlListExpressionRenderer(this, expression, editor, slot);
+            case EqEditorTag.CustomList:
+                return new CustomListExpressionRenderer(this, expression, editor, slot);
+            case EqEditorTag.DateTime:
+                return new DateTimeExpressionRenderer(this, expression, editor, slot);
+            case EqEditorTag.SubQuery:
+                return new SubQueryExpressionRenderer(this, expression, editor, slot);
+            //move to ERS later
+            case EqEditorTag.BindToParentColumn:
+                return new BindToParentColumnExpressionRenderer(this, expression, editor, slot);
+            default:
+                return new InputExpressionRenderer(this, expression, editor, slot);
+        }
+    };
+    QueryPanel.prototype.getOperatorRenderer = function (condition, text, slot) {
+        var renderer;
+        if (this.options.onGetOperatorRenderer)
+            renderer = this.options.onGetOperatorRenderer(condition, text, slot);
+        if (renderer)
+            return renderer;
+        return new OperatorRenderer(this, condition, text, slot);
+    };
+    QueryPanel.prototype.getAddRowRenderer = function (slot) {
+        var renderer;
+        if (this.options.onGetAddRowRenderer)
+            renderer = this.options.onGetAddRowRenderer(slot);
+        if (renderer)
+            return renderer;
+        return new AddRowRenderer(this, this.entitiesMenu, slot);
+    };
+    QueryPanel.prototype.createEntitiesMenu = function (filterFunc) {
+        var model = this.getContext().getModel();
+        if (!model || model.isEmpty())
+            return null;
+        var menuId = this.slot.id || "eq-querypanel";
+        menuId += '-EntitiesMenu';
+        var entitiesList = model.getEntitiesTree({
+            addUIC: true,
+            addUIR: false,
+            addUIS: false,
+            attrPlacement: this.options.attrPlacement,
+            sortEntities: this.options.sortEntities
+        }, filterFunc);
+        var options = {
+            items: entitiesList,
+            adjustHeight: this.options.adjustEntitiesMenuHeight,
+            id: menuId,
+            domWriteItemsId: this.options.domWriteItemsId
+        };
+        dataUtils.assign(options, this.options.menuOptions);
+        return new PopupMenu(options);
+    };
+    QueryPanel.prototype.showEntitiesMenu = function (options) {
+        this.entitiesMenu.showMenu(options);
+    };
+    QueryPanel.prototype.createConditionMenus = function () {
+        //ConditionMenu
+        {
+            var query = this.getQuery();
+            var menuId = this.slot.id || "eq-querypanel";
+            menuId += '-ConditionMenu';
+            var items = [
+                {
+                    id: "enable",
+                    text: i18n.getText('MenuEnable')
+                },
+                {
+                    id: "delete",
+                    text: i18n.getText('CmdDelete')
+                }
+            ];
+            if (query.isEx()) {
+                if (this.options.allowParameterization || this.options.allowInJoinConditions) {
+                    items.push({ id: "delimiter", text: "---" });
+                }
+                ;
+                if (this.options.allowParameterization) {
+                    items.push({
+                        id: "param",
+                        text: i18n.getText('MenuParameterization')
+                    });
+                }
+                ;
+                if (this.options.allowInJoinConditions) {
+                    items.push({
+                        id: "inJoin",
+                        text: i18n.getText('MenuJoinCond')
+                    });
+                }
+                ;
+            }
+            var options = { items: items, adjustHeight: this.options.adjustEntitiesMenuHeight, id: menuId, domWriteItemsId: this.options.domWriteItemsId, showSearchBoxAfter: 100, showSelected: true };
+            dataUtils.assign(options, this.options.menuOptions);
+            this.conditionMenu = new PopupMenu(options);
+        }
+        //groupMenu
+        {
+            var menuId = this.slot.id || "eq-querypanel";
+            menuId += '-GroupMenu';
+            var items = [
+                {
+                    id: "enable",
+                    text: i18n.getText('MenuEnable')
+                },
+                {
+                    id: "delete",
+                    text: i18n.getText('CmdDelete')
+                },
+                {
+                    id: "delimiter",
+                    text: "---"
+                },
+                {
+                    id: "addCondition",
+                    text: i18n.getText('CmdAddCondition')
+                },
+                {
+                    id: "addGroup",
+                    text: i18n.getText('CmdAddCondGroup')
+                }
+            ];
+            var options = { items: items, adjustHeight: this.options.adjustEntitiesMenuHeight, id: menuId, domWriteItemsId: this.options.domWriteItemsId, showSearchBoxAfter: 100, showSelected: true };
+            dataUtils.assign(options, this.options.menuOptions);
+            this.groupMenu = new PopupMenu(options);
+        }
+        //rootGroupMenu
+        {
+            var menuId = this.slot.id || "eq-querypanel";
+            menuId += '-RootGroupMenu';
+            var items = [
+                {
+                    id: "addCondition",
+                    text: i18n.getText('CmdAddCondition')
+                },
+                {
+                    id: "addGroup",
+                    text: i18n.getText('CmdAddCondGroup')
+                }
+            ];
+            var options = { items: items, adjustHeight: this.options.adjustEntitiesMenuHeight, id: menuId, domWriteItemsId: this.options.domWriteItemsId, showSearchBoxAfter: 100, showSelected: true };
+            dataUtils.assign(options, this.options.menuOptions);
+            this.rootGroupMenu = new PopupMenu(options);
+        }
+    };
+    QueryPanel.prototype.createLinkTypeMenu = function () {
+        var menuId = this.slot.id;
+        if (menuId) {
+            menuId += '-LinkTypeMenu';
+        }
+        var typeList = eqconsts.predicateLinkTypeList;
+        var itemList = typeList.map(function (item) {
+            return {
+                id: item.id,
+                text: i18n.getText(item.key)
+            };
+        });
+        var options = { items: itemList, adjustHeight: this.options.adjustEntitiesMenuHeight, id: menuId, domWriteItemsId: this.options.domWriteItemsId };
+        dataUtils.assign(options, this.options.menuOptions);
+        this.linkTypeMenu = new PopupMenu(options);
+    };
+    QueryPanel.prototype.toggleConditionPicked = function (condition, force) {
+        if (force === void 0) { force = undefined; }
+        var el;
+        var isActive;
+        if (condition) {
+            el = this.slot.querySelector("div[data-id=".concat(condition.id, "][data-condrow], div[data-id=").concat(condition.id, "] > div[data-group-row]"));
+            if (el) {
+                isActive = el.classList.contains('active');
+            }
+        }
+        //clear 'active' in all rows
+        var rows = this.slot.querySelectorAll(".".concat(this.cssPrefix, "-row"));
+        for (var i = 0; i < rows.length; i++) {
+            var row = rows[i];
+            if (row.hasAttribute('data-group-row')) {
+                if (!this.options.alwaysShowButtonsInGroups) {
+                    domel(row)
+                        .data("show-buttons", null);
+                }
+            }
+            else {
+                if (!this.options.alwaysShowButtonsInConditions) {
+                    domel(row)
+                        .data("show-buttons", null);
+                }
+            }
+            domel(row)
+                .removeClass('active');
+        }
+        if (el && !isActive) {
+            domel(el)
+                .addClass('active')
+                .data("show-buttons", "");
+        }
+    };
+    QueryPanel.prototype.showLandingSlot = function () {
+        var container = this.slot.querySelector('.eqjs-qp-conditions-root');
+        if (container) {
+            container.appendChild(this.landingSlot);
+            this.landingSlot.scrollIntoView({ block: "center", behavior: "smooth" });
+        }
+    };
+    QueryPanel.prototype.hideLangindSlot = function () {
+        if (this.landingSlot.parentElement) {
+            this.landingSlot.parentElement.removeChild(this.landingSlot);
+        }
+    };
+    QueryPanel.prototype.onProcessStartCore = function () {
+        if (this.options.showIndicatorOnLoad) {
+            if (!this.progressBlock.parentNode)
+                this.slot.appendChild(this.progressBlock);
+        }
+    };
+    QueryPanel.prototype.onProcessEndCore = function () {
+        if (this.options.showIndicatorOnLoad) {
+            if (this.progressBlock.parentNode)
+                this.slot.removeChild(this.progressBlock);
+        }
+    };
+    QueryPanel.prototype.renderProgressBlock = function () {
+        this.progressBlock = document.createElement('div');
+        this.progressBlock.classList.add("".concat(eqCssPrefix, "-progress-win8"));
+        this.progressBlock.classList.add(browserUtils.getMobileCssClass());
+        this.progressBlock.innerHTML = '<div class="wBall" id="wBall_1"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_2"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_3"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_4"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_5"><div class="wInnerBall"></div></div>';
+    };
+    return QueryPanel;
+}(Widget));
+export { QueryPanel };
 //# sourceMappingURL=query_panel.js.map