@universis/ngx-tables 0.7.30 → 0.8.1

package/fesm2015/universis-ngx-tables.js

@@ -3,16 +3,17 @@ import * as jQuery_ from 'jquery';
 import 'datatables.net';
 import 'datatables.net-scroller';
 import 'datatables.net-colreorder';
+import 'datatables.net-buttons';
 import 'rxjs/add/observable/combineLatest';
 import { HttpClient } from '@angular/common/http';
-import { ClientDataQueryable, ResponseError, TextUtils } from '@themost/client';
+import { ResponseError, ClientDataQueryable, TextUtils } from '@themost/client';
 import { BehaviorSubject } from 'rxjs';
 import { AngularDataContext } from '@themost/angular';
 import { __awaiter } from 'tslib';
 import { DatePipe, CommonModule } from '@angular/common';
 import { TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import { FormControl, FormArray, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { TemplatePipe, ModalService, LoadingService, ErrorService, DIALOG_BUTTONS, UserActivityService, ToastService, AppEventService, UserStorageService, ConfigurationService, SharedModule } from '@universis/common';
+import { TemplatePipe, ModalService, ConfigurationService, ErrorService, LoadingService, DIALOG_BUTTONS, ExportSpreadsheetService, UserActivityService, ToastService, AppEventService, UserStorageService, SharedModule } from '@universis/common';
 import { RouterModalOkCancel, RouterModalModule } from '@universis/common/routing';
 import { ServiceUrlPreProcessor, TranslatePreProcessor, AdvancedFormsModule } from '@universis/forms';
 import { FormioModule } from 'angular-formio';
@@ -20,7 +21,7 @@ import { BsModalRef, BsModalService, ModalModule } from 'ngx-bootstrap/modal';
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 import { GroupByPipe, NgPipesModule } from 'ngx-pipes';
 import { template, at, cloneDeep } from 'lodash';
-import { Injectable, Directive, Optional, Input, Output, EventEmitter, Pipe, Component, ViewChild, ViewEncapsulation, ChangeDetectorRef, ElementRef, Inject, InjectionToken, Injector, NgModule, CUSTOM_ELEMENTS_SCHEMA, defineInjectable, inject, HostListener, ChangeDetectionStrategy } from '@angular/core';
+import { Injectable, Directive, Optional, Input, Output, EventEmitter, Pipe, Component, ViewChild, ViewEncapsulation, ElementRef, ChangeDetectorRef, NgModule, CUSTOM_ELEMENTS_SCHEMA, defineInjectable, inject, HostListener, InjectionToken, Inject, Injector, ChangeDetectionStrategy } from '@angular/core';
 import { ActivatedRoute, Router, NavigationStart, NavigationEnd, RouterModule } from '@angular/router';
 import { createFeatureSelector, createSelector, select, Store } from '@ngrx/store';
 import { first, filter } from 'rxjs/operators';
@@ -704,6 +705,258 @@ ColumnSelectorService.ctorParameters = () => [
     { type: ModalService }
 ];
 
+class ActivatedTableService {
+    constructor(_router, _activatedRoute) {
+        this._router = _router;
+        this._activatedRoute = _activatedRoute;
+        _router.events.forEach((event) => {
+            if (event instanceof NavigationStart) {
+                if (this._activeTable) {
+                    this._activeTable = null;
+                }
+            }
+        });
+    }
+    get activeTable() {
+        return this._activeTable;
+    }
+    set activeTable(tableComponent) {
+        this._activeTable = tableComponent;
+    }
+}
+ActivatedTableService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+/** @nocollapse */
+ActivatedTableService.ctorParameters = () => [
+    { type: Router },
+    { type: ActivatedRoute }
+];
+ActivatedTableService.ngInjectableDef = defineInjectable({ factory: function ActivatedTableService_Factory() { return new ActivatedTableService(inject(Router), inject(ActivatedRoute)); }, token: ActivatedTableService, providedIn: "root" });
+
+const MAX_EXPORT_ITEMS = 500;
+class BtnExpDirective {
+    constructor(_activatedTable, _context, _config, _translate, _loadingService, _errorService) {
+        this._activatedTable = _activatedTable;
+        this._context = _context;
+        this._config = _config;
+        this._translate = _translate;
+        this._loadingService = _loadingService;
+        this._errorService = _errorService;
+    }
+    clickEvent(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this._activatedTable.activeTable) {
+                return this._activatedTable.activeTable.exportView();
+                /*
+                const lastQuery = this._activatedTable.activeTable.lastQuery;
+                const tableConfig = this._activatedTable.activeTable.config;
+                const serviceHeaders = this._context.getService().getHeaders();
+                const queryModel = lastQuery.getModel();
+                let query = this._context.model(queryModel).asQueryable();
+                const queryParams = lastQuery.getParams();
+                query = this.constructQuery(query, queryParams, tableConfig, serviceHeaders);
+                // get export settings
+                const exportSettings = this._config.settings as ExportLimitConfiguration;
+                // get export limit
+                const maxExportItems = exportSettings && exportSettings.tables && exportSettings.tables.exportLimit;
+                if (maxExportItems && typeof maxExportItems === 'number' && maxExportItems > 0) {
+                  query.skip(0).take(maxExportItems);
+                } else {
+                  query.skip(0).take(MAX_EXPORT_ITEMS);
+                }
+                // This constructs the URI based on the way @themost does
+                const url = this.constructURL(query);
+                this.downloadFile(url, query.getService().getHeaders(), query.getModel()); */
+            }
+        });
+    }
+    /**
+     * Sets the parameters to the query based on
+     * the active filters of the activated table
+     * @param {ClientDataQueryable} query
+     * @param params: The filters of the last query of the activated table
+     * @return ClientDataQueryable
+     */
+    setParams(query, params) {
+        if (params && typeof params === 'object') {
+            Object.keys(params).forEach((key) => {
+                query.setParam(key, params[key]);
+            });
+        }
+        return query;
+    }
+    /**
+     * Sets the headers to the query based on
+     * the default headers of the DataContext
+     * and appending the accept header to get
+     * an xlsx file from the API
+     * @param {ClientDataQueryable} query
+     * @param {Headers} headers: The headers to append to the query
+     * @return ClientDataQueryable
+     */
+    setHeaders(query, headers) {
+        Object.keys(headers).forEach((key) => {
+            if (headers.hasOwnProperty(key)) {
+                query.getService().setHeader(key, headers[key]);
+            }
+        });
+        // sets a header to accept xlsx files
+        query.getService().setHeader('Accept', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
+        return query;
+    }
+    /**
+     * Constructs the select parameter of the
+     * ClientDataQuery by replacing the target name
+     * of the field based on the localized translation
+     * of that property on the advanced tabled
+     * @param {ClientDataQueryable} query
+     * @param tableConfig: The configuration of the activated table
+     * @return ClientDataQueryable
+     */
+    constructQueryParam(query, tableConfig) {
+        let selectQuery = query.getParams().$select;
+        let selectQueryArray = selectQuery.split(',');
+        selectQueryArray = selectQueryArray.map((select$$1) => {
+            const words = select$$1.split(' ');
+            if (words.length === 3) {
+                if (tableConfig && tableConfig.columns) {
+                    for (const column of tableConfig.columns) {
+                        if (column.property === words[2] && column.title) {
+                            words[2] = `"${this._translate.instant(column.title)}"`;
+                        }
+                        else if (column.property === words[2]) {
+                            words[2] = `"${this._translate.instant(words[2])}"`;
+                        }
+                    }
+                }
+            }
+            if (words.length === 1) {
+                if (tableConfig && tableConfig.columns) {
+                    for (const column of tableConfig.columns) {
+                        if (column.name === words[0] && column.title) {
+                            words[0] = `${words[0]} as "${this._translate.instant(column.title)}"`;
+                            break;
+                        }
+                        else if (column.name === words[0] && column.property) {
+                            words[0] = `${words[0]} as "${this._translate.instant(column.property)}"`;
+                            break;
+                        }
+                        else if (words[0] === column.name && words[0] === "id" && column.hidden) {
+                            break;
+                        }
+                        else if (words[0] == column.name || words[0] === column.property) {
+                            words[0] = `${words[0]} as "${this._translate.instant(words[0])}"`;
+                        }
+                    }
+                }
+                return words[0];
+            }
+            return words.join(' ');
+        });
+        selectQuery = selectQueryArray.join(',');
+        query.setParam('$select', selectQuery);
+        return query;
+    }
+    /**
+     * Constructs the fetch URL based the query parameters
+     * @param {ClientDataQueryable} query
+     * @return String
+     */
+    constructURL(query) {
+        const baseURL = query.getService().getBase();
+        let url = baseURL.endsWith('/') ? (baseURL + query.getModel() + '?') : (baseURL + '/' + query.getModel() + '?');
+        Object.keys(query.getParams()).forEach((key, index) => {
+            if (index === 0) {
+                url += key + '=' + query.getParams()[key];
+            }
+            else {
+                url += '&' + key + '=' + query.getParams()[key];
+            }
+        });
+        return url;
+    }
+    /**
+     * Constructs the query by setting the parameters of the
+     * advanced table's active filters, sets the necessary headers
+     * and build the select parameter of the query
+     * @param {ClientDataQueryable} query
+     * @param params: The filters of the last query of the activated table
+     * @param tableConfig: The configuration of the activated table
+     * @param {Headers} headers: The headers to append to the query
+     * @return ClientDataQueryable
+     */
+    constructQuery(query, params, tableConfig, headers) {
+        let _query = this.setParams(query, params);
+        _query = this.setHeaders(_query, headers);
+        _query = this.constructQueryParam(_query, tableConfig);
+        return _query;
+    }
+    /**
+     * Fetches and saves the xlsx file
+     * @param {String} url
+     * @param {Headers} serviceHeaders: The headers to append to the query
+     * @param modelName: The model name of the advanced table
+     */
+    downloadFile(url, serviceHeaders, modelName) {
+        this._loadingService.showLoading();
+        fetch(encodeURI(url), {
+            headers: serviceHeaders,
+            credentials: 'include'
+        }).then(response => {
+            if (response && !response.ok) {
+                throw new ResponseError(response.statusText, response.status);
+            }
+            return response.blob();
+        }).then(blob => {
+            const objectUrl = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            document.body.appendChild(a);
+            a.setAttribute('style', 'display: none');
+            a.href = objectUrl;
+            const downloadName = `${modelName}.xlsx`;
+            a.download = downloadName;
+            // this adds support for IE and MS Edge (up to version 44.19041)
+            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+                window.navigator.msSaveOrOpenBlob(blob, downloadName);
+            }
+            else {
+                // for all other browsers
+                a.click();
+            }
+            window.URL.revokeObjectURL(objectUrl);
+            a.remove();
+            this._loadingService.hideLoading();
+        }).catch(err => {
+            this._loadingService.hideLoading();
+            this._errorService.showError(err, {
+                continueLink: '.'
+            });
+        });
+    }
+}
+BtnExpDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '.universis-btn-export'
+            },] }
+];
+/** @nocollapse */
+BtnExpDirective.ctorParameters = () => [
+    { type: ActivatedTableService },
+    { type: AngularDataContext },
+    { type: ConfigurationService },
+    { type: TranslateService },
+    { type: LoadingService },
+    { type: ErrorService }
+];
+BtnExpDirective.propDecorators = {
+    clickEvent: [{ type: HostListener, args: ['click', ['$event'],] }]
+};
+
 // restore jquery import to avoid Cannot call a namespace ('jquery') error
 const jQuery = jQuery_;
 const DataTablesApi = jQuery.fn.dataTable.Api;
