@easyquery/ui 7.2.3 → 7.2.4-rc01

package/dist/lib/views/view.js

@@ -1,539 +1,539 @@
-import { i18n } from '@easydata/core';
-import { utils as dataUtils } from '@easydata/core';
-import { EqContext, WidgetGroup } from '@easyquery/core';
-import { DefaultDialogService, addElement, domel } from '@easydata/ui';
-import { EasyGridWidget } from '../widgets/easy_grid_widget';
-import { ChartJsWidget } from '../widgets/charts/chart_widget_chartjs';
-import { EntitiesPanel } from '../widgets/entities_panel';
-import { ColumnsPanel } from '../widgets/columns_panel';
-import { ColumnsBar } from '../widgets/columns_bar';
-import { LocaleWidget } from '../widgets/locale_widget';
-import { QueryPanel } from '../widgets/query_panel';
-import { ProcessWidget } from '../widgets/process_widget';
-import { FilterBar } from '../widgets/filter_bar';
-import { SortingBar } from '../widgets/sorting_bar';
-import { QueryNameWidget } from '../widgets/queryname_widget';
-import { StatementPanel } from '../widgets/statement_panel';
-import { ResultFacetsPanel } from '../widgets/result_facets_panel';
-import { eqCssPrefix } from '../utils/utils';
-import { browserUtils } from '../utils/browser_utils';
-import { ExportWidget } from '../widgets/export_widget';
-import { AggregationBar } from '../widgets/aggregation_bar';
-var View = /** @class */ (function () {
-    // Widgets END
-    function View() {
-        this.domRoots = [document];
-        this.defaultViewOptions = {
-            enableExport: true,
-            disableConfirmationOnQueryChange: false,
-            queryFileExtensions: 'text/xml,application/json',
-            result: {
-                clearResultOnQueryChange: true,
-                showChart: true,
-                showProcessIndicator: true
-            },
-            widgets: {
-                resultGrid: {
-                    addColumns: false
-                }
-            },
-            handlers: {}
-        };
-        this.viewOptions = {};
-        this.resultOptions = {};
-        this.enableExport = false;
-        this.resetContext();
-        this.renderSpinner();
-    }
-    View.prototype.resetContext = function () {
-        this.context = new EqContext();
-        this.context
-            .getServices()
-            .registerDialogServiceResolver(function () { return new DefaultDialogService(); });
-    };
-    View.prototype.init = function (options) {
-        try {
-            this.context.initStart();
-            // to support shadow DOM rendering
-            if (options && options.shadowRoots)
-                this.domRoots = this.domRoots.concat(options.shadowRoots);
-            this.viewOptions = this.initOptions(options);
-            this.resultOptions = dataUtils.assignDeep(this.defaultViewOptions.result, this.viewOptions.result);
-            this.initWidgets(this.viewOptions);
-            this.context.init(this.viewOptions);
-            this.initDone();
-        }
-        catch (err) {
-            this.context.throwError({ action: 'Init', sourceError: err });
-        }
-    };
-    View.prototype.initOptions = function (options) {
-        options = dataUtils.assignDeep(this.defaultViewOptions, options);
-        // support old format 
-        if (!options.widgets.easyGrid) {
-            options.widgets.easyGrid = options.widgets.resultGrid || {};
-        }
-        // map columnTitleFormat option to widgets that have similar option
-        if (options.columnTitleFormat) {
-            options.widgets.entitiesPanel = options.widgets.entitiesPanel || {};
-            options.widgets.entitiesPanel.columnTitleFormat = options.widgets.entitiesPanel.columnTitleFormat || options.columnTitleFormat;
-            options.widgets.columnsBar = options.widgets.columnsBar || {};
-            options.widgets.columnsBar.titleElementFormat = options.widgets.columnsBar.titleElementFormat || options.columnTitleFormat;
-            options.widgets.columnsPanel = options.widgets.columnsPanel || {};
-            options.widgets.columnsPanel.titleElementFormat = options.widgets.columnsPanel.titleElementFormat || options.columnTitleFormat;
-        }
-        //to support old paging options (should be removed in the next versions)
-        options.widgets.easyGrid.paging =
-            dataUtils.assignDeep({}, options.result.paging, options.widgets.easyGrid.paging);
-        this.enableExport = options.enableExport || false;
-        if (!options.widgets.exportWidget) {
-            options.widgets.exportWidget = {};
-        }
-        options.widgets.exportWidget.enableExport = this.enableExport;
-        return options;
-    };
-    View.prototype.initWidgets = function (options) {
-        var queryPanel = "QueryPanel";
-        var columnsPanel = "ColumnsPanel";
-        var entitiesPanel = "EntitiesPanel";
-        var resultPanel = "ResultPanel";
-        var columnsBar = "ColumnsBar";
-        var sortingBar = "SortingBar";
-        var filterBar = "FilterBar";
-        var processBar = "ProcessBar";
-        var statementPanel = "StatementPanel";
-        var changeLocale = "ChangeLocale";
-        var queryNameLabel = "QueryNameLabel";
-        var facetsPanel = "ResultFacetsPanel";
-        var resultCount = "ResultCount";
-        var exportButton = "ExportButton";
-        var aggregationBar = "AggregationBar";
-        if (options.slots) {
-            queryNameLabel = options.slots.queryNameLabel || queryNameLabel;
-            queryPanel = options.slots.queryPanel || queryPanel;
-            columnsPanel = options.slots.columnsPanel || columnsPanel;
-            columnsBar = options.slots.columnsBar || columnsBar;
-            entitiesPanel = options.slots.entitiesPanel || entitiesPanel;
-            resultPanel = options.slots.resultPanel || resultPanel;
-            statementPanel = options.slots.statementPanel || statementPanel;
-            processBar = options.slots.processBar || processBar;
-            changeLocale = options.slots.changeLocale || changeLocale;
-            facetsPanel = options.slots.facetsPanel || facetsPanel;
-            resultCount = options.slots.resultCountSpan || resultCount;
-            filterBar = options.slots.filterBar || filterBar;
-            exportButton = options.slots.exportButtons || exportButton;
-            aggregationBar = options.slots.aggregationBar || aggregationBar;
-        }
-        var epElement = this.resolveElement(entitiesPanel);
-        if (epElement && !this.entitiesPanelWidget) {
-            this.entitiesPanelWidget = this.createEntitiesPanelWidget(epElement);
-            this.context.addWidget(this.entitiesPanelWidget);
-        }
-        var cpElement = this.resolveElement(columnsPanel);
-        if (cpElement && !this.columnsPanelWidget) {
-            this.columnsPanelWidget = this.createColumnsPanelWidget(cpElement);
-            this.context.addWidget(this.columnsPanelWidget);
-        }
-        var cbElement = this.resolveElement(columnsBar);
-        if (cbElement && !this.columnsBarWidget) {
-            this.columnsBarWidget = this.createColumnsBarWidget(cbElement);
-            this.context.addWidget(this.columnsBarWidget);
-        }
-        var qpElement = this.resolveElement(queryPanel);
-        if (qpElement && !this.queryPanelWidget) {
-            this.queryPanelWidget = this.createQueryPanelWidget(qpElement);
-            this.context.addWidget(this.queryPanelWidget);
-        }
-        this.resultPanelSlot = this.resolveElement(resultPanel);
-        if (this.resultPanelSlot) {
-            if (!this.resultGridWidget) {
-                var gridPanel = addElement(this.resultPanelSlot, 'div', { cssClass: 'eqv-result-grid' });
-                this.resultGridWidget = this.createResultGridWidget(gridPanel);
-                this.context.addWidget(this.resultGridWidget);
-            }
-            if (this.resultOptions.showChart && !this.chartWidget) {
-                var chartPanel = addElement(this.resultPanelSlot, 'div', { cssClass: 'eqv-chart-panel' });
-                chartPanel.style.display = 'none';
-                this.chartWidget = this.createChartWidget(chartPanel);
-                this.context.addWidget(this.chartWidget);
-            }
-        }
-        var qnElement = this.resolveElement(queryNameLabel);
-        if (qnElement && !this.queryNameWidget) {
-            this.queryNameWidget = this.createQueryNameWidget(qnElement);
-            this.context.addWidget(this.queryNameWidget);
-        }
-        var fbElement = this.resolveElement(filterBar);
-        if (fbElement && !this.filterBarWidget) {
-            this.filterBarWidget = this.createFilterBarWidget(fbElement);
-            this.context.addWidget(this.filterBarWidget);
-        }
-        var sbElement = this.resolveElement(sortingBar);
-        if (sbElement && !this.sortingBarWidget) {
-            this.sortingBarWidget = this.createSortingBarWidget(sbElement);
-            this.context.addWidget(this.sortingBarWidget);
-        }
-        var pbElement = this.resolveElement(processBar);
-        if (pbElement && !this.processWidget) {
-            this.processWidget = this.createProcessWidget(pbElement);
-            this.context.addWidget(this.processWidget);
-        }
-        var stElement = this.resolveElement(statementPanel);
-        if (stElement && !this.statementPanelWidget) {
-            this.statementPanelWidget = this.createStatementPanelWidget(stElement);
-            this.context.addWidget(this.statementPanelWidget);
-        }
-        var clElement = this.resolveElement(changeLocale);
-        if (clElement) {
-            var widget = this.createLocaleWidget(clElement);
-            this.context.addWidget(widget);
-        }
-        var fpElement = this.resolveElement(facetsPanel);
-        if (fpElement && !this.resultFacetPanelWidget) {
-            this.resultFacetPanelWidget = this.createResultFacetsPanel(fpElement);
-            this.context.addWidget(this.resultFacetPanelWidget);
-        }
-        var ewElement = this.resolveElement(exportButton);
-        if (ewElement && !this.exportWidget) {
-            this.exportWidget = this.createExportWidget(ewElement);
-            this.context.addWidget(this.exportWidget);
-        }
-        this.resultCountSlot = this.resolveElement(resultCount);
-        var aggrbElement = this.resolveElement(aggregationBar);
-        if (aggrbElement && !this.aggregationBarWidget) {
-            this.aggregationBarWidget = this.createAggregationBarWidget(aggrbElement);
-            this.context.addWidget(this.aggregationBarWidget);
-        }
-    };
-    View.prototype.initDone = function () { };
-    View.prototype.resolveElement = function (elementOrId) {
-        if (typeof elementOrId === 'string') {
-            for (var _i = 0, _a = this.domRoots; _i < _a.length; _i++) {
-                var domRoot = _a[_i];
-                var el = domRoot.getElementById(elementOrId);
-                if (el)
-                    return el;
-            }
-            return null;
-        }
-        return elementOrId;
-    };
-    View.prototype.resolveElementsByClassName = function (className) {
-        var result = [];
-        for (var _i = 0, _a = this.domRoots; _i < _a.length; _i++) {
-            var domRoot = _a[_i];
-            var elemList = domRoot.querySelectorAll('.' + className);
-            for (var i = 0; i < elemList.length; i++) {
-                result.push(elemList[i]);
-            }
-        }
-        return result;
-    };
-    /**
-    * Shows records count.
-    * @param count The value to show.
-    */
-    View.prototype.displayRecordsCount = function (count) {
-        if (this.resultCountSlot && (typeof count !== 'undefined')) {
-            this.resultCountSlot.style.display = "inline";
-            this.resultCountSlot.innerHTML = i18n.getText("MsgResultCount").replace("{0}", count.toString());
-        }
-    };
-    View.prototype.getContext = function () {
-        return this.context;
-    };
-    /**
-     * Sets dialog service for the view
-     * @param dialogService The dialog service.
-     */
-    View.prototype.setDialogService = function (dialogService) {
-        this.context.getServices()
-            .registerDialogServiceResolver(function () { return dialogService; });
-    };
-    /** @deprecated `executeQuery` is deprecated. Use `fetchData` instead*/
-    View.prototype.executeQuery = function (options) {
-        console.warn('`executeQuery` is deprecated. Use `fetchData` instead');
-        this.fetchData(options);
-    };
-    /**
-    * Fetches the data according to the query and other options defined in the context.
-    * @param options The options.
-    */
-    View.prototype.fetchData = function (options) {
-        var _this = this;
-        options = options || { refresh: true };
-        this.context.clearResult();
-        //don't run fetch if the query is empty
-        if (this.context.getQuery().isEmpty() && !this.resultOptions.fetchEmptyQueries)
-            return;
-        this.showResultSpinner();
-        this.context.fetchData({
-            elasticPaging: options.elasticPaging,
-            success: function (result) {
-                _this.hideResultSpinner();
-                _this.toggleExportButtons();
-                _this.displayRecordsCount(_this.context.resultTable.getTotal());
-                if (options.refresh === true) {
-                    _this.context.refreshWidgets(WidgetGroup.Result);
-                }
-                if (options.callback) {
-                    options.callback();
-                }
-                if (options.success) {
-                    options.success();
-                }
-            },
-            error: function () {
-                _this.hideResultSpinner();
-            }
-        });
-    };
-    View.prototype.toggleExportButtons = function () {
-        if (this.enableExport && this.context.resultTable
-            && this.context.resultTable.getCachedCount() > 0) {
-            this.enableExportButtons();
-        }
-        else {
-            this.disableExportButtons();
-        }
-    };
-    View.prototype.enableExportButtons = function () {
-        // Nothing to do
-    };
-    View.prototype.disableExportButtons = function () {
-        // Nothing to do
-    };
-    View.prototype.renderSpinner = function () {
-        var html = '<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>';
-        ;
-        this._spinnerDiv = domel('div')
-            .addClass("eqjs-result-spinner")
-            .addChild('div', function (b) { return b
-            .addClass(eqCssPrefix + "-progress-win8", browserUtils.getMobileCssClass())
-            .addHtml(html); })
-            .toDOM();
-    };
-    View.prototype.showResultSpinner = function () {
-        if (this.resultOptions.showProcessIndicator && this.resultPanelSlot) {
-            if (!this._spinnerDiv.parentNode) {
-                for (var i = 0; i < this.resultPanelSlot.children.length; i++) {
-                    var el = this.resultPanelSlot.children[i];
-                    domel(el).hide();
-                }
-                this.resultPanelSlot.appendChild(this._spinnerDiv);
-            }
-        }
-    };
-    View.prototype.hideResultSpinner = function () {
-        if (this.resultOptions.showProcessIndicator && this.resultPanelSlot) {
-            if (this._spinnerDiv.parentNode) {
-                this._spinnerDiv.parentNode.removeChild(this._spinnerDiv);
-                for (var i = 0; i < this.resultPanelSlot.children.length; i++) {
-                    var el = this.resultPanelSlot.children[i];
-                    domel(el).show();
-                }
-            }
-        }
-    };
-    /**
-    * Creates the widget that represents Chart Widget.
-    * @param slot The HTMLElement to place the created widget in.
-    * @returns the created Widget object.
-    */
-    View.prototype.createChartWidget = function (slotElement) {
-        if (this.resultOptions.chartWidgetResolver) {
-            return this.resultOptions.chartWidgetResolver(slotElement);
-        }
-        else {
-            return new ChartJsWidget(slotElement);
-        }
-    };
-    /**
-    * Creates the widget that represents Grid Widget.
-    * @param slot The HTMLElement to place the created widget in.
-    * @returns the created Widget object.
-    */
-    View.prototype.createResultGridWidget = function (slotElement) {
-        if (this.resultOptions.resultGridResolver) {
-            return this.resultOptions.resultGridResolver(slotElement);
-        }
-        else {
-            return new EasyGridWidget(slotElement);
-        }
-    };
-    /**
-    * Creates the widget that represents Entity Panel.
-    * @param slot The HTMLElement to place the created widget in.
-    * @returns the created Widget object.
-    */
-    View.prototype.createEntitiesPanelWidget = function (slot) {
-        return new EntitiesPanel(slot);
-    };
-    /**
-    * Creates the widget that represents Columns Panel.
-    * @param slot The HTMLElement to place the created widget in.
-    * @returns the created Widget object.
-    */
-    View.prototype.createColumnsPanelWidget = function (slot) {
-        return new ColumnsPanel(slot);
-    };
-    /**
-    * Creates the widget that represents Query Panel.
-    * @param slot The HTMLElement to place the created widget in.
-    * @returns the created Widget object.
-    */
-    View.prototype.createQueryPanelWidget = function (slot) {
-        return new QueryPanel(slot);
-    };
-    /**
-    * Creates the widget that represents Locale Widget.
-    * @param slot The HTMLElement to place the created widget in.
-    * @returns the created Widget object.
-    */
-    View.prototype.createLocaleWidget = function (slot) {
-        return new LocaleWidget(slot);
-    };
-    /**
-    * Creates the widget that represents Process Widget.
-    * @param slot The HTMLElement to place the created widget in.
-    * @returns the created Widget object.
-    */
-    View.prototype.createProcessWidget = function (slot) {
-        return new ProcessWidget(slot);
-    };
-    /**
-    * Creates the widget that represents Columns Bar.
-    * @param slot The HTMLElement to place the created widget in.
-    * @returns the created Widget object.
-    */
-    View.prototype.createColumnsBarWidget = function (slot) {
-        return new ColumnsBar(slot);
-    };
-    /**
-    * Creates the widget that represents Filter Bar.
-    * @param slot The HTMLElement to place the created widget in.
-    * @returns the created Widget object.
-    */
-    View.prototype.createFilterBarWidget = function (slot) {
-        return new FilterBar(slot);
-    };
-    /**
-    * Creates the widget that represents Sorting Bar.
-    * @param slot The HTMLElement to place the created widget in.
-    * @returns the created Widget object.
-    */
-    View.prototype.createSortingBarWidget = function (slot) {
-        return new SortingBar(slot);
-    };
-    /**
-    * Creates the widget that represents Query Name Widget.
-    * @param slot The HTMLElement to place the created widget in.
-    * @returns the created Widget object.
-    */
-    View.prototype.createQueryNameWidget = function (slot) {
-        return new QueryNameWidget(slot);
-    };
-    /**
-     * Creates the widget that represents Statement Panel Widget.
-     * @param slot
-     */
-    View.prototype.createStatementPanelWidget = function (slot) {
-        return new StatementPanel(slot);
-    };
-    /**
-    * Creates the widget that represents Result Facets Panel Widget.
-    * @param slot
-    */
-    View.prototype.createResultFacetsPanel = function (slot) {
-        return new ResultFacetsPanel(slot);
-    };
-    /**
-     * Creates the widget that represents Export funcionality.
-     * @param slot
-     */
-    View.prototype.createExportWidget = function (slot) {
-        return new ExportWidget(slot);
-    };
-    /**
-     * Creates the widget that represents Aggregation Bar Widget.
-     * @param slot
-     */
-    View.prototype.createAggregationBarWidget = function (slot) {
-        return new AggregationBar(slot);
-    };
-    View.prototype.detach = function () {
-        if (this.entitiesPanelWidget) {
-            this.entitiesPanelWidget.destroy();
-            this.entitiesPanelWidget = null;
-        }
-        if (this.columnsPanelWidget) {
-            this.columnsPanelWidget.destroy();
-            this.columnsPanelWidget = null;
-        }
-        if (this.queryPanelWidget) {
-            this.queryPanelWidget.destroy();
-            this.queryPanelWidget = null;
-        }
-        if (this.columnsBarWidget) {
-            this.columnsBarWidget.destroy();
-            this.columnsBarWidget = null;
-        }
-        if (this.resultGridWidget) {
-            this.resultGridWidget.destroy();
-            this.resultGridWidget = null;
-        }
-        if (this.chartWidget) {
-            this.chartWidget.destroy();
-            this.chartWidget = null;
-        }
-        if (this.queryNameWidget) {
-            this.queryNameWidget.destroy();
-            this.queryNameWidget = null;
-        }
-        if (this.processWidget) {
-            this.processWidget.destroy();
-            this.processWidget = null;
-        }
-        if (this.localeWidget) {
-            this.localeWidget.destroy();
-            this.localeWidget = null;
-        }
-        if (this.statementPanelWidget) {
-            this.statementPanelWidget.destroy();
-            this.statementPanelWidget = null;
-        }
-        if (this.filterBarWidget) {
-            this.filterBarWidget.destroy();
-            this.filterBarWidget = null;
-        }
-        if (this.sortingBarWidget) {
-            this.sortingBarWidget.destroy();
-            this.sortingBarWidget = null;
-        }
-        if (this.statementWidget) {
-            this.statementWidget.destroy();
-            this.statementWidget = null;
-        }
-        if (this.exportWidget) {
-            this.exportWidget.destroy();
-            this.exportWidget = null;
-        }
-        if (this.resultFacetPanelWidget) {
-            this.resultFacetPanelWidget.destroy();
-            this.resultFacetPanelWidget = null;
-        }
-        if (this.resultCountSlot) {
-            this.resultCountSlot.innerHTML = '';
-            this.resultCountSlot = null;
-        }
-        if (this.resultPanelSlot) {
-            this.resultPanelSlot.innerHTML = '';
-            this.resultPanelSlot = null;
-        }
-        this.domRoots = [document];
-        this.resetContext();
-    };
-    return View;
-}());
-export { View };
+import { i18n } from '@easydata/core';
+import { utils as dataUtils } from '@easydata/core';
+import { EqContext, WidgetGroup } from '@easyquery/core';
+import { DefaultDialogService, addElement, domel } from '@easydata/ui';
+import { EasyGridWidget } from '../widgets/easy_grid_widget';
+import { ChartJsWidget } from '../widgets/charts/chart_widget_chartjs';
+import { EntitiesPanel } from '../widgets/entities_panel';
+import { ColumnsPanel } from '../widgets/columns_panel';
+import { ColumnsBar } from '../widgets/columns_bar';
+import { LocaleWidget } from '../widgets/locale_widget';
+import { QueryPanel } from '../widgets/query_panel';
+import { ProcessWidget } from '../widgets/process_widget';
+import { FilterBar } from '../widgets/filter_bar';
+import { SortingBar } from '../widgets/sorting_bar';
+import { QueryNameWidget } from '../widgets/queryname_widget';
+import { StatementPanel } from '../widgets/statement_panel';
+import { ResultFacetsPanel } from '../widgets/result_facets_panel';
+import { eqCssPrefix } from '../utils/utils';
+import { browserUtils } from '../utils/browser_utils';
+import { ExportWidget } from '../widgets/export_widget';
+import { AggregationBar } from '../widgets/aggregation_bar';
+var View = /** @class */ (function () {
+    // Widgets END
+    function View() {
+        this.domRoots = [document];
+        this.defaultViewOptions = {
+            enableExport: true,
+            disableConfirmationOnQueryChange: false,
+            queryFileExtensions: 'text/xml,application/json',
+            result: {
+                clearResultOnQueryChange: true,
+                showChart: true,
+                showProcessIndicator: true
+            },
+            widgets: {
+                resultGrid: {
+                    addColumns: false
+                }
+            },
+            handlers: {}
+        };
+        this.viewOptions = {};
+        this.resultOptions = {};
+        this.enableExport = false;
+        this.resetContext();
+        this.renderSpinner();
+    }
+    View.prototype.resetContext = function () {
+        this.context = new EqContext();
+        this.context
+            .getServices()
+            .registerDialogServiceResolver(function () { return new DefaultDialogService(); });
+    };
+    View.prototype.init = function (options) {
+        try {
+            this.context.initStart();
+            // to support shadow DOM rendering
+            if (options && options.shadowRoots)
+                this.domRoots = this.domRoots.concat(options.shadowRoots);
+            this.viewOptions = this.initOptions(options);
+            this.resultOptions = dataUtils.assignDeep(this.defaultViewOptions.result, this.viewOptions.result);
+            this.initWidgets(this.viewOptions);
+            this.context.init(this.viewOptions);
+            this.initDone();
+        }
+        catch (err) {
+            this.context.throwError({ action: 'Init', sourceError: err });
+        }
+    };
+    View.prototype.initOptions = function (options) {
+        options = dataUtils.assignDeep(this.defaultViewOptions, options);
+        // support old format 
+        if (!options.widgets.easyGrid) {
+            options.widgets.easyGrid = options.widgets.resultGrid || {};
+        }
+        // map columnTitleFormat option to widgets that have similar option
+        if (options.columnTitleFormat) {
+            options.widgets.entitiesPanel = options.widgets.entitiesPanel || {};
+            options.widgets.entitiesPanel.columnTitleFormat = options.widgets.entitiesPanel.columnTitleFormat || options.columnTitleFormat;
+            options.widgets.columnsBar = options.widgets.columnsBar || {};
+            options.widgets.columnsBar.titleElementFormat = options.widgets.columnsBar.titleElementFormat || options.columnTitleFormat;
+            options.widgets.columnsPanel = options.widgets.columnsPanel || {};
+            options.widgets.columnsPanel.titleElementFormat = options.widgets.columnsPanel.titleElementFormat || options.columnTitleFormat;
+        }
+        //to support old paging options (should be removed in the next versions)
+        options.widgets.easyGrid.paging =
+            dataUtils.assignDeep({}, options.result.paging, options.widgets.easyGrid.paging);
+        this.enableExport = options.enableExport || false;
+        if (!options.widgets.exportWidget) {
+            options.widgets.exportWidget = {};
+        }
+        options.widgets.exportWidget.enableExport = this.enableExport;
+        return options;
+    };
+    View.prototype.initWidgets = function (options) {
+        var queryPanel = "QueryPanel";
+        var columnsPanel = "ColumnsPanel";
+        var entitiesPanel = "EntitiesPanel";
+        var resultPanel = "ResultPanel";
+        var columnsBar = "ColumnsBar";
+        var sortingBar = "SortingBar";
+        var filterBar = "FilterBar";
+        var processBar = "ProcessBar";
+        var statementPanel = "StatementPanel";
+        var changeLocale = "ChangeLocale";
+        var queryNameLabel = "QueryNameLabel";
+        var facetsPanel = "ResultFacetsPanel";
+        var resultCount = "ResultCount";
+        var exportButton = "ExportButton";
+        var aggregationBar = "AggregationBar";
+        if (options.slots) {
+            queryNameLabel = options.slots.queryNameLabel || queryNameLabel;
+            queryPanel = options.slots.queryPanel || queryPanel;
+            columnsPanel = options.slots.columnsPanel || columnsPanel;
+            columnsBar = options.slots.columnsBar || columnsBar;
+            entitiesPanel = options.slots.entitiesPanel || entitiesPanel;
+            resultPanel = options.slots.resultPanel || resultPanel;
+            statementPanel = options.slots.statementPanel || statementPanel;
+            processBar = options.slots.processBar || processBar;
+            changeLocale = options.slots.changeLocale || changeLocale;
+            facetsPanel = options.slots.facetsPanel || facetsPanel;
+            resultCount = options.slots.resultCountSpan || resultCount;
+            filterBar = options.slots.filterBar || filterBar;
+            exportButton = options.slots.exportButtons || exportButton;
+            aggregationBar = options.slots.aggregationBar || aggregationBar;
+        }
+        var epElement = this.resolveElement(entitiesPanel);
+        if (epElement && !this.entitiesPanelWidget) {
+            this.entitiesPanelWidget = this.createEntitiesPanelWidget(epElement);
+            this.context.addWidget(this.entitiesPanelWidget);
+        }
+        var cpElement = this.resolveElement(columnsPanel);
+        if (cpElement && !this.columnsPanelWidget) {
+            this.columnsPanelWidget = this.createColumnsPanelWidget(cpElement);
+            this.context.addWidget(this.columnsPanelWidget);
+        }
+        var cbElement = this.resolveElement(columnsBar);
+        if (cbElement && !this.columnsBarWidget) {
+            this.columnsBarWidget = this.createColumnsBarWidget(cbElement);
+            this.context.addWidget(this.columnsBarWidget);
+        }
+        var qpElement = this.resolveElement(queryPanel);
+        if (qpElement && !this.queryPanelWidget) {
+            this.queryPanelWidget = this.createQueryPanelWidget(qpElement);
+            this.context.addWidget(this.queryPanelWidget);
+        }
+        this.resultPanelSlot = this.resolveElement(resultPanel);
+        if (this.resultPanelSlot) {
+            if (!this.resultGridWidget) {
+                var gridPanel = addElement(this.resultPanelSlot, 'div', { cssClass: 'eqv-result-grid' });
+                this.resultGridWidget = this.createResultGridWidget(gridPanel);
+                this.context.addWidget(this.resultGridWidget);
+            }
+            if (this.resultOptions.showChart && !this.chartWidget) {
+                var chartPanel = addElement(this.resultPanelSlot, 'div', { cssClass: 'eqv-chart-panel' });
+                chartPanel.style.display = 'none';
+                this.chartWidget = this.createChartWidget(chartPanel);
+                this.context.addWidget(this.chartWidget);
+            }
+        }
+        var qnElement = this.resolveElement(queryNameLabel);
+        if (qnElement && !this.queryNameWidget) {
+            this.queryNameWidget = this.createQueryNameWidget(qnElement);
+            this.context.addWidget(this.queryNameWidget);
+        }
+        var fbElement = this.resolveElement(filterBar);
+        if (fbElement && !this.filterBarWidget) {
+            this.filterBarWidget = this.createFilterBarWidget(fbElement);
+            this.context.addWidget(this.filterBarWidget);
+        }
+        var sbElement = this.resolveElement(sortingBar);
+        if (sbElement && !this.sortingBarWidget) {
+            this.sortingBarWidget = this.createSortingBarWidget(sbElement);
+            this.context.addWidget(this.sortingBarWidget);
+        }
+        var pbElement = this.resolveElement(processBar);
+        if (pbElement && !this.processWidget) {
+            this.processWidget = this.createProcessWidget(pbElement);
+            this.context.addWidget(this.processWidget);
+        }
+        var stElement = this.resolveElement(statementPanel);
+        if (stElement && !this.statementPanelWidget) {
+            this.statementPanelWidget = this.createStatementPanelWidget(stElement);
+            this.context.addWidget(this.statementPanelWidget);
+        }
+        var clElement = this.resolveElement(changeLocale);
+        if (clElement) {
+            var widget = this.createLocaleWidget(clElement);
+            this.context.addWidget(widget);
+        }
+        var fpElement = this.resolveElement(facetsPanel);
+        if (fpElement && !this.resultFacetPanelWidget) {
+            this.resultFacetPanelWidget = this.createResultFacetsPanel(fpElement);
+            this.context.addWidget(this.resultFacetPanelWidget);
+        }
+        var ewElement = this.resolveElement(exportButton);
+        if (ewElement && !this.exportWidget) {
+            this.exportWidget = this.createExportWidget(ewElement);
+            this.context.addWidget(this.exportWidget);
+        }
+        this.resultCountSlot = this.resolveElement(resultCount);
+        var aggrbElement = this.resolveElement(aggregationBar);
+        if (aggrbElement && !this.aggregationBarWidget) {
+            this.aggregationBarWidget = this.createAggregationBarWidget(aggrbElement);
+            this.context.addWidget(this.aggregationBarWidget);
+        }
+    };
+    View.prototype.initDone = function () { };
+    View.prototype.resolveElement = function (elementOrId) {
+        if (typeof elementOrId === 'string') {
+            for (var _i = 0, _a = this.domRoots; _i < _a.length; _i++) {
+                var domRoot = _a[_i];
+                var el = domRoot.getElementById(elementOrId);
+                if (el)
+                    return el;
+            }
+            return null;
+        }
+        return elementOrId;
+    };
+    View.prototype.resolveElementsByClassName = function (className) {
+        var result = [];
+        for (var _i = 0, _a = this.domRoots; _i < _a.length; _i++) {
+            var domRoot = _a[_i];
+            var elemList = domRoot.querySelectorAll('.' + className);
+            for (var i = 0; i < elemList.length; i++) {
+                result.push(elemList[i]);
+            }
+        }
+        return result;
+    };
+    /**
+    * Shows records count.
+    * @param count The value to show.
+    */
+    View.prototype.displayRecordsCount = function (count) {
+        if (this.resultCountSlot && (typeof count !== 'undefined')) {
+            this.resultCountSlot.style.display = "inline";
+            this.resultCountSlot.innerHTML = i18n.getText("MsgResultCount").replace("{0}", count.toString());
+        }
+    };
+    View.prototype.getContext = function () {
+        return this.context;
+    };
+    /**
+     * Sets dialog service for the view
+     * @param dialogService The dialog service.
+     */
+    View.prototype.setDialogService = function (dialogService) {
+        this.context.getServices()
+            .registerDialogServiceResolver(function () { return dialogService; });
+    };
+    /** @deprecated `executeQuery` is deprecated. Use `fetchData` instead*/
+    View.prototype.executeQuery = function (options) {
+        console.warn('`executeQuery` is deprecated. Use `fetchData` instead');
+        this.fetchData(options);
+    };
+    /**
+    * Fetches the data according to the query and other options defined in the context.
+    * @param options The options.
+    */
+    View.prototype.fetchData = function (options) {
+        var _this = this;
+        options = options || { refresh: true };
+        this.context.clearResult();
+        //don't run fetch if the query is empty
+        if (this.context.getQuery().isEmpty() && !this.resultOptions.fetchEmptyQueries)
+            return;
+        this.showResultSpinner();
+        this.context.fetchData({
+            elasticPaging: options.elasticPaging,
+            success: function (result) {
+                _this.hideResultSpinner();
+                _this.toggleExportButtons();
+                _this.displayRecordsCount(_this.context.resultTable.getTotal());
+                if (options.refresh === true) {
+                    _this.context.refreshWidgets(WidgetGroup.Result);
+                }
+                if (options.callback) {
+                    options.callback();
+                }
+                if (options.success) {
+                    options.success();
+                }
+            },
+            error: function () {
+                _this.hideResultSpinner();
+            }
+        });
+    };
+    View.prototype.toggleExportButtons = function () {
+        if (this.enableExport && this.context.resultTable
+            && this.context.resultTable.getCachedCount() > 0) {
+            this.enableExportButtons();
+        }
+        else {
+            this.disableExportButtons();
+        }
+    };
+    View.prototype.enableExportButtons = function () {
+        // Nothing to do
+    };
+    View.prototype.disableExportButtons = function () {
+        // Nothing to do
+    };
+    View.prototype.renderSpinner = function () {
+        var html = '<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>';
+        ;
+        this._spinnerDiv = domel('div')
+            .addClass("eqjs-result-spinner")
+            .addChild('div', function (b) { return b
+            .addClass("".concat(eqCssPrefix, "-progress-win8"), browserUtils.getMobileCssClass())
+            .addHtml(html); })
+            .toDOM();
+    };
+    View.prototype.showResultSpinner = function () {
+        if (this.resultOptions.showProcessIndicator && this.resultPanelSlot) {
+            if (!this._spinnerDiv.parentNode) {
+                for (var i = 0; i < this.resultPanelSlot.children.length; i++) {
+                    var el = this.resultPanelSlot.children[i];
+                    domel(el).hide();
+                }
+                this.resultPanelSlot.appendChild(this._spinnerDiv);
+            }
+        }
+    };
+    View.prototype.hideResultSpinner = function () {
+        if (this.resultOptions.showProcessIndicator && this.resultPanelSlot) {
+            if (this._spinnerDiv.parentNode) {
+                this._spinnerDiv.parentNode.removeChild(this._spinnerDiv);
+                for (var i = 0; i < this.resultPanelSlot.children.length; i++) {
+                    var el = this.resultPanelSlot.children[i];
+                    domel(el).show();
+                }
+            }
+        }
+    };
+    /**
+    * Creates the widget that represents Chart Widget.
+    * @param slot The HTMLElement to place the created widget in.
+    * @returns the created Widget object.
+    */
+    View.prototype.createChartWidget = function (slotElement) {
+        if (this.resultOptions.chartWidgetResolver) {
+            return this.resultOptions.chartWidgetResolver(slotElement);
+        }
+        else {
+            return new ChartJsWidget(slotElement);
+        }
+    };
+    /**
+    * Creates the widget that represents Grid Widget.
+    * @param slot The HTMLElement to place the created widget in.
+    * @returns the created Widget object.
+    */
+    View.prototype.createResultGridWidget = function (slotElement) {
+        if (this.resultOptions.resultGridResolver) {
+            return this.resultOptions.resultGridResolver(slotElement);
+        }
+        else {
+            return new EasyGridWidget(slotElement);
+        }
+    };
+    /**
+    * Creates the widget that represents Entity Panel.
+    * @param slot The HTMLElement to place the created widget in.
+    * @returns the created Widget object.
+    */
+    View.prototype.createEntitiesPanelWidget = function (slot) {
+        return new EntitiesPanel(slot);
+    };
+    /**
+    * Creates the widget that represents Columns Panel.
+    * @param slot The HTMLElement to place the created widget in.
+    * @returns the created Widget object.
+    */
+    View.prototype.createColumnsPanelWidget = function (slot) {
+        return new ColumnsPanel(slot);
+    };
+    /**
+    * Creates the widget that represents Query Panel.
+    * @param slot The HTMLElement to place the created widget in.
+    * @returns the created Widget object.
+    */
+    View.prototype.createQueryPanelWidget = function (slot) {
+        return new QueryPanel(slot);
+    };
+    /**
+    * Creates the widget that represents Locale Widget.
+    * @param slot The HTMLElement to place the created widget in.
+    * @returns the created Widget object.
+    */
+    View.prototype.createLocaleWidget = function (slot) {
+        return new LocaleWidget(slot);
+    };
+    /**
+    * Creates the widget that represents Process Widget.
+    * @param slot The HTMLElement to place the created widget in.
+    * @returns the created Widget object.
+    */
+    View.prototype.createProcessWidget = function (slot) {
+        return new ProcessWidget(slot);
+    };
+    /**
+    * Creates the widget that represents Columns Bar.
+    * @param slot The HTMLElement to place the created widget in.
+    * @returns the created Widget object.
+    */
+    View.prototype.createColumnsBarWidget = function (slot) {
+        return new ColumnsBar(slot);
+    };
+    /**
+    * Creates the widget that represents Filter Bar.
+    * @param slot The HTMLElement to place the created widget in.
+    * @returns the created Widget object.
+    */
+    View.prototype.createFilterBarWidget = function (slot) {
+        return new FilterBar(slot);
+    };
+    /**
+    * Creates the widget that represents Sorting Bar.
+    * @param slot The HTMLElement to place the created widget in.
+    * @returns the created Widget object.
+    */
+    View.prototype.createSortingBarWidget = function (slot) {
+        return new SortingBar(slot);
+    };
+    /**
+    * Creates the widget that represents Query Name Widget.
+    * @param slot The HTMLElement to place the created widget in.
+    * @returns the created Widget object.
+    */
+    View.prototype.createQueryNameWidget = function (slot) {
+        return new QueryNameWidget(slot);
+    };
+    /**
+     * Creates the widget that represents Statement Panel Widget.
+     * @param slot
+     */
+    View.prototype.createStatementPanelWidget = function (slot) {
+        return new StatementPanel(slot);
+    };
+    /**
+    * Creates the widget that represents Result Facets Panel Widget.
+    * @param slot
+    */
+    View.prototype.createResultFacetsPanel = function (slot) {
+        return new ResultFacetsPanel(slot);
+    };
+    /**
+     * Creates the widget that represents Export funcionality.
+     * @param slot
+     */
+    View.prototype.createExportWidget = function (slot) {
+        return new ExportWidget(slot);
+    };
+    /**
+     * Creates the widget that represents Aggregation Bar Widget.
+     * @param slot
+     */
+    View.prototype.createAggregationBarWidget = function (slot) {
+        return new AggregationBar(slot);
+    };
+    View.prototype.detach = function () {
+        if (this.entitiesPanelWidget) {
+            this.entitiesPanelWidget.destroy();
+            this.entitiesPanelWidget = null;
+        }
+        if (this.columnsPanelWidget) {
+            this.columnsPanelWidget.destroy();
+            this.columnsPanelWidget = null;
+        }
+        if (this.queryPanelWidget) {
+            this.queryPanelWidget.destroy();
+            this.queryPanelWidget = null;
+        }
+        if (this.columnsBarWidget) {
+            this.columnsBarWidget.destroy();
+            this.columnsBarWidget = null;
+        }
+        if (this.resultGridWidget) {
+            this.resultGridWidget.destroy();
+            this.resultGridWidget = null;
+        }
+        if (this.chartWidget) {
+            this.chartWidget.destroy();
+            this.chartWidget = null;
+        }
+        if (this.queryNameWidget) {
+            this.queryNameWidget.destroy();
+            this.queryNameWidget = null;
+        }
+        if (this.processWidget) {
+            this.processWidget.destroy();
+            this.processWidget = null;
+        }
+        if (this.localeWidget) {
+            this.localeWidget.destroy();
+            this.localeWidget = null;
+        }
+        if (this.statementPanelWidget) {
+            this.statementPanelWidget.destroy();
+            this.statementPanelWidget = null;
+        }
+        if (this.filterBarWidget) {
+            this.filterBarWidget.destroy();
+            this.filterBarWidget = null;
+        }
+        if (this.sortingBarWidget) {
+            this.sortingBarWidget.destroy();
+            this.sortingBarWidget = null;
+        }
+        if (this.statementWidget) {
+            this.statementWidget.destroy();
+            this.statementWidget = null;
+        }
+        if (this.exportWidget) {
+            this.exportWidget.destroy();
+            this.exportWidget = null;
+        }
+        if (this.resultFacetPanelWidget) {
+            this.resultFacetPanelWidget.destroy();
+            this.resultFacetPanelWidget = null;
+        }
+        if (this.resultCountSlot) {
+            this.resultCountSlot.innerHTML = '';
+            this.resultCountSlot = null;
+        }
+        if (this.resultPanelSlot) {
+            this.resultPanelSlot.innerHTML = '';
+            this.resultPanelSlot = null;
+        }
+        this.domRoots = [document];
+        this.resetContext();
+    };
+    return View;
+}());
+export { View };
 //# sourceMappingURL=view.js.map