@easyquery/ui 7.2.3 → 7.2.4-beta03

package/dist/lib/views/adv_search_view.js

@@ -1,711 +1,713 @@
-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 { QueryChangePart, WidgetGroup } from '@easyquery/core';
-import { domel } from '@easydata/ui';
-import { PopupMenu } from '../utils/popup_menu';
-import { browserUtils } from '../utils/browser_utils';
-import { View } from '../views/view';
-/**
- * The EasyQuery client-side view that represents the UI for advanced search page
- */
-var AdvancedSearchView = /** @class */ (function (_super) {
-    __extends(AdvancedSearchView, _super);
-    function AdvancedSearchView() {
-        var _this = _super.call(this) || this;
-        _this.exportButtons = [];
-        // Name of the class to add to disabled elements.
-        _this.disabledClass = "eqjs-disabled";
-        _this.dropdownContainerClass = "eqv-dropdown-container";
-        _this.dropdownButtonClass = "eqv-drop-button";
-        _this.dropdownContentClass = "eqv-dropdown-content";
-        _this.dropdownShowClass = "eqv-dropdown-show";
-        _this._querySaveTemplate = "<div id=\"kdlg-dialog-form\" class=\"kfrm-form\">\n            <div class=\"kfrm-fields label-above\">\n                <label for=\"kdlg-dialog-form-input\" id=\"kdlg-dialog-form-content\"></label>\n                <input type=\"text\" name=\"kdlg-dialog-form-input\" id=\"kdlg-dialog-form-input\" />\n            </div>\n        </div>";
-        _this.queryListMenu = null;
-        _this.fetchDataButtonClickHandler = _this.fetchDataButtonClick.bind(_this);
-        _this.clearQueryButtonClickHandler = _this.clearQueryButtonClick.bind(_this);
-        _this.newQueryButtonClickHandler = _this.newQueryButtonClick.bind(_this);
-        _this.loadQueryButtonClickHandler = _this.loadQueryButtonClick.bind(_this);
-        _this.saveQueryButtonClickHandler = _this.saveQueryButtonClick.bind(_this);
-        _this.copyQueryButtonClickHandler = _this.copyQueryButtonClick.bind(_this);
-        _this.removeQueryButtonClickHandler = _this.removeQueryButtonClick.bind(_this);
-        _this.storageButtonClickHandler = _this.storageDropButtonClick.bind(_this);
-        _this.saveQueryToFileButtonClickHandler = _this.saveQueryToFileButtonClick.bind(_this);
-        _this.loadQueryFromFileButtonClickHandler = _this.loadQueryFromFileButtonClick.bind(_this);
-        var self = _this;
-        _this.exportButtonClickHandler = function (e) {
-            if (!this.classList.contains(self.disabledClass)) {
-                var format = this.getAttribute("data-format");
-                self.getContext().exportResult({ format: format });
-            }
-        };
-        _this.queryChangedHandler = function (ev) {
-            var eventData = ev.data;
-            if (_this.resultOptions.clearResultOnQueryChange) {
-                _this.context.clearResult();
-                _this.context.refreshWidgets(WidgetGroup.Result);
-            }
-            _this.disableExportButtons();
-            if (_this.resultCountSlot) {
-                _this.resultCountSlot.style.display = "none";
-            }
-            if (_this.viewOptions.syncQueryOnChange) {
-                _this.syncQuery();
-            }
-            if (_this.viewOptions.fetchDataOnChange) {
-                if (!eventData || (eventData.part != QueryChangePart.ExtraData
-                    && eventData.part != QueryChangePart.Facets)) {
-                    _this.fetchData();
-                }
-            }
-        };
-        _this.outsideClickHandler = function (event) {
-            var currentContent = null;
-            if (event.target.matches("." + _this.dropdownButtonClass)) {
-                currentContent = event.target.parentElement.querySelector("." + _this.dropdownContentClass);
-            }
-            else if (event.target.matches("." + _this.dropdownButtonClass + " > span")) {
-                currentContent = event.target.parentElement.parentElement.querySelector("." + _this.dropdownContentClass);
-            }
-            var dropdowns = _this.resolveElementsByClassName(_this.dropdownContentClass);
-            for (var i = 0; i < dropdowns.length; i++) {
-                var openDropdown = dropdowns[i];
-                if (currentContent != openDropdown) {
-                    if (openDropdown.classList.contains(_this.dropdownShowClass)) {
-                        openDropdown.classList.remove(_this.dropdownShowClass);
-                    }
-                }
-            }
-        };
-        return _this;
-    }
-    AdvancedSearchView.prototype.refreshQueryList = function () {
-        var _this = this;
-        if (this.queryListPanel) {
-            this.queryListPanel.innerHTML = '';
-            this.context.loadQueryList({
-                success: function (data) {
-                    var b = domel('ul', _this.queryListPanel)
-                        .addClass('list-group list-group-flush');
-                    data.map(function (item) {
-                        b.addChild('li', function (b) {
-                            b.addClass('list-group-item')
-                                .setStyle('cursor', 'pointer')
-                                .data('id', item.id)
-                                .text(item.name)
-                                .on('click', function () {
-                                _this.checkIfQueryModified(function () { return _this.loadQuery(item.id); });
-                            });
-                        });
-                    });
-                }
-            });
-        }
-    };
-    AdvancedSearchView.prototype.initOptions = function (options) {
-        options = _super.prototype.initOptions.call(this, options);
-        if (typeof (options.syncQueryOnChange) == 'undefined') {
-            options.syncQueryOnChange = true;
-        }
-        return options;
-    };
-    AdvancedSearchView.prototype.initWidgets = function (options) {
-        var _this = this;
-        _super.prototype.initWidgets.call(this, options);
-        var exportClass = "eqjs-export";
-        var queryContentInputId = "QueryContentJson";
-        var clearQueryButtonId = "ClearQueryButton";
-        var newQueryButtonId = "NewQueryButton";
-        var loadQueryButtonId = "LoadQueryButton";
-        var saveQueryButtonId = "SaveQueryButton";
-        var copyQueryButtonId = "CopyQueryButton";
-        var removeQueryButtonId = "RemoveQueryButton";
-        var storageButtonId = "StorageDropButton";
-        var fetchDataButtonId = "FetchDataButton";
-        var loadQueryFromFileButtonId = "LoadQueryFromFileButton";
-        var saveQueryToFileButtonId = "SaveQueryToFileButton";
-        var queryListPanelId = "QueryListPanel";
-        if (options.slots) {
-            queryContentInputId = options.slots.queryContentInput || queryContentInputId;
-            fetchDataButtonId = options.slots.fetchDataButton || fetchDataButtonId;
-            clearQueryButtonId = options.slots.clearQueryButton || clearQueryButtonId;
-            newQueryButtonId = options.slots.newQueryButton || newQueryButtonId;
-            loadQueryButtonId = options.slots.loadQueryButton || loadQueryButtonId;
-            saveQueryButtonId = options.slots.saveQueryButton || saveQueryButtonId;
-            copyQueryButtonId = options.slots.copyQueryButton || copyQueryButtonId;
-            removeQueryButtonId = options.slots.removeQueryButton || removeQueryButtonId;
-            storageButtonId = options.slots.storageButton || storageButtonId;
-            exportClass = options.slots.exportClass || exportClass;
-            loadQueryFromFileButtonId = options.slots.loadQueryFromFileButton || loadQueryFromFileButtonId;
-            saveQueryToFileButtonId = options.slots.saveQueryToFileButton || saveQueryToFileButtonId;
-            queryListPanelId = options.slots.queryListPanel || queryListPanelId;
-        }
-        this.exportButtons = this.domRoots.reduce(function (elems, root) {
-            return elems.concat(Array.from(root.querySelectorAll("." + exportClass)));
-        }, []);
-        if (!options.enableExport) {
-            this.hideExportButtons();
-        }
-        this.disableExportButtons();
-        //Add event listener for export buttons
-        var self = this;
-        this.exportButtons.forEach(function (button) {
-            button.addEventListener('click', _this.exportButtonClickHandler);
-        });
-        if (!this.fetchDataButton) {
-            this.fetchDataButton = this.resolveElement(fetchDataButtonId);
-            if (!this.fetchDataButton) {
-                this.fetchDataButton = this.resolveElement('ExecuteQueryButton'); //deprecated, should be removed on the next major update
-            }
-            if (this.fetchDataButton) {
-                this.fetchDataButton.addEventListener('click', this.fetchDataButtonClickHandler);
-            }
-        }
-        if (!this.clearQueryButton) {
-            this.clearQueryButton = this.resolveElement(clearQueryButtonId);
-            if (this.clearQueryButton) {
-                this.clearQueryButton.addEventListener('click', this.clearQueryButtonClickHandler);
-            }
-        }
-        if (!this.newQueryButton) {
-            this.newQueryButton = this.resolveElement(newQueryButtonId);
-            if (this.newQueryButton) {
-                this.newQueryButton.addEventListener('click', this.newQueryButtonClickHandler);
-            }
-        }
-        if (!this.loadQueryButton) {
-            this.loadQueryButton = this.resolveElement(loadQueryButtonId);
-            if (this.loadQueryButton) {
-                this.loadQueryButton.addEventListener('click', this.loadQueryButtonClickHandler);
-            }
-        }
-        if (!this.saveQueryButton) {
-            this.saveQueryButton = this.resolveElement(saveQueryButtonId);
-            if (this.saveQueryButton) {
-                this.saveQueryButton.addEventListener('click', this.saveQueryButtonClickHandler);
-            }
-        }
-        if (!this.copyQueryButton) {
-            this.copyQueryButton = this.resolveElement(copyQueryButtonId);
-            if (this.copyQueryButton) {
-                this.copyQueryButton.addEventListener('click', this.copyQueryButtonClickHandler);
-            }
-        }
-        if (!this.removeQueryButton) {
-            this.removeQueryButton = this.resolveElement(removeQueryButtonId);
-            if (this.removeQueryButton) {
-                this.removeQueryButton.addEventListener('click', this.removeQueryButtonClickHandler);
-            }
-        }
-        if (!this.storageDropButton) {
-            this.storageDropButton = this.resolveElement(storageButtonId);
-            if (this.storageDropButton) {
-                this.storageDropButton.addEventListener('click', this.storageButtonClickHandler);
-            }
-        }
-        if (!this.saveQueryToFileButton) {
-            this.saveQueryToFileButton = this.resolveElement(saveQueryToFileButtonId);
-            if (this.saveQueryToFileButton) {
-                this.saveQueryToFileButton.addEventListener('click', this.saveQueryToFileButtonClickHandler);
-            }
-        }
-        if (!this.queryListPanel) {
-            this.queryListPanel = this.resolveElement(queryListPanelId);
-            //For backward compatibility. Remove on the next update
-            if (!this.queryListPanel) {
-                this.queryListPanel = this.resolveElement('QueryListSlot');
-            }
-            if (this.queryListPanel) {
-                this.context.addEventListener('ready', function () {
-                    _this.refreshQueryList();
-                });
-            }
-        }
-        if (!this.loadQueryFromFileButton) {
-            this.loadQueryFromFileButton = this.resolveElement(loadQueryFromFileButtonId);
-            if (this.loadQueryFromFileButton) {
-                this.loadQueryFromFileInput = document.createElement('input');
-                this.loadQueryFromFileInput.type = 'file';
-                this.loadQueryFromFileInput.accept = options.queryFileExtensions;
-                this.loadQueryFromFileInput.style.display = 'none';
-                document.body.appendChild(this.loadQueryFromFileInput);
-                this.loadQueryFromFileInput.addEventListener('change', this.loadQueryFromFileInputSelect.bind(this));
-                this.loadQueryFromFileButton.addEventListener('click', this.loadQueryFromFileButtonClickHandler);
-            }
-        }
-        // hide any dropdown menu when user clicks somewhere
-        window.addEventListener('click', this.outsideClickHandler);
-    };
-    AdvancedSearchView.prototype.initDone = function () {
-        _super.prototype.initDone.call(this);
-        var query = this.context.getQuery();
-        query.addChangedCallback(this.queryChangedHandler);
-    };
-    /**
-    * Sends current query to the backend.
-    */
-    AdvancedSearchView.prototype.syncQuery = function () {
-        var _this = this;
-        this.context.syncQuery({
-            success: function (responseData) {
-                if (responseData.statement) {
-                    _this.context.refreshWidgets(WidgetGroup.Statement);
-                }
-            }
-        });
-    };
-    /**
-    * Disables export buttons.
-    */
-    AdvancedSearchView.prototype.disableExportButtons = function () {
-        var _this = this;
-        this.exportButtons.forEach(function (button) {
-            button.disabled = true;
-            if (!button.classList.contains(_this.disabledClass)) {
-                button.classList.add(_this.disabledClass);
-            }
-        });
-    };
-    /**
-    * Enables export buttons.
-    */
-    AdvancedSearchView.prototype.enableExportButtons = function () {
-        var _this = this;
-        this.exportButtons.forEach(function (button) {
-            button.disabled = false;
-            if (button.classList.contains(_this.disabledClass)) {
-                button.classList.remove(_this.disabledClass);
-            }
-        });
-    };
-    /**
-    * Hides export buttons.
-    */
-    AdvancedSearchView.prototype.hideExportButtons = function () {
-        this.exportButtons.forEach(function (button) {
-            button.style.display = "none";
-        });
-    };
-    AdvancedSearchView.prototype.clearQueryButtonClick = function () {
-        this.context.clearQuery();
-        this.context.refreshWidgets(WidgetGroup.Statement);
-    };
-    AdvancedSearchView.prototype.createNewQuery = function (options) {
-        return this.context.newQuery(options);
-    };
-    AdvancedSearchView.prototype.loadQuery = function (queryId) {
-        if (!queryId)
-            return;
-        this.context.loadQuery({
-            queryId: queryId,
-            silent: false
-        });
-    };
-    AdvancedSearchView.prototype.saveQuery = function (success, error) {
-        var _this = this;
-        this.context.saveQuery({
-            success: function () {
-                if (success)
-                    success();
-                _this.context.getQuery().fireChangedEvent({
-                    part: QueryChangePart.Properties,
-                    wasModified: false
-                });
-                _this.refreshQueryList();
-            },
-            error: error
-        });
-    };
-    AdvancedSearchView.prototype.saveCurrentQuery = function (copyQuery, callback) {
-        var _this = this;
-        if (copyQuery === void 0) { copyQuery = false; }
-        var query = this.context.getQuery();
-        if (query.isNewbie || copyQuery) {
-            this.showSaveQueryDialog(function (result) { return new Promise(function (resolve) {
-                if (!result)
-                    return;
-                query.regenerateId();
-                query.setName(result);
-                query.fireChangedEvent({
-                    part: QueryChangePart.Properties,
-                    wasModified: true
-                });
-                _this.saveQuery(function () { resolve({ success: true }); callback; }, function (error) { return resolve({ success: false, message: error }); });
-            }); });
-        }
-        else {
-            this.saveQuery(callback);
-        }
-    };
-    AdvancedSearchView.prototype.checkIfQueryModified = function (callback) {
-        var _this = this;
-        if (this.context.getQuery().isModified()
-            && !this.viewOptions.disableConfirmationOnQueryChange) {
-            this.showQueryChangedDialog(function (result) {
-                if (result) {
-                    _this.saveCurrentQuery(false, callback);
-                }
-                else {
-                    callback();
-                }
-            });
-        }
-        else {
-            callback();
-        }
-    };
-    AdvancedSearchView.prototype.removeCurrentQuery = function () {
-        var _this = this;
-        this.context.removeQuery({
-            success: function () {
-                _this.createNewQuery({
-                    useStorage: false
-                });
-                if (_this.resultCountSlot) {
-                    _this.resultCountSlot.style.display = "none";
-                }
-                _this.context.clearResult();
-                _this.refreshQueryList();
-            }
-        });
-    };
-    // ------------------ Dialog wrappers ---------------------
-    AdvancedSearchView.prototype.showNewQueryDialog = function (callback) {
-        var ds = this.context.getServices().getDialogService();
-        var defVal = i18n.getText('NewQueryDefName');
-        var dlg = ds.open({
-            title: i18n.getText('NewQueryTitle'),
-            body: this._querySaveTemplate,
-            submitable: true,
-            closable: true,
-            cancelable: true,
-            submitOnEnter: true,
-            arrangeParents: false,
-            beforeOpen: function () {
-                var input = document.getElementById("kdlg-dialog-form-input");
-                if (defVal) {
-                    input.value = defVal;
-                }
-                var content = document.getElementById('kdlg-dialog-form-content');
-                content.innerHTML = i18n.getText('NewQueryContent');
-                input.focus();
-            },
-            onSubmit: function () {
-                var input = document.getElementById("kdlg-dialog-form-input");
-                var value = input.value;
-                if (value && value.replace(/\s/g, '').length > 0) {
-                    if (!callback)
-                        return true;
-                    dlg.disableButtons();
-                    var header_1 = dlg.getRootElement().querySelector('header');
-                    var processEl_1 = domel('div', header_1)
-                        .addClass('eqjs-process-bar local')
-                        .toDOM();
-                    callback(value)
-                        .then(function (result) {
-                        header_1.removeChild(processEl_1);
-                        dlg.enableButtons();
-                        if (result.success) {
-                            dlg.close();
-                        }
-                        else {
-                            dlg.showAlert(result.message, 'error');
-                        }
-                    });
-                }
-                return false;
-            }
-        });
-    };
-    AdvancedSearchView.prototype.showQueryChangedDialog = function (callback) {
-        var ds = this.context.getServices().getDialogService();
-        ds.openConfirm(i18n.getText('QueryChangedTitle'), i18n.getText('QueryChangedContent'), callback);
-    };
-    AdvancedSearchView.prototype.showSaveQueryDialog = function (callback) {
-        var ds = this.context.getServices().getDialogService();
-        var query = this.context.getQuery();
-        var newQueryName = query.isNewbie
-            ? query.getName()
-            : i18n.getText('SaveQueryDefName').replace('{queryName}', query.getName());
-        var dlg = ds.open({
-            title: i18n.getText('SaveQueryTitle'),
-            body: this._querySaveTemplate,
-            submitable: true,
-            closable: true,
-            cancelable: true,
-            submitOnEnter: true,
-            arrangeParents: false,
-            beforeOpen: function () {
-                var input = document.getElementById("kdlg-dialog-form-input");
-                input.value = newQueryName;
-                var content = document.getElementById('kdlg-dialog-form-content');
-                content.innerHTML = i18n.getText('SaveQueryContent');
-                input.focus();
-            },
-            onSubmit: function () {
-                var input = document.getElementById("kdlg-dialog-form-input");
-                var value = input.value;
-                if (value && value.replace(/\s/g, '').length > 0) {
-                    if (!callback)
-                        return true;
-                    dlg.disableButtons();
-                    var header_2 = dlg.getRootElement().querySelector('header');
-                    var processEl_2 = domel('div', header_2)
-                        .addClass('eqjs-process-bar local')
-                        .toDOM();
-                    callback(value)
-                        .then(function (result) {
-                        dlg.enableButtons();
-                        header_2.removeChild(processEl_2);
-                        if (result.success) {
-                            dlg.close();
-                        }
-                        else {
-                            dlg.showAlert(result.message, 'error');
-                        }
-                    });
-                }
-                return false;
-            }
-        });
-    };
-    AdvancedSearchView.prototype.showRemoveQueryDialog = function (callback) {
-        var ds = this.context.getServices().getDialogService();
-        var query = this.context.getQuery();
-        ds.openConfirm(i18n.getText('RemoveQueryTitle'), i18n.getText('RemoveQueryContent').replace('{queryName}', query.getName()), callback);
-    };
-    AdvancedSearchView.prototype.showSaveQueryToFileDialog = function (callback) {
-        var ds = this.getContext().getServices().getDialogService();
-        var query = this.context.getQuery();
-        var body = this.renderSaveToFileDialogBody(query.getName());
-        var dlg = ds.open({
-            title: i18n.getText('SaveQueryToFileDlgTitle'),
-            body: body,
-            onSubmit: function () {
-                var fileNameInput = body.querySelector('#kdlgFileNameInput');
-                var fileName = fileNameInput ? fileNameInput.value : "Query";
-                var formatSelector = body.querySelector('#kdlgFileFormatSelector');
-                var format = formatSelector ? formatSelector.value : 'json';
-                if (callback) {
-                    dlg.disableButtons();
-                    var header_3 = dlg.getRootElement().querySelector('header');
-                    var processEl_3 = domel('div', header_3)
-                        .addClass('eqjs-process-bar local')
-                        .toDOM();
-                    callback(fileName, format)
-                        .then(function (result) {
-                        dlg.enableButtons();
-                        header_3.removeChild(processEl_3);
-                        if (result.success) {
-                            dlg.close();
-                        }
-                        else {
-                            dlg.showAlert(result.message, 'error');
-                        }
-                    });
-                    return false;
-                }
-                return true;
-            }
-        });
-    };
-    AdvancedSearchView.prototype.renderSaveToFileDialogBody = function (name, format) {
-        if (format === void 0) { format = "json"; }
-        var isIE = browserUtils.isIE();
-        var fieldsClass = isIE
-            ? 'kfrm-fields-ie col-ie-1-4 label-align-right'
-            : 'kfrm-fields col-a-1 label-align-right';
-        var horizClass = isIE
-            ? 'kfrm-fields-ie is-horizontal'
-            : 'kfrm-fields is-horizontal';
-        return domel('div')
-            .addClass('kfrm-form')
-            .addChild('div', function (b) {
-            b.addClass(fieldsClass)
-                .addChild('label', function (b) { return b
-                .attr('for', 'file_name')
-                .addText(i18n.getText('FileNameLabel')); })
-                .addChild('div', function (b) { return b
-                .addClass(horizClass)
-                .addChild('input', function (b) { return b
-                .id('kdlgFileNameInput')
-                .name('file_name')
-                .type('text')
-                .attr('value', name); })
-                .addChild('label', function (b) { return b
-                .addText('.'); })
-                .addChild('div', function (b) { return b
-                .addClass('kfrm-select')
-                .addChild('select', function (b) { return b
-                .id('kdlgFileFormatSelector')
-                .addClass('kdlg-form-control')
-                .addOption({
-                value: 'xml',
-                selected: 'xml' === format
-            })
-                .addOption({
-                value: 'json',
-                selected: 'json' === format
-            }); }); }); });
-        })
-            .toDOM();
-    };
-    // ------------------ Query management buttons handler ---------------------
-    AdvancedSearchView.prototype.newQueryButtonClick = function () {
-        var _this = this;
-        this.checkIfQueryModified(function () {
-            _this.createNewQuery();
-        });
-    };
-    AdvancedSearchView.prototype.saveQueryToFileButtonClick = function () {
-        var _this = this;
-        this.showSaveQueryToFileDialog(function (fileName, format) { return new Promise(function (resolve) {
-            _this.context.getQueryFile({
-                fileName: fileName,
-                format: format,
-                success: function () { return resolve({ success: true }); },
-                error: function (error) { return resolve({ success: false, message: error }); }
-            });
-        }); });
-    };
-    AdvancedSearchView.prototype.loadQueryFromFileButtonClick = function () {
-        var _this = this;
-        this.checkIfQueryModified(function () {
-            _this.showLoadQueryFromFileDialog();
-        });
-    };
-    AdvancedSearchView.prototype.showLoadQueryFromFileDialog = function () {
-        this.loadQueryFromFileInput.click();
-    };
-    AdvancedSearchView.prototype.loadQueryFromFileInputSelect = function () {
-        var _this = this;
-        var files = this.loadQueryFromFileInput.files;
-        var file = files.item(0);
-        var data = new FormData();
-        data.append(file.name, file);
-        this.loadQueryFromFileInput.value = "";
-        this.context.uploadQueryFile({
-            data: data,
-            success: function () {
-                _this.syncQuery();
-                _this.refreshQueryList();
-            }
-        });
-    };
-    AdvancedSearchView.prototype.loadQueryButtonClick = function () {
-        var _this = this;
-        this.context.loadQueryList({
-            success: function (data) {
-                _this.fillLoadQueryButtonMenu(data);
-                _this.queryListMenu.showMenu({
-                    anchor: _this.loadQueryButton,
-                    adjustHeight: false,
-                    itemSelectedCallback: function (data) {
-                        _this.checkIfQueryModified(function () { return _this.loadQuery(data.id); });
-                    }
-                });
-            }
-        });
-    };
-    AdvancedSearchView.prototype.fillLoadQueryButtonMenu = function (queryList) {
-        var query = this.getContext().getQuery();
-        this.queryListMenu = new PopupMenu({
-            items: queryList.map(function (item) { return ({ id: item.id, text: item.name }); }),
-            selectedIds: query.getId()
-        });
-    };
-    AdvancedSearchView.prototype.saveQueryButtonClick = function () {
-        this.saveCurrentQuery();
-    };
-    AdvancedSearchView.prototype.copyQueryButtonClick = function () {
-        this.saveCurrentQuery(true);
-    };
-    AdvancedSearchView.prototype.removeQueryButtonClick = function () {
-        var _this = this;
-        this.showRemoveQueryDialog(function (result) {
-            if (result) {
-                _this.removeCurrentQuery();
-            }
-        });
-    };
-    AdvancedSearchView.prototype.storageDropButtonClick = function () {
-        var _this = this;
-        var container = this.storageDropButton.parentElement;
-        var content = container.querySelector("." + this.dropdownContentClass);
-        if (content) {
-            window.setTimeout(function () { return content.classList.toggle(_this.dropdownShowClass); }, 100);
-        }
-    };
-    AdvancedSearchView.prototype.fetchDataButtonClick = function () {
-        this.fetchData();
-    };
-    AdvancedSearchView.prototype.detach = function () {
-        var _this = this;
-        this.enableExportButtons();
-        this.exportButtons.forEach(function (button) {
-            button.removeEventListener('click', _this.exportButtonClickHandler);
-        });
-        this.exportButtons = [];
-        if (this.fetchDataButton) {
-            this.fetchDataButton.removeEventListener('click', this.fetchDataButtonClickHandler);
-            this.fetchDataButton = null;
-        }
-        if (this.clearQueryButton) {
-            this.clearQueryButton.removeEventListener('click', this.clearQueryButtonClickHandler);
-            this.clearQueryButton = null;
-        }
-        if (this.newQueryButton) {
-            this.newQueryButton.removeEventListener('click', this.newQueryButtonClickHandler);
-            this.newQueryButton = null;
-        }
-        if (this.loadQueryButton) {
-            this.loadQueryButton.removeEventListener('click', this.loadQueryButtonClickHandler);
-            this.loadQueryButton = null;
-        }
-        if (this.saveQueryButton) {
-            this.saveQueryButton.removeEventListener('click', this.saveQueryButtonClickHandler);
-            this.saveQueryButton = null;
-        }
-        if (this.copyQueryButton) {
-            this.copyQueryButton.removeEventListener('click', this.copyQueryButtonClickHandler);
-            this.copyQueryButton = null;
-        }
-        if (this.removeQueryButton) {
-            this.removeQueryButton.removeEventListener('click', this.removeQueryButtonClickHandler);
-            this.removeQueryButton = null;
-        }
-        if (this.storageDropButton) {
-            this.storageDropButton.removeEventListener('click', this.storageButtonClickHandler);
-            this.storageDropButton = null;
-        }
-        if (this.saveQueryToFileButton) {
-            this.saveQueryToFileButton.removeEventListener('click', this.saveQueryToFileButtonClickHandler);
-            this.saveQueryToFileButton = null;
-        }
-        if (this.queryListPanel) {
-            this.queryListPanel = null;
-        }
-        if (this.loadQueryFromFileButton) {
-            if (this.loadQueryFromFileInput) {
-                document.body.removeChild(this.loadQueryFromFileInput);
-            }
-            this.loadQueryFromFileButton.removeEventListener('click', this.loadQueryFromFileButtonClickHandler);
-            this.loadQueryFromFileButton = null;
-        }
-        _super.prototype.detach.call(this);
-    };
-    return AdvancedSearchView;
-}(View));
-export { AdvancedSearchView };
+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 { QueryChangePart, WidgetGroup } from '@easyquery/core';
+import { domel } from '@easydata/ui';
+import { PopupMenu } from '../utils/popup_menu';
+import { browserUtils } from '../utils/browser_utils';
+import { View } from '../views/view';
+/**
+ * The EasyQuery client-side view that represents the UI for advanced search page
+ */
+var AdvancedSearchView = /** @class */ (function (_super) {
+    __extends(AdvancedSearchView, _super);
+    function AdvancedSearchView() {
+        var _this = _super.call(this) || this;
+        _this.exportButtons = [];
+        // Name of the class to add to disabled elements.
+        _this.disabledClass = "eqjs-disabled";
+        _this.dropdownContainerClass = "eqv-dropdown-container";
+        _this.dropdownButtonClass = "eqv-drop-button";
+        _this.dropdownContentClass = "eqv-dropdown-content";
+        _this.dropdownShowClass = "eqv-dropdown-show";
+        _this._querySaveTemplate = "<div id=\"kdlg-dialog-form\" class=\"kfrm-form\">\n            <div class=\"kfrm-fields label-above\">\n                <label for=\"kdlg-dialog-form-input\" id=\"kdlg-dialog-form-content\"></label>\n                <input type=\"text\" name=\"kdlg-dialog-form-input\" id=\"kdlg-dialog-form-input\" />\n            </div>\n        </div>";
+        _this.queryListMenu = null;
+        _this.fetchDataButtonClickHandler = _this.fetchDataButtonClick.bind(_this);
+        _this.clearQueryButtonClickHandler = _this.clearQueryButtonClick.bind(_this);
+        _this.newQueryButtonClickHandler = _this.newQueryButtonClick.bind(_this);
+        _this.loadQueryButtonClickHandler = _this.loadQueryButtonClick.bind(_this);
+        _this.saveQueryButtonClickHandler = _this.saveQueryButtonClick.bind(_this);
+        _this.copyQueryButtonClickHandler = _this.copyQueryButtonClick.bind(_this);
+        _this.removeQueryButtonClickHandler = _this.removeQueryButtonClick.bind(_this);
+        _this.storageButtonClickHandler = _this.storageDropButtonClick.bind(_this);
+        _this.saveQueryToFileButtonClickHandler = _this.saveQueryToFileButtonClick.bind(_this);
+        _this.loadQueryFromFileButtonClickHandler = _this.loadQueryFromFileButtonClick.bind(_this);
+        var self = _this;
+        _this.exportButtonClickHandler = function (e) {
+            if (!this.classList.contains(self.disabledClass)) {
+                var format = this.getAttribute("data-format");
+                self.getContext().exportResult({ format: format });
+            }
+        };
+        _this.queryChangedHandler = function (ev) {
+            var eventData = ev.data;
+            if (_this.resultOptions.clearResultOnQueryChange) {
+                _this.context.clearResult();
+                _this.context.refreshWidgets(WidgetGroup.Result);
+            }
+            _this.disableExportButtons();
+            if (_this.resultCountSlot) {
+                _this.resultCountSlot.style.display = "none";
+            }
+            if (_this.viewOptions.syncQueryOnChange) {
+                _this.syncQuery();
+            }
+            if (_this.viewOptions.fetchDataOnChange) {
+                if (!eventData || (eventData.part != QueryChangePart.ExtraData
+                    && eventData.part != QueryChangePart.Facets)) {
+                    _this.fetchData();
+                }
+            }
+        };
+        _this.outsideClickHandler = function (event) {
+            var currentContent = null;
+            if (event.target.matches(".".concat(_this.dropdownButtonClass))) {
+                currentContent = event.target.parentElement.querySelector(".".concat(_this.dropdownContentClass));
+            }
+            else if (event.target.matches(".".concat(_this.dropdownButtonClass, " > span"))) {
+                currentContent = event.target.parentElement.parentElement.querySelector(".".concat(_this.dropdownContentClass));
+            }
+            var dropdowns = _this.resolveElementsByClassName(_this.dropdownContentClass);
+            for (var i = 0; i < dropdowns.length; i++) {
+                var openDropdown = dropdowns[i];
+                if (currentContent != openDropdown) {
+                    if (openDropdown.classList.contains(_this.dropdownShowClass)) {
+                        openDropdown.classList.remove(_this.dropdownShowClass);
+                    }
+                }
+            }
+        };
+        return _this;
+    }
+    AdvancedSearchView.prototype.refreshQueryList = function () {
+        var _this = this;
+        if (this.queryListPanel) {
+            this.queryListPanel.innerHTML = '';
+            this.context.loadQueryList({
+                success: function (data) {
+                    var b = domel('ul', _this.queryListPanel)
+                        .addClass('list-group list-group-flush');
+                    data.map(function (item) {
+                        b.addChild('li', function (b) {
+                            b.addClass('list-group-item')
+                                .setStyle('cursor', 'pointer')
+                                .data('id', item.id)
+                                .text(item.name)
+                                .on('click', function () {
+                                _this.checkIfQueryModified(function () { return _this.loadQuery(item.id); });
+                            });
+                        });
+                    });
+                }
+            });
+        }
+    };
+    AdvancedSearchView.prototype.initOptions = function (options) {
+        options = _super.prototype.initOptions.call(this, options);
+        if (typeof (options.syncQueryOnChange) == 'undefined') {
+            options.syncQueryOnChange = true;
+        }
+        return options;
+    };
+    AdvancedSearchView.prototype.initWidgets = function (options) {
+        var _this = this;
+        _super.prototype.initWidgets.call(this, options);
+        var exportClass = "eqjs-export";
+        var queryContentInputId = "QueryContentJson";
+        var clearQueryButtonId = "ClearQueryButton";
+        var newQueryButtonId = "NewQueryButton";
+        var loadQueryButtonId = "LoadQueryButton";
+        var saveQueryButtonId = "SaveQueryButton";
+        var copyQueryButtonId = "CopyQueryButton";
+        var removeQueryButtonId = "RemoveQueryButton";
+        var storageButtonId = "StorageDropButton";
+        var fetchDataButtonId = "FetchDataButton";
+        var loadQueryFromFileButtonId = "LoadQueryFromFileButton";
+        var saveQueryToFileButtonId = "SaveQueryToFileButton";
+        var queryListPanelId = "QueryListPanel";
+        if (options.slots) {
+            queryContentInputId = options.slots.queryContentInput || queryContentInputId;
+            fetchDataButtonId = options.slots.fetchDataButton || fetchDataButtonId;
+            clearQueryButtonId = options.slots.clearQueryButton || clearQueryButtonId;
+            newQueryButtonId = options.slots.newQueryButton || newQueryButtonId;
+            loadQueryButtonId = options.slots.loadQueryButton || loadQueryButtonId;
+            saveQueryButtonId = options.slots.saveQueryButton || saveQueryButtonId;
+            copyQueryButtonId = options.slots.copyQueryButton || copyQueryButtonId;
+            removeQueryButtonId = options.slots.removeQueryButton || removeQueryButtonId;
+            storageButtonId = options.slots.storageButton || storageButtonId;
+            exportClass = options.slots.exportClass || exportClass;
+            loadQueryFromFileButtonId = options.slots.loadQueryFromFileButton || loadQueryFromFileButtonId;
+            saveQueryToFileButtonId = options.slots.saveQueryToFileButton || saveQueryToFileButtonId;
+            queryListPanelId = options.slots.queryListPanel || queryListPanelId;
+        }
+        this.exportButtons = this.domRoots.reduce(function (elems, root) {
+            return elems.concat(Array.from(root.querySelectorAll(".".concat(exportClass))));
+        }, []);
+        if (!options.enableExport) {
+            this.hideExportButtons();
+        }
+        this.disableExportButtons();
+        //Add event listener for export buttons
+        var self = this;
+        this.exportButtons.forEach(function (button) {
+            button.addEventListener('click', _this.exportButtonClickHandler);
+        });
+        if (!this.fetchDataButton) {
+            this.fetchDataButton = this.resolveElement(fetchDataButtonId);
+            if (!this.fetchDataButton) {
+                this.fetchDataButton = this.resolveElement('ExecuteQueryButton'); //deprecated, should be removed on the next major update
+            }
+            if (this.fetchDataButton) {
+                this.fetchDataButton.addEventListener('click', this.fetchDataButtonClickHandler);
+            }
+        }
+        if (!this.clearQueryButton) {
+            this.clearQueryButton = this.resolveElement(clearQueryButtonId);
+            if (this.clearQueryButton) {
+                this.clearQueryButton.addEventListener('click', this.clearQueryButtonClickHandler);
+            }
+        }
+        if (!this.newQueryButton) {
+            this.newQueryButton = this.resolveElement(newQueryButtonId);
+            if (this.newQueryButton) {
+                this.newQueryButton.addEventListener('click', this.newQueryButtonClickHandler);
+            }
+        }
+        if (!this.loadQueryButton) {
+            this.loadQueryButton = this.resolveElement(loadQueryButtonId);
+            if (this.loadQueryButton) {
+                this.loadQueryButton.addEventListener('click', this.loadQueryButtonClickHandler);
+            }
+        }
+        if (!this.saveQueryButton) {
+            this.saveQueryButton = this.resolveElement(saveQueryButtonId);
+            if (this.saveQueryButton) {
+                this.saveQueryButton.addEventListener('click', this.saveQueryButtonClickHandler);
+            }
+        }
+        if (!this.copyQueryButton) {
+            this.copyQueryButton = this.resolveElement(copyQueryButtonId);
+            if (this.copyQueryButton) {
+                this.copyQueryButton.addEventListener('click', this.copyQueryButtonClickHandler);
+            }
+        }
+        if (!this.removeQueryButton) {
+            this.removeQueryButton = this.resolveElement(removeQueryButtonId);
+            if (this.removeQueryButton) {
+                this.removeQueryButton.addEventListener('click', this.removeQueryButtonClickHandler);
+            }
+        }
+        if (!this.storageDropButton) {
+            this.storageDropButton = this.resolveElement(storageButtonId);
+            if (this.storageDropButton) {
+                this.storageDropButton.addEventListener('click', this.storageButtonClickHandler);
+            }
+        }
+        if (!this.saveQueryToFileButton) {
+            this.saveQueryToFileButton = this.resolveElement(saveQueryToFileButtonId);
+            if (this.saveQueryToFileButton) {
+                this.saveQueryToFileButton.addEventListener('click', this.saveQueryToFileButtonClickHandler);
+            }
+        }
+        if (!this.queryListPanel) {
+            this.queryListPanel = this.resolveElement(queryListPanelId);
+            //For backward compatibility. Remove on the next update
+            if (!this.queryListPanel) {
+                this.queryListPanel = this.resolveElement('QueryListSlot');
+            }
+            if (this.queryListPanel) {
+                this.context.addEventListener('ready', function () {
+                    _this.refreshQueryList();
+                });
+            }
+        }
+        if (!this.loadQueryFromFileButton) {
+            this.loadQueryFromFileButton = this.resolveElement(loadQueryFromFileButtonId);
+            if (this.loadQueryFromFileButton) {
+                this.loadQueryFromFileInput = document.createElement('input');
+                this.loadQueryFromFileInput.type = 'file';
+                this.loadQueryFromFileInput.accept = options.queryFileExtensions;
+                this.loadQueryFromFileInput.style.display = 'none';
+                document.body.appendChild(this.loadQueryFromFileInput);
+                this.loadQueryFromFileInput.addEventListener('change', this.loadQueryFromFileInputSelect.bind(this));
+                this.loadQueryFromFileButton.addEventListener('click', this.loadQueryFromFileButtonClickHandler);
+            }
+        }
+        // hide any dropdown menu when user clicks somewhere
+        window.addEventListener('click', this.outsideClickHandler);
+    };
+    AdvancedSearchView.prototype.initDone = function () {
+        _super.prototype.initDone.call(this);
+        var query = this.context.getQuery();
+        query.addChangedCallback(this.queryChangedHandler);
+    };
+    /**
+    * Sends current query to the backend.
+    */
+    AdvancedSearchView.prototype.syncQuery = function () {
+        var _this = this;
+        this.context.syncQuery({
+            success: function (responseData) {
+                if (responseData.statement) {
+                    _this.context.refreshWidgets(WidgetGroup.Statement);
+                }
+            }
+        });
+    };
+    /**
+    * Disables export buttons.
+    */
+    AdvancedSearchView.prototype.disableExportButtons = function () {
+        var _this = this;
+        this.exportButtons.forEach(function (button) {
+            button.disabled = true;
+            if (!button.classList.contains(_this.disabledClass)) {
+                button.classList.add(_this.disabledClass);
+            }
+        });
+    };
+    /**
+    * Enables export buttons.
+    */
+    AdvancedSearchView.prototype.enableExportButtons = function () {
+        var _this = this;
+        this.exportButtons.forEach(function (button) {
+            button.disabled = false;
+            if (button.classList.contains(_this.disabledClass)) {
+                button.classList.remove(_this.disabledClass);
+            }
+        });
+    };
+    /**
+    * Hides export buttons.
+    */
+    AdvancedSearchView.prototype.hideExportButtons = function () {
+        this.exportButtons.forEach(function (button) {
+            button.style.display = "none";
+        });
+    };
+    AdvancedSearchView.prototype.clearQueryButtonClick = function () {
+        this.context.clearQuery();
+        this.context.refreshWidgets(WidgetGroup.Statement);
+    };
+    AdvancedSearchView.prototype.createNewQuery = function (options) {
+        return this.context.newQuery(options);
+    };
+    AdvancedSearchView.prototype.loadQuery = function (queryId) {
+        if (!queryId)
+            return;
+        this.context.loadQuery({
+            queryId: queryId,
+            silent: false
+        });
+    };
+    AdvancedSearchView.prototype.saveQuery = function (success, error) {
+        var _this = this;
+        this.context.saveQuery({
+            success: function () {
+                if (success)
+                    success();
+                _this.context.getQuery().fireChangedEvent({
+                    part: QueryChangePart.Properties,
+                    wasModified: false
+                });
+                _this.refreshQueryList();
+            },
+            error: error
+        });
+    };
+    AdvancedSearchView.prototype.saveCurrentQuery = function (copyQuery, callback) {
+        var _this = this;
+        if (copyQuery === void 0) { copyQuery = false; }
+        var query = this.context.getQuery();
+        if (query.isNewbie || copyQuery) {
+            this.showSaveQueryDialog(function (result) { return new Promise(function (resolve) {
+                if (!result)
+                    return;
+                query.regenerateId();
+                query.setName(result);
+                query.fireChangedEvent({
+                    part: QueryChangePart.Properties,
+                    wasModified: true
+                });
+                _this.saveQuery(function () { resolve({ success: true }); callback; }, function (error) { return resolve({ success: false, message: error }); });
+            }); });
+        }
+        else {
+            this.saveQuery(callback);
+        }
+    };
+    AdvancedSearchView.prototype.checkIfQueryModified = function (callback) {
+        var _this = this;
+        if (this.context.getQuery().isModified()
+            && !this.viewOptions.disableConfirmationOnQueryChange) {
+            this.showQueryChangedDialog(function (result) {
+                if (result) {
+                    _this.saveCurrentQuery(false, callback);
+                }
+                else {
+                    callback();
+                }
+            });
+        }
+        else {
+            callback();
+        }
+    };
+    AdvancedSearchView.prototype.removeCurrentQuery = function () {
+        var _this = this;
+        this.context.removeQuery({
+            success: function () {
+                _this.createNewQuery({
+                    useStorage: false
+                });
+                if (_this.resultCountSlot) {
+                    _this.resultCountSlot.style.display = "none";
+                }
+                _this.context.clearResult();
+                _this.refreshQueryList();
+            }
+        });
+    };
+    // ------------------ Dialog wrappers ---------------------
+    AdvancedSearchView.prototype.showNewQueryDialog = function (callback) {
+        var ds = this.context.getServices().getDialogService();
+        var defVal = i18n.getText('NewQueryDefName');
+        var dlg = ds.open({
+            title: i18n.getText('NewQueryTitle'),
+            body: this._querySaveTemplate,
+            submitable: true,
+            closable: true,
+            cancelable: true,
+            submitOnEnter: true,
+            arrangeParents: false,
+            beforeOpen: function () {
+                var input = document.getElementById("kdlg-dialog-form-input");
+                if (defVal) {
+                    input.value = defVal;
+                }
+                var content = document.getElementById('kdlg-dialog-form-content');
+                content.innerHTML = i18n.getText('NewQueryContent');
+                input.focus();
+            },
+            onSubmit: function () {
+                var input = document.getElementById("kdlg-dialog-form-input");
+                var value = input.value;
+                if (value && value.replace(/\s/g, '').length > 0) {
+                    if (!callback)
+                        return true;
+                    dlg.disableButtons();
+                    var header_1 = dlg.getRootElement().querySelector('header');
+                    var processEl_1 = domel('div', header_1)
+                        .addClass('eqjs-process-bar local')
+                        .toDOM();
+                    callback(value)
+                        .then(function (result) {
+                        header_1.removeChild(processEl_1);
+                        dlg.enableButtons();
+                        if (result.success) {
+                            dlg.close();
+                        }
+                        else {
+                            dlg.showAlert(result.message, 'error');
+                        }
+                    });
+                }
+                return false;
+            }
+        });
+    };
+    AdvancedSearchView.prototype.showQueryChangedDialog = function (callback) {
+        var ds = this.context.getServices().getDialogService();
+        ds.openConfirm(i18n.getText('QueryChangedTitle'), i18n.getText('QueryChangedContent'), callback);
+    };
+    AdvancedSearchView.prototype.showSaveQueryDialog = function (callback) {
+        var ds = this.context.getServices().getDialogService();
+        var query = this.context.getQuery();
+        var newQueryName = query.isNewbie
+            ? query.getName()
+            : i18n.getText('SaveQueryDefName').replace('{queryName}', query.getName());
+        var dlg = ds.open({
+            title: i18n.getText('SaveQueryTitle'),
+            body: this._querySaveTemplate,
+            submitable: true,
+            closable: true,
+            cancelable: true,
+            submitOnEnter: true,
+            arrangeParents: false,
+            beforeOpen: function () {
+                var input = document.getElementById("kdlg-dialog-form-input");
+                input.value = newQueryName;
+                var content = document.getElementById('kdlg-dialog-form-content');
+                content.innerHTML = i18n.getText('SaveQueryContent');
+                input.focus();
+            },
+            onSubmit: function () {
+                var input = document.getElementById("kdlg-dialog-form-input");
+                var value = input.value;
+                if (value && value.replace(/\s/g, '').length > 0) {
+                    if (!callback)
+                        return true;
+                    dlg.disableButtons();
+                    var header_2 = dlg.getRootElement().querySelector('header');
+                    var processEl_2 = domel('div', header_2)
+                        .addClass('eqjs-process-bar local')
+                        .toDOM();
+                    callback(value)
+                        .then(function (result) {
+                        dlg.enableButtons();
+                        header_2.removeChild(processEl_2);
+                        if (result.success) {
+                            dlg.close();
+                        }
+                        else {
+                            dlg.showAlert(result.message, 'error');
+                        }
+                    });
+                }
+                return false;
+            }
+        });
+    };
+    AdvancedSearchView.prototype.showRemoveQueryDialog = function (callback) {
+        var ds = this.context.getServices().getDialogService();
+        var query = this.context.getQuery();
+        ds.openConfirm(i18n.getText('RemoveQueryTitle'), i18n.getText('RemoveQueryContent').replace('{queryName}', query.getName()), callback);
+    };
+    AdvancedSearchView.prototype.showSaveQueryToFileDialog = function (callback) {
+        var ds = this.getContext().getServices().getDialogService();
+        var query = this.context.getQuery();
+        var body = this.renderSaveToFileDialogBody(query.getName());
+        var dlg = ds.open({
+            title: i18n.getText('SaveQueryToFileDlgTitle'),
+            body: body,
+            onSubmit: function () {
+                var fileNameInput = body.querySelector('#kdlgFileNameInput');
+                var fileName = fileNameInput ? fileNameInput.value : "Query";
+                var formatSelector = body.querySelector('#kdlgFileFormatSelector');
+                var format = formatSelector ? formatSelector.value : 'json';
+                if (callback) {
+                    dlg.disableButtons();
+                    var header_3 = dlg.getRootElement().querySelector('header');
+                    var processEl_3 = domel('div', header_3)
+                        .addClass('eqjs-process-bar local')
+                        .toDOM();
+                    callback(fileName, format)
+                        .then(function (result) {
+                        dlg.enableButtons();
+                        header_3.removeChild(processEl_3);
+                        if (result.success) {
+                            dlg.close();
+                        }
+                        else {
+                            dlg.showAlert(result.message, 'error');
+                        }
+                    });
+                    return false;
+                }
+                return true;
+            }
+        });
+    };
+    AdvancedSearchView.prototype.renderSaveToFileDialogBody = function (name, format) {
+        if (format === void 0) { format = "json"; }
+        var isIE = browserUtils.isIE();
+        var fieldsClass = isIE
+            ? 'kfrm-fields-ie col-ie-1-4 label-align-right'
+            : 'kfrm-fields col-a-1 label-align-right';
+        var horizClass = isIE
+            ? 'kfrm-fields-ie is-horizontal'
+            : 'kfrm-fields is-horizontal';
+        return domel('div')
+            .addClass('kfrm-form')
+            .addChild('div', function (b) {
+            b.addClass(fieldsClass)
+                .addChild('label', function (b) { return b
+                .attr('for', 'file_name')
+                .addText(i18n.getText('FileNameLabel')); })
+                .addChild('div', function (b) { return b
+                .addClass(horizClass)
+                .addChild('input', function (b) { return b
+                .id('kdlgFileNameInput')
+                .name('file_name')
+                .type('text')
+                .attr('value', name); })
+                .addChild('label', function (b) { return b
+                .addText('.'); })
+                .addChild('div', function (b) { return b
+                .addClass('kfrm-select')
+                .addChild('select', function (b) { return b
+                .id('kdlgFileFormatSelector')
+                .addClass('kdlg-form-control')
+                .addOption({
+                value: 'xml',
+                selected: 'xml' === format
+            })
+                .addOption({
+                value: 'json',
+                selected: 'json' === format
+            }); }); }); });
+        })
+            .toDOM();
+    };
+    // ------------------ Query management buttons handler ---------------------
+    AdvancedSearchView.prototype.newQueryButtonClick = function () {
+        var _this = this;
+        this.checkIfQueryModified(function () {
+            _this.createNewQuery();
+        });
+    };
+    AdvancedSearchView.prototype.saveQueryToFileButtonClick = function () {
+        var _this = this;
+        this.showSaveQueryToFileDialog(function (fileName, format) { return new Promise(function (resolve) {
+            _this.context.getQueryFile({
+                fileName: fileName,
+                format: format,
+                success: function () { return resolve({ success: true }); },
+                error: function (error) { return resolve({ success: false, message: error }); }
+            });
+        }); });
+    };
+    AdvancedSearchView.prototype.loadQueryFromFileButtonClick = function () {
+        var _this = this;
+        this.checkIfQueryModified(function () {
+            _this.showLoadQueryFromFileDialog();
+        });
+    };
+    AdvancedSearchView.prototype.showLoadQueryFromFileDialog = function () {
+        this.loadQueryFromFileInput.click();
+    };
+    AdvancedSearchView.prototype.loadQueryFromFileInputSelect = function () {
+        var _this = this;
+        var files = this.loadQueryFromFileInput.files;
+        var file = files.item(0);
+        var data = new FormData();
+        data.append(file.name, file);
+        this.loadQueryFromFileInput.value = "";
+        this.context.uploadQueryFile({
+            data: data,
+            success: function () {
+                _this.syncQuery();
+                _this.refreshQueryList();
+            }
+        });
+    };
+    AdvancedSearchView.prototype.loadQueryButtonClick = function () {
+        var _this = this;
+        this.context.loadQueryList({
+            success: function (data) {
+                _this.fillLoadQueryButtonMenu(data);
+                _this.queryListMenu.showMenu({
+                    anchor: _this.loadQueryButton,
+                    adjustHeight: false,
+                    itemSelectedCallback: function (data) {
+                        _this.checkIfQueryModified(function () { return _this.loadQuery(data.id); });
+                    }
+                });
+            }
+        });
+    };
+    AdvancedSearchView.prototype.fillLoadQueryButtonMenu = function (queryList) {
+        var query = this.getContext().getQuery();
+        this.queryListMenu = new PopupMenu({
+            items: queryList.map(function (item) { return ({ id: item.id, text: item.name }); }),
+            selectedIds: query.getId()
+        });
+    };
+    AdvancedSearchView.prototype.saveQueryButtonClick = function () {
+        this.saveCurrentQuery();
+    };
+    AdvancedSearchView.prototype.copyQueryButtonClick = function () {
+        this.saveCurrentQuery(true);
+    };
+    AdvancedSearchView.prototype.removeQueryButtonClick = function () {
+        var _this = this;
+        this.showRemoveQueryDialog(function (result) {
+            if (result) {
+                _this.removeCurrentQuery();
+            }
+        });
+    };
+    AdvancedSearchView.prototype.storageDropButtonClick = function () {
+        var _this = this;
+        var container = this.storageDropButton.parentElement;
+        var content = container.querySelector(".".concat(this.dropdownContentClass));
+        if (content) {
+            window.setTimeout(function () { return content.classList.toggle(_this.dropdownShowClass); }, 100);
+        }
+    };
+    AdvancedSearchView.prototype.fetchDataButtonClick = function () {
+        this.fetchData();
+    };
+    AdvancedSearchView.prototype.detach = function () {
+        var _this = this;
+        this.enableExportButtons();
+        this.exportButtons.forEach(function (button) {
+            button.removeEventListener('click', _this.exportButtonClickHandler);
+        });
+        this.exportButtons = [];
+        if (this.fetchDataButton) {
+            this.fetchDataButton.removeEventListener('click', this.fetchDataButtonClickHandler);
+            this.fetchDataButton = null;
+        }
+        if (this.clearQueryButton) {
+            this.clearQueryButton.removeEventListener('click', this.clearQueryButtonClickHandler);
+            this.clearQueryButton = null;
+        }
+        if (this.newQueryButton) {
+            this.newQueryButton.removeEventListener('click', this.newQueryButtonClickHandler);
+            this.newQueryButton = null;
+        }
+        if (this.loadQueryButton) {
+            this.loadQueryButton.removeEventListener('click', this.loadQueryButtonClickHandler);
+            this.loadQueryButton = null;
+        }
+        if (this.saveQueryButton) {
+            this.saveQueryButton.removeEventListener('click', this.saveQueryButtonClickHandler);
+            this.saveQueryButton = null;
+        }
+        if (this.copyQueryButton) {
+            this.copyQueryButton.removeEventListener('click', this.copyQueryButtonClickHandler);
+            this.copyQueryButton = null;
+        }
+        if (this.removeQueryButton) {
+            this.removeQueryButton.removeEventListener('click', this.removeQueryButtonClickHandler);
+            this.removeQueryButton = null;
+        }
+        if (this.storageDropButton) {
+            this.storageDropButton.removeEventListener('click', this.storageButtonClickHandler);
+            this.storageDropButton = null;
+        }
+        if (this.saveQueryToFileButton) {
+            this.saveQueryToFileButton.removeEventListener('click', this.saveQueryToFileButtonClickHandler);
+            this.saveQueryToFileButton = null;
+        }
+        if (this.queryListPanel) {
+            this.queryListPanel = null;
+        }
+        if (this.loadQueryFromFileButton) {
+            if (this.loadQueryFromFileInput) {
+                document.body.removeChild(this.loadQueryFromFileInput);
+            }
+            this.loadQueryFromFileButton.removeEventListener('click', this.loadQueryFromFileButtonClickHandler);
+            this.loadQueryFromFileButton = null;
+        }
+        _super.prototype.detach.call(this);
+    };
+    return AdvancedSearchView;
+}(View));
+export { AdvancedSearchView };
 //# sourceMappingURL=adv_search_view.js.map