@@ -712,6 +965,12 @@ DataTablesApi.register('processing()', function (show) {
         ctx.oApi._fnProcessingDisplay(ctx, show);
     });
 });
+const ɵ0 = [];
+const EMPTY_DATASET = {
+    recordsTotal: 0,
+    recordsFiltered: 0,
+    data: ɵ0,
+};
 class TableTranslationChangeDetector extends ChangeDetectorRef {
     checkNoChanges() {
     }
@@ -725,6 +984,12 @@ class TableTranslationChangeDetector extends ChangeDetectorRef {
     }
 }
 let COLUMN_FORMATTERS = new InjectionToken('column.formatters');
+class ExportLimitExceededError extends RangeError {
+    constructor(message) {
+        super(message);
+        this.name = 'ExportLimitExceededError';
+    }
+}
 class ColumnFormatter extends AdvancedColumnFormatter {
     constructor(injector) {
         super();
@@ -749,7 +1014,7 @@ function getRandomIdentifier() {
     return (Number(String(Math.random()).slice(2))).toString(36);
 }
 class AdvancedTableComponent {
-    constructor(_context, _columnFormatters, _activatedRoute, _translateService, _injector, _advancedFilterValueProvider, _element, _template, _loading, _http, _columnSelector) {
+    constructor(_context, _columnFormatters, _activatedRoute, _translateService, _injector, _advancedFilterValueProvider, _element, _template, _loading, _http, _columnSelector, _configuration, _exportSpreadsheet, _modalService, _errorService) {
         this._context = _context;
         this._columnFormatters = _columnFormatters;
         this._activatedRoute = _activatedRoute;
@@ -761,6 +1026,10 @@ class AdvancedTableComponent {
         this._loading = _loading;
         this._http = _http;
         this._columnSelector = _columnSelector;
+        this._configuration = _configuration;
+        this._exportSpreadsheet = _exportSpreadsheet;
+        this._modalService = _modalService;
+        this._errorService = _errorService;
         this._firstLoad = true;
         this._showFooter = false;
         this._showHeader = true;
@@ -804,6 +1073,7 @@ class AdvancedTableComponent {
         this.customSelect = false;
         this.selected = [];
         this.unselected = [];
+        this._lastQueryTotalItems = 0;
         // initialize translate pipe
         this.translator = new TranslatePipe(this._translateService, new TableTranslationChangeDetector());
         jQuery.fn.dataTable.ext.classes.sPageButton = 'btn';
@@ -823,6 +1093,9 @@ class AdvancedTableComponent {
     get config() {
         return this._config;
     }
+    get lastQueryTotalItems() {
+        return this._lastQueryTotalItems;
+    }
     /**
      * Indicates whether table footer will be visible or not
      */
@@ -1431,12 +1704,15 @@ class AdvancedTableComponent {
                                 recordsFiltered: 0,
                                 data: [],
                             };
+                            self._lastQueryTotalItems = 0;
                             // emit empty data
                             self.load.emit(emptyDataSet);
                             // return empty data
                             return fnCallback(emptyDataSet);
                         }
                     }
+                    // reset error
+                    self.toggleError();
                     // get activated route params
                     const queryParams = self._activatedRoute.snapshot.queryParams;
                     // get columns
@@ -1517,12 +1793,13 @@ class AdvancedTableComponent {
                                 q.filter(expressions.join(' and '));
                             }
                             self.lastQueryParams = q.getParams();
-                            q.getList().then((items) => {
+                            return q.getList().then((items) => {
                                 const dataSet = {
                                     recordsTotal: items.total,
                                     recordsFiltered: items.total,
                                     data: items.value,
                                 };
+                                self._lastQueryTotalItems = items.total;
                                 if (items.total === 0) {
                                     self.resetEmptyTable();
                                 }
@@ -1532,7 +1809,14 @@ class AdvancedTableComponent {
                                 return fnCallback(dataSet);
                             });
                         }).catch((err) => {
+                            // log error to console
                             console.error('TABLES', err);
+                            // show error
+                            self.toggleError(err);
+                            self._lastQueryTotalItems = 0;
+                            // by returning empty dataset
+                            self.load.emit(EMPTY_DATASET);
+                            return fnCallback(EMPTY_DATASET);
                         });
                     }
                     self.lastQueryParams = q.getParams();
@@ -1542,6 +1826,7 @@ class AdvancedTableComponent {
                             recordsFiltered: items.total,
                             data: items.value,
                         };
+                        self._lastQueryTotalItems = items.total;
                         if (items.total === 0) {
                             self.resetEmptyTable();
                         }
@@ -1550,7 +1835,13 @@ class AdvancedTableComponent {
                         // return data
                         return fnCallback(dataSet);
                     }).catch((err) => {
+                        // log error to console
                         console.error('TABLES', err);
+                        // show error
+                        self.toggleError(err);
+                        // by returning empty dataset
+                        self.load.emit(EMPTY_DATASET);
+                        return fnCallback(EMPTY_DATASET);
                     });
                 },
                 language: Object.assign({}, self.translator.transform('Tables.DataTable'), { emptyTable: ' ' }),
@@ -1777,9 +2068,28 @@ class AdvancedTableComponent {
                 this.dataTable.context[0].oLanguage.sZeroRecords = this.emptyTable.nativeElement.innerHTML;
         }
     }
+    toggleError(err) {
+        if (this.dataTable && this.dataTable.context[0]) {
+            const innerMessage = this.errorTemplate.nativeElement.getElementsByTagName('small').item(0);
+            if (err) {
+                this.lastError = err;
+                if (innerMessage) {
+                    innerMessage.innerHTML = err.error && err.error.message ? err.error.message : err.message;
+                }
+                this.dataTable.context[0].oLanguage.sEmptyTable =
+                    this.dataTable.context[0].oLanguage.sZeroRecords = this.errorTemplate.nativeElement.innerHTML;
+            }
+            else {
+                if (innerMessage) {
+                    innerMessage.innerHTML = '';
+                }
+                this.dataTable.context[0].oLanguage.sEmptyTable = this.dataTable.context[0].oLanguage.sZeroRecords = '';
+            }
+        }
+    }
     clearEmptyTable() {
         if (this.dataTable && this.dataTable.context[0]) {
-            this.dataTable.context[0].oLanguage.sEmptyTable = '';
+            this.dataTable.context[0].oLanguage.sEmptyTable = this.dataTable.context[0].oLanguage.sZeroRecords = '';
         }
     }
     export() {
@@ -1892,6 +2202,125 @@ class AdvancedTableComponent {
             }
         });
     }
+    /**
+     *
+     * @param options to pass an errorHandler callback, if desired
+     * @returns void
+     */
+    exportView(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                this._loading.showLoading();
+                // validate query items and config
+                if (!(this._lastQueryTotalItems && this.config)) {
+                    // do nothing
+                    return;
+                }
+                // get export settings
+                const exportSettings = this._configuration.settings;
+                // and export limit
+                const exportLimit = (exportSettings && exportSettings.tables && exportSettings.tables.exportLimit > 0)
+                    ? exportSettings.tables.exportLimit : MAX_EXPORT_ITEMS;
+                // and validate it
+                if (this._lastQueryTotalItems > exportLimit) {
+                    // call error handler
+                    // provide a recognizible error type
+                    if (options && options.errorHandler) {
+                        options.errorHandler(new ExportLimitExceededError('Export limit exceeded'));
+                        return;
+                    }
+                    // or show warning modal and exit
+                    this._modalService.showWarningDialog(this._translateService.instant('Tables.ExportList'), this._translateService.instant('Tables.ExportLimitExceeded', { dataLength: this._lastQueryTotalItems, exportLimit }), DIALOG_BUTTONS.Ok);
+                    return;
+                }
+                // get total displayed items
+                const totalDisplayedItems = Array.from(this.dataTable.context[0].aiDisplay).length;
+                // if they already satisfy the last query total
+                if (totalDisplayedItems === this._lastQueryTotalItems) {
+                    // prepare excel data immediately
+                    const { body, header } = this.getExportableData();
+                    // and export them to excel
+                    this._exportSpreadsheet.export(body, `${this._translateService.instant(this.config.title || 'Tables.ExportResults')}.xlsx`, {
+                        header,
+                        skipHeader: false
+                    });
+                }
+                else {
+                    // at this point, more data need to be fetched
+                    // hold previous data state
+                    const previousDataState = this.dataTable.rows().data().toArray();
+                    // get target data state by executing the last query
+                    // note: taking the exportLimit amount of items will always satisfy the results,
+                    // because it has been validated
+                    const targetDataState = yield this.lastQuery.take(exportLimit).getItems();
+                    // change table data on the fly, but do not redraw
+                    this.dataTable.clear().rows.add(targetDataState);
+                    // prepare excel data
+                    const { body, header } = this.getExportableData();
+                    // reset table data
+                    this.dataTable.clear().rows.add(previousDataState);
+                    // and export target data to excel
+                    this._exportSpreadsheet.export(body, `${this._translateService.instant(this.config.title || 'Tables.ExportResults')}.xlsx`, {
+                        header,
+                        skipHeader: false
+                    });
+                }
+                // exit
+                return;
+            }
+            catch (err) {
+                // log error
+                console.error(err);
+                // call error handler, if defined
+                if (options && options.errorHandler) {
+                    options.errorHandler(err);
+                }
+                else {
+                    // use default error service
+                    this._errorService.showError(err, {
+                        continueLink: '.'
+                    });
+                }
+            }
+            finally {
+                this._loading.hideLoading();
+            }
+        });
+    }
+    getExportableData() {
+        if (!(this.dataTable && this.dataTable.buttons
+            && typeof this.dataTable.buttons.exportData === 'function' && this.config)) {
+            return { body: [], header: [] };
+        }
+        // fetch exportable excel data
+        let { body, header } = this.dataTable.buttons.exportData();
+        const cleanupIndexes = [];
+        // clean up headers
+        header = header.filter((headerItem, index) => {
+            // exclude empty headers
+            if (headerItem.trim().length === 0) {
+                cleanupIndexes.push(index);
+                return false;
+            }
+            // find item by title
+            const findItem = this.config.columns.find((column) => {
+                return column.title && column.title.length && this._translateService.instant(column.title) === headerItem;
+            });
+            // exclude hidden columns
+            if (findItem && findItem.hidden === true) {
+                cleanupIndexes.push(index);
+                return false;
+            }
+            return true;
+        });
+        // clean up body
+        body = body.map((row) => {
+            return row.filter((_, rowIndex) => {
+                return cleanupIndexes.indexOf(rowIndex) === -1;
+            });
+        });
+        return { body, header };
+    }
 }
 AdvancedTableComponent.decorators = [
     { type: Component, args: [{
@@ -1903,17 +2332,31 @@ AdvancedTableComponent.decorators = [
     <div #emptyTable class="d-none">
       <div>
         <div class="mt-4">
-          <div class="icon-circle bg-gray-300 border-gray-100"></div>
+          <div class="icon-circle bg-gray-300 border-gray-100"></div>
+        </div>
+        <div class="mt-4">
+          <h4 class="font-3xl text-dark" [translate]="'Tables.EmptyTableTitle'"></h4>
+          <p class="font-lg text-dark" [translate]="'Tables.EmptyTableMessage'"></p>
+        </div>
+      </div>
+    </div>
+    <div #errorTemplate class="d-none error-message">
+      <div class="text-center">
+        <div class="mt-4">
+          <div class="icon-circle bg-danger border-gray-100"></div>
         </div>
         <div class="mt-4">
-          <h4 class="font-3xl text-dark" [translate]="'Tables.EmptyTableTitle'"></h4>
-          <p class="font-lg text-dark" [translate]="'Tables.EmptyTableMessage'"></p>
+          <h4 class="font-3xl text-secondary" [translate]="'Tables.DataError.Title'"></h4>
+          <p class="font-lg text-secondary mb-1" [translate]="'Tables.DataError.Message'"></p>
+          <p class="font-lg text-secondary error-inner-message">
+            <small></small>
+          </p>
         </div>
       </div>
     </div>
   `,
                 encapsulation: ViewEncapsulation.None,
-                styles: ["table.dataTable thead .sorting{background-image:none}table.dataTable thead .sorting_asc{background-position:95% 60%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsSAAALEgHS3X78AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAEtJREFUKJFjYBgywAOKMQALFjE/BgaGTCibjYGBYRM+kz0ZGBh2MTAw8DAwMHAxMDBsY2BgCCBGMQzg1IRNMV5NuVAJXIALqmYwAgBBkAlPRCLcLwAAAABJRU5ErkJggg==)}table.dataTable thead .sorting_desc{background-position:95% 60%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAArzAAAK8wHvFRX1AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAFNJREFUKJHVzTEKgDAQRNGHZfBg2sSTeDMLKwXPYuVJbBKQQEyrH6bZ+cPyWWaElz4kR5cOJ1b0FXnBVRYjjmIUsGGqvX6OmnImYk+JLTkzpPyBGwrtCvfBe56nAAAAAElFTkSuQmCC)}table.dataTable thead th{color:#73818e;font-size:.75rem;font-weight:600;padding-top:16px;padding-bottom:4px;border-bottom:none;padding-left:8px}table.dataTable tbody tr:first-child td:first-child{border-radius:6px 0}table.dataTable tbody tr:first-child td:last-child{border-radius:0 6px}table.dataTable tbody tr{border-radius:6px}table.dataTable tbody tr td:first-child{border-left:1px solid #c2cfd6}table.dataTable tbody tr td:last-child{border-right:1px solid #c2cfd6}table.dataTable tbody tr td{padding-top:8px;padding-bottom:8px;border-top:1px solid #c2cfd6}table.dataTable tbody tr:last-child td:first-child{border-radius:0 0 0 6px}table.dataTable tbody tr:last-child td:last-child{border-radius:0 0 6px}table.dataTable tbody tr:last-child td{border-bottom:1px solid #c2cfd6}table.dataTable td.dataTables_empty{border:none!important}table.dataTable.no-footer{border-bottom:none}.dataTables_paginate .btn.previous{margin-right:8px}.dataTables_paginate .btn.next{margin-left:8px}.dataTables_info,.dataTables_paginate{margin-top:1rem}.dataTables_paginate span .btn{border-radius:1.5rem}.dataTables_filter{display:none}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:0;overflow:auto}.dataTables_paginate{display:none}.dataTable.processing{opacity:15%}.dataTables_wrapper .dataTables_processing{background:0 0;position:absolute;display:inline-block;top:25%;z-index:5;color:#73818e}.text-decoration-line-through{text-decoration:line-through!important}tr.removed .checkbox+label{visibility:hidden}"]
+                styles: ["table.dataTable thead .sorting{background-image:none}table.dataTable thead .sorting_asc{background-position:95% 60%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsSAAALEgHS3X78AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAEtJREFUKJFjYBgywAOKMQALFjE/BgaGTCibjYGBYRM+kz0ZGBh2MTAw8DAwMHAxMDBsY2BgCCBGMQzg1IRNMV5NuVAJXIALqmYwAgBBkAlPRCLcLwAAAABJRU5ErkJggg==)}table.dataTable thead .sorting_desc{background-position:95% 60%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAArzAAAK8wHvFRX1AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAFNJREFUKJHVzTEKgDAQRNGHZfBg2sSTeDMLKwXPYuVJbBKQQEyrH6bZ+cPyWWaElz4kR5cOJ1b0FXnBVRYjjmIUsGGqvX6OmnImYk+JLTkzpPyBGwrtCvfBe56nAAAAAElFTkSuQmCC)}table.dataTable thead th{color:#73818e;font-size:.75rem;font-weight:600;padding-top:16px;padding-bottom:4px;border-bottom:none;padding-left:8px}table.dataTable tbody tr:first-child td:first-child{border-radius:6px 0}table.dataTable tbody tr:first-child td:last-child{border-radius:0 6px}table.dataTable tbody tr{border-radius:6px}table.dataTable tbody tr td:first-child{border-left:1px solid #c2cfd6}table.dataTable tbody tr td:last-child{border-right:1px solid #c2cfd6}table.dataTable tbody tr td{padding-top:8px;padding-bottom:8px;border-top:1px solid #c2cfd6}table.dataTable tbody tr:last-child td:first-child{border-radius:0 0 0 6px}table.dataTable tbody tr:last-child td:last-child{border-radius:0 0 6px}table.dataTable tbody tr:last-child td{border-bottom:1px solid #c2cfd6}table.dataTable td.dataTables_empty{border:none!important}table.dataTable .error-inner-message>small{overflow-wrap:break-word}table.dataTable.no-footer{border-bottom:none}.dataTables_paginate .btn.previous{margin-right:8px}.dataTables_paginate .btn.next{margin-left:8px}.dataTables_info,.dataTables_paginate{margin-top:1rem}.dataTables_paginate span .btn{border-radius:1.5rem}.dataTables_filter{display:none}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:0;overflow:auto}.dataTables_paginate{display:none}.dataTable.processing{opacity:15%}.dataTables_wrapper .dataTables_processing{background:0 0;position:absolute;display:inline-block;top:25%;z-index:5;color:#73818e}.text-decoration-line-through{text-decoration:line-through!important}tr.removed .checkbox+label{visibility:hidden}"]
             }] }
 ];
 /** @nocollapse */
@@ -1928,11 +2371,16 @@ AdvancedTableComponent.ctorParameters = () => [
     { type: TemplatePipe },
     { type: LoadingService },
     { type: HttpClient },
-    { type: ColumnSelectorService }
+    { type: ColumnSelectorService },
+    { type: ConfigurationService },
+    { type: ExportSpreadsheetService },
+    { type: ModalService },
+    { type: ErrorService }
 ];
 AdvancedTableComponent.propDecorators = {
     table: [{ type: ViewChild, args: ['table',] }],
     emptyTable: [{ type: ViewChild, args: ['emptyTable',] }],
+    errorTemplate: [{ type: ViewChild, args: ['errorTemplate',] }],
     loadingTable: [{ type: ViewChild, args: ['loadingTable',] }],
     height: [{ type: Input }],
     showActions: [{ type: Input }],
@@ -2981,37 +3429,6 @@ AdvancedSearchConfigurationResolver.ctorParameters = () => [
     { type: HttpClient }
 ];
 
-class ActivatedTableService {
-    constructor(_router, _activatedRoute) {
-        this._router = _router;
-        this._activatedRoute = _activatedRoute;
-        _router.events.forEach((event) => {
-            if (event instanceof NavigationStart) {
-                if (this._activeTable) {
-                    this._activeTable = null;
-                }
-            }
-        });
-    }
-    get activeTable() {
-        return this._activeTable;
-    }
-    set activeTable(tableComponent) {
-        this._activeTable = tableComponent;
-    }
-}
-ActivatedTableService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-/** @nocollapse */
-ActivatedTableService.ctorParameters = () => [
-    { type: Router },
-    { type: ActivatedRoute }
-];
-ActivatedTableService.ngInjectableDef = defineInjectable({ factory: function ActivatedTableService_Factory() { return new ActivatedTableService(inject(Router), inject(ActivatedRoute)); }, token: ActivatedTableService, providedIn: "root" });
-
 class AdvancedTableSettingsComponent {
     constructor(_context, _activatedRoute, elRef, modalService, userStorage, formBuilder, _activatedTable) {
         this._context = _context;
@@ -3841,226 +4258,6 @@ AdvancedTableEditorDirective.propDecorators = {
     dirtyChange: [{ type: Output }]
 };
 
-const MAX_EXPORT_ITEMS = 500;
-class BtnExpDirective {
-    constructor(_activatedTable, _context, _config, _translate, _loadingService, _errorService) {
-        this._activatedTable = _activatedTable;
-        this._context = _context;
-        this._config = _config;
-        this._translate = _translate;
-        this._loadingService = _loadingService;
-        this._errorService = _errorService;
-    }
-    clickEvent(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            event.preventDefault();
-            event.stopPropagation();
-            if (this._activatedTable.activeTable) {
-                const lastQuery = this._activatedTable.activeTable.lastQuery;
-                const tableConfig = this._activatedTable.activeTable.config;
-                const serviceHeaders = this._context.getService().getHeaders();
-                const queryModel = lastQuery.getModel();
-                let query = this._context.model(queryModel).asQueryable();
-                const queryParams = lastQuery.getParams();
-                query = this.constructQuery(query, queryParams, tableConfig, serviceHeaders);
-                // get export settings
-                const exportSettings = this._config.settings;
-                // get export limit
-                const maxExportItems = exportSettings && exportSettings.tables && exportSettings.tables.exportLimit;
-                if (maxExportItems && typeof maxExportItems === 'number' && maxExportItems > 0) {
-                    query.skip(0).take(maxExportItems);
-                }
-                else {
-                    query.skip(0).take(MAX_EXPORT_ITEMS);
-                }
-                // This constructs the URI based on the way @themost does
-                const url = this.constructURL(query);
-                this.downloadFile(url, query.getService().getHeaders(), query.getModel());
-            }
-        });
-    }
-    /**
-     * Sets the parameters to the query based on
-     * the active filters of the activated table
-     * @param {ClientDataQueryable} query
-     * @param params: The filters of the last query of the activated table
-     * @return ClientDataQueryable
-     */
-    setParams(query, params) {
-        if (params && typeof params === 'object') {
-            Object.keys(params).forEach((key) => {
-                query.setParam(key, params[key]);
-            });
-        }
-        return query;
-    }
-    /**
-     * Sets the headers to the query based on
-     * the default headers of the DataContext
-     * and appending the accept header to get
-     * an xlsx file from the API
-     * @param {ClientDataQueryable} query
-     * @param {Headers} headers: The headers to append to the query
-     * @return ClientDataQueryable
-     */
-    setHeaders(query, headers) {
-        Object.keys(headers).forEach((key) => {
-            if (headers.hasOwnProperty(key)) {
-                query.getService().setHeader(key, headers[key]);
-            }
-        });
-        // sets a header to accept xlsx files
-        query.getService().setHeader('Accept', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
-        return query;
-    }
-    /**
-     * Constructs the select parameter of the
-     * ClientDataQuery by replacing the target name
-     * of the field based on the localized translation
-     * of that property on the advanced tabled
-     * @param {ClientDataQueryable} query
-     * @param tableConfig: The configuration of the activated table
-     * @return ClientDataQueryable
-     */
-    constructQueryParam(query, tableConfig) {
-        let selectQuery = query.getParams().$select;
-        let selectQueryArray = selectQuery.split(',');
-        selectQueryArray = selectQueryArray.map((select$$1) => {
-            const words = select$$1.split(' ');
-            if (words.length === 3) {
-                if (tableConfig && tableConfig.columns) {
-                    for (const column of tableConfig.columns) {
-                        if (column.property === words[2] && column.title) {
-                            words[2] = `"${this._translate.instant(column.title)}"`;
-                        }
-                        else if (column.property === words[2]) {
-                            words[2] = `"${this._translate.instant(words[2])}"`;
-                        }
-                    }
-                }
-            }
-            if (words.length === 1) {
-                if (tableConfig && tableConfig.columns) {
-                    for (const column of tableConfig.columns) {
-                        if (column.name === words[0] && column.title) {
-                            words[0] = `${words[0]} as "${this._translate.instant(column.title)}"`;
-                            break;
-                        }
-                        else if (column.name === words[0] && column.property) {
-                            words[0] = `${words[0]} as "${this._translate.instant(column.property)}"`;
-                            break;
-                        }
-                        else if (words[0] === column.name && words[0] === "id" && column.hidden) {
-                            break;
-                        }
-                        else if (words[0] == column.name || words[0] === column.property) {
-                            words[0] = `${words[0]} as "${this._translate.instant(words[0])}"`;
-                        }
-                    }
-                }
-                return words[0];
-            }
-            return words.join(' ');
-        });
-        selectQuery = selectQueryArray.join(',');
-        query.setParam('$select', selectQuery);
-        return query;
-    }
-    /**
-     * Constructs the fetch URL based the query parameters
-     * @param {ClientDataQueryable} query
-     * @return String
-     */
-    constructURL(query) {
-        const baseURL = query.getService().getBase();
-        let url = baseURL.endsWith('/') ? (baseURL + query.getModel() + '?') : (baseURL + '/' + query.getModel() + '?');
-        Object.keys(query.getParams()).forEach((key, index) => {
-            if (index === 0) {
-                url += key + '=' + query.getParams()[key];
-            }
-            else {
-                url += '&' + key + '=' + query.getParams()[key];
-            }
-        });
-        return url;
-    }
-    /**
-     * Constructs the query by setting the parameters of the
-     * advanced table's active filters, sets the necessary headers
-     * and build the select parameter of the query
-     * @param {ClientDataQueryable} query
-     * @param params: The filters of the last query of the activated table
-     * @param tableConfig: The configuration of the activated table
-     * @param {Headers} headers: The headers to append to the query
-     * @return ClientDataQueryable
-     */
-    constructQuery(query, params, tableConfig, headers) {
-        let _query = this.setParams(query, params);
-        _query = this.setHeaders(_query, headers);
-        _query = this.constructQueryParam(_query, tableConfig);
-        return _query;
-    }
-    /**
-     * Fetches and saves the xlsx file
-     * @param {String} url
-     * @param {Headers} serviceHeaders: The headers to append to the query
-     * @param modelName: The model name of the advanced table
-     */
-    downloadFile(url, serviceHeaders, modelName) {
-        this._loadingService.showLoading();
-        fetch(encodeURI(url), {
-            headers: serviceHeaders,
-            credentials: 'include'
-        }).then(response => {
-            if (response && !response.ok) {
-                throw new ResponseError(response.statusText, response.status);
-            }
-            return response.blob();
-        }).then(blob => {
-            const objectUrl = window.URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            document.body.appendChild(a);
-            a.setAttribute('style', 'display: none');
-            a.href = objectUrl;
-            const downloadName = `${modelName}.xlsx`;
-            a.download = downloadName;
-            // this adds support for IE and MS Edge (up to version 44.19041)
-            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
-                window.navigator.msSaveOrOpenBlob(blob, downloadName);
-            }
-            else {
-                // for all other browsers
-                a.click();
-            }
-            window.URL.revokeObjectURL(objectUrl);
-            a.remove();
-            this._loadingService.hideLoading();
-        }).catch(err => {
-            this._loadingService.hideLoading();
-            this._errorService.showError(err, {
-                continueLink: '.'
-            });
-        });
-    }
-}
-BtnExpDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '.universis-btn-export'
-            },] }
-];
-/** @nocollapse */
-BtnExpDirective.ctorParameters = () => [
-    { type: ActivatedTableService },
-    { type: AngularDataContext },
-    { type: ConfigurationService },
-    { type: TranslateService },
-    { type: LoadingService },
-    { type: ErrorService }
-];
-BtnExpDirective.propDecorators = {
-    clickEvent: [{ type: HostListener, args: ['click', ['$event'],] }]
-};
-
 class AdvancedAggregatorService {
     constructor(_context, _template) {
         this._context = _context;
@@ -4546,6 +4743,8 @@ ParseTitlePipe.ctorParameters = () => [
     { type: TranslateService }
 ];
 
+// tslint:disable: quotemark
+// tslint:disable: max-line-length
 const TABLES_EL = {
     "Tables": {
         "Export": "Εξαγωγή",
@@ -4625,7 +4824,14 @@ const TABLES_EL = {
         "MoveColumnHelp": "Χρησιμοποιήστε τα πλήκτρα 'Επάνω' και 'Κάτω' για να αλλάξετε την σειρά εμφάνισης των στηλών του πίνακα.",
         "UnknownColumn": "Άγνωστο",
         "SelectColumn": "Επιλογή",
-        "ActionLinkColumn": "Ενέργειες"
+        "ActionLinkColumn": "Ενέργειες",
+        "DataError": {
+            "Title": "Σφάλμα κατά την παραλαβή των δεδομένων",
+            "Message": "Συνέβη σφάλμα κατά την παραλαβή των δεδομένων. Προσπαθήστε ξανά ή τροποποιήστε τα στοιχεία αναζήτησης."
+        },
+        "ExportList": "Εξαγωγή λίστας",
+        "ExportLimitExceeded": "Το πλήθος των στοιχείων προς εξαγωγή ({{dataLength}}) ξεπερνάει το μέγιστο επιτρεπτό ({{exportLimit}}). Παρακαλούμε προσαρμόστε τα φίλτρα της αναζήτησης και προσπαθήστε ξανά.",
+        "ExportResults": "Δεδομένα λίστας"
     },
     "TrueFalse": {
         "long": {
@@ -4666,6 +4872,8 @@ const TABLES_EL = {
     }
 };
 
+// tslint:disable: quotemark
+// tslint:disable: max-line-length
 const TABLES_EN = {
     "Tables": {
         "Export": "Export",
@@ -4744,7 +4952,14 @@ const TABLES_EN = {
         "MoveColumnHelp": "Use 'Move up' and 'Move down' buttons to change column order.",
         "UnknownColumn": "Unknown",
         "SelectColumn": "Select",
-        "ActionLinkColumn": "Actions"
+        "ActionLinkColumn": "Actions",
+        "DataError": {
+            "Title": "Error while getting data",
+            "Message": "An error occurred while getting data. Please try again or change your criteria."
+        },
+        "ExportList": "Export list",
+        "ExportLimitExceeded": "The number of items that are to be exported ({{dataLength}}) exceeds the export limit ({{exportLimit}}). Please apply more specific filters to the search.",
+        "ExportResults": "Exported list"
     },
     "TrueFalse": {
         "long": {
@@ -5042,7 +5257,7 @@ AdvancedSearchRouterState.ctorParameters = () => [
     { type: Router }
 ];
 
-const ɵ0 = FORMATTERS;
+const ɵ0$1 = FORMATTERS;
 class TablesModule {
     constructor(_translateService) {
         this._translateService = _translateService;
@@ -5078,7 +5293,7 @@ TablesModule.decorators = [
                 providers: [DatePipe, TemplatePipe,
                     {
                         provide: COLUMN_FORMATTERS,
-                        useValue: ɵ0
+                        useValue: ɵ0$1
                     },
                     AdvancedTableConfigurationResolver,
                     AdvancedSearchConfigurationResolver,
@@ -5155,6 +5370,6 @@ TablesModule.ctorParameters = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { AdvancedSearchState as ɵa, AdvancedTableState as ɵc, AdvancedSearchRouterState as ɵd, AdvancedListComponent, AdvancedRowActionComponent, AdvancedSearchFormComponent, AdvancedSelectComponent, AdvancedSelectService, AdvancedTableConfigurationResolver, AdvancedSearchConfigurationResolver, AdvancedColumnFormatter, NestedPropertyFormatter, ButtonFormatter, LinkFormatter, ActionLinkFormatter, ActionButtonFormatter, ActionSplitButtonFormatter, SelectRowFormatter, TemplateFormatter, TrueFalseFormatter, TranslationFormatter, DateTimeFormatter, NgClassFormatter, LanguageFormatter, COLUMN_FORMATTERS, AdvancedTableConfiguration, AdvancedTableComponent, AdvancedTableSettingsComponent, AdvancedTableSearchBaseComponent, AdvancedTableSearchComponent, FORMATTERS, AdvancedFilterValueProvider, AdvancedTableModalBaseTemplate, AdvancedTableModalBaseComponent, SimpleHeaderToolsComponent, TableSimpleHeaderComponent, AdvancedTableNotNullError, AdvancedTableEditorDirective, BtnExpDirective, AdvancedAggregatorComponent, AdvancedAggregatorListComponent, AddItemsComponent, AdvancedAggregatorPipe, ParseTitlePipe, AdvancedAggregatorService, TablesModule, ɵ0, ActivatedTableService, ColumnSelectorService, ColumnSelectorComponent, initialState, tableInitialState, tableReducer, tableReducers, featureName, getTablesState, selectTable };
+export { AdvancedSearchState as ɵa, AdvancedTableState as ɵc, AdvancedSearchRouterState as ɵd, AdvancedListComponent, AdvancedRowActionComponent, AdvancedSearchFormComponent, AdvancedSelectComponent, AdvancedSelectService, AdvancedTableConfigurationResolver, AdvancedSearchConfigurationResolver, AdvancedColumnFormatter, NestedPropertyFormatter, ButtonFormatter, LinkFormatter, ActionLinkFormatter, ActionButtonFormatter, ActionSplitButtonFormatter, SelectRowFormatter, TemplateFormatter, TrueFalseFormatter, TranslationFormatter, DateTimeFormatter, NgClassFormatter, LanguageFormatter, COLUMN_FORMATTERS, ExportLimitExceededError, AdvancedTableConfiguration, AdvancedTableComponent, ɵ0, AdvancedTableSettingsComponent, AdvancedTableSearchBaseComponent, AdvancedTableSearchComponent, FORMATTERS, AdvancedFilterValueProvider, AdvancedTableModalBaseTemplate, AdvancedTableModalBaseComponent, SimpleHeaderToolsComponent, TableSimpleHeaderComponent, AdvancedTableNotNullError, AdvancedTableEditorDirective, MAX_EXPORT_ITEMS, BtnExpDirective, AdvancedAggregatorComponent, AdvancedAggregatorListComponent, AddItemsComponent, AdvancedAggregatorPipe, ParseTitlePipe, AdvancedAggregatorService, TablesModule, ActivatedTableService, ColumnSelectorService, ColumnSelectorComponent, initialState, tableInitialState, tableReducer, tableReducers, featureName, getTablesState, selectTable };
 
 //# sourceMappingURL=universis-ngx-tables.js.map