@easyquery/ui 7.2.3-rc03 → 7.2.4-beta03

package/dist/lib/widgets/result_facets_panel.js

@@ -1,502 +1,504 @@
-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 { WidgetGroup, QueryChangePart, QueryChangeAction, } from '@easyquery/core';
-import { i18n, utils as dataUtils } from '@easydata/core';
-import { domel } from '@easydata/ui';
-import { FacetType } from '../types/facet_type';
-import { browserUtils } from '../utils/browser_utils';
-import { PopupMenu } from '../utils/popup_menu';
-import { eqCssPrefix } from '../utils/utils';
-import { ExportDialog } from '../dialog/export_dialog';
-import { FacetContainer } from './facet_container';
-var ResultFacetsPanel = /** @class */ (function (_super) {
-    __extends(ResultFacetsPanel, _super);
-    function ResultFacetsPanel(slot) {
-        var _this = _super.call(this, slot) || this;
-        _this.activeFacetIndex = -1;
-        _this.firstRender = true;
-        _this.options = {
-            showExportButton: true,
-            showRefreshButton: true,
-            showMaximizeButton: true,
-            maximize2Window: false,
-            showProcessIndicator: true,
-            facetTypes: [FacetType.DataGrid, FacetType.Chart, FacetType.PivotTable]
-        };
-        _this.menuItems = [
-            { id: FacetType.DataGrid, text: i18n.getText('Facets', 'AddMenuItems', 'DataTable') },
-            { id: FacetType.Chart, text: i18n.getText('Facets', 'AddMenuItems', 'Chart') },
-            { id: FacetType.PivotTable, text: i18n.getText('Facets', 'AddMenuItems', 'Pivot') }
-        ];
-        _this.menuItemsFilter = function (item) {
-            if (_this.options.facetTypes.indexOf(item.id) < 0)
-                return false;
-            if (item.id === FacetType.DataGrid) {
-                return _this.facets.filter(function (facet) { return facet.getType() == FacetType.DataGrid; }).length === 0;
-            }
-            return true;
-        };
-        if (!_this.slot.classList.contains(_this.cssPrefix + "-panel")) {
-            _this.slot.classList.add(_this.cssPrefix + "-panel");
-        }
-        _this.renderProcessBlock();
-        return _this;
-    }
-    Object.defineProperty(ResultFacetsPanel.prototype, "cssPrefix", {
-        get: function () {
-            return 'eqjs-facets';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ResultFacetsPanel.prototype.getWidgetType = function () {
-        return 'facetsPanel';
-    };
-    /**
-     * Initialize widget.
-     * @param context The context.
-     * @param options The options.
-     */
-    ResultFacetsPanel.prototype.init = function (context, options) {
-        _super.prototype.init.call(this, context, options);
-        this.setOptions(options);
-        this.destroyCore();
-        this.attachQueryObserver();
-        this.loadFacets();
-    };
-    ResultFacetsPanel.prototype.attachQueryObserver = function () {
-        var _this = this;
-        var query = this.getQuery();
-        if (this.queryEventCallbackId) {
-            query.removeChangedCallback(this.queryEventCallbackId);
-        }
-        this.queryEventCallbackId = query.addChangedCallback(function (event) {
-            //if something has changed, and that change is related to columns
-            var edata = event.data;
-            if (edata.part != QueryChangePart.All) {
-                return;
-            }
-            if (edata.source == _this) {
-                return;
-            }
-            _this.reloadFacets();
-            _this.refreshCore(true);
-        });
-    };
-    ResultFacetsPanel.prototype.refreshCore = function (force) {
-        if (force === void 0) { force = false; }
-        if (this.firstRender || force) {
-            this.clear();
-            this.createAddMenu();
-            this.render();
-        }
-        this.validateAddFacetButton();
-        this.renderActiveFacet();
-        this.updateTotalRecords();
-    };
-    ResultFacetsPanel.prototype.createAddMenu = function () {
-        this.addMenu = new PopupMenu({
-            items: this.menuItems,
-            id: "FacetType-List"
-        });
-    };
-    ResultFacetsPanel.prototype.updateTotalRecords = function () {
-        var context = this.getContext();
-        var total = context.resultTable.getTotal();
-        this.recordsDiv.innerHTML = i18n.getText('Facets', 'TotalRecordsLabel') + ' ' + total;
-        if (total == 0) {
-            domel(this.exportDiv).hide();
-        }
-        else {
-            domel(this.exportDiv).show();
-        }
-    };
-    ResultFacetsPanel.prototype.renderProcessBlock = 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._processBlock = domel('div')
-            .addClass(this.cssPrefix + "-spinner")
-            .addChild('div', function (b) { return b
-            .addClass(eqCssPrefix + "-progress-win8", browserUtils.getMobileCssClass())
-            .addHtml(html); })
-            .toDOM();
-    };
-    ResultFacetsPanel.prototype.onProcessStartCore = function () {
-        if (this.options.showProcessIndicator) {
-            // FacetsPanel might be not rendered yet, so 
-            // it has no body
-            if (!this._processBlock.parentNode && this.bodyDiv) {
-                this.bodyDiv.childNodes.forEach(function (el) {
-                    domel(el).hide();
-                });
-                this.bodyDiv.appendChild(this._processBlock);
-            }
-        }
-    };
-    ResultFacetsPanel.prototype.onProcessEndCore = function () {
-        if (this.options.showProcessIndicator) {
-            if (this._processBlock.parentNode) {
-                try {
-                    this._processBlock.parentNode
-                        .removeChild(this._processBlock);
-                }
-                catch (e) {
-                }
-                finally {
-                    this.renderActiveFacet(false);
-                }
-            }
-        }
-    };
-    ResultFacetsPanel.prototype.render = function () {
-        var _this = this;
-        this.firstRender = false;
-        this.headerDiv = domel('div', this.slot)
-            .addClass(this.cssPrefix + "-header")
-            .toDOM();
-        this.tabsDiv =
-            domel('div', this.headerDiv)
-                .addClass(this.cssPrefix + "-tabs")
-                .toDOM();
-        this.tabsUl = domel('ul', this.tabsDiv)
-            .addClass(this.cssPrefix + "-nav-tabs")
-            .toDOM();
-        this.bodyDiv =
-            domel('div', this.slot)
-                .addClass(this.cssPrefix + "-body")
-                .toDOM();
-        for (var _i = 0, _a = this.facets; _i < _a.length; _i++) {
-            var facet = _a[_i];
-            this.renderFacet(facet);
-        }
-        domel(this.tabsDiv)
-            .addChild('div', function (b) { return _this.addFacetButton = b
-            .addClass(_this.cssPrefix + "-add-button")
-            .title(i18n.getText('Facets', 'NewFacetTitle'))
-            .addChild('a', function (b) { return b
-            .attr('href', 'javascript:void(0)'); })
-            .on('click', function (e) { return _this.addClickHandler(e); })
-            .toDOM(); });
-        var manageDiv = domel('div', this.headerDiv)
-            .addClass(this.cssPrefix + "-manage")
-            .toDOM();
-        this.recordsDiv = domel('div', manageDiv)
-            .addClass(this.cssPrefix + "-total-recs")
-            .toDOM();
-        if (this.options.showRefreshButton || this.options.showExportButton || this.options.showMaximizeButton) {
-            var bdb = domel('div', manageDiv)
-                .addClass(this.cssPrefix + "-total-buttons")
-                .toDOM();
-            if (this.options.showExportButton) {
-                this.exportDiv = domel('button', bdb)
-                    .on('click', function () { return _this.exportHandler(); })
-                    .addClass(this.cssPrefix + "-button")
-                    .addClass(this.cssPrefix + "-button-export")
-                    .title(i18n.getText('Facets', 'ExportBtnTitle'))
-                    .toDOM();
-            }
-            if (this.options.showRefreshButton) {
-                domel('button', bdb)
-                    .on('click', function () { return _this.refreshHandler(); })
-                    .addClass(this.cssPrefix + "-button")
-                    .addClass(this.cssPrefix + "-button-refresh")
-                    .title(i18n.getText('Facets', 'RefreshBtnTitle'));
-            }
-            if (this.options.showMaximizeButton) {
-                this.maximizeButton = domel('button', bdb)
-                    .on('click', function () { return _this.options.maximize2Window ? _this.maximizeHandler(true) : _this.maximizeHandler(); })
-                    .addClass(this.cssPrefix + "-button")
-                    .addClass(this.cssPrefix + "-button-maximize")
-                    .title(i18n.getText('Facets', 'MaximizeBtnTitle'))
-                    .toDOM();
-            }
-        }
-    };
-    ResultFacetsPanel.prototype.refreshHandler = function () {
-        var context = this.getContext();
-        context.fetchData({
-            success: function () {
-                // possibly we should move this logic to context
-                context.refreshWidgets(WidgetGroup.Result);
-            }
-        });
-    };
-    ResultFacetsPanel.prototype.exportHandler = function () {
-        var context = this.getContext();
-        new ExportDialog(context)
-            .show();
-    };
-    ResultFacetsPanel.prototype.maximizeHandler = function (toWindow) {
-        var b = domel(this.slot);
-        if (toWindow) {
-            b.toggleClass(eqCssPrefix + "-maximized-2window");
-            if (this.slot.classList.contains(eqCssPrefix + "-maximized-2window")) {
-                this.maximizeButton.title = i18n.getText('Facets', 'RestoreBtnTitle');
-                this.maximizeButton.classList.toggle(this.cssPrefix + "-button-maximize", false);
-                this.maximizeButton.classList.toggle(this.cssPrefix + "-button-restore", true);
-            }
-            else {
-                this.maximizeButton.title = i18n.getText('Facets', 'MaximizeBtnTitle');
-                this.maximizeButton.classList.toggle(this.cssPrefix + "-button-restore", false);
-                this.maximizeButton.classList.toggle(this.cssPrefix + "-button-maximize", true);
-            }
-        }
-        else {
-            var isMaximized_1 = !this.slot.hasAttribute('data-is-maximized');
-            if (isMaximized_1) {
-                this.slot.setAttribute('data-is-maximized', '');
-                this.maximizeButton.title = i18n.getText('Facets', 'RestoreBtnTitle');
-                this.maximizeButton.classList.toggle(this.cssPrefix + "-button-maximize", false);
-                this.maximizeButton.classList.toggle(this.cssPrefix + "-button-restore", true);
-            }
-            else {
-                this.slot.removeAttribute('data-is-maximized');
-                this.maximizeButton.title = i18n.getText('Facets', 'MaximizeBtnTitle');
-                this.maximizeButton.classList.toggle(this.cssPrefix + "-button-restore", false);
-                this.maximizeButton.classList.toggle(this.cssPrefix + "-button-maximize", true);
-            }
-            var arrToHide = document.querySelectorAll('[data-hide-on-max]');
-            arrToHide.forEach(function (el) {
-                if (isMaximized_1) {
-                    el.setAttribute('style', 'display: none;');
-                }
-                else {
-                    el.removeAttribute('style');
-                }
-            });
-        }
-        this.facets.forEach(function (facetTab) { return facetTab.onResize(); });
-    };
-    ResultFacetsPanel.prototype.renderActiveFacet = function (refresh) {
-        var _this = this;
-        if (refresh === void 0) { refresh = true; }
-        this.tabsUl.querySelectorAll('li') //`.${this.cssPrefix}-header-item.${this.cssPrefix}-facet`)
-            .forEach(function (el, index) {
-            if (el.classList.contains('active')) {
-                el.classList.remove('active');
-            }
-            if (_this.activeFacetIndex === index) {
-                el.classList.add('active');
-            }
-        });
-        this.bodyDiv.querySelectorAll("." + eqCssPrefix + "-facet")
-            .forEach(function (el, index) {
-            domel(el).hide();
-            if (_this.activeFacetIndex === index) {
-                domel(el).show();
-                if (refresh) {
-                    _this.facets[index].refresh();
-                }
-            }
-        });
-    };
-    ResultFacetsPanel.prototype.renderFacet = function (facet) {
-        this.renderFacetTab(facet);
-        var body = this.renderFacetSlot(facet);
-        facet.init(body);
-    };
-    ResultFacetsPanel.prototype.renderFacetTab = function (facet) {
-        var _this = this;
-        return domel('li', this.tabsUl)
-            //.addClass(`${this.cssPrefix}-header-item`, `${this.cssPrefix}-facet`)
-            //facet settings button
-            .addChild('span', function (b) { return b
-            .addClass(eqCssPrefix + "-facet-settings")
-            .on('click', function (e) {
-            e.stopPropagation();
-            _this.settingsClickHandler(facet);
-        }); })
-            .addChild('a', function (b) { return b
-            .addText(facet.title)
-            .attr('href', 'javascript:void(0)'); })
-            //facet close button
-            .addChild('span', function (b) { return b
-            .addClass(eqCssPrefix + "-facet-close")
-            .on('click', function (e) {
-            e.stopPropagation();
-            _this.closeClickHandler(facet);
-        }); })
-            .on('click', function (e) { return _this.selectClickHandler(facet); })
-            .toDOM();
-    };
-    ResultFacetsPanel.prototype.renderFacetSlot = function (facet) {
-        var element = domel('div', this.bodyDiv)
-            .addClass(eqCssPrefix + "-facet")
-            .hide()
-            .toDOM();
-        return element;
-    };
-    ResultFacetsPanel.prototype.refreshFacetTabs = function () {
-        var _this = this;
-        this.tabsUl.querySelectorAll('li') //`.${this.cssPrefix}-header-item.${this.cssPrefix}-facet`)
-            .forEach(function (item) {
-            _this.tabsUl.removeChild(item);
-        });
-        for (var _i = 0, _a = this.facets; _i < _a.length; _i++) {
-            var facet = _a[_i];
-            this.renderFacetTab(facet);
-        }
-    };
-    ResultFacetsPanel.prototype.removeFacet = function (facet) {
-        var index = this.facets.indexOf(facet);
-        if (index >= 0) {
-            this.facets.splice(index, 1);
-            var header = this.tabsUl.childNodes[index];
-            this.tabsUl.removeChild(header);
-            var body = this.bodyDiv.childNodes[index];
-            this.bodyDiv.removeChild(body);
-            if (this.facets.length > 0) {
-                this.activeFacetIndex =
-                    index < this.facets.length
-                        ? index
-                        : this.facets.length - 1;
-            }
-            else {
-                this.activeFacetIndex = -1;
-            }
-            this.renderActiveFacet();
-            this.validateAddFacetButton();
-        }
-    };
-    ResultFacetsPanel.prototype.addClickHandler = function (ev) {
-        var _this = this;
-        this.addMenu.showMenu({
-            anchor: ev.target,
-            itemFilterCallback: this.menuItemsFilter,
-            itemSelectedCallback: function (data) {
-                var facet = _this.createFacetTab(data.id);
-                var facetSlot = _this.renderFacetSlot(facet);
-                facet.init(facetSlot);
-                facet.showSettingsDialog()
-                    .then(function (submited) {
-                    if (submited) {
-                        _this.facets.push(facet);
-                        _this.activeFacetIndex = _this.facets.length - 1;
-                        _this.renderFacetTab(facet);
-                        _this.renderActiveFacet();
-                        _this.saveFacets();
-                    }
-                    else {
-                        _this.bodyDiv.removeChild(facetSlot);
-                    }
-                    //this.validateAddFacetButton();
-                })
-                    .catch(function (error) { return console.error(error); });
-            }
-        });
-    };
-    ResultFacetsPanel.prototype.selectClickHandler = function (facet) {
-        var index = this.facets.indexOf(facet);
-        this.setActiveFacet(index);
-    };
-    ResultFacetsPanel.prototype.settingsClickHandler = function (facet) {
-        var _this = this;
-        facet.showSettingsDialog()
-            .then(function (submited) {
-            if (submited) {
-                _this.refreshFacetTabs();
-                _this.renderActiveFacet();
-                _this.saveFacets();
-            }
-        })
-            .catch(function (error) { return console.error(error); });
-    };
-    ResultFacetsPanel.prototype.closeClickHandler = function (facet) {
-        var _this = this;
-        var ds = this.getDialogService();
-        ds.openConfirm(i18n.getText('Facets', 'RemoveFacetDlgTitle'), i18n.getText('Facets', 'RemoveFacetDlgContent')
-            .replace('{facetTitle}', facet.title))
-            .then(function (confirmed) {
-            if (confirmed) {
-                _this.removeFacet(facet);
-                _this.saveFacets();
-            }
-        })
-            .catch(function (error) { return console.error(error); });
-    };
-    ResultFacetsPanel.prototype.clear = function () {
-        this.firstRender = true;
-        this.slot.innerHTML = "";
-    };
-    ResultFacetsPanel.prototype.createDefaultFacetIfNotExist = function () {
-        if (this.facets.length === 0) {
-            var facet = this.createFacetTab(FacetType.DataGrid);
-            this.facets.push(facet);
-            this.activeFacetIndex = 0;
-        }
-    };
-    ResultFacetsPanel.prototype.validateAddFacetButton = function () {
-        this.addFacetButton.hidden = this.addMenu.getItems()
-            .filter(this.menuItemsFilter).length == 0;
-    };
-    ResultFacetsPanel.prototype.setActiveFacet = function (index) {
-        if (this.activeFacetIndex != index) {
-            this.activeFacetIndex = index;
-            this.renderActiveFacet();
-            this.saveFacets(true);
-        }
-    };
-    ResultFacetsPanel.prototype.setOptions = function (options) {
-        dataUtils.assignDeep(this.options, options);
-    };
-    ResultFacetsPanel.prototype.getDialogService = function () {
-        return this.getContext()
-            .getServices()
-            .getDialogService();
-    };
-    ResultFacetsPanel.prototype.saveFacets = function (isActivate) {
-        if (isActivate === void 0) { isActivate = false; }
-        var query = this.getQuery();
-        query.innerData = query.innerData || {};
-        query.innerData.facets = {
-            active: this.activeFacetIndex,
-            items: this.facets.map(function (f) { return f.saveToData(); })
-        };
-        query.fireChangedEvent({
-            part: QueryChangePart.Facets,
-            action: isActivate ? QueryChangeAction.Activate : QueryChangeAction.All,
-            source: this
-        });
-    };
-    ResultFacetsPanel.prototype.reloadFacets = function () {
-        for (var _i = 0, _a = this.facets; _i < _a.length; _i++) {
-            var facet = _a[_i];
-            facet.destroy();
-        }
-        this.loadFacets();
-    };
-    ResultFacetsPanel.prototype.loadFacets = function () {
-        var query = this.getQuery();
-        this.facets = [];
-        if (query.innerData && query.innerData.facets) {
-            var items = query.innerData.facets.items;
-            for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
-                var fd = items_1[_i];
-                var facet = this.createFacetTab(fd.type);
-                facet.loadFromData(fd);
-                this.facets.push(facet);
-            }
-            var active = query.innerData.facets.active;
-            this.activeFacetIndex = (active >= 0)
-                ? active
-                : this.facets.length - 1;
-        }
-        else {
-            this.createDefaultFacetIfNotExist();
-        }
-    };
-    return ResultFacetsPanel;
-}(FacetContainer));
-export { ResultFacetsPanel };
+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 { WidgetGroup, QueryChangePart, QueryChangeAction, } from '@easyquery/core';
+import { i18n, utils as dataUtils } from '@easydata/core';
+import { domel } from '@easydata/ui';
+import { FacetType } from '../types/facet_type';
+import { browserUtils } from '../utils/browser_utils';
+import { PopupMenu } from '../utils/popup_menu';
+import { eqCssPrefix } from '../utils/utils';
+import { ExportDialog } from '../dialog/export_dialog';
+import { FacetContainer } from './facet_container';
+var ResultFacetsPanel = /** @class */ (function (_super) {
+    __extends(ResultFacetsPanel, _super);
+    function ResultFacetsPanel(slot) {
+        var _this = _super.call(this, slot) || this;
+        _this.activeFacetIndex = -1;
+        _this.firstRender = true;
+        _this.options = {
+            showExportButton: true,
+            showRefreshButton: true,
+            showMaximizeButton: true,
+            maximize2Window: false,
+            showProcessIndicator: true,
+            facetTypes: [FacetType.DataGrid, FacetType.Chart, FacetType.PivotTable]
+        };
+        _this.menuItems = [
+            { id: FacetType.DataGrid, text: i18n.getText('Facets', 'AddMenuItems', 'DataTable') },
+            { id: FacetType.Chart, text: i18n.getText('Facets', 'AddMenuItems', 'Chart') },
+            { id: FacetType.PivotTable, text: i18n.getText('Facets', 'AddMenuItems', 'Pivot') }
+        ];
+        _this.menuItemsFilter = function (item) {
+            if (_this.options.facetTypes.indexOf(item.id) < 0)
+                return false;
+            if (item.id === FacetType.DataGrid) {
+                return _this.facets.filter(function (facet) { return facet.getType() == FacetType.DataGrid; }).length === 0;
+            }
+            return true;
+        };
+        if (!_this.slot.classList.contains("".concat(_this.cssPrefix, "-panel"))) {
+            _this.slot.classList.add("".concat(_this.cssPrefix, "-panel"));
+        }
+        _this.renderProcessBlock();
+        return _this;
+    }
+    Object.defineProperty(ResultFacetsPanel.prototype, "cssPrefix", {
+        get: function () {
+            return 'eqjs-facets';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ResultFacetsPanel.prototype.getWidgetType = function () {
+        return 'facetsPanel';
+    };
+    /**
+     * Initialize widget.
+     * @param context The context.
+     * @param options The options.
+     */
+    ResultFacetsPanel.prototype.init = function (context, options) {
+        _super.prototype.init.call(this, context, options);
+        this.setOptions(options);
+        this.destroyCore();
+        this.attachQueryObserver();
+        this.loadFacets();
+    };
+    ResultFacetsPanel.prototype.attachQueryObserver = function () {
+        var _this = this;
+        var query = this.getQuery();
+        if (this.queryEventCallbackId) {
+            query.removeChangedCallback(this.queryEventCallbackId);
+        }
+        this.queryEventCallbackId = query.addChangedCallback(function (event) {
+            //if something has changed, and that change is related to columns
+            var edata = event.data;
+            if (edata.part != QueryChangePart.All) {
+                return;
+            }
+            if (edata.source == _this) {
+                return;
+            }
+            _this.reloadFacets();
+            _this.refreshCore(true);
+        });
+    };
+    ResultFacetsPanel.prototype.refreshCore = function (force) {
+        if (force === void 0) { force = false; }
+        if (this.firstRender || force) {
+            this.clear();
+            this.createAddMenu();
+            this.render();
+        }
+        this.validateAddFacetButton();
+        this.renderActiveFacet();
+        this.updateTotalRecords();
+    };
+    ResultFacetsPanel.prototype.createAddMenu = function () {
+        this.addMenu = new PopupMenu({
+            items: this.menuItems,
+            id: "FacetType-List"
+        });
+    };
+    ResultFacetsPanel.prototype.updateTotalRecords = function () {
+        var context = this.getContext();
+        var total = context.resultTable.getTotal();
+        this.recordsDiv.innerHTML = i18n.getText('Facets', 'TotalRecordsLabel') + ' ' + total;
+        if (total == 0) {
+            domel(this.exportDiv).hide();
+        }
+        else {
+            domel(this.exportDiv).show();
+        }
+    };
+    ResultFacetsPanel.prototype.renderProcessBlock = 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._processBlock = domel('div')
+            .addClass("".concat(this.cssPrefix, "-spinner"))
+            .addChild('div', function (b) { return b
+            .addClass("".concat(eqCssPrefix, "-progress-win8"), browserUtils.getMobileCssClass())
+            .addHtml(html); })
+            .toDOM();
+    };
+    ResultFacetsPanel.prototype.onProcessStartCore = function () {
+        if (this.options.showProcessIndicator) {
+            // FacetsPanel might be not rendered yet, so 
+            // it has no body
+            if (!this._processBlock.parentNode && this.bodyDiv) {
+                this.bodyDiv.childNodes.forEach(function (el) {
+                    domel(el).hide();
+                });
+                this.bodyDiv.appendChild(this._processBlock);
+            }
+        }
+    };
+    ResultFacetsPanel.prototype.onProcessEndCore = function () {
+        if (this.options.showProcessIndicator) {
+            if (this._processBlock.parentNode) {
+                try {
+                    this._processBlock.parentNode
+                        .removeChild(this._processBlock);
+                }
+                catch (e) {
+                }
+                finally {
+                    this.renderActiveFacet(false);
+                }
+            }
+        }
+    };
+    ResultFacetsPanel.prototype.render = function () {
+        var _this = this;
+        this.firstRender = false;
+        this.headerDiv = domel('div', this.slot)
+            .addClass("".concat(this.cssPrefix, "-header"))
+            .toDOM();
+        this.tabsDiv =
+            domel('div', this.headerDiv)
+                .addClass("".concat(this.cssPrefix, "-tabs"))
+                .toDOM();
+        this.tabsUl = domel('ul', this.tabsDiv)
+            .addClass("".concat(this.cssPrefix, "-nav-tabs"))
+            .toDOM();
+        this.bodyDiv =
+            domel('div', this.slot)
+                .addClass("".concat(this.cssPrefix, "-body"))
+                .toDOM();
+        for (var _i = 0, _a = this.facets; _i < _a.length; _i++) {
+            var facet = _a[_i];
+            this.renderFacet(facet);
+        }
+        domel(this.tabsDiv)
+            .addChild('div', function (b) { return _this.addFacetButton = b
+            .addClass("".concat(_this.cssPrefix, "-add-button"))
+            .title(i18n.getText('Facets', 'NewFacetTitle'))
+            .addChild('a', function (b) { return b
+            .attr('href', 'javascript:void(0)'); })
+            .on('click', function (e) { return _this.addClickHandler(e); })
+            .toDOM(); });
+        var manageDiv = domel('div', this.headerDiv)
+            .addClass("".concat(this.cssPrefix, "-manage"))
+            .toDOM();
+        this.recordsDiv = domel('div', manageDiv)
+            .addClass("".concat(this.cssPrefix, "-total-recs"))
+            .toDOM();
+        if (this.options.showRefreshButton || this.options.showExportButton || this.options.showMaximizeButton) {
+            var bdb = domel('div', manageDiv)
+                .addClass("".concat(this.cssPrefix, "-total-buttons"))
+                .toDOM();
+            if (this.options.showExportButton) {
+                this.exportDiv = domel('button', bdb)
+                    .on('click', function () { return _this.exportHandler(); })
+                    .addClass("".concat(this.cssPrefix, "-button"))
+                    .addClass("".concat(this.cssPrefix, "-button-export"))
+                    .title(i18n.getText('Facets', 'ExportBtnTitle'))
+                    .toDOM();
+            }
+            if (this.options.showRefreshButton) {
+                domel('button', bdb)
+                    .on('click', function () { return _this.refreshHandler(); })
+                    .addClass("".concat(this.cssPrefix, "-button"))
+                    .addClass("".concat(this.cssPrefix, "-button-refresh"))
+                    .title(i18n.getText('Facets', 'RefreshBtnTitle'));
+            }
+            if (this.options.showMaximizeButton) {
+                this.maximizeButton = domel('button', bdb)
+                    .on('click', function () { return _this.options.maximize2Window ? _this.maximizeHandler(true) : _this.maximizeHandler(); })
+                    .addClass("".concat(this.cssPrefix, "-button"))
+                    .addClass("".concat(this.cssPrefix, "-button-maximize"))
+                    .title(i18n.getText('Facets', 'MaximizeBtnTitle'))
+                    .toDOM();
+            }
+        }
+    };
+    ResultFacetsPanel.prototype.refreshHandler = function () {
+        var context = this.getContext();
+        context.fetchData({
+            success: function () {
+                // possibly we should move this logic to context
+                context.refreshWidgets(WidgetGroup.Result);
+            }
+        });
+    };
+    ResultFacetsPanel.prototype.exportHandler = function () {
+        var context = this.getContext();
+        new ExportDialog(context)
+            .show();
+    };
+    ResultFacetsPanel.prototype.maximizeHandler = function (toWindow) {
+        var b = domel(this.slot);
+        if (toWindow) {
+            b.toggleClass("".concat(eqCssPrefix, "-maximized-2window"));
+            if (this.slot.classList.contains("".concat(eqCssPrefix, "-maximized-2window"))) {
+                this.maximizeButton.title = i18n.getText('Facets', 'RestoreBtnTitle');
+                this.maximizeButton.classList.toggle("".concat(this.cssPrefix, "-button-maximize"), false);
+                this.maximizeButton.classList.toggle("".concat(this.cssPrefix, "-button-restore"), true);
+            }
+            else {
+                this.maximizeButton.title = i18n.getText('Facets', 'MaximizeBtnTitle');
+                this.maximizeButton.classList.toggle("".concat(this.cssPrefix, "-button-restore"), false);
+                this.maximizeButton.classList.toggle("".concat(this.cssPrefix, "-button-maximize"), true);
+            }
+        }
+        else {
+            var isMaximized_1 = !this.slot.hasAttribute('data-is-maximized');
+            if (isMaximized_1) {
+                this.slot.setAttribute('data-is-maximized', '');
+                this.maximizeButton.title = i18n.getText('Facets', 'RestoreBtnTitle');
+                this.maximizeButton.classList.toggle("".concat(this.cssPrefix, "-button-maximize"), false);
+                this.maximizeButton.classList.toggle("".concat(this.cssPrefix, "-button-restore"), true);
+            }
+            else {
+                this.slot.removeAttribute('data-is-maximized');
+                this.maximizeButton.title = i18n.getText('Facets', 'MaximizeBtnTitle');
+                this.maximizeButton.classList.toggle("".concat(this.cssPrefix, "-button-restore"), false);
+                this.maximizeButton.classList.toggle("".concat(this.cssPrefix, "-button-maximize"), true);
+            }
+            var arrToHide = document.querySelectorAll('[data-hide-on-max]');
+            arrToHide.forEach(function (el) {
+                if (isMaximized_1) {
+                    el.setAttribute('style', 'display: none;');
+                }
+                else {
+                    el.removeAttribute('style');
+                }
+            });
+        }
+        this.facets.forEach(function (facetTab) { return facetTab.onResize(); });
+    };
+    ResultFacetsPanel.prototype.renderActiveFacet = function (refresh) {
+        var _this = this;
+        if (refresh === void 0) { refresh = true; }
+        this.tabsUl.querySelectorAll('li') //`.${this.cssPrefix}-header-item.${this.cssPrefix}-facet`)
+            .forEach(function (el, index) {
+            if (el.classList.contains('active')) {
+                el.classList.remove('active');
+            }
+            if (_this.activeFacetIndex === index) {
+                el.classList.add('active');
+            }
+        });
+        this.bodyDiv.querySelectorAll(".".concat(eqCssPrefix, "-facet"))
+            .forEach(function (el, index) {
+            domel(el).hide();
+            if (_this.activeFacetIndex === index) {
+                domel(el).show();
+                if (refresh) {
+                    _this.facets[index].refresh();
+                }
+            }
+        });
+    };
+    ResultFacetsPanel.prototype.renderFacet = function (facet) {
+        this.renderFacetTab(facet);
+        var body = this.renderFacetSlot(facet);
+        facet.init(body);
+    };
+    ResultFacetsPanel.prototype.renderFacetTab = function (facet) {
+        var _this = this;
+        return domel('li', this.tabsUl)
+            //.addClass(`${this.cssPrefix}-header-item`, `${this.cssPrefix}-facet`)
+            //facet settings button
+            .addChild('span', function (b) { return b
+            .addClass("".concat(eqCssPrefix, "-facet-settings"))
+            .on('click', function (e) {
+            e.stopPropagation();
+            _this.settingsClickHandler(facet);
+        }); })
+            .addChild('a', function (b) { return b
+            .addText(facet.title)
+            .attr('href', 'javascript:void(0)'); })
+            //facet close button
+            .addChild('span', function (b) { return b
+            .addClass("".concat(eqCssPrefix, "-facet-close"))
+            .on('click', function (e) {
+            e.stopPropagation();
+            _this.closeClickHandler(facet);
+        }); })
+            .on('click', function (e) { return _this.selectClickHandler(facet); })
+            .toDOM();
+    };
+    ResultFacetsPanel.prototype.renderFacetSlot = function (facet) {
+        var element = domel('div', this.bodyDiv)
+            .addClass("".concat(eqCssPrefix, "-facet"))
+            .hide()
+            .toDOM();
+        return element;
+    };
+    ResultFacetsPanel.prototype.refreshFacetTabs = function () {
+        var _this = this;
+        this.tabsUl.querySelectorAll('li') //`.${this.cssPrefix}-header-item.${this.cssPrefix}-facet`)
+            .forEach(function (item) {
+            _this.tabsUl.removeChild(item);
+        });
+        for (var _i = 0, _a = this.facets; _i < _a.length; _i++) {
+            var facet = _a[_i];
+            this.renderFacetTab(facet);
+        }
+    };
+    ResultFacetsPanel.prototype.removeFacet = function (facet) {
+        var index = this.facets.indexOf(facet);
+        if (index >= 0) {
+            this.facets.splice(index, 1);
+            var header = this.tabsUl.childNodes[index];
+            this.tabsUl.removeChild(header);
+            var body = this.bodyDiv.childNodes[index];
+            this.bodyDiv.removeChild(body);
+            if (this.facets.length > 0) {
+                this.activeFacetIndex =
+                    index < this.facets.length
+                        ? index
+                        : this.facets.length - 1;
+            }
+            else {
+                this.activeFacetIndex = -1;
+            }
+            this.renderActiveFacet();
+            this.validateAddFacetButton();
+        }
+    };
+    ResultFacetsPanel.prototype.addClickHandler = function (ev) {
+        var _this = this;
+        this.addMenu.showMenu({
+            anchor: ev.target,
+            itemFilterCallback: this.menuItemsFilter,
+            itemSelectedCallback: function (data) {
+                var facet = _this.createFacetTab(data.id);
+                var facetSlot = _this.renderFacetSlot(facet);
+                facet.init(facetSlot);
+                facet.showSettingsDialog()
+                    .then(function (submited) {
+                    if (submited) {
+                        _this.facets.push(facet);
+                        _this.activeFacetIndex = _this.facets.length - 1;
+                        _this.renderFacetTab(facet);
+                        _this.renderActiveFacet();
+                        _this.saveFacets();
+                    }
+                    else {
+                        _this.bodyDiv.removeChild(facetSlot);
+                    }
+                    //this.validateAddFacetButton();
+                })
+                    .catch(function (error) { return console.error(error); });
+            }
+        });
+    };
+    ResultFacetsPanel.prototype.selectClickHandler = function (facet) {
+        var index = this.facets.indexOf(facet);
+        this.setActiveFacet(index);
+    };
+    ResultFacetsPanel.prototype.settingsClickHandler = function (facet) {
+        var _this = this;
+        facet.showSettingsDialog()
+            .then(function (submited) {
+            if (submited) {
+                _this.refreshFacetTabs();
+                _this.renderActiveFacet();
+                _this.saveFacets();
+            }
+        })
+            .catch(function (error) { return console.error(error); });
+    };
+    ResultFacetsPanel.prototype.closeClickHandler = function (facet) {
+        var _this = this;
+        var ds = this.getDialogService();
+        ds.openConfirm(i18n.getText('Facets', 'RemoveFacetDlgTitle'), i18n.getText('Facets', 'RemoveFacetDlgContent')
+            .replace('{facetTitle}', facet.title))
+            .then(function (confirmed) {
+            if (confirmed) {
+                _this.removeFacet(facet);
+                _this.saveFacets();
+            }
+        })
+            .catch(function (error) { return console.error(error); });
+    };
+    ResultFacetsPanel.prototype.clear = function () {
+        this.firstRender = true;
+        this.slot.innerHTML = "";
+    };
+    ResultFacetsPanel.prototype.createDefaultFacetIfNotExist = function () {
+        if (this.facets.length === 0) {
+            var facet = this.createFacetTab(FacetType.DataGrid);
+            this.facets.push(facet);
+            this.activeFacetIndex = 0;
+        }
+    };
+    ResultFacetsPanel.prototype.validateAddFacetButton = function () {
+        this.addFacetButton.hidden = this.addMenu.getItems()
+            .filter(this.menuItemsFilter).length == 0;
+    };
+    ResultFacetsPanel.prototype.setActiveFacet = function (index) {
+        if (this.activeFacetIndex != index) {
+            this.activeFacetIndex = index;
+            this.renderActiveFacet();
+            this.saveFacets(true);
+        }
+    };
+    ResultFacetsPanel.prototype.setOptions = function (options) {
+        dataUtils.assignDeep(this.options, options);
+    };
+    ResultFacetsPanel.prototype.getDialogService = function () {
+        return this.getContext()
+            .getServices()
+            .getDialogService();
+    };
+    ResultFacetsPanel.prototype.saveFacets = function (isActivate) {
+        if (isActivate === void 0) { isActivate = false; }
+        var query = this.getQuery();
+        query.innerData = query.innerData || {};
+        query.innerData.facets = {
+            active: this.activeFacetIndex,
+            items: this.facets.map(function (f) { return f.saveToData(); })
+        };
+        query.fireChangedEvent({
+            part: QueryChangePart.Facets,
+            action: isActivate ? QueryChangeAction.Activate : QueryChangeAction.All,
+            source: this
+        });
+    };
+    ResultFacetsPanel.prototype.reloadFacets = function () {
+        for (var _i = 0, _a = this.facets; _i < _a.length; _i++) {
+            var facet = _a[_i];
+            facet.destroy();
+        }
+        this.loadFacets();
+    };
+    ResultFacetsPanel.prototype.loadFacets = function () {
+        var query = this.getQuery();
+        this.facets = [];
+        if (query.innerData && query.innerData.facets) {
+            var items = query.innerData.facets.items;
+            for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+                var fd = items_1[_i];
+                var facet = this.createFacetTab(fd.type);
+                facet.loadFromData(fd);
+                this.facets.push(facet);
+            }
+            var active = query.innerData.facets.active;
+            this.activeFacetIndex = (active >= 0)
+                ? active
+                : this.facets.length - 1;
+        }
+        else {
+            this.createDefaultFacetIfNotExist();
+        }
+    };
+    return ResultFacetsPanel;
+}(FacetContainer));
+export { ResultFacetsPanel };
 //# sourceMappingURL=result_facets_panel.js.map