@universis/ngx-tables 0.6.0

package/bundles/universis-ngx-tables.umd.js

@@ -0,0 +1,4591 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash'), require('iso-639-1/build'), require('rxjs'), require('jquery'), require('datatables.net'), require('datatables.net-scroller'), require('rxjs/add/observable/combineLatest'), require('@angular/common/http'), require('@angular/common'), require('@themost/client'), require('@angular/forms'), require('@universis/forms'), require('angular-formio'), require('ngx-bootstrap/modal'), require('ngx-bootstrap/dropdown'), require('ngx-bootstrap/progressbar'), require('ngx-pipes'), require('@angular/core'), require('@universis/common/routing'), require('@angular/router'), require('@ngx-translate/core'), require('@themost/angular'), require('@universis/common')) :
+    typeof define === 'function' && define.amd ? define('@universis/ngx-tables', ['exports', 'lodash', 'iso-639-1/build', 'rxjs', 'jquery', 'datatables.net', 'datatables.net-scroller', 'rxjs/add/observable/combineLatest', '@angular/common/http', '@angular/common', '@themost/client', '@angular/forms', '@universis/forms', 'angular-formio', 'ngx-bootstrap/modal', 'ngx-bootstrap/dropdown', 'ngx-bootstrap/progressbar', 'ngx-pipes', '@angular/core', '@universis/common/routing', '@angular/router', '@ngx-translate/core', '@themost/angular', '@universis/common'], factory) :
+    (factory((global.universis = global.universis || {}, global.universis['ngx-tables'] = {}),global.lodash,global.ISO6391,global.rxjs,global.jQuery_,null,null,global.rxjs['add/observable/combineLatest'],global.ng.common.http,global.ng.common,global.client,global.ng.forms,global.forms$1,global.angularFormio,global.modal,global.dropdown,global.progressbar,global.ngxPipes,global.ng.core,global.routing,global.ng.router,global.core,global.i1$1,global.i2));
+}(this, (function (exports,lodash,ISO6391,rxjs,jQuery_,datatables_net,datatables_netScroller,combineLatest,http,common,client,forms,forms$1,angularFormio,modal,dropdown,progressbar,ngxPipes,i0,routing,i1,core,i1$1,i2) { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+    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);
+    };
+    function __extends(d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign = function () {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (_)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
+                }
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m)
+            return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
+        }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
+            }
+        }
+        return ar;
+    }
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+
+    var AdvancedColumnFormatter = /** @class */ (function () {
+        function AdvancedColumnFormatter() {
+        }
+        return AdvancedColumnFormatter;
+    }());
+    var NestedPropertyFormatter = /** @class */ (function (_super) {
+        __extends(NestedPropertyFormatter, _super);
+        function NestedPropertyFormatter() {
+            return _super.call(this) || this;
+        }
+        NestedPropertyFormatter.prototype.render = function (data, type, row, meta) {
+            // get column
+            var column = meta.settings.aoColumns[meta.col];
+            if (column && column.data) {
+                return lodash.at(row, column.data.replace(/\//g, '.'));
+            }
+            return data;
+        };
+        return NestedPropertyFormatter;
+    }(AdvancedColumnFormatter));
+    var ButtonFormatter = /** @class */ (function (_super) {
+        __extends(ButtonFormatter, _super);
+        function ButtonFormatter() {
+            return _super.call(this) || this;
+        }
+        ButtonFormatter.prototype.render = function (data, type, row, meta) {
+            var _this = this;
+            if (data == null) {
+                return '';
+            }
+            // get column
+            var column = meta.settings.aoColumns[meta.col];
+            // get format options
+            var formatOptions = Object.assign({
+                buttonClass: 'btn btn-default'
+            }, this.formatOptions);
+            // get text content
+            var buttonText;
+            var buttonTitle = '';
+            if (formatOptions.buttonText) {
+                buttonText = this.injector.get(core.TranslateService).instant(formatOptions.buttonText);
+            }
+            else {
+                buttonText = formatOptions.buttonContent;
+            }
+            if (formatOptions.buttonTitle) {
+                buttonTitle = this.injector.get(core.TranslateService).instant(formatOptions.buttonTitle);
+            }
+            if (Array.isArray(this.formatOptions.commands)) {
+                var activatedRoute = this.injector.get(i1.ActivatedRoute);
+                var router = this.injector.get(i1.Router);
+                var commands = this.formatOptions.commands.map(function (command) {
+                    if (typeof command === 'string') {
+                        return new i2.TemplatePipe().transform(command, row);
+                    }
+                    if (command.outlets) {
+                        var commandOutlets_1 = {};
+                        Object.keys(command.outlets).forEach(function (key) {
+                            if (Object.prototype.hasOwnProperty.call(command.outlets, key)) {
+                                var outlet = command.outlets[key];
+                                if (Array.isArray(outlet)) {
+                                    Object.defineProperty(commandOutlets_1, key, {
+                                        enumerable: true,
+                                        configurable: true,
+                                        writable: true,
+                                        value: outlet.map(function (x) {
+                                            return new i2.TemplatePipe().transform(x, row);
+                                        })
+                                    });
+                                }
+                                else {
+                                    Object.defineProperty(commandOutlets_1, key, {
+                                        enumerable: true,
+                                        configurable: true,
+                                        writable: true,
+                                        value: outlet
+                                    });
+                                }
+                            }
+                        });
+                        return {
+                            outlets: commandOutlets_1
+                        };
+                    }
+                    return command;
+                });
+                var queryParams_1 = {};
+                var replaceUrl = true;
+                if (this.formatOptions.navigationExtras && this.formatOptions.navigationExtras.queryParams) {
+                    Object.keys(this.formatOptions.navigationExtras.queryParams).map(function (key) {
+                        queryParams_1[key] = new i2.TemplatePipe().transform(_this.formatOptions.navigationExtras.queryParams[key], row);
+                    });
+                }
+                if (this.formatOptions.navigationExtras && typeof this.formatOptions.navigationExtras.replaceUrl !== 'undefined') {
+                    replaceUrl = this.formatOptions.navigationExtras.replaceUrl;
+                }
+                var skipLocationChange = false;
+                if (this.formatOptions.navigationExtras && typeof this.formatOptions.navigationExtras.skipLocationChange !== 'undefined') {
+                    skipLocationChange = this.formatOptions.navigationExtras.skipLocationChange;
+                }
+                var routerLink = router.createUrlTree(commands, {
+                    relativeTo: activatedRoute,
+                    queryParams: queryParams_1,
+                    replaceUrl: replaceUrl,
+                    skipLocationChange: skipLocationChange
+                }).toString();
+                return "<a class=\"" + formatOptions.buttonClass + "\" title=\"" + buttonTitle + "\" href=\"#" + routerLink + "\">" + buttonText + "</a>";
+            }
+            // and return button
+            var href = new i2.TemplatePipe().transform(this.formatString, row);
+            return "<a class=\"" + formatOptions.buttonClass + "\" title=\"" + buttonTitle + "\" href=\"" + href + "\">" + buttonText + "</a>";
+        };
+        return ButtonFormatter;
+    }(AdvancedColumnFormatter));
+    var LinkFormatter = /** @class */ (function (_super) {
+        __extends(LinkFormatter, _super);
+        function LinkFormatter() {
+            return _super.call(this) || this;
+        }
+        LinkFormatter.prototype.render = function (data, type, row, meta) {
+            // get column
+            var column = meta.settings.aoColumns[meta.col];
+            if (column && column.data) {
+                return "<a href=\"" + (new i2.TemplatePipe().transform(this.formatString, row)) + "\">" + data + "</a>";
+            }
+            return data;
+        };
+        return LinkFormatter;
+    }(AdvancedColumnFormatter));
+    var ActionLinkFormatter = /** @class */ (function (_super) {
+        __extends(ActionLinkFormatter, _super);
+        function ActionLinkFormatter() {
+            return _super.call(this) || this;
+        }
+        ActionLinkFormatter.prototype.render = function (data, type, row, meta) {
+            var _this = this;
+            // get column
+            var column = meta.settings.aoColumns[meta.col];
+            if (column && column.data) {
+                this.actions = this.actions || [];
+                var allowedActions = this.actions.filter(function (x) {
+                    if (x.access && x.access.length > 0) {
+                        var access = x.access;
+                        access = access.filter(function (y) {
+                            if (y.studentStatuses) {
+                                return y.studentStatuses.find(function (z) { return z.alternateName === row.studentStatus; });
+                            }
+                        });
+                        if (access && access.length > 0) {
+                            return x;
+                        }
+                    }
+                    else {
+                        return x;
+                    }
+                });
+                // return the dropdown menu with 3 dots
+                return new i2.TemplatePipe().transform("<div class='dropdown details-control' data-id='" + data + "' data-type='student' >\n                  <a id=\"dropdownMenuButton-" + data + "\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                    <span class=\"fa-2x text-dots\"></span></a>\n                    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton-" + data + "\">\n                     " + allowedActions.map(function (x) { return "<a data-name='" + x.name + "' class=\"dropdown-item\" href=\"" + x.href + "\">\n                         " + _this.injector.get(core.TranslateService).instant(new i2.TemplatePipe().transform(x.title, ({ value: data }))) + "\n                        </a>"; })
+                    .join('') + "\n                    </div>\n                </div>", row);
+            }
+            return data;
+        };
+        return ActionLinkFormatter;
+    }(AdvancedColumnFormatter));
+    var SelectRowFormatter = /** @class */ (function (_super) {
+        __extends(SelectRowFormatter, _super);
+        function SelectRowFormatter() {
+            return _super.call(this) || this;
+        }
+        SelectRowFormatter.prototype.render = function (data, type, row, meta) {
+            // get column
+            var column = meta.settings.aoColumns[meta.col];
+            if (column && column.data) {
+                var _tpl = "<input class=\"checkbox checkbox-theme\" type=\"checkbox\"\n id=\"s-" + meta.row + "\" /><label for=\"s-" + meta.row + "\">&nbsp;</label>";
+                return new i2.TemplatePipe().transform(_tpl, row);
+            }
+            return data;
+        };
+        return SelectRowFormatter;
+    }(AdvancedColumnFormatter));
+    var TemplateFormatter = /** @class */ (function (_super) {
+        __extends(TemplateFormatter, _super);
+        function TemplateFormatter() {
+            return _super.call(this) || this;
+        }
+        TemplateFormatter.prototype.render = function (data, type, row, meta) {
+            // get column
+            var column = meta.settings.aoColumns[meta.col];
+            if (column && column.data) {
+                return new i2.TemplatePipe().transform(this.formatString, row);
+            }
+            return data;
+        };
+        return TemplateFormatter;
+    }(AdvancedColumnFormatter));
+    var TrueFalseFormatter = /** @class */ (function (_super) {
+        __extends(TrueFalseFormatter, _super);
+        function TrueFalseFormatter() {
+            return _super.call(this) || this;
+        }
+        TrueFalseFormatter.prototype.render = function (data, type, row, meta) {
+            return data ? this.injector.get(core.TranslateService).instant('TrueFalse.long.Yes') :
+                this.injector.get(core.TranslateService).instant('TrueFalse.long.No');
+        };
+        return TrueFalseFormatter;
+    }(AdvancedColumnFormatter));
+    var TranslationFormatter = /** @class */ (function (_super) {
+        __extends(TranslationFormatter, _super);
+        function TranslationFormatter() {
+            return _super.call(this) || this;
+        }
+        TranslationFormatter.prototype.render = function (data, type, row, meta) {
+            // get column
+            var column = meta.settings.aoColumns[meta.col];
+            if (column && data != null) {
+                return this.injector.get(core.TranslateService).instant(new i2.TemplatePipe().transform(this.formatString, { value: data }));
+            }
+            return this.injector.get(core.TranslateService).instant('Unknown');
+        };
+        return TranslationFormatter;
+    }(AdvancedColumnFormatter));
+    var DateTimeFormatter = /** @class */ (function (_super) {
+        __extends(DateTimeFormatter, _super);
+        function DateTimeFormatter() {
+            return _super.call(this) || this;
+        }
+        DateTimeFormatter.prototype.render = function (data, type, row, meta) {
+            // get column
+            var column = meta.settings.aoColumns[meta.col];
+            if (column && column.data) {
+                var datePipe = new common.DatePipe(this.injector.get(core.TranslateService).currentLang);
+                if (typeof data === 'string' && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\+\d{2}$/.test(data)) {
+                    return datePipe.transform(new Date(data + ':00'), this.formatString);
+                }
+                return datePipe.transform(data, this.formatString);
+            }
+            return data;
+        };
+        return DateTimeFormatter;
+    }(AdvancedColumnFormatter));
+    var NgClassFormatter = /** @class */ (function (_super) {
+        __extends(NgClassFormatter, _super);
+        function NgClassFormatter() {
+            return _super.call(this) || this;
+        }
+        NgClassFormatter.prototype.render = function (data, type, row, meta) {
+            var e_1, _a;
+            // get column
+            var column = meta.settings.aoColumns[meta.col];
+            if (column && column.data) {
+                // get formatOptions
+                if (this.formatOptions) {
+                    var ngClass = this.formatOptions.ngClass;
+                    try {
+                        // check condition for each key
+                        for (var _b = __values(Object.keys(ngClass)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                            var key = _c.value;
+                            var result = new i2.TemplatePipe().transform(ngClass[key], row);
+                            var fn = new Function("return " + result + ";");
+                            // if condition returns true add class
+                            if (fn() === true) {
+                                return "<span class=\"" + key + "\">" + data + "</span>";
+                            }
+                        }
+                    }
+                    catch (e_1_1) {
+                        e_1 = { error: e_1_1 };
+                    }
+                    finally {
+                        try {
+                            if (_c && !_c.done && (_a = _b.return))
+                                _a.call(_b);
+                        }
+                        finally {
+                            if (e_1)
+                                throw e_1.error;
+                        }
+                    }
+                }
+                return data;
+            }
+            return data;
+        };
+        return NgClassFormatter;
+    }(AdvancedColumnFormatter));
+    var LanguageFormatter = /** @class */ (function (_super) {
+        __extends(LanguageFormatter, _super);
+        function LanguageFormatter() {
+            return _super.call(this) || this;
+        }
+        LanguageFormatter.prototype.render = function (data, type, row, meta) {
+            if (data) {
+                return ISO6391.getNativeName(data);
+            }
+            return data;
+        };
+        return LanguageFormatter;
+    }(AdvancedColumnFormatter));
+
+    var AdvancedFilterValueProvider = /** @class */ (function () {
+        function AdvancedFilterValueProvider() {
+            this.values = {};
+            this._template = new i2.TemplatePipe();
+        }
+        AdvancedFilterValueProvider.prototype.buildFilter = function (filter) {
+            if (filter) {
+                return this._template.transform(filter, this.values);
+            }
+        };
+        AdvancedFilterValueProvider.prototype.asyncBuildFilter = function (filter) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a, _b, _c;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            if (!filter)
+                                return [3 /*break*/, 2];
+                            _b = (_a = this._template).transform;
+                            _c = [filter];
+                            return [4 /*yield*/, this.getValues()];
+                        case 1: return [2 /*return*/, _b.apply(_a, _c.concat([_d.sent()]))];
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        AdvancedFilterValueProvider.prototype.getValues = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, this.values];
+                });
+            });
+        };
+        AdvancedFilterValueProvider.decorators = [
+            { type: i0.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        AdvancedFilterValueProvider.ctorParameters = function () { return []; };
+        AdvancedFilterValueProvider.ngInjectableDef = i0.defineInjectable({ factory: function AdvancedFilterValueProvider_Factory() { return new AdvancedFilterValueProvider(); }, token: AdvancedFilterValueProvider, providedIn: "root" });
+        return AdvancedFilterValueProvider;
+    }());
+
+    // restore jquery import to avoid Cannot call a namespace ('jquery') error
+    var jQuery = jQuery_;
+    var DataTablesApi = jQuery.fn.dataTable.Api;
+    DataTablesApi.register('processing()', function (show) {
+        return this.iterator('table', function (ctx) {
+            ctx.oApi._fnProcessingDisplay(ctx, show);
+        });
+    });
+    var TableTranslationChangeDetector = /** @class */ (function (_super) {
+        __extends(TableTranslationChangeDetector, _super);
+        function TableTranslationChangeDetector() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        TableTranslationChangeDetector.prototype.checkNoChanges = function () {
+        };
+        TableTranslationChangeDetector.prototype.detach = function () {
+        };
+        TableTranslationChangeDetector.prototype.detectChanges = function () {
+        };
+        TableTranslationChangeDetector.prototype.markForCheck = function () {
+        };
+        TableTranslationChangeDetector.prototype.reattach = function () {
+        };
+        return TableTranslationChangeDetector;
+    }(i0.ChangeDetectorRef));
+    var COLUMN_FORMATTERS = new i0.InjectionToken('column.formatters');
+    var ColumnFormatter = /** @class */ (function (_super) {
+        __extends(ColumnFormatter, _super);
+        function ColumnFormatter(injector) {
+            var _this = _super.call(this) || this;
+            _this.injector = injector;
+            return _this;
+        }
+        ColumnFormatter.prototype.render = function (data, type, row, meta) {
+            //
+        };
+        return ColumnFormatter;
+    }(AdvancedColumnFormatter));
+    function forceCast(input) {
+        return input;
+    }
+    var AdvancedTableConfiguration = /** @class */ (function () {
+        function AdvancedTableConfiguration() {
+        }
+        AdvancedTableConfiguration.cast = function (input, clone) {
+            if (clone) {
+                return forceCast(JSON.parse(JSON.stringify(input)));
+            }
+            return forceCast(input);
+        };
+        return AdvancedTableConfiguration;
+    }());
+    function getRandomIdentifier() {
+        return (Number(String(Math.random()).slice(2))).toString(36);
+    }
+    var AdvancedTableComponent = /** @class */ (function () {
+        function AdvancedTableComponent(_context, _columnFormatters, _activatedRoute, _translateService, _injector, _advancedFilterValueProvider, _element, _template, _loading, _http) {
+            var _this = this;
+            this._context = _context;
+            this._columnFormatters = _columnFormatters;
+            this._activatedRoute = _activatedRoute;
+            this._translateService = _translateService;
+            this._injector = _injector;
+            this._advancedFilterValueProvider = _advancedFilterValueProvider;
+            this._element = _element;
+            this._template = _template;
+            this._loading = _loading;
+            this._http = _http;
+            this._firstLoad = true;
+            this._showFooter = true;
+            this._showPaging = false;
+            this._id = getRandomIdentifier();
+            this.smartSelect = false;
+            this.configChanges = new rxjs.BehaviorSubject(null);
+            this.height = 800;
+            this.showActions = true;
+            this.autoLoad = true;
+            this.load = new i0.EventEmitter();
+            this.init = new i0.EventEmitter();
+            this.reload = new i0.EventEmitter();
+            this.select = new i0.EventEmitter();
+            this.selectedItems = new i0.EventEmitter();
+            this.scrollable = true;
+            this.serverSide = true;
+            this.lengthMenu = [50, 100, 200, 500];
+            this.paging = true;
+            this.pageLength = 25;
+            this.scrollY = 800;
+            this.scrollX = true;
+            /**
+             * Enables row selection. The defaulr value is false
+             */
+            this.selectable = false;
+            /**
+             * Enables or disable multiple selection. The default values is true.
+             */
+            this.multipleSelect = true;
+            /**
+             * Enables custom selection and hides select column. The default value is  false
+             */
+            this.customSelect = false;
+            this.selected = [];
+            this.unselected = [];
+            // initialize translate pipe
+            this.translator = new core.TranslatePipe(this._translateService, new TableTranslationChangeDetector());
+            jQuery.fn.dataTable.ext.classes.sPageButton = 'btn';
+            jQuery.fn.dataTable.ext.classes.sPageButtonActive = 'btn btn-light';
+            this.reloadSubscription = this.reload.subscribe(function (data) {
+                _this.fetch();
+            });
+        }
+        Object.defineProperty(AdvancedTableComponent.prototype, "config", {
+            get: function () {
+                return this._config;
+            },
+            /**
+             * Gets or sets table configuration
+             */
+            set: function (value) {
+                this._config = value;
+                // raise subscription
+                this.configChanges.next(this._config);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(AdvancedTableComponent.prototype, "showFooter", {
+            get: function () {
+                return this._showFooter;
+            },
+            /**
+             * Indicates whether table footer will be visible or not
+             */
+            set: function (value) {
+                this._showFooter = value;
+                // show or hide footer
+                if (this._element && this._element.nativeElement) {
+                    var element = this._element.nativeElement
+                        .querySelector('.dataTables_info');
+                    if (element == null) {
+                        return;
+                    }
+                    if (value) {
+                        element.classList.remove('d-none');
+                    }
+                    else {
+                        element.classList.add('d-none');
+                    }
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(AdvancedTableComponent.prototype, "showPaging", {
+            get: function () {
+                return this._showPaging;
+            },
+            /**
+             * Indicates whether paging information will be visible or not
+             */
+            set: function (value) {
+                this._showPaging = value;
+                // show or hide footer
+                if (this._element && this._element.nativeElement) {
+                    var element = this._element.nativeElement
+                        .querySelector('.dataTables_paginate');
+                    if (element == null) {
+                        return;
+                    }
+                    if (value) {
+                        jQuery(element).show();
+                    }
+                    else {
+                        jQuery(element).hide();
+                    }
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(AdvancedTableComponent.prototype, "query", {
+            get: function () {
+                return this._query;
+            },
+            /**
+             * Gets or sets an active query for this table
+             */
+            set: function (value) {
+                this._query = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        // simple search
+        AdvancedTableComponent.prototype.search = function (searchText) {
+            var _this = this;
+            this.query = this.query || this._context.model(this.config.model).asQueryable();
+            if (searchText && this.config.searchExpression) {
+                // validate search text in double quotes
+                if (/^"(.*?)"$/.test(searchText)) {
+                    this.query.setParam('$filter', this._template.transform(this.config.searchExpression, {
+                        text: searchText.replace(/^"|"$/g, '')
+                    }));
+                }
+                else {
+                    // try to split words
+                    var words = searchText.split(' ');
+                    // join words to a single filter
+                    var filter = words.map(function (word) {
+                        return _this._template.transform(_this.config.searchExpression, {
+                            text: word
+                        });
+                    }).join(' and ');
+                    // set filter
+                    this.query.setParam('$filter', filter);
+                }
+            }
+            else {
+                // clear filter
+                this.query.setParam('$filter', null);
+            }
+            this._firstLoad = false;
+            this.dataTable.draw();
+        };
+        AdvancedTableComponent.prototype.fetch = function (clearSelected) {
+            // if data table is null
+            if (this.dataTable == null) {
+                // initialize data table
+                return this.ngOnInit();
+            }
+            // clear selection if parameter is not declared or it's true
+            if (clearSelected == null || clearSelected === true) {
+                // set smart select to false
+                this.smartSelect = false;
+                // clear selected items
+                if (this.selected.length) {
+                    this.selected.splice(0, this.selected.length);
+                }
+                // clear unselected items
+                if (this.unselected.length) {
+                    this.unselected.splice(0, this.unselected.length);
+                }
+            }
+            // otherwise load data only
+            this.dataTable.draw();
+        };
+        AdvancedTableComponent.prototype.destroy = function () {
+            if (this.dataTable) {
+                this.dataTable.destroy();
+                this._firstLoad = true;
+                jQuery(this.table.nativeElement).empty();
+                this.dataTable = null;
+                // clear selected items
+                if (this.selected.length) {
+                    this.selected.splice(0, this.selected.length);
+                }
+                // clear unselected items
+                if (this.unselected.length) {
+                    this.unselected.splice(0, this.unselected.length);
+                }
+                // set smart select to false
+                this.smartSelect = false;
+            }
+        };
+        /**
+         * Selects the specified data row
+         */
+        AdvancedTableComponent.prototype.selectRow = function (row, silent) {
+            if (row) {
+                // get row
+                var rowNode_1 = row.node();
+                // if multiple select is false
+                if (this.multipleSelect === false) {
+                    if (this.customSelect === false) {
+                        // enumerate row
+                        this.dataTable.rows().nodes().each(function (node) {
+                            if (node !== rowNode_1) {
+                                jQuery(node).find(':checkbox').prop('checked', false);
+                            }
+                        });
+                    }
+                    else {
+                        this.dataTable.rows('.selected').nodes().each(function (node) {
+                            if (node !== rowNode_1) {
+                                jQuery(node).removeClass('selected');
+                            }
+                        });
+                    }
+                    // clear selected
+                    this.selected.splice(0, this.selected.length);
+                }
+                // if custom select mode is off
+                if (this.customSelect === false) {
+                    jQuery(rowNode_1).find(':checkbox').prop('checked', true);
+                }
+                else {
+                    // otherwise add class
+                    jQuery(row.node()).addClass('selected');
+                }
+                // get row data
+                var key_1 = this.config.columns[0].property || this.config.columns[0].name;
+                var data_1 = row.data();
+                // search selected items
+                var findIndex = this.selected.findIndex(function (x) {
+                    return x[key_1] === data_1[key_1];
+                });
+                if (findIndex >= 0) {
+                    // remove previously selected row
+                    this.selected.splice(findIndex, 1);
+                }
+                this.selected.push(data_1);
+                // validate unselected data
+                findIndex = this.unselected.findIndex(function (x) {
+                    return x[key_1] === data_1[key_1];
+                });
+                if (findIndex >= 0) {
+                    // remove previously selected row
+                    this.unselected.splice(findIndex, 1);
+                }
+                if (silent) {
+                    return;
+                }
+                this.selectedItems.emit(this.selected);
+            }
+        };
+        /**
+         * Unselects the specified data row if it's selected
+         */
+        AdvancedTableComponent.prototype.unSelectRow = function (row, silent) {
+            if (row) {
+                // if custom select mode is off
+                if (this.customSelect === false) {
+                    jQuery(row.node()).find(':checkbox').prop('checked', false);
+                }
+                else {
+                    // otherwise add class
+                    jQuery(row.node()).removeClass('selected');
+                }
+                // get first column key
+                var key_2 = this.config.columns[0].property || this.config.columns[0].name;
+                var data = row.data();
+                var id_1 = data[key_2];
+                var findIndex = this.selected.findIndex(function (x) {
+                    return x[key_2] === id_1;
+                });
+                if (findIndex >= 0) {
+                    this.selected.splice(findIndex, 1);
+                    if (this.smartSelect) {
+                        // add this row to unselected rows
+                        findIndex = this.unselected.findIndex(function (x) {
+                            return x[key_2] === id_1;
+                        });
+                        if (findIndex < 0) {
+                            this.unselected.push(data);
+                        }
+                    }
+                    if (silent) {
+                        return;
+                    }
+                    this.selectedItems.emit(this.selected);
+                }
+            }
+        };
+        AdvancedTableComponent.prototype.selectAny = function () {
+            var _this = this;
+            if (this.dataTable && this.selectable) {
+                // set smart select flag
+                this.smartSelect = true;
+                // select any row
+                this.dataTable.rows().every(function (index) {
+                    var row = _this.dataTable.row(index);
+                    _this.selectRow(row, true);
+                });
+                // emit selection event
+                this.selectedItems.emit(this.selected);
+            }
+        };
+        AdvancedTableComponent.prototype.selectNone = function () {
+            var _this = this;
+            if (this.dataTable && this.selectable) {
+                // set smart select flag
+                this.smartSelect = false;
+                this.unselected.splice(0, this.unselected.length);
+                // select any row
+                this.dataTable.rows().every(function (index) {
+                    var row = _this.dataTable.row(index);
+                    _this.unSelectRow(row, true);
+                });
+                this.selected.splice(0, this.selected.length);
+                // emit selection event
+                this.selectedItems.emit(this.selected);
+            }
+        };
+        AdvancedTableComponent.prototype.toggleSelectRow = function (row) {
+            if (row) {
+                var data = row.data();
+                // get first column key
+                var key_3 = this.config.columns[0].property || this.config.columns[0].name;
+                // get id
+                var id_2 = data[key_3];
+                // find if row is selected
+                var findIndex = this.selected.find(function (x) {
+                    return x[key_3] === id_2;
+                });
+                // if row is selected
+                if (findIndex >= 0) {
+                    // unselect
+                    this.unSelectRow(row);
+                }
+                else {
+                    this.selectRow(row);
+                }
+            }
+        };
+        // noinspection JSMethodCanBeStatic
+        /**
+         * Datatables column renderer for select checkbox
+         * @param data
+         * @param type
+         * @param row
+         * @param meta
+         * @private
+         */
+        AdvancedTableComponent.prototype._renderSelect = function (data, type, row, meta) {
+            // get column
+            var column = meta.settings.aoColumns[meta.col];
+            // render template
+            return this._template.transform("<input class=\"checkbox checkbox-theme s-row\" type=\"checkbox\"\n id=\"s-" + this._id + "-" + meta.row + "\" data-id=\"" + data + "\" /><label for=\"s-" + this._id + "-" + meta.row + "\">&nbsp;</label>", row);
+        };
+        AdvancedTableComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var self = this;
+            if (this.dataTable) {
+                this.destroy();
+            }
+            if (this.config) {
+                // parse properties
+                if (Object.prototype.hasOwnProperty.call(this.config, 'selectable')) {
+                    this.selectable = this.config.selectable;
+                }
+                if (Object.prototype.hasOwnProperty.call(this.config, 'multipleSelect')) {
+                    this.multipleSelect = this.config.multipleSelect;
+                }
+                // prepare configuration for columns
+                var tableColumns_1 = this.config.columns
+                    // filter action link column
+                    .filter(function (column) {
+                    if (column.formatter && column.formatter === 'ActionLinkFormatter' && _this.showActions === false) {
+                        return false;
+                    }
+                    return true;
+                }).map(function (column) {
+                    // convert column to advance table column
+                    return Object.assign(new ColumnFormatter(_this._injector), column);
+                }).map(function (column) {
+                    var columnDefinition = {
+                        data: column.property || column.name,
+                        defaultContent: column.hasOwnProperty('defaultContent') ? column.defaultContent : '',
+                        title: _this.translator.transform(column.title),
+                        sortable: column.hasOwnProperty('sortable') ? column.sortable : true,
+                        visible: column.hasOwnProperty('hidden') ? !column.hidden : true,
+                        name: column.name
+                    };
+                    if (column.className) {
+                        Object.assign(columnDefinition, {
+                            className: column.className
+                        });
+                    }
+                    else {
+                        Object.assign(columnDefinition, {
+                            className: ''
+                        });
+                    }
+                    if (column.formatters) {
+                        Object.assign(columnDefinition, {
+                            render: function (data, type, row, meta) {
+                                var result = data;
+                                column.formatters.forEach(function (columnFormatter) {
+                                    var formatter = self._columnFormatters[columnFormatter.formatter];
+                                    if (formatter && typeof formatter.render === 'function') {
+                                        column.formatString = columnFormatter.formatString;
+                                        column.formatOptions = columnFormatter.formatOptions;
+                                    }
+                                    result = formatter.render.bind(column)(result, type, row, meta);
+                                });
+                                delete column.formatString;
+                                delete column.formatOptions;
+                                return result;
+                            }
+                        });
+                    }
+                    if (column.formatter) {
+                        var formatter = self._columnFormatters[column.formatter];
+                        if (formatter && typeof formatter.render === 'function') {
+                            Object.assign(columnDefinition, {
+                                render: formatter.render.bind(column)
+                            });
+                        }
+                    }
+                    return columnDefinition;
+                });
+                // get table element
+                var tableElement_1 = jQuery(this.table.nativeElement);
+                // allow selection
+                if (this.selectable) {
+                    // get first column (as row primary key)
+                    // todo::allow row primary key configuration
+                    var firstColumn = this.config.columns[0];
+                    // add select column
+                    var selectColumnDefinition = {
+                        className: 'text-center pl-4 pr-0',
+                        data: firstColumn.property || firstColumn.name,
+                        defaultContent: '',
+                        title: '',
+                        sortable: false,
+                        visible: !this.customSelect,
+                        name: firstColumn.name,
+                    };
+                    // assign renderer
+                    Object.assign(selectColumnDefinition, {
+                        render: this._renderSelect.bind(this)
+                    });
+                    // and finally add column
+                    tableColumns_1.unshift(selectColumnDefinition);
+                    // user interface additions
+                    // handle page change event (a trick for firing draw.dt events)
+                    tableElement_1
+                        // for each page
+                        .on('page.dt', function ($event) {
+                        var info = _this.dataTable.page.info();
+                    })
+                        // handle draw events
+                        .on('draw.dt', function () {
+                        if (_this.customSelect) {
+                            // enable row selection event
+                            tableElement_1.find('tbody').on('click', 'tr', function () {
+                                // select row
+                                var row = self.dataTable.row(this);
+                                // add row
+                                self.select.emit(row);
+                            });
+                        }
+                        tableElement_1.find('input.s-row').on('click', _this.onSelectionChange.bind(_this));
+                        // make selection on current page
+                        var key = _this.config.columns[0].property;
+                        if (_this.selected.length > 0) {
+                            // enumerate selected items
+                            _this.selected.forEach(function (item) {
+                                // find row identifier
+                                var id = item[key];
+                                // if identifier is defined
+                                if (id != null) {
+                                    // try to find check element with this identifier in attribute data-id
+                                    tableElement_1.find("input[data-id='" + id + "']").prop('checked', true);
+                                }
+                            });
+                        }
+                        if (_this.smartSelect) {
+                            // select rows that are not selected
+                            // and do not included in unselected collection
+                            tableElement_1.find('input[data-id]').each(function (index, element) {
+                                // get data id
+                                if (_this.unselected.findIndex(function (x) {
+                                    // tslint:disable-next-line:triple-equals
+                                    return x[key] == jQuery(element).attr('data-id');
+                                }) < 0) {
+                                    _this.selectRow(_this.dataTable.row(index));
+                                }
+                            });
+                        }
+                        else if (_this.selected.length === 0) {
+                            tableElement_1.find('input[data-id]').prop('checked', false);
+                        }
+                    });
+                }
+                // initialize data table
+                var settings = {
+                    // set length menu
+                    lengthMenu: [5, 10, 50, 100, 200, 500],
+                    // hide length menu
+                    lengthChange: false,
+                    // enable search but hide search box (css)
+                    searching: true,
+                    // enable data processing
+                    processing: true,
+                    // enable getting server side data
+                    serverSide: this.serverSide,
+                    // enumerate table columns
+                    columns: tableColumns_1,
+                    order: [],
+                    // set scroll x
+                    scrollX: this.scrollX,
+                    dom: 'Bfrtip',
+                    autoWidth: false,
+                    buttons: [
+                        {
+                            extend: 'excel',
+                            filename: this.config.title,
+                            className: 'd-none',
+                            exportOptions: {
+                                columns: 'th:not(:first-child)'
+                            }
+                        }
+                    ],
+                    // define server data callback
+                    fnServerData: function (sSource, aoData, fnCallback, oSettings) {
+                        // if method is invoked for the first time
+                        if (self._firstLoad) {
+                            // disabled first load flag
+                            self._firstLoad = false;
+                            // if auto load is disabled
+                            if (self.autoLoad === false) {
+                                var emptyDataSet = {
+                                    recordsTotal: 0,
+                                    recordsFiltered: 0,
+                                    data: []
+                                };
+                                // emit empty data
+                                self.load.emit(emptyDataSet);
+                                // return empty data
+                                return fnCallback(emptyDataSet);
+                            }
+                        }
+                        // get activated route params
+                        var queryParams = self._activatedRoute.snapshot.queryParams;
+                        // get columns
+                        var columns = aoData[1].value;
+                        // get order expression
+                        var order = aoData[2].value;
+                        // get skip records param
+                        var skip = aoData[3].value;
+                        // get page size param
+                        var top = aoData[4].value;
+                        // get search value
+                        var searchText = aoData[5].value;
+                        // get data queryable
+                        var q = self._query instanceof client.ClientDataQueryable ? self._query : self._context.model(self.config.model).asQueryable();
+                        // apply paging params
+                        if (top) {
+                            q.take(top).skip(skip);
+                        }
+                        // apply order params
+                        if (order && order.length) {
+                            // get order query expression
+                            var orderByStr = order.map(function (expr) {
+                                return tableColumns_1[expr.column].name + ' ' + expr.dir || 'asc';
+                            }).join(',');
+                            // set order
+                            q.setParam('$orderby', orderByStr);
+                        }
+                        // configure $select parameter
+                        var select = self.config.columns.filter(function (column) {
+                            if (column.virtual === true) {
+                                return false;
+                            }
+                            return true;
+                        }).map(function (column) {
+                            if (column.property) {
+                                return column.name + ' as ' + column.property;
+                            }
+                            else {
+                                return column.name;
+                            }
+                        });
+                        q.select.apply(q, select);
+                        // configure $filter
+                        if (queryParams.$filter && queryParams.$filter.length) {
+                            // set route filter
+                            var qParams = q.getParams();
+                            q.setParam('$filter', null);
+                            var expressions = [queryParams.$filter];
+                            if (qParams.$filter) {
+                                expressions.push('(' + qParams.$filter + ')');
+                            }
+                            q.filter(expressions.join(' and '));
+                        }
+                        // check if query parameters contain filter
+                        if (queryParams.$expand && queryParams.$expand.length) {
+                            // set route $expand
+                            q.setParam('$expand', queryParams.$expand);
+                        }
+                        if (!q.getParams()['$orderby'] && self.config && self.config.defaults && self.config.defaults.orderBy) {
+                            q.setParam('$orderby', self.config.defaults.orderBy);
+                        }
+                        // append default filter
+                        if (self.config && self.config.defaults && self.config.defaults.filter) {
+                            return self._advancedFilterValueProvider.asyncBuildFilter(self.config.defaults.filter).then(function (defaultFilterString) {
+                                if (defaultFilterString) {
+                                    var qParams = q.getParams();
+                                    q.setParam('$filter', null);
+                                    var expressions = [defaultFilterString];
+                                    if (qParams.$filter) {
+                                        expressions.push('(' + qParams.$filter + ')');
+                                    }
+                                    q.filter(expressions.join(' and '));
+                                }
+                                self.lastQueryParams = q.getParams();
+                                q.getList().then(function (items) {
+                                    var dataSet = {
+                                        recordsTotal: items.total,
+                                        recordsFiltered: items.total,
+                                        data: items.value
+                                    };
+                                    if (items.total === 0) {
+                                        self.resetEmptyTable();
+                                    }
+                                    // emit load event
+                                    self.load.emit(dataSet);
+                                    // return data
+                                    return fnCallback(dataSet);
+                                });
+                            }).catch(function (err) {
+                                console.error('TABLES', err);
+                            });
+                        }
+                        self.lastQueryParams = q.getParams();
+                        q.getList().then(function (items) {
+                            var dataSet = {
+                                recordsTotal: items.total,
+                                recordsFiltered: items.total,
+                                data: items.value
+                            };
+                            if (items.total === 0) {
+                                self.resetEmptyTable();
+                            }
+                            // emit load event
+                            self.load.emit(dataSet);
+                            // return data
+                            return fnCallback(dataSet);
+                        }).catch(function (err) {
+                            console.error('TABLES', err);
+                        });
+                    },
+                    language: Object.assign({}, self.translator.transform('Tables.DataTable'), { emptyTable: ' ', processing: ' ' })
+                };
+                if (this.scrollable) {
+                    // set continuous scrolling
+                    Object.assign(settings, {
+                        scrollY: this.scrollY,
+                        scrollCollapse: false,
+                        scroller: {
+                            loadingIndicator: false,
+                            displayBuffer: 10
+                        },
+                    });
+                }
+                else {
+                    Object.assign(settings, {
+                        paging: this.paging,
+                        pageLength: this.pageLength
+                    });
+                }
+                if (this.selectable) ;
+                // handle init.dt event and emit local event
+                this.dataTable = tableElement_1.DataTable(settings);
+                tableElement_1.on('init.dt', function () {
+                    if (_this.dataTable == null) {
+                        return;
+                    }
+                    // restore default empty table html
+                    // (due to ng async binding)
+                    _this.init.emit(_this.dataTable);
+                });
+                // show or hide footer
+                if (!this.showFooter) {
+                    this._element.nativeElement
+                        .querySelector('.dataTables_info').classList.add('d-none');
+                }
+                // show or hide pager
+                if (this.showPaging) {
+                    this.showPaging = true;
+                }
+            }
+        };
+        Object.defineProperty(AdvancedTableComponent.prototype, "lastQuery", {
+            get: function () {
+                var _this = this;
+                if (this.config == null) {
+                    return null;
+                }
+                if (this.lastQueryParams == null) {
+                    return null;
+                }
+                var q = this._context.model(this.config.model).asQueryable();
+                Object.keys(this.lastQueryParams).forEach(function (key) {
+                    q.setParam(key, _this.lastQueryParams[key]);
+                });
+                // return query
+                return q;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * Fetches and updates a single row
+         * @param find - Any object which is being converted to a query
+         */
+        AdvancedTableComponent.prototype.fetchOne = function (find) {
+            var _this = this;
+            if (find == null) {
+                return;
+            }
+            if (this.dataTable == null) {
+                return;
+            }
+            if (this.lastQueryParams == null) {
+                return;
+            }
+            // get rows
+            var rows = Array.from(this.dataTable.rows().data());
+            if (rows && rows.length) {
+                // find result
+                var findKeys_1 = Object.keys(find);
+                if (findKeys_1.length === 0) {
+                    // do nothing
+                    return;
+                }
+                // find row index by searching each property
+                var rowIndex_1 = rows.findIndex(function (row) {
+                    return findKeys_1.map(function (key) {
+                        return row[key] === find[key];
+                    }).filter(function (res) {
+                        return res === false;
+                    }).length === 0;
+                });
+                // if row has been found
+                if (rowIndex_1 >= 0) {
+                    var query_1 = this._context.model(this.config.model).asQueryable();
+                    // select attributes
+                    query_1.setParam('$select', this.lastQueryParams.$select);
+                    // apply filter for row
+                    findKeys_1.forEach(function (key) {
+                        var column = _this.config.columns.find(function (col) {
+                            return col.property === key || col.name === key;
+                        });
+                        if (column) {
+                            // get property or name
+                            var property = column.property || column.name;
+                            query_1.and(property).equal(find[key]);
+                        }
+                        else {
+                            query_1.and(key).equal(find[key]);
+                        }
+                    });
+                    // and finally get item
+                    return query_1.getItem().then(function (item) {
+                        // if item exists
+                        var row = _this.dataTable.row(rowIndex_1);
+                        var checked = jQuery(row.node()).find(':checkbox').prop('checked');
+                        if (item) {
+                            // redraw row
+                            row.data(item);
+                            jQuery(row.node()).find(':checkbox').on('click', _this.onSelectionChange.bind(_this));
+                            // if row is already selected
+                            if (checked) {
+                                _this.selectRow(row, true);
+                            }
+                        }
+                        return Promise.resolve();
+                    });
+                }
+            }
+            return Promise.resolve();
+        };
+        AdvancedTableComponent.prototype.ngOnDestroy = function () {
+            if (this.reloadSubscription) {
+                this.reloadSubscription.unsubscribe();
+            }
+        };
+        /**
+         * Handle selection change
+         * @param $event
+         */
+        AdvancedTableComponent.prototype.onSelectionChange = function ($event) {
+            var input = $event.target;
+            // get row from id
+            var rowIndex = parseInt(/-(\d+)$/g.exec(input.id)[1], 10);
+            // get row
+            var row = this.dataTable.row(rowIndex).data();
+            // get row identifier
+            if (row) {
+                var key_4 = this.config.columns[0].property;
+                var id_3 = row[key_4];
+                var findItemIndex = this.selected.findIndex(function (item) {
+                    return item[key_4] === id_3;
+                });
+                if (input.checked) {
+                    if (findItemIndex < 0) {
+                        // add row to selected rows
+                        this.selected.push(row);
+                    }
+                }
+                else {
+                    if (findItemIndex >= 0) {
+                        // remove selected item
+                        this.selected.splice(findItemIndex, 1);
+                        if (this.smartSelect) {
+                            // add row to unselected rows
+                            findItemIndex = this.unselected.findIndex(function (item) {
+                                return item[key_4] === id_3;
+                            });
+                            if (findItemIndex < 0) {
+                                this.unselected.push(row);
+                            }
+                        }
+                    }
+                }
+            }
+        };
+        AdvancedTableComponent.prototype.resetEmptyTable = function () {
+            // this operation is important
+            // due to ng data binding
+            // empty table template has no translated text during ngOnInit()
+            if (this.dataTable && this.dataTable.context[0]) {
+                this.dataTable.context[0].oLanguage.sEmptyTable = this.emptyTable.nativeElement.innerHTML;
+            }
+        };
+        AdvancedTableComponent.prototype.clearEmptyTable = function () {
+            if (this.dataTable && this.dataTable.context[0]) {
+                this.dataTable.context[0].oLanguage.sEmptyTable = '';
+            }
+        };
+        AdvancedTableComponent.prototype.export = function () {
+            var element = document.querySelector('.dt-buttons .buttons-excel');
+            element.click();
+        };
+        AdvancedTableComponent.prototype.handleColumns = function (columnsToShow) {
+            var table = this.dataTable;
+            this.config.columns.slice(1).forEach(function (column, i) {
+                if (!column.hidden) {
+                    if (columnsToShow.includes(column.name)) {
+                        // noinspection TypeScriptValidateJSTypes
+                        table.column(column.name + ':name').visible(true);
+                    }
+                    else {
+                        // noinspection TypeScriptValidateJSTypes
+                        table.column(column.name + ':name').visible(false);
+                    }
+                }
+            });
+        };
+        AdvancedTableComponent.prototype.getConfig = function () {
+            return this.config;
+        };
+        AdvancedTableComponent.prototype.ngOnChanges = function (changes) {
+            var _this = this;
+            if (Object.prototype.hasOwnProperty.call(changes, 'configSrc')) {
+                if (changes.configSrc != null) {
+                    // load table configuration on change
+                    if (changes.configSrc.currentValue && (changes.configSrc.currentValue != changes.configSrc.previousValue)) {
+                        this._http.get(changes.configSrc.currentValue).toPromise().then(function (config) {
+                            // set configuration
+                            _this.config = config;
+                            // fetch and redraw
+                            _this.fetch();
+                        }).catch(function (err) {
+                            console.error('TABLES', 'An error occurred while loading table configuration.');
+                            console.error(err);
+                        });
+                    }
+                }
+            }
+        };
+        AdvancedTableComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'app-advanced-table',
+                        template: "\n    <table #table class=\"dataTable\">\n    </table>\n    <div #emptyTable class=\"d-none\">\n      <div>\n        <div class=\"mt-4\">\n          <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n        </div>\n        <div class=\"mt-4\">\n          <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n          <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n        </div>\n      </div>\n    </div>\n  ",
+                        encapsulation: i0.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:16px;padding-bottom:16px;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}.dataTables_wrapper .dataTables_processing{background:0 0;top:-40%;color:#73818e}.text-decoration-line-through{text-decoration:line-through!important}tr.removed .checkbox+label{visibility:hidden}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        AdvancedTableComponent.ctorParameters = function () {
+            return [
+                { type: i1$1.AngularDataContext },
+                { type: undefined, decorators: [{ type: i0.Inject, args: [COLUMN_FORMATTERS,] }] },
+                { type: i1.ActivatedRoute },
+                { type: core.TranslateService },
+                { type: i0.Injector },
+                { type: AdvancedFilterValueProvider },
+                { type: i0.ElementRef },
+                { type: i2.TemplatePipe },
+                { type: i2.LoadingService },
+                { type: http.HttpClient }
+            ];
+        };
+        AdvancedTableComponent.propDecorators = {
+            table: [{ type: i0.ViewChild, args: ['table',] }],
+            emptyTable: [{ type: i0.ViewChild, args: ['emptyTable',] }],
+            loadingTable: [{ type: i0.ViewChild, args: ['loadingTable',] }],
+            height: [{ type: i0.Input }],
+            showActions: [{ type: i0.Input }],
+            autoLoad: [{ type: i0.Input }],
+            load: [{ type: i0.Output, args: ['load',] }],
+            init: [{ type: i0.Output, args: ['init',] }],
+            reload: [{ type: i0.Input, args: ['reload',] }],
+            select: [{ type: i0.Output, args: ['select',] }],
+            selectedItems: [{ type: i0.Output, args: ['selectedItems',] }],
+            scrollable: [{ type: i0.Input }],
+            serverSide: [{ type: i0.Input }],
+            lengthMenu: [{ type: i0.Input }],
+            paging: [{ type: i0.Input }],
+            pageLength: [{ type: i0.Input }],
+            scrollY: [{ type: i0.Input }],
+            scrollX: [{ type: i0.Input }],
+            selectable: [{ type: i0.Input }],
+            multipleSelect: [{ type: i0.Input }],
+            customSelect: [{ type: i0.Input }],
+            selected: [{ type: i0.Input }],
+            configSrc: [{ type: i0.Input }],
+            config: [{ type: i0.Input, args: ['config',] }],
+            showFooter: [{ type: i0.Input, args: ['showFooter',] }],
+            showPaging: [{ type: i0.Input, args: ['showPaging',] }],
+            query: [{ type: i0.Input, args: ['query',] }]
+        };
+        return AdvancedTableComponent;
+    }());
+
+    var AdvancedListComponent = /** @class */ (function () {
+        function AdvancedListComponent(_context, _translateService, _activatedRoute, _errorService, _toastService, _modalService, _userActivityService) {
+            this._context = _context;
+            this._translateService = _translateService;
+            this._activatedRoute = _activatedRoute;
+            this._errorService = _errorService;
+            this._toastService = _toastService;
+            this._modalService = _modalService;
+            this._userActivityService = _userActivityService;
+            this.allowSaveOption = true;
+        }
+        AdvancedListComponent.prototype.ngOnDestroy = function () {
+            if (this.dataSubscription) {
+                this.dataSubscription.unsubscribe();
+            }
+            if (this.reloadSubscription) {
+                this.reloadSubscription.unsubscribe();
+            }
+            if (this.subscription) {
+                this.subscription.unsubscribe();
+            }
+        };
+        AdvancedListComponent.prototype.ngOnInit = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var metadata_1, err_1;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, this._context.getMetadata()];
+                        case 1:
+                            metadata_1 = _a.sent();
+                            // get route data
+                            this.dataSubscription = this._activatedRoute.data.subscribe(function (routeData) {
+                                // get entityType
+                                var re = new RegExp("^" + routeData.model + "$", 'ig');
+                                var entitySet = metadata_1.EntityContainer.EntitySet.find(function (x) {
+                                    return re.test(x.Name);
+                                });
+                                // if entity type is null
+                                if (entitySet == null) {
+                                    // navigate to error
+                                    return _this._errorService.navigateToError(new client.ResponseError('EntitySet Not Found', 404));
+                                }
+                                // get entity type
+                                var entityType = metadata_1.EntityType.find(function (x) {
+                                    return x.Name === entitySet.EntityType;
+                                });
+                                if (entityType == null) {
+                                    return _this._errorService.navigateToError(new client.ResponseError('EntityType Not Found', 404));
+                                }
+                                if (routeData.searchConfiguration) {
+                                    if (Object.prototype.hasOwnProperty.call(routeData.searchConfiguration, 'allowSave')) {
+                                        _this.allowSaveOption = routeData.searchConfiguration.allowSave;
+                                    }
+                                    _this.searchConfiguration = routeData.searchConfiguration;
+                                }
+                                if (routeData.tableConfiguration) {
+                                    _this.tableConfiguration = routeData.tableConfiguration;
+                                }
+                                if (routeData.description) {
+                                    _this.description = _this._translateService.instant(routeData.description);
+                                }
+                                if (routeData.longDescription) {
+                                    _this.longDescription = _this._translateService.instant(routeData.longDescription);
+                                }
+                                if (routeData.category) {
+                                    _this.category = _this._translateService.instant(routeData.category);
+                                }
+                                // clone default configuration
+                                var defaultConfiguration = AdvancedTableConfiguration.cast(_this.tableConfiguration, true);
+                                // correct edit button link
+                                var column = defaultConfiguration.columns.find(function (col) {
+                                    return col.formatter === 'ButtonFormatter' && col.formatString === '(modal:edit)';
+                                });
+                                if (column) {
+                                    var url_1 = [];
+                                    _this._activatedRoute.snapshot.pathFromRoot.forEach(function (route) {
+                                        url_1.push.apply(url_1, route.url);
+                                    });
+                                    column.formatString = "#/" + url_1.join('/') + "/(modal:${id}/edit)";
+                                }
+                                // create list configuration by assigning list entity set
+                                _this.table.config = Object.assign({
+                                    model: entitySet.Name
+                                }, defaultConfiguration);
+                                // fetch data
+                                _this.table.fetch(true);
+                                // do reload by using hidden fragment e.g. /classes#reload
+                                _this.reloadSubscription = _this._activatedRoute.fragment.subscribe(function (fragment) {
+                                    if (fragment && fragment === 'reload') {
+                                        _this._toastService.show(_this.description, _this._translateService.instant('Settings.OperationCompleted'));
+                                        _this.table.fetch(true);
+                                    }
+                                });
+                                // finally add user activity
+                                _this._userActivityService.setItem({
+                                    category: _this.category,
+                                    description: _this.description,
+                                    url: window.location.hash.substring(1),
+                                    dateCreated: new Date
+                                });
+                            });
+                            return [3 /*break*/, 3];
+                        case 2:
+                            err_1 = _a.sent();
+                            console.error(err_1);
+                            return [2 /*return*/, this._errorService.showError(err_1)];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        /**
+         * Data load event handler of advanced table component
+         * @param {AdvancedTableDataResult} data
+         */
+        AdvancedListComponent.prototype.onDataLoad = function (data) {
+            this.recordsTotal = data.recordsTotal;
+        };
+        /**
+         * Remove selected items
+         */
+        AdvancedListComponent.prototype.remove = function () {
+            var _this = this;
+            if (this.table && this.table.selected && this.table.selected.length) {
+                // get items to remove
+                var items_1 = this.table.selected;
+                return this._modalService.showWarningDialog(this._translateService.instant('Tables.RemoveItemsTitle'), this._translateService.instant('Tables.RemoveItemsMessage'), i2.DIALOG_BUTTONS.OkCancel).then(function (result) {
+                    if (result === 'ok') {
+                        _this._context.model(_this.table.config.model).remove(items_1).then(function () {
+                            _this._toastService.show(_this.description + ':' + _this._translateService.instant('Tables.RemoveItemMessage.title'), _this._translateService.instant((items_1.length === 1 ?
+                                'Tables.RemoveItemMessage.one' : 'Tables.RemoveItemMessage.many'), { value: items_1.length }));
+                            _this.table.fetch(true);
+                        }).catch(function (err) {
+                            _this._errorService.showError(err, {
+                                continueLink: '.'
+                            });
+                        });
+                    }
+                });
+            }
+        };
+        AdvancedListComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'app-advanced-list',
+                        template: "<div>\n  <div class=\"row\" *ngIf=\"description\">\n    <div class=\"col-auto\">\n      <h2>{{description}}</h2>\n      <p *ngIf=\"longDescription\">{{longDescription}}</p>\n    </div>\n  </div>\n  <div class=\"row\" *ngIf=\"searchConfiguration\">\n    <div class=\"col-12\" [ngVar]=\"{}\" #filter=\"ngVar\">\n      <app-advanced-table-search #advancedSearch [(filter)]=\"filter.value\" [collapsed]=\"true\" [table]=\"table\" [allowSave]=\"allowSaveOption\">\n        <advanced-search>\n          <app-advanced-search-form [form]=\"searchConfiguration\" (filterChange)=\"advancedSearch.asyncAdvancedSearch()\" #search [(filter)]=\"filter.value\"></app-advanced-search-form>\n        </advanced-search>\n      </app-advanced-table-search>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-auto mt-4\">\n      <div class=\"font-xl text-secondary\" *ngIf=\"recordsTotal > 1\">\n        <span>{{recordsTotal}}</span><span>&nbsp;</span><span [translate]=\"'Tables.Items'\"></span>\n      </div>\n      <div class=\"font-xl text-secondary\" *ngIf=\"recordsTotal === 1\">\n        <span>{{recordsTotal}}</span><span>&nbsp;</span><span [translate]=\"'Tables.Item'\"></span>\n      </div>\n    </div>\n    <div class=\"pull-right ml-auto mr-3 mt-3\">\n      <div class=\"font-lg btn-toolbar mt-3\">\n        <a *ngIf=\"table && table.selected && table.selected.length\"\n          class=\"text-danger text-decoration-none mr-2\" href=\"javascript:void(0)\" (click)=\"remove()\">\n          <span>-</span><span>&nbsp;</span><span [translate]=\"'Tables.RemoveItem'\"></span>\n        </a>\n        <a class=\"text-indigo text-decoration-none\" [routerLink]=\"['.', { outlets:{ modal:'add'} }]\">\n          <span>+</span><span>&nbsp;</span><span [translate]=\"'Tables.AddItem'\"></span>\n        </a>\n      </div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-12 mb-4\">\n      <app-advanced-table [selectable]=\"true\" #table\n      [autoLoad]=false\n      [showFooter]=\"false\"\n      (load)=\"onDataLoad($event)\" [height]=\"600\"></app-advanced-table>\n    </div>\n  </div>\n  <router-modal></router-modal>\n</div>\n"
+                    }] }
+        ];
+        /** @nocollapse */
+        AdvancedListComponent.ctorParameters = function () {
+            return [
+                { type: i1$1.AngularDataContext },
+                { type: core.TranslateService },
+                { type: i1.ActivatedRoute },
+                { type: i2.ErrorService },
+                { type: i2.ToastService },
+                { type: i2.ModalService },
+                { type: i2.UserActivityService }
+            ];
+        };
+        AdvancedListComponent.propDecorators = {
+            entitySet: [{ type: i0.Input, args: ['entitySet',] }],
+            category: [{ type: i0.Input, args: ['category',] }],
+            description: [{ type: i0.Input, args: ['description',] }],
+            longDescription: [{ type: i0.Input, args: ['longDescription',] }],
+            tableConfiguration: [{ type: i0.Input, args: ['tableConfiguration',] }],
+            searchConfiguration: [{ type: i0.Input, args: ['searchConfiguration',] }],
+            table: [{ type: i0.ViewChild, args: ['table',] }],
+            allowSaveOption: [{ type: i0.Input, args: ['allowSaveOption',] }]
+        };
+        return AdvancedListComponent;
+    }());
+
+    var AdvancedRowActionComponent = /** @class */ (function (_super) {
+        __extends(AdvancedRowActionComponent, _super);
+        function AdvancedRowActionComponent(router, activatedRoute, _translateService, _context, _errorService, _modalService, _appEvent) {
+            var _this = _super.call(this, router, activatedRoute) || this;
+            _this._translateService = _translateService;
+            _this._context = _context;
+            _this._errorService = _errorService;
+            _this._modalService = _modalService;
+            _this._appEvent = _appEvent;
+            _this.modalIcon = 'fas fa-project-diagram';
+            _this.progressType = 'indigo';
+            _this.errorMessage = 'Tables.Actions.CompletedWithErrors';
+            _this.loading = false;
+            _this.refresh = new i0.EventEmitter();
+            // set modal size
+            _this.modalClass = 'modal-lg';
+            // set modal title
+            _this.modalTitle = 'Tables.Actions.Label';
+            // disable ok button
+            _this.okButtonDisabled = false;
+            // set button text
+            _this.okButtonText = 'Tables.Actions.Start';
+            return _this;
+        }
+        Object.defineProperty(AdvancedRowActionComponent.prototype, "form", {
+            get: function () {
+                return this.formComponent;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        AdvancedRowActionComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.refreshSubscription = this.refresh.subscribe(function (value) {
+                if (value && value.progress) {
+                    var progress = 0;
+                    if (value.progress < 0) {
+                        progress = 0;
+                    }
+                    else if (value.progress > 100) {
+                        progress = 100;
+                    }
+                    else {
+                        progress = value.progress;
+                    }
+                    _this.progressComponent.value = progress;
+                }
+            });
+        };
+        AdvancedRowActionComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            if (this.formComponent && this.formComponent.form) {
+                this.okButtonDisabled = true;
+                this.invalidSubscription = this.formComponent.form.change.subscribe(function (event) {
+                    if (Object.prototype.hasOwnProperty.call(event, "isValid") && (event.changed != null)) {
+                        _this.okButtonDisabled = !event.isValid;
+                    }
+                });
+            }
+        };
+        AdvancedRowActionComponent.prototype.ngOnDestroy = function () {
+            if (this.refreshSubscription) {
+                this.refreshSubscription.unsubscribe();
+            }
+            if (this.executeSubscription) {
+                this.executeSubscription.unsubscribe();
+            }
+            if (this.invalidSubscription) {
+                this.invalidSubscription.unsubscribe();
+            }
+        };
+        AdvancedRowActionComponent.prototype.cancel = function () {
+            if (this.loading) {
+                return;
+            }
+            // close
+            if (this._modalService.modalRef) {
+                return this._modalService.modalRef.hide();
+            }
+        };
+        AdvancedRowActionComponent.prototype.ok = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    try {
+                        this.loading = true;
+                        this.lastError = null;
+                        if (this.formComponent && this.formComponent.form &&
+                            this.formComponent.form.formio && this.formComponent.form.formio.data) {
+                            // set data
+                            this.data = this.formComponent.form.formio.data;
+                        }
+                        // do action
+                        this.execute.subscribe(function (result) {
+                            _this.loading = false;
+                            _this.refresh.emit({
+                                progress: 100
+                            });
+                            if (result && result.errors && result.errors > 0) {
+                                // show message for partial success
+                                if (result.errors === 1) {
+                                    _this.lastError = new Error(_this._translateService.instant(_this.errorMessage + ".Description.One"));
+                                }
+                                else {
+                                    _this.lastError = new Error(_this._translateService.instant(_this.errorMessage + ".Description.Many", result));
+                                }
+                                _this.refresh.emit({
+                                    progress: 1
+                                });
+                                return;
+                            }
+                            if (_this._modalService.modalRef) {
+                                _this._modalService.modalRef.hide();
+                            }
+                        }, function (err) {
+                            _this.loading = false;
+                            _this.lastError = err;
+                            _this.refresh.emit({
+                                progress: 0
+                            });
+                        });
+                    }
+                    catch (err) {
+                        this.loading = false;
+                        this.lastError = err;
+                    }
+                    return [2 /*return*/];
+                });
+            });
+        };
+        AdvancedRowActionComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'app-advanced-row-action',
+                        template: "<div>\n    <div class=\"modal-header\" *ngIf=\"modalTitle\">\n        <h5 class=\"modal-title\">{{modalTitle | translate}}</h5>\n        <button (click)=\"cancel()\" [disabled]=\"loading\"\n                type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Cancel\">\n            <span aria-hidden=\"true\">&times;</span>\n        </button>\n    </div>\n    <div class=\"modal-body pt-0 mt-2 pb-0\">\n        <div class=\"row\" *ngIf=\"lastError\">\n            <div class=\"col-12\">\n                <div class=\"alert alert-warning\" role=\"alert\">\n                    <span>{{ 'Tables.Actions.CompletedWithErrors.Title' | translate }}</span><br>\n                    <small *ngIf=\"lastError.status >= 0\" [translate]=\"'E' + lastError.status + '.message'\"></small>\n                    <small *ngIf=\"lastError.status == null\">{{lastError.message}}</small>\n                </div>\n            </div>\n        </div>\n        <div class=\"row\" *ngIf=\"description\">\n          <div class=\"col-12 mb-3\">\n              <div class=\"text-justify\">\n                  {{description | translate}}\n              </div>\n          </div>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-12\">\n                <div *ngIf=\"items && items.length > 1\" [translate]=\"'Tables.Actions.ActionMessage.Many'\"  [translateParams]=\"items\"></div>\n                <div *ngIf=\"items && items.length === 1\" [translate]=\"'Tables.Actions.ActionMessage.One'\"></div>\n                <div class=\"font-weight-bold text-danger\" *ngIf=\"items && items.length <= 0\" [translate]=\"'Tables.Actions.ActionMessage.None'\"></div>\n              <div class=\"pt-2 font-weight-bold text-danger\" *ngIf=\"additionalMessage && items && items.length <= 0\">{{additionalMessage}}</div>\n            </div>\n        </div>\n      <div class=\"row pt-3\" *ngIf=\"formTemplate\">\n        <div class=\"col-12 mb-3\">\n          <div>\n            <advanced-form-edit #formComponent [formName]=\"formTemplate\" [(data)]=\"data\"></advanced-form-edit>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"row mt-3\">\n            <div class=\"col-12\">\n                    <progressbar #progress [type]=\"progressType\" [max]=\"100\">\n                    </progressbar>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"modal-footer justify-content-end\">\n        <button [disabled]=\"okButtonDisabled || loading || (items && items.length === 0)\" (click)=\"ok()\"\n                type=\"button\" [ngClass]=\"okButtonClass\">\n            {{okButtonText | translate}}\n        </button>\n        <button [disabled]=\"cancelButtonDisabled || loading\"\n                (click)=\"cancel()\"  type=\"button\" [ngClass]=\"cancelButtonClass\" data-dismiss=\"modal\">\n            {{cancelButtonText | translate}}\n        </button>\n    </div>\n</div>\n",
+                        encapsulation: i0.ViewEncapsulation.None,
+                        styles: ["\n        .fa-1_5x {\n            font-size: 1.5rem;\n        }\n        .form-control:disabled, .form-control[readonly] {\n            background-color: inherit;\n        }\n        .form-check.checkbox {\n          position: relative\n        }\n        "]
+                    }] }
+        ];
+        /** @nocollapse */
+        AdvancedRowActionComponent.ctorParameters = function () {
+            return [
+                { type: i1.Router },
+                { type: i1.ActivatedRoute },
+                { type: core.TranslateService },
+                { type: i1$1.AngularDataContext },
+                { type: i2.ErrorService },
+                { type: i2.ModalService },
+                { type: i2.AppEventService }
+            ];
+        };
+        AdvancedRowActionComponent.propDecorators = {
+            items: [{ type: i0.Input }],
+            modalIcon: [{ type: i0.Input }],
+            description: [{ type: i0.Input }],
+            formTemplate: [{ type: i0.Input }],
+            progressType: [{ type: i0.Input }],
+            data: [{ type: i0.Output }],
+            additionalMessage: [{ type: i0.Input }],
+            errorMessage: [{ type: i0.Input }],
+            progressComponent: [{ type: i0.ViewChild, args: ['progress',] }],
+            formComponent: [{ type: i0.ViewChild, args: ['formComponent',] }],
+            refresh: [{ type: i0.Input }],
+            execute: [{ type: i0.Input }]
+        };
+        return AdvancedRowActionComponent;
+    }(routing.RouterModalOkCancel));
+
+    var AdvancedTableSearchBaseComponent = /** @class */ (function () {
+        function AdvancedTableSearchBaseComponent() {
+            this.filterChange = new i0.EventEmitter();
+        }
+        Object.defineProperty(AdvancedTableSearchBaseComponent.prototype, "filter", {
+            get: function () {
+                return this._filter;
+            },
+            set: function (value) {
+                this._filter = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        AdvancedTableSearchBaseComponent.prototype.onKeyEnter = function (event) {
+            if (event.code === 'Enter') {
+                this.filterChange.emit(this._filter);
+            }
+        };
+        AdvancedTableSearchBaseComponent.propDecorators = {
+            filterChange: [{ type: i0.Output }],
+            filter: [{ type: i0.Input }]
+        };
+        return AdvancedTableSearchBaseComponent;
+    }());
+
+    var AdvancedSearchFormComponent = /** @class */ (function (_super) {
+        __extends(AdvancedSearchFormComponent, _super);
+        function AdvancedSearchFormComponent(_context, _translateService, _activatedRoute, _http) {
+            var _this = _super.call(this) || this;
+            _this._context = _context;
+            _this._translateService = _translateService;
+            _this._activatedRoute = _activatedRoute;
+            _this._http = _http;
+            _this.form = {};
+            _this.refreshForm = new i0.EventEmitter();
+            _this.submission = { data: {} };
+            _this.loading = true;
+            return _this;
+        }
+        AdvancedSearchFormComponent.prototype.ngOnChanges = function (changes) {
+            var _this = this;
+            if (Object.prototype.hasOwnProperty.call(changes, 'form')) {
+                if (changes.form != null) {
+                    if (changes.form.currentValue &&
+                        changes.form.currentValue != changes.form.previousValue) {
+                        this.ngOnInit();
+                    }
+                }
+            }
+            if (Object.prototype.hasOwnProperty.call(changes, 'formSrc')) {
+                if (changes.formSrc != null) {
+                    if (changes.formSrc.currentValue &&
+                        changes.formSrc.currentValue != changes.formSrc.previousValue) {
+                        this._http.get(changes.formSrc.currentValue).toPromise().then(function (form) {
+                            // set form
+                            _this.form = form;
+                            // and init
+                            _this.ngOnInit();
+                        }).catch(function (err) {
+                            console.error('An error occurred while loading search configuration');
+                            console.error(err);
+                        });
+                    }
+                }
+            }
+            if (Object.prototype.hasOwnProperty.call(changes, 'filter')) {
+                if (changes.filter != null) {
+                    this.submission.data = changes.filter.currentValue || {};
+                    this.refreshForm.emit({
+                        submission: this.submission
+                    });
+                }
+            }
+        };
+        AdvancedSearchFormComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            if (this.form) {
+                new forms$1.ServiceUrlPreProcessor(this._context).parse(this.form);
+                new forms$1.TranslatePreProcessor(this._translateService).parse(this.form);
+                this.submission = {
+                    data: this.filter
+                };
+                this.refreshForm.emit({
+                    form: this.form
+                });
+                this.loading = false;
+                this.filterSubscription = this.filterChange.subscribe(function (filter) {
+                    _this.submission.data = filter;
+                    _this.refreshForm.emit({
+                        submission: _this.submission
+                    });
+                });
+            }
+        };
+        AdvancedSearchFormComponent.prototype.onChange = function (event) {
+            var _this = this;
+            Object.keys(this.formComponent.submission.data).forEach(function (key) {
+                if (Object.prototype.hasOwnProperty.call(_this.formComponent.submission.data, key)) {
+                    var value = _this.formComponent.submission.data[key];
+                    // the filter with type is a string and is not empty
+                    var isEmptyString = typeof value === 'string' && value.length === 0;
+                    if (!isEmptyString) {
+                        Object.defineProperty(_this.filter, key, {
+                            configurable: true,
+                            enumerable: true,
+                            value: value
+                        });
+                    }
+                    else {
+                        delete _this.filter[key];
+                    }
+                }
+            });
+        };
+        AdvancedSearchFormComponent.prototype.onFormLoad = function (form) {
+            var currentLang = this._translateService.currentLang;
+            this.formComponent.formio.i18next.options.resources[currentLang] = { translation: this._translateService.instant("Forms") };
+            this.formComponent.formio.language = currentLang;
+        };
+        AdvancedSearchFormComponent.prototype.ngAfterViewInit = function () {
+            //
+        };
+        AdvancedSearchFormComponent.prototype.ngOnDestroy = function () {
+            if (this.filterSubscription) {
+                this.filterSubscription.unsubscribe();
+            }
+        };
+        AdvancedSearchFormComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'app-advanced-search-form',
+                        template: "\n    <div class=\"p-4\">\n      <formio #formioComponent class=\"formio-search\" (keydown)=\"onKeyEnter($event)\" (change)=\"onChange($event)\" (formLoad)=\"onFormLoad($event)\"\n              [refresh]=\"refreshForm\" [submission]=\"submission\" [form]=\"form\"></formio>\n    </div>\n  ",
+                        encapsulation: i0.ViewEncapsulation.None,
+                        styles: ["formio.formio-search .form-group{margin-bottom:0}formio.formio-search .form-group .col-form-label{font-size:90%;padding-top:4px;padding-bottom:4px}.choices__list.choices__list--single .choices__item:first-child.choices__item--selectable{width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        AdvancedSearchFormComponent.ctorParameters = function () {
+            return [
+                { type: i1$1.AngularDataContext },
+                { type: core.TranslateService },
+                { type: i1.ActivatedRoute },
+                { type: http.HttpClient }
+            ];
+        };
+        AdvancedSearchFormComponent.propDecorators = {
+            formComponent: [{ type: i0.ViewChild, args: ['formioComponent',] }],
+            form: [{ type: i0.Input }],
+            formSrc: [{ type: i0.Input }],
+            refreshForm: [{ type: i0.Output }]
+        };
+        return AdvancedSearchFormComponent;
+    }(AdvancedTableSearchBaseComponent));
+
+    var AdvancedTableConfigurationResolver = /** @class */ (function () {
+        function AdvancedTableConfigurationResolver(_http) {
+            this._http = _http;
+        }
+        AdvancedTableConfigurationResolver.prototype.resolve = function (route, state) {
+            // get list
+            var list = route.data.list || route.params.list;
+            // get model
+            var model = route.data.model || route.params.model;
+            // get configuration
+            return this._http.get("assets/lists/" + model + "/" + list + ".json").toPromise();
+        };
+        AdvancedTableConfigurationResolver.decorators = [
+            { type: i0.Injectable }
+        ];
+        /** @nocollapse */
+        AdvancedTableConfigurationResolver.ctorParameters = function () {
+            return [
+                { type: http.HttpClient }
+            ];
+        };
+        return AdvancedTableConfigurationResolver;
+    }());
+    var AdvancedSearchConfigurationResolver = /** @class */ (function () {
+        function AdvancedSearchConfigurationResolver(_http) {
+            this._http = _http;
+        }
+        AdvancedSearchConfigurationResolver.prototype.resolve = function (route, state) {
+            // get list
+            var list = route.data.list || route.params.list;
+            // get model
+            var model = route.data.model || route.params.model;
+            // get configuration
+            return this._http.get("assets/lists/" + model + "/search." + list + ".json").toPromise();
+        };
+        AdvancedSearchConfigurationResolver.decorators = [
+            { type: i0.Injectable }
+        ];
+        /** @nocollapse */
+        AdvancedSearchConfigurationResolver.ctorParameters = function () {
+            return [
+                { type: http.HttpClient }
+            ];
+        };
+        return AdvancedSearchConfigurationResolver;
+    }());
+
+    var AdvancedTableSearchComponent = /** @class */ (function (_super) {
+        __extends(AdvancedTableSearchComponent, _super);
+        function AdvancedTableSearchComponent(_context, _activatedRoute, datePipe, _modalService, _userStorage, _translate, _advancedSearchValueProvider, _template, _router, _modal) {
+            var _this = _super.call(this) || this;
+            _this._context = _context;
+            _this._activatedRoute = _activatedRoute;
+            _this.datePipe = datePipe;
+            _this._modalService = _modalService;
+            _this._userStorage = _userStorage;
+            _this._translate = _translate;
+            _this._advancedSearchValueProvider = _advancedSearchValueProvider;
+            _this._template = _template;
+            _this._router = _router;
+            _this._modal = _modal;
+            _this.collapsed = true;
+            _this.allowSave = true;
+            _this.showMore = true;
+            _this.mergeQueryParams = true;
+            _this.viewChange = new i0.EventEmitter();
+            _this.userSearchList = [];
+            _this.selectedList = null;
+            return _this;
+        }
+        Object.defineProperty(AdvancedTableSearchComponent.prototype, "text", {
+            get: function () {
+                if (this.searchText) {
+                    return this.searchText.nativeElement.value;
+                }
+            },
+            set: function (value) {
+                if (this.searchText) {
+                    this.searchText.nativeElement.value = value;
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        AdvancedTableSearchComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.configChangesSubscription = this.table.configChanges.subscribe(function (config) {
+                if (config == null) {
+                    return;
+                }
+                // load user searches
+                _this.loadUserSearchList().then(function () {
+                    // if search component merges query params
+                    // (uses queryParams to apply filter)
+                    if (_this.mergeQueryParams) {
+                        _this.queryParamSubscription = _this._activatedRoute.queryParams.subscribe(function (queryParams) {
+                            _this.applyQueryParams(queryParams);
+                        });
+                    }
+                });
+            });
+        };
+        /**
+         * Applies query given by the queryParams of the activated route
+         * @param queryParams
+         */
+        AdvancedTableSearchComponent.prototype.applyQueryParams = function (queryParams) {
+            var _this = this;
+            this.filter = {};
+            if (Object.prototype.hasOwnProperty.call(queryParams, 'q')) {
+                // set collapsed
+                this.collapsed = true;
+                // search text
+                this.text = queryParams.q;
+                return this.table.search(this.text);
+            }
+            else {
+                this.text = '';
+            }
+            var filterParams = Object.assign({}, queryParams);
+            if (Object.prototype.hasOwnProperty.call(queryParams, 's')) {
+                // set collapsed
+                this.collapsed = false;
+                // find user search by name
+                if (this.userSearchList) {
+                    this.selectedList = this.userSearchList.find(function (item) {
+                        return item.name === queryParams.s;
+                    });
+                    if (this.selectedList) {
+                        filterParams = this.selectedList.filter;
+                    }
+                }
+            }
+            else {
+                this.selectedList = null;
+            }
+            Object.keys(filterParams).filter(function (key) {
+                // search criteria
+                if (_this.table && _this.table.config && _this.table.config.criteria) {
+                    return _this.table.config.criteria.find(function (item) {
+                        return item.name === key;
+                    });
+                }
+            }).forEach(function (key) {
+                var value = filterParams[key];
+                if (client.TextUtils.isNumber(value)) {
+                    value = parseFloat(filterParams[key]);
+                }
+                if (_this.filter[key] !== value) {
+                    // set value
+                    Object.defineProperty(_this.filter, key, {
+                        configurable: true,
+                        enumerable: true,
+                        writable: true,
+                        value: value
+                    });
+                }
+                if (_this.filter[key] != null) {
+                    _this.collapsed = false;
+                }
+            });
+            // call filterChange event to apply change to advanced search children
+            this.filterChange.emit(this.filter);
+            // apply query
+            this.getQuery().then(function (query) {
+                // if table query is null
+                if (_this.table.query == null) {
+                    // set query
+                    _this.table.query = query;
+                }
+                else {
+                    if (query != null) {
+                        var params = query.getParams();
+                        // otherwise set filter params
+                        _this.table.query.setParam('$filter', params.$filter);
+                    }
+                    else {
+                        _this.table.query.setParam('$filter', null);
+                    }
+                }
+                // and finally fetch data
+                _this.table.fetch(true);
+            });
+        };
+        AdvancedTableSearchComponent.prototype.ngOnDestroy = function () {
+            if (this.queryParamSubscription) {
+                this.queryParamSubscription.unsubscribe();
+            }
+            if (this.configChangesSubscription) {
+                this.configChangesSubscription.unsubscribe();
+            }
+        };
+        AdvancedTableSearchComponent.prototype.ngAfterViewInit = function () {
+        };
+        AdvancedTableSearchComponent.prototype.onSearchKeyDown = function (event) {
+            if (this.table && event.keyCode === 13) {
+                // get search text
+                var searchText = event.target.value;
+                // merge query params ?
+                if (this.mergeQueryParams) {
+                    var queryParams_1 = {
+                        q: searchText
+                    };
+                    if (this.table.config && this.table.config.criteria) {
+                        this.table.config.criteria.forEach(function (item) {
+                            Object.defineProperty(queryParams_1, item.name, {
+                                configurable: true,
+                                enumerable: true,
+                                writable: true,
+                                value: null
+                            });
+                        });
+                    }
+                    // try to apply filter by appending query params
+                    return this._router.navigate([], {
+                        relativeTo: this._activatedRoute,
+                        queryParams: queryParams_1,
+                        queryParamsHandling: 'merge'
+                    });
+                }
+                // otherwise do search
+                this.table.search(searchText);
+                return false;
+            }
+        };
+        AdvancedTableSearchComponent.prototype.transformDate = function (date) {
+            date = this.datePipe.transform(date, 'MM/dd/yyyy'); // whatever format you need.
+            return date;
+        };
+        AdvancedTableSearchComponent.prototype.convertToString = function (nameFilter) {
+            var name = '';
+            if (nameFilter != null) {
+                name = nameFilter.toString();
+            }
+            return name;
+        };
+        //  Load saved criteria searches user has stored before
+        AdvancedTableSearchComponent.prototype.loadUserSearchList = function () {
+            var _this = this;
+            this.storageKey = 'tables/' + this.table.config.model + '/searches';
+            return this._userStorage.getItem(this.storageKey).then(function (data) {
+                var list = data.value || [];
+                // if table configuration has pre-defined searches
+                if (_this.table && _this.table.config.searches && _this.table.config.searches.length) {
+                    // add pre-defined lists
+                    list.push.apply(list, _this.table.config.searches.map(function (x) {
+                        x.readOnly = true; // as readonly
+                        x.name = _this._translate.instant(x.name);
+                        return x;
+                    }));
+                }
+                // set user search list
+                _this.userSearchList = list;
+                return Promise.resolve();
+            }).catch(function (err) {
+                // DO NOT THROW ERROR
+                // todo: notify component for this error in order to disable some actions
+                console.error('An error occurred while getting user search list');
+                console.error(err);
+                return Promise.resolve();
+            });
+        };
+        AdvancedTableSearchComponent.prototype.onSelectUserSearch = function (event) {
+            if (this.selectedList) {
+                var listFound = this.searchInListByName(this.selectedList.name);
+                if (listFound) {
+                    if (this.mergeQueryParams) {
+                        var queryParams_2 = { q: null, s: this.selectedList.name };
+                        // clear criteria if any
+                        this.table.config.criteria.forEach(function (item) {
+                            if (Object.prototype.hasOwnProperty.call(queryParams_2, item.name) === false) {
+                                // set null value
+                                Object.defineProperty(queryParams_2, item.name, {
+                                    configurable: true,
+                                    enumerable: true,
+                                    writable: true,
+                                    value: null
+                                });
+                            }
+                        });
+                        return this._router.navigate([], {
+                            relativeTo: this._activatedRoute,
+                            queryParams: queryParams_2,
+                            queryParamsHandling: 'merge'
+                        });
+                    }
+                    this.selectedList = listFound;
+                    this.filter = this.selectedList.filter;
+                    this.filterChange.emit(this.filter);
+                    return true;
+                }
+            }
+            else {
+                return this._router.navigate([], {
+                    relativeTo: this._activatedRoute,
+                    queryParams: { s: null },
+                    queryParamsHandling: 'merge'
+                });
+            }
+            return false;
+        };
+        AdvancedTableSearchComponent.prototype.searchInListByName = function (name) {
+            if (Array.isArray(this.userSearchList)) {
+                var listFound = this.userSearchList.find(function (x) { return x.name === name; });
+                if (listFound) {
+                    return listFound;
+                }
+                else {
+                    return false;
+                }
+            }
+        };
+        //  Update list item contents with given content (Search by object name property)
+        AdvancedTableSearchComponent.prototype.updateSavedSearchListItemByName = function (name, newItem) {
+            var itemInList = this.userSearchList.find(function (x) { return x.name === name; });
+            var index = this.userSearchList.indexOf(itemInList);
+            this.userSearchList[index] = newItem;
+            this.selectedList = this.userSearchList[index];
+        };
+        //  Update list item contents with given content (Search by object)
+        AdvancedTableSearchComponent.prototype.updateSavedSearchListItemByObject = function (itemInList, newItem) {
+            var index = this.userSearchList.indexOf(itemInList);
+            this.userSearchList[index] = newItem;
+            this.selectedList = this.userSearchList[index];
+        };
+        //  Delete list item from list
+        AdvancedTableSearchComponent.prototype.deleteItemFromSavedSearchListByObject = function (itemInList) {
+            this.userSearchList = this.userSearchList.filter(function (item) { return item !== itemInList; });
+            this.selectedList = null;
+            this.filter = {};
+            this.advancedSearch(true);
+            this.uploadListOnUserStorage();
+        };
+        //  User chose to save its advanced form search criteria
+        AdvancedTableSearchComponent.prototype.saveSearch = function (templateToLoad, newList) {
+            if (newList === void 0) {
+                newList = true;
+            }
+            if (this.table.config.model) {
+                //      Set the corresponding key to its list and show a confirmation modal window
+                this.storageKey = "tables/" + this.table.config.model + "/searches";
+                if (this.filter && Object.keys(this.filter).length) {
+                    //      User wants to save an existing list from the dropdown
+                    if (!newList && this.selectedList) {
+                        var newItem = { 'name': this.selectedList.name, 'filter': __assign({}, this.filter) };
+                        this.updateSavedSearchListItemByObject(this.selectedList, newItem);
+                        this.uploadListOnUserStorage();
+                        //      User wants to save a new list
+                    }
+                    else {
+                        this.modalRef = this._modalService.show(templateToLoad);
+                    }
+                }
+                else {
+                    //        User did not define any criteria
+                    this._modal.showWarningDialog(this._translate.instant('AdvancedSearch.Modal.Title'), this._translate.instant('AdvancedSearch.Modal.EmptyCriteriaList'), i2.DIALOG_BUTTONS.Ok);
+                }
+            }
+            else {
+                this._modal.showWarningDialog(this._translate.instant('AdvancedSearch.Modal.Title'), this._translate.instant('AdvancedSearch.Modal.NoListDefined'), i2.DIALOG_BUTTONS.Ok);
+            }
+        };
+        //  User Accepted => Save list and Close modal
+        AdvancedTableSearchComponent.prototype.confirmModal = function (saveFormName) {
+            //    name given and list name is unique
+            if (saveFormName && !(this.searchInListByName(saveFormName))) {
+                var newInsertedValue = { 'name': saveFormName, 'filter': __assign({}, this.filter) };
+                if (this.userSearchList && this.userSearchList.length !== 0) {
+                    this.userSearchList.push(newInsertedValue);
+                    this.storageValue = this.userSearchList;
+                    this.selectedList = newInsertedValue;
+                }
+                else {
+                    this.storageValue = [newInsertedValue];
+                    this.userSearchList = this.storageValue;
+                    this.selectedList = newInsertedValue;
+                }
+                this.uploadListOnUserStorage();
+                this.modalRef.hide();
+            }
+            else if (saveFormName && (this.searchInListByName(saveFormName))) {
+                //      User should insert a different name cause this one is already in use
+                alert(this._translate.instant('AdvancedSearch.Modal.TitleOnListAlreadyCreated'));
+            }
+            else {
+                //      User did not insert any text
+                alert(this._translate.instant('AdvancedSearch.Modal.TitleOnUserError'));
+            }
+        };
+        //  User declined => Close modal
+        AdvancedTableSearchComponent.prototype.closeModal = function () {
+            this.modalRef.hide();
+        };
+        //  Upload user's criteria on User Storage
+        AdvancedTableSearchComponent.prototype.uploadListOnUserStorage = function () {
+            this._userStorage.setItem(this.storageKey, this.userSearchList.filter(function (x) {
+                return !x.readOnly;
+            }));
+        };
+        /**
+         * @deprecated This method is going to be deprecated. Use search() method instead.
+         * @param {*} event
+         */
+        AdvancedTableSearchComponent.prototype.asyncAdvancedSearch = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                var query, queryParams_3;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(this.table && this.table.config && Array.isArray(this.table.config.criteria)))
+                                return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.getQuery()];
+                        case 1:
+                            query = _a.sent();
+                            if (this.mergeQueryParams) {
+                                this.selectedList = null;
+                                queryParams_3 = Object.assign({ q: null, s: null }, this.filter);
+                                // enumerate criteria
+                                this.table.config.criteria.forEach(function (item) {
+                                    if (Object.prototype.hasOwnProperty.call(queryParams_3, item.name) === false) {
+                                        // set null value
+                                        Object.defineProperty(queryParams_3, item.name, {
+                                            configurable: true,
+                                            enumerable: true,
+                                            writable: true,
+                                            value: null
+                                        });
+                                    }
+                                });
+                                return [2 /*return*/, this._router.navigate([], {
+                                        relativeTo: this._activatedRoute,
+                                        queryParams: queryParams_3,
+                                        queryParamsHandling: 'merge'
+                                    })];
+                            }
+                            if (this.table.query) {
+                                this.table.query.setParam('$filter', query.getParams()['$filter']);
+                            }
+                            else {
+                                this.table.query = query;
+                            }
+                            this.table.fetch();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        AdvancedTableSearchComponent.prototype.search = function () {
+            return this.asyncAdvancedSearch().then(function () {
+                // do nothing
+            });
+        };
+        AdvancedTableSearchComponent.prototype.getQuery = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var expressions_1, values_1, query;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            // on simple search return null
+                            if (this.collapsed) {
+                                return [2 /*return*/, null];
+                            }
+                            if (!(this.table && this.table.config && Array.isArray(this.table.config.criteria)))
+                                return [3 /*break*/, 2];
+                            expressions_1 = [];
+                            return [4 /*yield*/, this._advancedSearchValueProvider.getValues()];
+                        case 1:
+                            values_1 = _a.sent();
+                            this.table.config.criteria.forEach(function (x) {
+                                if (Object.prototype.hasOwnProperty.call(_this.filter, x.name)) {
+                                    var nameFilter = _this.convertToString(_this.filter[x.name]);
+                                    if (nameFilter.includes('GMT')) {
+                                        var newDate = _this.transformDate(_this.filter[x.name]);
+                                        expressions_1.push(_this._template.transform(x.filter, {
+                                            value: newDate
+                                        }));
+                                    }
+                                    else if (_this.filter[x.name] !== 'undefined') {
+                                        expressions_1.push(_this._template.transform(x.filter, Object.assign({
+                                            value: _this.filter[x.name]
+                                        }, values_1)));
+                                    }
+                                }
+                            });
+                            query = void 0;
+                            if (expressions_1 || expressions_1.length) {
+                                // create client query
+                                query = this._context.model(this.table.config.model).asQueryable();
+                                query.setParam('filter', expressions_1.join(' and '));
+                            }
+                            else {
+                                query = this._context.model(this.table.config.model).asQueryable();
+                            }
+                            return [2 /*return*/, query];
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        AdvancedTableSearchComponent.prototype.advancedSearch = function (event) {
+            return this.asyncAdvancedSearch(event);
+        };
+        AdvancedTableSearchComponent.prototype.clear = function () {
+            if (this.mergeQueryParams) {
+                this.selectedList = null;
+                var queryParams_4 = { q: null, s: null };
+                // enumerate criteria
+                this.table.config.criteria.forEach(function (item) {
+                    if (Object.prototype.hasOwnProperty.call(queryParams_4, item.name) === false) {
+                        // set null value
+                        Object.defineProperty(queryParams_4, item.name, {
+                            configurable: true,
+                            enumerable: true,
+                            writable: true,
+                            value: null
+                        });
+                    }
+                });
+                return this._router.navigate([], {
+                    relativeTo: this._activatedRoute,
+                    queryParams: queryParams_4,
+                    queryParamsHandling: 'merge'
+                });
+            }
+            else {
+                // clear filter
+                this.filter = {};
+                // clear list
+                this.selectedList = null;
+                // raise filter change event
+                this.filterChange.emit(this.filter);
+            }
+        };
+        Object.defineProperty(AdvancedTableSearchComponent.prototype, "viewState", {
+            /**
+             * Gets the view state of search control
+             */
+            get: function () {
+                return {
+                    advancedView: !this.collapsed
+                };
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * Switches view between simple and advanced search
+         */
+        AdvancedTableSearchComponent.prototype.toggleView = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    this.collapsed = !this.collapsed;
+                    // emit event for view status change
+                    this.viewChange.emit(this.viewState);
+                    return [2 /*return*/];
+                });
+            });
+        };
+        AdvancedTableSearchComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'app-advanced-table-search',
+                        template: "<div class=\"s--list-navbar d-none d-sm-block\">\n\n  <div id=\"collapse-header\" [ngClass]=\"{'show':collapsed}\" class=\"collapse multi-collapse\">\n    <form class=\"form-inline p-3 col\">\n      <div class=\"form-group col-7\" [ngClass]= \"{ 'col-12': !showMore }\">\n        <label class=\"pr-3\" for=\"searchText\" [translate]=\"'Tables.Search'\"></label>\n        <input (keydown)=\"onSearchKeyDown($event)\" spellcheck=\"false\" type=\"text\" id=\"searchText\" name=\"searchText\"\n          class=\"form-control col text-left\" placeholder=\"{{ 'Tables.SearchPlaceholder' | translate }}\" #searchText>\n      </div>\n      <div *ngIf=\"showMore\" class=\"col-5 text-right text-secondary\" id=\"heading3\">\n        <button class=\"d-inline-block btn btn-link collapsed float-right text-secondary text-decoration-none\"\n          type=\"button\"  (click)=\"toggleView();\">\n          <span class=\"d-none d-sm-inline\" [translate]=\"'AdvancedSearch.More'\"></span>\n          <i class=\"ml-2 pt-1 fa fa-chevron-down\"></i>\n        </button>\n      </div>\n    </form>\n  </div>\n\n  <div id=\"collapse3\" [ngClass]=\"{'show':!collapsed}\"  class=\"collapse multi-collapse\" aria-labelledby=\"heading3\">\n    <div class=\"row\">\n      <div class=\"col-sm-12\">\n        <div id=\"advanced-form\">\n          <ng-content select=\"advanced-search\"></ng-content>\n          <hr class=\"mt-0 mb-0\" width=\"97%\">\n          <div class=\"row\">\n            <div class=\"col-sm-12\">\n              <div class=\"form-inline pb-3 pt-3 pr-1 pl-1 col\">\n\n                <div class=\"form-group col-4\">\n                  <div class=\"d-flex flex-row w-100\" *ngIf=\"allowSave\">\n                    <label class=\"pr-3 d-none\" [translate]=\"'AdvancedSearch.SavedSearches'\"></label>\n                    <select *ngIf=\"userSearchList\" class=\"custom-select text-secondary flex col-12\" (change)=\"onSelectUserSearch($event)\" [(ngModel)]=\"selectedList\">\n                      <option [ngValue]=\"null\" [translate]=\"'AdvancedSearch.Choose'\"></option>\n                      <option  *ngFor=\"let item of userSearchList\" [ngValue]=\"item\">{{ item.name }}</option>\n                    </select>\n                    <select *ngIf=\"!userSearchList\" class=\"custom-select flex col-6\">\n                      <option [value]=\"null\" [translate]=\"'AdvancedSearch.Choose'\"></option>\n                    </select>\n                  </div>\n                </div>\n\n                <div class=\"col-3 d-flex flex-row w-100\">\n                  <div class=\"btn-group\" *ngIf=\"allowSave\" dropdown>\n                    <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"saveSearch(templateToUse, ( (selectedList && selectedList.readOnly) ? true : false ) )\" [translate]=\"'AdvancedSearch.SaveCurrentSearch'\"></button>\n                    <button type=\"button\" dropdownToggle class=\"btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                      <span class=\"sr-only\" [translate]=\"'AdvancedSearch.ToggleDropdown'\"></span>\n                    </button>\n\n                    <div class=\"dropdown-menu\" *dropdownMenu>\n                      <a [ngClass]=\"{'disabled': selectedList && selectedList.readOnly}\" class=\"dropdown-item\" (click)=\"saveSearch(templateToUse, false)\" [translate]=\"'AdvancedSearch.Save'\" href=\"javascript:void(0)\"></a>\n                      <a class=\"dropdown-item\" (click)=\"saveSearch(templateToUse)\" [translate]=\"'AdvancedSearch.SaveAs'\" href=\"javascript:void(0)\"></a>\n                      <div  class=\"dropdown-divider\"></div>\n                      <a [ngClass]=\"{'disabled': selectedList && selectedList.readOnly}\" class=\"dropdown-item\" (click)=\"deleteItemFromSavedSearchListByObject(selectedList)\" [translate]=\"'AdvancedSearch.Delete'\" href=\"javascript:void(0)\"></a>\n                    </div>\n                  </div>\n                </div>\n\n                <div class=\"col-5 text-right text-secondary\">\n                  <button type=\"button\" class=\"btn btn-light text-secondary pl-2 pr-2 mr-2\" (click)=\"clear()\">\n                    <i class=\"fa fa-eraser\"></i>\n                  </button>\n                  <button type=\"button\" class=\"btn btn-success pl-4 pr-4 mr-2\" (click)=\"advancedSearch($event);\"\n                    [translate]=\"'Tables.Search'\"></button>\n                  <button class=\"d-inline-block btn btn-link collapsed float-right text-secondary text-decoration-none\"\n                          type=\"button\" (click)=\"toggleView();\">\n                    <span class=\"d-none d-sm-inline\" [translate]=\"'AdvancedSearch.Less'\"></span>\n                    <i class=\"ml-2 pt-1 fa fa-chevron-up\"></i>\n                  </button>\n                </div>\n\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-template #templateToUse>\n    <div class=\"modal-header\">\n      <h4 class=\"modal-title pull-left\" [translate]=\"'AdvancedSearch.Modal.Title'\"></h4>\n      <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"modalRef.hide()\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    </div>\n    <div class=\"modal-body mt-0 mb-0 text-center\">\n      <div>\n        <p class=\"text-secondary text-left\" [translate]=\"'AdvancedSearch.Modal.Help'\"></p>\n      </div>\n      <form class=\"p-3 text-center\" #newListForm=\"ngForm\" >\n        <div [ngVar]=\"{ name: ( selectedList?.name ? ( selectedList?.name + ' (1)'  ) : null ) }\" #model=\"ngVar\">\n          <input [(ngModel)]=\"model.value.name\" [required]=\"true\"  id=\"newListName\" name=\"newListName\" type=\"text\" class=\"form-control\" placeholder=\"{{ 'AdvancedSearch.Modal.SaveNamePlaceholder' | translate }}\"/>\n          <div class=\"btn-group mt-4\">\n            <button [disabled]=\"newListForm.invalid\" type=\"button\" class=\"btn btn-primary\" (click)=\"confirmModal(model.value.name)\" [translate]=\"'AdvancedSearch.Modal.Accept'\"></button>\n            <button type=\"button\" class=\"btn btn-gray-300 text-white\" (click)=\"closeModal()\" [translate]=\"'AdvancedSearch.Modal.Close'\"></button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </ng-template>\n\n</div>\n",
+                        encapsulation: i0.ViewEncapsulation.None
+                    }] }
+        ];
+        /** @nocollapse */
+        AdvancedTableSearchComponent.ctorParameters = function () {
+            return [
+                { type: i1$1.AngularDataContext },
+                { type: i1.ActivatedRoute },
+                { type: common.DatePipe },
+                { type: modal.BsModalService },
+                { type: i2.UserStorageService },
+                { type: core.TranslateService },
+                { type: AdvancedFilterValueProvider },
+                { type: i2.TemplatePipe },
+                { type: i1.Router },
+                { type: i2.ModalService }
+            ];
+        };
+        AdvancedTableSearchComponent.propDecorators = {
+            table: [{ type: i0.Input }],
+            collapsed: [{ type: i0.Input }],
+            allowSave: [{ type: i0.Input }],
+            showMore: [{ type: i0.Input }],
+            mergeQueryParams: [{ type: i0.Input }],
+            searchText: [{ type: i0.ViewChild, args: ['searchText',] }],
+            viewChange: [{ type: i0.Output, args: ['viewChange',] }]
+        };
+        return AdvancedTableSearchComponent;
+    }(AdvancedTableSearchBaseComponent));
+
+    var FORMATTERS = {
+        ActionLinkFormatter: new ActionLinkFormatter(),
+        ButtonFormatter: new ButtonFormatter(),
+        DateTimeFormatter: new DateTimeFormatter(),
+        LanguageFormatter: new LanguageFormatter(),
+        LinkFormatter: new LinkFormatter(),
+        NestedPropertyFormatter: new NestedPropertyFormatter(),
+        NgClassFormatter: new NgClassFormatter(),
+        SelectRowFormatter: new SelectRowFormatter(),
+        TemplateFormatter: new TemplateFormatter(),
+        TranslationFormatter: new TranslationFormatter(),
+        TrueFalseFormatter: new TrueFalseFormatter()
+    };
+
+    // important: export this const due to AOT compilation errors
+    // see more https://angular.io/guide/aot-metadata-errors#only-initialized-variables
+    var AdvancedTableModalBaseTemplate = "\n<div>\n    <!-- search -->\n    <div class=\"row mt-3\">\n      <div class=\"col-12 col-lg-3\">\n        <div class=\"input-group mb-3\">\n          <input spellcheck=\"false\" type=\"text\"\n                 (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"searchText\"\n                 class=\"form-control bg-gray-100 border-0\"\n                 placeholder=\"{{'Tables.SearchPlaceholder' | translate}}\" aria-label=\"Search\" aria-describedby=\"basic-addon2\">\n          <div class=\"input-group-append\">\n            <button class=\"btn btn-default bg-gray-100 border-0\" type=\"button\">\n              <i class=\"fa fa-search text-secondary\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div #emptyTable class=\"d-none\">\n        <div>\n          <div class=\"mt-4\">\n            <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n          </div>\n          <div class=\"mt-4\">\n            <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n            <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n          </div>\n\n        </div>\n      </div>\n      <div class=\"col-12 col-lg-5\">\n        <div class=\"btn-toolbar\">\n          <button class=\"btn btn-gray-100\">\n            <i class=\"fa fa-sliders-h pr-2 text-secondary\" aria-hidden=\"true\"></i>{{'Tables.Filters' | translate}}\n          </button>\n          <div #dropdownFilter class=\"dropdown ml-3\" dropdown>\n            <button class=\"btn btn-gray-100 dropdown-toggle\"\n                    type=\"button\" id=\"dropdownDefaultFilters\"\n                    data-toggle=\"dropdown\" dropdownToggle>\n              {{ this.defaultFilter.name | translate }}\n            </button>\n            <div class=\"dropdown-menu\" aria-labelledby=\"dropdownDefaultFilters\" *dropdownMenu>\n              <a class=\"dropdown-item\" *ngFor=\"let filter of defaultFilters\" (click)=\"advancedSearch(filter.filter ? filter : '')\">\n                {{ filter.name | translate }}\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col text-lg-right mt-3 mt-lg-0\">\n        <button [disabled]=\"true\" class=\"btn rounded-pill btn-outline-theme\">\n          <span class=\"pr-2 font-lg\">+</span><span [translate]=\"'Tables.AddItem'\"></span>\n        </button>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-12\" [ngClass]=\"{ 'component-loading': loading}\">\n        <app-advanced-table #advancedTable (init)=\"onTableInit($event)\"\n                            (load)=\"onDataLoad($event)\"\n                            [selectable]=\"true\"\n                            [multipleSelect]=\"true\"\n                            [scrollX]=\"false\" [scrollY]=\"320\"\n                            [pageLength]=\"pageLength\"\n                            [scrollable]=\"false\" [showFooter]=\"false\"\n                            [showActions]=\"false\" [lengthMenu]=\"lengthMenu\"\n                            [config]=\"tableConfig\" [configSrc]=\"tableConfigSrc\"></app-advanced-table>\n      </div>\n    </div>\n    <div class=\"row mt-3 table-custom-pager\">\n      <div class=\"col-12 d-flex\" *ngIf=\"recordsTotal\">\n        <div class=\"mt-2 ml-auto mr-3 text-secondary\" [translate]=\"'Tables.RecordsPerPage'\"></div>\n        <div #dropdownLength class=\"dropdown mr-3\" dropdown>\n          <button class=\"btn btn-gray-100 dropdown-toggle\"\n                  type=\"button\" id=\"dropdownPageSize\" data-toggle=\"dropdown\"\n                  dropdownToggle>\n            {{pageLength}}\n          </button>\n          <div class=\"dropdown-menu\" aria-labelledby=\"dropdownPageSize\" *dropdownMenu>\n            <button (click)=\"setLength(item)\"\n                    class=\"dropdown-item dropdown-item-theme\"\n                    type=\"button\" *ngFor=\"let item of lengthMenu\">{{item}}</button>\n          </div>\n        </div>\n        <div class=\"mt-2 mr-2\" [translate]=\"'Tables.PageInfo'\" [translateParams]=\"pageInfo\"></div>\n        <button [disabled]=\"pageInfo && pageInfo.page === 0\" class=\"btn text-nowrap\" (click)=\"firstPage()\">\n          <i class=\"fa fa-chevron-left text-color-theme\"></i>\n          <i class=\"fa fa-chevron-left text-color-theme\"></i>\n        </button>\n        <button [disabled]=\"pageInfo && pageInfo.page===0\" class=\"btn\" (click)=\"previousPage()\">\n          <i class=\"fa fa-chevron-left text-color-theme\"></i>\n        </button>\n        <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn\" (click)=\"nextPage()\">\n          <i class=\"fa fa-chevron-right text-color-theme\"></i>\n        </button>\n        <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn text-nowrap\" (click)=\"lastPage()\">\n          <i class=\"fa fa-chevron-right text-color-theme\"></i>\n          <i class=\"fa fa-chevron-right text-color-theme\"></i>\n        </button>\n      </div>\n    </div>\n  </div>\n";
+    var AdvancedTableModalBaseComponent = /** @class */ (function (_super) {
+        __extends(AdvancedTableModalBaseComponent, _super);
+        function AdvancedTableModalBaseComponent(_router, _activatedRoute, _context, advancedFilterValueProvider, datePipe) {
+            var _this = _super.call(this, _router, _activatedRoute) || this;
+            _this._context = _context;
+            _this.advancedFilterValueProvider = advancedFilterValueProvider;
+            _this.datePipe = datePipe;
+            _this.pageLength = 25;
+            _this.lengthMenu = [5, 10, 25, 50, 100];
+            _this.recordsTotal = 0;
+            _this.loading = false;
+            _this.recordsFiltered = 0;
+            _this.defaultFilters = [AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER];
+            _this.defaultFilter = AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER;
+            _this.pageInfo = {
+                serverSide: true
+            };
+            _this.modalClass = 'modal-xl modal-table';
+            _this._template = new i2.TemplatePipe();
+            return _this;
+        }
+        AdvancedTableModalBaseComponent.prototype.ngAfterViewInit = function () {
+            //
+        };
+        AdvancedTableModalBaseComponent.prototype._getInputs = function (componentType) {
+            var props = componentType.__prop__metadata__;
+            var inputs = [];
+            if (props == null) {
+                return inputs;
+            }
+            Object.keys(props).forEach(function (prop) {
+                var member = props[prop][0];
+                if (member.ngMetadataName === 'Input') {
+                    inputs.push(prop);
+                }
+            });
+            return inputs.sort();
+        };
+        AdvancedTableModalBaseComponent.prototype.hasInputs = function () {
+            return [];
+        };
+        AdvancedTableModalBaseComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.okButtonText = 'Tables.Apply';
+            this.cancelButtonText = 'Tables.Cancel';
+            // get route data
+            this.subscription = this.activatedRoute.data.subscribe(function (data) {
+                // set modal title if any
+                if (data.title) {
+                    _this.modalTitle = data.title;
+                }
+                if (data.config) {
+                    _this.tableConfig = data.config;
+                }
+                if (_this.tableConfig) {
+                    _this.defaultFilters.push.apply(_this.defaultFilters, _this.tableConfig.searches);
+                }
+                // important: use hasInputs due to AOT compilation. Metadata properties cannot be used (e.g. @Input())
+                // because there are empty during runtime
+                // so we need to define manually input properties that are going to be bind through this process
+                // bind all inputs
+                var inputs = _this.hasInputs();
+                inputs.forEach(function (input) {
+                    if (Object.prototype.hasOwnProperty.call(data, input)) {
+                        _this[input] = data[input];
+                    }
+                });
+                _this.configChangesSubscription = _this.advancedTable.configChanges.subscribe(function (config) {
+                    if (_this.tableConfig) {
+                        // reset default filter
+                        _this.defaultFilter = AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER;
+                        // init filter
+                        _this.defaultFilters = [AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER];
+                        // add extra filters
+                        _this.defaultFilters.push.apply(_this.defaultFilters, _this.tableConfig.searches);
+                    }
+                });
+            });
+        };
+        AdvancedTableModalBaseComponent.prototype.cancel = function () {
+            return this.close();
+        };
+        AdvancedTableModalBaseComponent.prototype.ok = function () {
+            return this.close();
+        };
+        AdvancedTableModalBaseComponent.prototype.ngOnDestroy = function () {
+            if (this.subscription) {
+                this.subscription.unsubscribe();
+            }
+        };
+        AdvancedTableModalBaseComponent.prototype.onDataLoad = function (data) {
+            this.recordsTotal = data.recordsTotal;
+            this.recordsFiltered = data.recordsFiltered;
+            // get first page info (because page is not going to be fired for first page)
+            if (data.recordsTotal > 0 && this.pageInfo.recordsTotal === 0) {
+                this.pageInfo.recordsTotal = data.recordsTotal;
+            }
+        };
+        AdvancedTableModalBaseComponent.prototype.previousPage = function () {
+            // go to next page
+            // noinspection TypeScriptValidateJSTypes
+            this.advancedTable.dataTable.page('previous').draw('page');
+        };
+        AdvancedTableModalBaseComponent.prototype.nextPage = function () {
+            // go to next page
+            // noinspection TypeScriptValidateJSTypes
+            this.advancedTable.dataTable.page('next').draw('page');
+        };
+        AdvancedTableModalBaseComponent.prototype.onTableInit = function (dataTable) {
+            var self = this;
+            // get initial page info
+            var initialPageInfo = dataTable.page.info();
+            initialPageInfo.start += 1;
+            self.pageInfo = initialPageInfo;
+            // change emptyTableMessage
+            dataTable.context[0].oLanguage.sEmptyTable = this.emptyTable.nativeElement.innerHTML;
+            // bind page change event
+            dataTable.on('page.dt', function () {
+                var pageInfo = dataTable.page.info();
+                pageInfo.start += 1;
+                self.pageInfo = pageInfo;
+            });
+            // bind draw change event
+            dataTable.on('draw.dt', function () {
+                // for future use
+                self.loading = false;
+                var pageInfo = dataTable.page.info();
+                pageInfo.start += 1;
+                self.pageInfo = pageInfo;
+            });
+        };
+        AdvancedTableModalBaseComponent.prototype.firstPage = function () {
+            // go to first page
+            // noinspection TypeScriptValidateJSTypes
+            this.advancedTable.dataTable.page('first').draw('page');
+        };
+        AdvancedTableModalBaseComponent.prototype.lastPage = function () {
+            // go to last page
+            // noinspection TypeScriptValidateJSTypes
+            this.advancedTable.dataTable.page('last').draw('page');
+        };
+        AdvancedTableModalBaseComponent.prototype.setLength = function (value) {
+            this.pageLength = value;
+            this.advancedTable.dataTable.page.len(value).draw();
+        };
+        AdvancedTableModalBaseComponent.prototype.onKeyUp = function (event) {
+            if (event.code === 'Enter') {
+                // loading
+                this.loading = true;
+                this.advancedTable.search(event.target.value);
+            }
+        };
+        /**
+         *
+         * Reads the modal table and returns a list of filters to use in the table
+         * query.
+         *
+         * @param tableConfig {object} The table configuration from json file
+         * @param defaultFilterValues {object} A list of default filters
+         * @param {object} searchItem The searchItem to use
+         *
+         */
+        AdvancedTableModalBaseComponent.prototype.getFilters = function (tableConfig, defaultFilterValues, searchItem) {
+            if (defaultFilterValues === void 0) {
+                defaultFilterValues = {};
+            }
+            // Do nothing in absence of configuration.
+            if (!tableConfig || !Array.isArray(tableConfig.criteria)) {
+                console.warn('No table configuration available', this.tableConfig);
+                return [];
+            }
+            var matchedCriterion = tableConfig.criteria.find(function (criterion) {
+                return Object.prototype.hasOwnProperty.call(searchItem.filter, criterion.name);
+            });
+            if (!matchedCriterion) {
+                return [];
+            }
+            var criterionSafeName = matchedCriterion.name !== null
+                ? matchedCriterion.name.toString()
+                : '';
+            var applicableFilter;
+            // Raw dates should be transformed to a specific format
+            if (criterionSafeName.includes('GMT')) {
+                var newDate = this.datePipe.transform(criterionSafeName, 'MM/dd/yyyy');
+                applicableFilter = this._template.transform(matchedCriterion.filter, {
+                    value: newDate
+                });
+            }
+            else if (criterionSafeName !== 'undefined') {
+                applicableFilter = (this._template.transform(matchedCriterion.filter, Object.assign({
+                    value: matchedCriterion.filter
+                }, defaultFilterValues)));
+            }
+            else {
+                applicableFilter = '';
+            }
+            return [applicableFilter];
+        };
+        /**
+         *
+         * Runs a filter against the modal table
+         *
+         * @param {object} filter The filter to use in the search
+         *
+         */
+        AdvancedTableModalBaseComponent.prototype.advancedSearch = function (filter) {
+            return __awaiter(this, void 0, void 0, function () {
+                var defaultFilterValues, err_1, expressions, predefinedCriteria, query;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            // Do nothing in absence of configuration.
+                            if (!this.tableConfig && !Array.isArray(this.tableConfig.criteria)) {
+                                console.warn('No table configuration available', this.tableConfig);
+                                return [2 /*return*/];
+                            }
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this.advancedFilterValueProvider.getValues()];
+                        case 2:
+                            defaultFilterValues = _a.sent();
+                            return [3 /*break*/, 4];
+                        case 3:
+                            err_1 = _a.sent();
+                            defaultFilterValues = {};
+                            return [3 /*break*/, 4];
+                        case 4:
+                            expressions = [];
+                            if (filter) {
+                                this.defaultFilter = filter;
+                                predefinedCriteria = this.getFilters(this.tableConfig, defaultFilterValues, filter);
+                            }
+                            else {
+                                // Empty a falsy filter resets the results
+                                this.defaultFilter = AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER;
+                            }
+                            // search filter is applied separately, there is no need to add here.
+                            expressions.push(predefinedCriteria);
+                            query = this._context.model(this.advancedTable.config.model).asQueryable();
+                            query.setParam('filter', expressions.join(' and ')).prepare();
+                            this.advancedTable.query = query;
+                            this.advancedTable.fetch();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER = {
+            name: 'Tables.All',
+            filter: null
+        };
+        AdvancedTableModalBaseComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'app-advanced-table-modal',
+                        template: AdvancedTableModalBaseTemplate,
+                        styles: ["\n\n    "]
+                    }] }
+        ];
+        /** @nocollapse */
+        AdvancedTableModalBaseComponent.ctorParameters = function () {
+            return [
+                { type: i1.Router },
+                { type: i1.ActivatedRoute },
+                { type: i1$1.AngularDataContext },
+                { type: AdvancedFilterValueProvider },
+                { type: common.DatePipe }
+            ];
+        };
+        AdvancedTableModalBaseComponent.propDecorators = {
+            advancedTable: [{ type: i0.ViewChild, args: ['advancedTable',] }],
+            emptyTable: [{ type: i0.ViewChild, args: ['emptyTable',] }],
+            dropdownFilter: [{ type: i0.ViewChild, args: ['dropdownFilter',] }],
+            dropdownLength: [{ type: i0.ViewChild, args: ['dropdownLength',] }],
+            tableConfig: [{ type: i0.Input, args: ['tableConfig',] }],
+            tableConfigSrc: [{ type: i0.Input, args: ['tableConfigSrc',] }],
+            pageLength: [{ type: i0.Input, args: ['pageLength',] }],
+            searchText: [{ type: i0.Input, args: ['searchText',] }],
+            lengthMenu: [{ type: i0.Input, args: ['lengthMenu',] }],
+            defaultFilter: [{ type: i0.Input, args: ['defaultFilter',] }]
+        };
+        return AdvancedTableModalBaseComponent;
+    }(routing.RouterModalOkCancel));
+
+    var AdvancedSelectComponent = /** @class */ (function (_super) {
+        __extends(AdvancedSelectComponent, _super);
+        function AdvancedSelectComponent(router, activatedRoute, context, advancedFilterValueProvider, datePipe, _modalRef) {
+            var _this = _super.call(this, router, activatedRoute, context, advancedFilterValueProvider, datePipe) || this;
+            _this._modalRef = _modalRef;
+            _this.dismiss = new i0.EventEmitter();
+            return _this;
+        }
+        AdvancedSelectComponent.prototype.ok = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    this._modalRef.hide();
+                    this.dismiss.emit('ok');
+                    return [2 /*return*/];
+                });
+            });
+        };
+        AdvancedSelectComponent.prototype.cancel = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    this._modalRef.hide();
+                    this.dismiss.emit('cancel');
+                    return [2 /*return*/];
+                });
+            });
+        };
+        AdvancedSelectComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'app-advanced-select',
+                        template: "<div class=\"modal-header\" *ngIf=\"modalTitle\">\n  <h5 class=\"modal-title\">{{modalTitle | translate}}</h5>\n  <button [disabled]=\"cancelButtonDisabled\" (click)=\"cancel()\" type=\"button\" class=\"close\" data-dismiss=\"modal\"\n    aria-label=\"Cancel\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n    <div>\n      <!-- search -->\n      <div class=\"row mt-3\">\n        <div class=\"col-12 col-lg-3\">\n          <div class=\"input-group mb-3\">\n            <input spellcheck=\"false\" type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"searchText\"\n              class=\"form-control bg-gray-100 border-0\" placeholder=\"{{'Tables.SearchPlaceholder' | translate}}\"\n              aria-label=\"Search\" aria-describedby=\"basic-addon2\">\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-default bg-gray-100 border-0\" type=\"button\">\n                <i class=\"fa fa-search text-secondary\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n        <div #emptyTable class=\"d-none\">\n          <div>\n            <div class=\"mt-4\">\n              <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n            </div>\n            <div class=\"mt-4\">\n              <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n              <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n            </div>\n\n          </div>\n        </div>\n        <div class=\"col-12 col-lg-5\">\n          <div class=\"btn-toolbar\">\n            <button class=\"btn btn-gray-100\">\n              <i class=\"fa fa-sliders-h pr-2 text-secondary\" aria-hidden=\"true\"></i>{{'Tables.Filters' | translate}}\n            </button>\n            <div class=\"dropdown ml-3\" dropdown>\n              <button dropdownToggle class=\"btn btn-gray-100 dropdown-toggle\" type=\"button\" id=\"dropdownDefaultFilters\"\n                data-toggle=\"dropdown\">\n                {{ this.defaultFilter.name | translate }}\n              </button>\n              <div class=\"dropdown-menu\" aria-labelledby=\"dropdownDefaultFilters\" *dropdownMenu>\n                <a class=\"dropdown-item\" *ngFor=\"let filter of defaultFilters\"\n                  (click)=\"advancedSearch(filter.filter ? filter : '')\">\n                  {{ filter.name | translate }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"col text-lg-right mt-3 mt-lg-0\">\n          <button [disabled]=\"true\" class=\"btn rounded-pill btn-outline-theme\">\n            <span class=\"pr-2 font-lg\">+</span><span [translate]=\"'Tables.AddItem'\"></span>\n          </button>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12\" [ngClass]=\"{ 'component-loading': loading}\">\n          <app-advanced-table #advancedTable (init)=\"onTableInit($event)\" (load)=\"onDataLoad($event)\"\n            [selectable]=\"true\" [multipleSelect]=\"true\" [scrollX]=\"false\" [scrollY]=\"320\" [pageLength]=\"pageLength\"\n            [scrollable]=\"false\" [showFooter]=\"false\" [showActions]=\"false\" [lengthMenu]=\"lengthMenu\"\n            [config]=\"tableConfig\" [configSrc]=\"tableConfigSrc\"></app-advanced-table>\n        </div>\n      </div>\n      <div class=\"row mt-3 table-custom-pager\">\n        <div class=\"col-12 d-flex\" *ngIf=\"recordsTotal\">\n          <div class=\"mt-2 ml-auto mr-3 text-secondary\" [translate]=\"'Tables.RecordsPerPage'\"></div>\n          <div class=\"dropdown mr-3\" dropdown>\n            <button dropdownToggle class=\"btn btn-gray-100 dropdown-toggle\" type=\"button\" id=\"dropdownPageSize\"\n              data-toggle=\"dropdown\">\n              {{pageLength}}\n            </button>\n            <div class=\"dropdown-menu\" aria-labelledby=\"dropdownPageSize\" *dropdownMenu>\n              <button (click)=\"setLength(item)\" class=\"dropdown-item dropdown-item-theme\" type=\"button\"\n                *ngFor=\"let item of lengthMenu\">{{item}}</button>\n            </div>\n          </div>\n          <div class=\"mt-2 mr-2\" [translate]=\"'Tables.PageInfo'\" [translateParams]=\"pageInfo\"></div>\n          <button [disabled]=\"pageInfo && pageInfo.page === 0\" class=\"btn text-nowrap\" (click)=\"firstPage()\">\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===0\" class=\"btn\" (click)=\"previousPage()\">\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn\" (click)=\"nextPage()\">\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn text-nowrap\"\n            (click)=\"lastPage()\">\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n</div>\n<div class=\"modal-footer justify-content-end\">\n  <button [disabled]=\"okButtonDisabled\" (click)=\"ok()\" type=\"button\" [ngClass]=\"okButtonClass\">\n    {{okButtonText | translate}}\n  </button>\n  <button [disabled]=\"cancelButtonDisabled\" (click)=\"cancel()\" type=\"button\" [ngClass]=\"cancelButtonClass\"\n    data-dismiss=\"modal\">\n    {{ cancelButtonText | translate}}\n  </button>\n</div>\n",
+                        encapsulation: i0.ViewEncapsulation.None,
+                        styles: ["\n    .modal-table .dataTables_wrapper {\n      height: 50vh;\n      overflow-y: auto;\n    }\n    "]
+                    }] }
+        ];
+        /** @nocollapse */
+        AdvancedSelectComponent.ctorParameters = function () {
+            return [
+                { type: i1.Router },
+                { type: i1.ActivatedRoute },
+                { type: i1$1.AngularDataContext },
+                { type: AdvancedFilterValueProvider },
+                { type: common.DatePipe },
+                { type: modal.BsModalRef }
+            ];
+        };
+        return AdvancedSelectComponent;
+    }(AdvancedTableModalBaseComponent));
+
+    var AdvancedSelectService = /** @class */ (function () {
+        function AdvancedSelectService(_modal) {
+            this._modal = _modal;
+            //
+        }
+        AdvancedSelectService.prototype.select = function (initialState) {
+            var _this = this;
+            return new Promise(function (resolve, reject) {
+                try {
+                    var modalRef = _this._modal.openModalComponent(AdvancedSelectComponent, {
+                        class: 'modal-xl modal-table',
+                        ignoreBackdropClick: true,
+                        animated: true,
+                        initialState: initialState
+                    });
+                    var componentRef_1 = modalRef.content;
+                    componentRef_1.dismiss.subscribe(function (result) {
+                        return resolve({
+                            result: result,
+                            items: componentRef_1.advancedTable.selected
+                        });
+                    });
+                }
+                catch (err) {
+                    return reject(err);
+                }
+            });
+        };
+        AdvancedSelectService.decorators = [
+            { type: i0.Injectable }
+        ];
+        /** @nocollapse */
+        AdvancedSelectService.ctorParameters = function () {
+            return [
+                { type: i2.ModalService }
+            ];
+        };
+        return AdvancedSelectService;
+    }());
+
+    var ActivatedTableService = /** @class */ (function () {
+        function ActivatedTableService(_router, _activatedRoute) {
+            var _this = this;
+            this._router = _router;
+            this._activatedRoute = _activatedRoute;
+            _router.events.forEach(function (event) {
+                if (event instanceof i1.NavigationStart) {
+                    if (_this._activeTable) {
+                        _this._activeTable = null;
+                    }
+                }
+            });
+        }
+        Object.defineProperty(ActivatedTableService.prototype, "activeTable", {
+            get: function () {
+                return this._activeTable;
+            },
+            set: function (tableComponent) {
+                this._activeTable = tableComponent;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        ActivatedTableService.decorators = [
+            { type: i0.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        ActivatedTableService.ctorParameters = function () {
+            return [
+                { type: i1.Router },
+                { type: i1.ActivatedRoute }
+            ];
+        };
+        ActivatedTableService.ngInjectableDef = i0.defineInjectable({ factory: function ActivatedTableService_Factory() { return new ActivatedTableService(i0.inject(i1.Router), i0.inject(i1.ActivatedRoute)); }, token: ActivatedTableService, providedIn: "root" });
+        return ActivatedTableService;
+    }());
+
+    var MAX_EXPORT_ITEMS = 500;
+    var BtnExpDirective = /** @class */ (function () {
+        function BtnExpDirective(_activatedTable, _context, _config, _translate, _loadingService, _errorService) {
+            this._activatedTable = _activatedTable;
+            this._context = _context;
+            this._config = _config;
+            this._translate = _translate;
+            this._loadingService = _loadingService;
+            this._errorService = _errorService;
+        }
+        BtnExpDirective.prototype.clickEvent = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                var lastQuery, tableConfig, serviceHeaders, queryModel, query, queryParams, maxExportItems, url;
+                return __generator(this, function (_a) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (this._activatedTable.activeTable) {
+                        lastQuery = this._activatedTable.activeTable.lastQuery;
+                        tableConfig = this._activatedTable.activeTable.config;
+                        serviceHeaders = this._context.getService().getHeaders();
+                        queryModel = lastQuery.getModel();
+                        query = this._context.model(queryModel).asQueryable();
+                        queryParams = lastQuery.getParams();
+                        query = this.constructQuery(query, queryParams, tableConfig, serviceHeaders);
+                        maxExportItems = 1000;
+                        if (maxExportItems && typeof maxExportItems === 'number' && maxExportItems > 0) {
+                            query.skip(0).take(maxExportItems);
+                        }
+                        else {
+                            query.skip(0).take(MAX_EXPORT_ITEMS);
+                        }
+                        url = this.constructURL(query);
+                        this.downloadFile(url, query.getService().getHeaders(), query.getModel());
+                    }
+                    return [2 /*return*/];
+                });
+            });
+        };
+        /**
+         * 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
+         */
+        BtnExpDirective.prototype.setParams = function (query, params) {
+            if (params && typeof params === 'object') {
+                Object.keys(params).forEach(function (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
+         */
+        BtnExpDirective.prototype.setHeaders = function (query, headers) {
+            Object.keys(headers).forEach(function (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
+         */
+        BtnExpDirective.prototype.constructQueryParam = function (query, tableConfig) {
+            var _this = this;
+            var selectQuery = query.getParams().$select;
+            var selectQueryArray = selectQuery.split(',');
+            selectQueryArray = selectQueryArray.map(function (select) {
+                var e_1, _a, e_2, _b;
+                var words = select.split(' ');
+                if (words.length === 3) {
+                    if (tableConfig && tableConfig.columns) {
+                        try {
+                            for (var _c = __values(tableConfig.columns), _d = _c.next(); !_d.done; _d = _c.next()) {
+                                var column = _d.value;
+                                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]) + "\"";
+                                }
+                            }
+                        }
+                        catch (e_1_1) {
+                            e_1 = { error: e_1_1 };
+                        }
+                        finally {
+                            try {
+                                if (_d && !_d.done && (_a = _c.return))
+                                    _a.call(_c);
+                            }
+                            finally {
+                                if (e_1)
+                                    throw e_1.error;
+                            }
+                        }
+                    }
+                }
+                if (words.length === 1) {
+                    if (tableConfig && tableConfig.columns) {
+                        try {
+                            for (var _e = __values(tableConfig.columns), _f = _e.next(); !_f.done; _f = _e.next()) {
+                                var column = _f.value;
+                                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]) + "\"";
+                                }
+                            }
+                        }
+                        catch (e_2_1) {
+                            e_2 = { error: e_2_1 };
+                        }
+                        finally {
+                            try {
+                                if (_f && !_f.done && (_b = _e.return))
+                                    _b.call(_e);
+                            }
+                            finally {
+                                if (e_2)
+                                    throw e_2.error;
+                            }
+                        }
+                    }
+                    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
+         */
+        BtnExpDirective.prototype.constructURL = function (query) {
+            var baseURL = query.getService().getBase();
+            var url = baseURL.endsWith('/') ? (baseURL + query.getModel() + '?') : (baseURL + '/' + query.getModel() + '?');
+            Object.keys(query.getParams()).forEach(function (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
+         */
+        BtnExpDirective.prototype.constructQuery = function (query, params, tableConfig, headers) {
+            var _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
+         */
+        BtnExpDirective.prototype.downloadFile = function (url, serviceHeaders, modelName) {
+            var _this = this;
+            this._loadingService.showLoading();
+            fetch(encodeURI(url), {
+                headers: serviceHeaders,
+                credentials: 'include'
+            }).then(function (response) {
+                if (response && !response.ok) {
+                    throw new client.ResponseError(response.statusText, response.status);
+                }
+                return response.blob();
+            }).then(function (blob) {
+                var objectUrl = window.URL.createObjectURL(blob);
+                var a = document.createElement('a');
+                document.body.appendChild(a);
+                a.setAttribute('style', 'display: none');
+                a.href = objectUrl;
+                var 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(function (err) {
+                _this._loadingService.hideLoading();
+                _this._errorService.showError(err, {
+                    continueLink: '.'
+                });
+            });
+        };
+        BtnExpDirective.decorators = [
+            { type: i0.Directive, args: [{
+                        selector: '.universis-btn-export'
+                    },] }
+        ];
+        /** @nocollapse */
+        BtnExpDirective.ctorParameters = function () {
+            return [
+                { type: ActivatedTableService },
+                { type: i1$1.AngularDataContext },
+                { type: i2.ConfigurationService },
+                { type: core.TranslateService },
+                { type: i2.LoadingService },
+                { type: i2.ErrorService }
+            ];
+        };
+        BtnExpDirective.propDecorators = {
+            clickEvent: [{ type: i0.HostListener, args: ['click', ['$event'],] }]
+        };
+        return BtnExpDirective;
+    }());
+
+    var AdvancedTableSettingsComponent = /** @class */ (function () {
+        function AdvancedTableSettingsComponent(_context, _activatedRoute, elRef, modalService, userStorage, formBuilder, _activatedTable) {
+            this._context = _context;
+            this._activatedRoute = _activatedRoute;
+            this.elRef = elRef;
+            this.modalService = modalService;
+            this.userStorage = userStorage;
+            this.formBuilder = formBuilder;
+            this._activatedTable = _activatedTable;
+            this.params = this._activatedRoute.params;
+            this.columns = [];
+        }
+        AdvancedTableSettingsComponent.prototype.ngOnInit = function () {
+        };
+        AdvancedTableSettingsComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this.activeTableConfig = this._activatedTable.activeTable.getConfig();
+            this.storageKey = 'registrar/settings/' + this.activeTableConfig.title + '/table/columns';
+            this.form = this.formBuilder.group({ columns: new forms.FormArray([], this.minSelectedColumns(1)) });
+            this.userStorage.getItem(this.storageKey).then(function (data) {
+                if (data) {
+                    _this.savedTableSettings = data.value;
+                    if (_this.savedTableSettings) {
+                        if (_this._activatedTable.activeTable) {
+                            _this._activatedTable.activeTable.handleColumns(_this.savedTableSettings);
+                        }
+                    }
+                    _this.addCheckboxes();
+                }
+            });
+        };
+        AdvancedTableSettingsComponent.prototype.addCheckboxes = function () {
+            var _this = this;
+            this.tableColumns = this.activeTableConfig.columns.slice(1);
+            this.tableColumns.forEach(function (column, i) {
+                if (!column.hidden) {
+                    var control = {
+                        id: column.name,
+                        name: column.title
+                    };
+                    _this.columns.push(control);
+                }
+            });
+            if (this.savedTableSettings) {
+                this.columns.forEach(function (column, i) {
+                    column.check = false;
+                    column.check = _this.savedTableSettings.includes(column.id);
+                });
+                this.columns.map(function (column, i) {
+                    var control = new forms.FormControl(column.check);
+                    _this.form.controls.columns.push(control);
+                });
+            }
+        };
+        AdvancedTableSettingsComponent.prototype.openTableSettings = function (table_settings_modal) {
+            this.modalRef = this.modalService.show(table_settings_modal);
+        };
+        AdvancedTableSettingsComponent.prototype.saveTableSettings = function () {
+            var _this = this;
+            var selectedColumnsIds = this.form.value.columns
+                .map(function (v, i) { return v ? _this.columns[i].id : null; })
+                .filter(function (v) { return v !== null; });
+            this.userStorage.setItem(this.storageKey, selectedColumnsIds);
+            if (this._activatedTable.activeTable) {
+                this._activatedTable.activeTable.handleColumns(selectedColumnsIds);
+            }
+            this.modalRef.hide();
+        };
+        AdvancedTableSettingsComponent.prototype.dismiss = function () {
+            this.modalRef.hide();
+        };
+        AdvancedTableSettingsComponent.prototype.minSelectedColumns = function (min) {
+            if (min === void 0) {
+                min = 1;
+            }
+            var validator = function (formArray) {
+                var totalSelected = formArray.controls
+                    .map(function (control) { return control.value; })
+                    .reduce(function (prev, next) { return next ? prev + next : prev; }, 0);
+                return totalSelected >= min ? null : { required: true };
+            };
+            return validator;
+        };
+        AdvancedTableSettingsComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'app-advanced-table-settings',
+                        template: "<i class=\"fa fa-edit fa-lg advanced-table-settings\" (click)=\"openTableSettings(modal_settings_template)\"></i>\r\n<ng-template #modal_settings_template>\r\n      <div class=\"modal-header\">\r\n        <h3 class=\"modal-title\" [translate]=\"'Tables.ColumnDisplay'\"></h3>\r\n        <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"dismiss()\">\r\n          <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n      </div>\r\n\r\n      <form class=\"form-group p-3 text-left\" [formGroup]=\"form\" (ngSubmit)=\"saveTableSettings()\">\r\n        <div class=\"modal-body\">\r\n          <p [translate]=\"'Tables.ColumnDisplayInfo'\"></p>\r\n            <!-- <div *ngFor=\"let column of form.controls.columns.controls; let i = index\">\r\n              <div formArrayName=\"columns\">\r\n                <input class=\"checkbox checkbox-primary\" type=\"checkbox\" [formControlName]=\"i\" id=\"checkbox{{i}}\">\r\n                <label for=\"checkbox{{i}}\">\r\n                  {{columns[i].name | translate}}\r\n                </label>\r\n              </div>\r\n            </div> -->\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n          <button type=\"button\" class=\"btn btn-light\" (click)=\"dismiss()\" [translate]=\"'Tables.Cancel'\"> </button>\r\n          <button type=\"submit\" class=\"btn btn-success\" [translate]=\"'Tables.Save'\"></button>\r\n        </div>\r\n      </form>\r\n</ng-template>\r\n",
+                        encapsulation: i0.ViewEncapsulation.None
+                    }] }
+        ];
+        /** @nocollapse */
+        AdvancedTableSettingsComponent.ctorParameters = function () {
+            return [
+                { type: i1$1.AngularDataContext },
+                { type: i1.ActivatedRoute },
+                { type: i0.ElementRef },
+                { type: modal.BsModalService },
+                { type: i2.UserStorageService },
+                { type: forms.FormBuilder },
+                { type: ActivatedTableService }
+            ];
+        };
+        AdvancedTableSettingsComponent.propDecorators = {
+            table: [{ type: i0.Input }],
+            modal_settings_template: [{ type: i0.ViewChild, args: ['modal_settings_template',] }]
+        };
+        return AdvancedTableSettingsComponent;
+    }());
+
+    var TABLES_EL = {
+        "Tables": {
+            "Export": "Εξαγωγή",
+            "More": "Περισσότερα",
+            "Search": "Αναζήτηση",
+            "SearchPlaceholder": "Αναζήτηση...",
+            "GroupBy": "Ομαδοποίηση ανά",
+            "DataTable": {
+                "paginate": {
+                    "first": "Πρώτη σελίδα",
+                    "last": "Τελεταία σελίδα",
+                    "next": "Επόμενη",
+                    "previous": "Προηγούμενη"
+                },
+                "info": "Εμφάνιση _START_ έως _END_ από _TOTAL_ εγγραφές",
+                "infoEmpty": "Δεν βρέθηκαν εγγραφές",
+                "loading": "Εμφάνιση δεδομένων...",
+                "processing": "Παραλαβή δεδομένων...",
+                "emptyTable": "Δεν βρέθηκαν αποτελέσματα."
+            },
+            "ColumnDisplay": "Επιλογή Εμφάνισης στηλών",
+            "ColumnDisplayInfo": "Επιλέξτε τις στήλες που θέλετε να εμφανίζονται.",
+            "Save": "Εφαρμογή",
+            "Apply": "Εφαρμογή",
+            "Cancel": "Ακύρωση",
+            "RecordsPerPage": "Εγγραφές ανά σελίδα",
+            "PageInfo": "{{start}}-{{end}} από {{recordsTotal}}",
+            "SearchListPlaceholder": "Αναζητήστε στη λίστα...",
+            "Filters": "Φίλτρα",
+            "All": "Όλα",
+            "AddItem": "Προσθήκη στοιχείου",
+            "EmptyTableTitle": "Δεν βρέθηκαν αποτελέσματα.",
+            "EmptyTableMessage": "Προσπαθήστε να χρησιμοποιήσετε άλλες λέξεις κλειδιά.",
+            "RemoveItem": "Διαγραφή στοιχείου",
+            "Items": "στοιχεία",
+            "Item": "στοιχείο",
+            "AddItemMessage": {
+                "title": "Προσθήκη στοιχείων",
+                "one": "Ένα νέο στοιχείο προστέθηκε με επιτυχία.",
+                "many": "{{value}} νέα στοιχεία προστέθηκαν με επιτυχία."
+            },
+            "RemoveItemMessage": {
+                "title": "Αφαίρεση στοιχείων",
+                "one": "Ένα στοιχείο αφαιρέθηκε με επιτυχία.",
+                "many": "{{value}} στοιχεία αφαιρέθηκαν με επιτυχία."
+            },
+            "RemoveItemsTitle": "Διαγραφή στοιχείου",
+            "RemoveItemsMessage": "Πρόκειται να διαγράψετε ένα ή περισσότερα στοιχεία. Θέλετε να προχωρήσετε?",
+            "SelectAll": "Επιλογή όλων",
+            "ClearSelection": "Αναίρεση επιλογής",
+            "Actions": {
+                "Label": "Επεξεργασία",
+                "Start": "Έναρξη",
+                "ActionMessage": {
+                    "None": "Δεν έχετε επιλέξει κανένα στοιχείο που να ακολουθεί τις προϋποθέσεις της ενέργειας.",
+                    "One": "Έχετε επιλέξει ένα στοιχείο που ακολουθεί τις προϋποθέσεις της ενέργειας. Πατήστε το πλήκτρο Έναρξη για να ξεκινήσει η διαδικασία.",
+                    "Many": "Έχετε επιλέξει {{length}} στοιχεία που ακολουθούν τις προϋποθέσεις της ενέργειας. Πατήστε το πλήκτρο Έναρξη για να ξεκινήσει η διαδικασία."
+                },
+                "CompletedWithErrors": {
+                    "Title": "Η διαδικασία ολοκληρώθηκε με σφάλματα.",
+                    "Description": {
+                        "One": "Ένα στοιχείο δεν ανανεώθηκε λόγω ενός σφάλματος που συνέβη κατά την εκτέλεση της διαδικασίας.",
+                        "Many": "{{errors}} στοιχεία δεν ανανεώθηκαν λόγω ενός σφάλματος που συνέβη κατά την εκτέλεση της διαδικασίας."
+                    }
+                },
+                "CompletedWithSuccess": {
+                    "Title": "Η διαδικασία ολοκληρώθηκε με επιτυχία."
+                }
+            }
+        },
+        "TrueFalse": {
+            "long": {
+                "Yes": "Ναι",
+                "No": "Όχι"
+            }
+        },
+        "AdvancedSearch": {
+            "Choose": "<Επιλέξτε μια αναζήτηση>",
+            "ChooseDate": "Επιλογή ημερομηνίας",
+            "SavedSearches": "Αποθηκευμένες αναζητήσεις",
+            "ToggleDropdown": "Εμφάνιση λίστας",
+            "SaveCurrentSearch": "Αποθήκευση αναζήτησης",
+            "SaveAs": "Αποθήκευση ως",
+            "Save": "Αποθήκευση",
+            "Delete": "Διαγραφή",
+            "More": "Περισσότερα",
+            "Less": "Λιγότερα",
+            "Modal": {
+                "Title": "Αποθήκευση κριτηρίων αναζήτησης",
+                "Help": "Ορίστε έναν τίτλο για τα επιλεγμένα κριτήρια αναζήτησης. Αυτός ο τίτλος θα σας βοηθήσει να τα χρησιμοποιήσετε ξανά στο μέλλον.",
+                "TitleOnUserError": "Παρακαλώ εισάγετε έναν τίτλο",
+                "TitleOnListAlreadyCreated": "Το όνομα αυτό χρησιμοποιείται ήδη. Διαλέξτε ένα διαφορετικό.",
+                "NoListDefined": "Δεν έχει οριστεί το σημείο αποθήκευσης της λίστας",
+                "EmptyCriteriaList": "Δεν έχετε καθορίσει κανένα κριτήριο για αποθήκευση",
+                "SaveNameLabel": "Ονομασία λίστας",
+                "SaveNamePlaceholder": "Εισάγετε έναν τίτλο",
+                "Accept": "Αποθήκευση",
+                "Decline": "Απόρριψη",
+                "Close": "Κλείσιμο"
+            }
+        }
+    };
+
+    var TABLES_EN = {
+        "Tables": {
+            "Export": "Export",
+            "More": "More",
+            "Search": "Search",
+            "SearchPlaceholder": "Search...",
+            "GroupBy": "Group by",
+            "DataTable": {
+                "paginate": {
+                    "first": "First",
+                    "last": "Last",
+                    "next": "Next",
+                    "previous": "Previous"
+                },
+                "info": "Showing _START_ to _END_ of _TOTAL_ entries",
+                "infoEmpty": "Showing 0 to 0 of 0 entries",
+                "processing": "Processing data...",
+                "emptyTable": "There are no matching records."
+            },
+            "ColumnDisplay": "Column Display",
+            "ColumnDisplayInfo": "Επιλέξτε τις στήλες που θέλετε να εμφανίζονται.",
+            "Save": "Save",
+            "Apply": "Apply",
+            "Cancel": "Cancel",
+            "RecordsPerPage": "Items per page",
+            "PageInfo": "{{start}}-{{end}} of {{recordsTotal}}",
+            "SearchListPlaceHolder": "Search in list...",
+            "Filters": "Filters",
+            "All": "All",
+            "AddItem": "Add item",
+            "EmptyTableTitle": "There are no matching records.",
+            "EmptyTableMessage": "Please try to use other keywords or search parameters.",
+            "RemoveItem": "Remove item",
+            "Items": "items",
+            "Item": "item",
+            "AddItemMessage": {
+                "title": "Add item",
+                "one": "A new item has been added successfully.",
+                "many": "{{value}} new items have been added successfully."
+            },
+            "RemoveItemMessage": {
+                "title": "Remove items",
+                "one": "An item has been successfully removed.",
+                "many": "{{value}} items have been successfully removed."
+            },
+            "RemoveItemsTitle": "Remove items",
+            "RemoveItemsMessage": "You are going to remove one or more instructor courses. Do you want to proceed?",
+            "SelectAll": "Select all",
+            "ClearSelection": "Clear selection",
+            "Actions": {
+                "Label": "Edit",
+                "Start": "Start",
+                "ActionMessage": {
+                    "None": "There is no selected item that meets action requirements.",
+                    "One": "You have selected one item that meets action requirements.",
+                    "Many": "You have selected {{length}} items that meet action requirements."
+                },
+                "CompletedWithErrors": {
+                    "Title": "The operation was completed with errors.",
+                    "Description": {
+                        "One": "One item has not been updated due to an error occurred while executing process.",
+                        "Many": "{{errors}} items have not been updated due to an error occurred while executing process."
+                    }
+                },
+                "CompletedWithSuccess": {
+                    "Title": "The operation was completed successfully."
+                }
+            }
+        },
+        "TrueFalse": {
+            "long": {
+                "Yes": "Yes",
+                "No": "No"
+            }
+        },
+        "AdvancedSearch": {
+            "Choose": "<Select a saved search>",
+            "ChooseDate": "Choose date",
+            "SavedSearches": "Saved searches",
+            "ToggleDropdown": "Toggle Dropdown",
+            "SaveCurrentSearch": "Save search",
+            "SaveAs": "Save as...",
+            "Save": "Save",
+            "Delete": "Remove",
+            "More": "More",
+            "Less": "Less",
+            "Modal": {
+                "Title": "Save current search criteria",
+                "Help": "Please add a title for the given search criteria. This title will help you to use those criteria again in the future.",
+                "TitleOnUserError": "Please use a valid name for your list",
+                "TitleOnListAlreadyCreated": "Name already in use. Please choose a different one",
+                "NoListDefined": "Cannot define user storage key.",
+                "EmptyCriteriaList": "Please define search criteria before save.",
+                "SaveNameLabel": "List name",
+                "SaveNamePlaceholder": "Type a title here...",
+                "Accept": "Save",
+                "Decline": "Decline",
+                "Close": "Close"
+            }
+        }
+    };
+
+    var SimpleHeaderToolsComponent = /** @class */ (function () {
+        function SimpleHeaderToolsComponent() {
+        }
+        SimpleHeaderToolsComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'table-simple-header-tools',
+                        template: "\n  <ng-content></ng-content>\n  "
+                    }] }
+        ];
+        return SimpleHeaderToolsComponent;
+    }());
+    var TableSimpleHeaderComponent = /** @class */ (function () {
+        function TableSimpleHeaderComponent() {
+        }
+        TableSimpleHeaderComponent.prototype.ngOnChanges = function (changes) {
+            var _this = this;
+            if (changes.table) {
+                if (changes.table.currentValue == null) {
+                    if (this.dataLoadSubscription) {
+                        this.dataLoadSubscription.unsubscribe();
+                        return;
+                    }
+                }
+                if (changes.table.currentValue != changes.table.previousValue) {
+                    this.dataLoadSubscription = changes.table.currentValue.load.subscribe(function (data) {
+                        _this.recordsTotal = data.recordsTotal;
+                    });
+                }
+            }
+        };
+        TableSimpleHeaderComponent.prototype.ngOnDestroy = function () {
+            if (this.dataLoadSubscription) {
+                this.dataLoadSubscription.unsubscribe();
+            }
+        };
+        TableSimpleHeaderComponent.prototype.ngOnInit = function () {
+            //
+        };
+        TableSimpleHeaderComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'app-table-simple-header',
+                        template: "<div class=\"row\">\n   <div class=\"col-auto mt-4\">\n     <div class=\"font-xl text-secondary\" *ngIf=\"recordsTotal === 0\">\n        <span>&nbsp;</span>\n      </div>\n      <div class=\"font-xl text-secondary\" *ngIf=\"recordsTotal > 1\">\n        <span>{{recordsTotal}}</span><span>&nbsp;</span><span [translate]=\"'Tables.Items'\"></span>\n      </div>\n      <div class=\"font-xl text-secondary\" *ngIf=\"recordsTotal === 1\">\n        <span>{{recordsTotal}}</span><span>&nbsp;</span><span [translate]=\"'Tables.Item'\"></span>\n      </div>\n    </div>\n    <div class=\"pull-right ml-auto mr-3 mt-3\">\n      <div class=\"font-lg btn-toolbar mt-2\">\n        <ng-content select=\"table-simple-header-tools\"></ng-content>\n      </div>\n    </div>\n</div>\n\n"
+                    }] }
+        ];
+        /** @nocollapse */
+        TableSimpleHeaderComponent.ctorParameters = function () { return []; };
+        TableSimpleHeaderComponent.propDecorators = {
+            table: [{ type: i0.Input }]
+        };
+        return TableSimpleHeaderComponent;
+    }());
+
+    var AdvancedTableNotNullError = /** @class */ (function (_super) {
+        __extends(AdvancedTableNotNullError, _super);
+        function AdvancedTableNotNullError() {
+            return _super.call(this, 'Advanced table component cannot be empty at this context.') || this;
+        }
+        return AdvancedTableNotNullError;
+    }(Error));
+    var AdvancedTableEditorDirective = /** @class */ (function () {
+        function AdvancedTableEditorDirective(table) {
+            this.table = table;
+            this.dirty = false;
+            this.dirtyChange = new i0.EventEmitter(false);
+            //
+        }
+        /**
+         * Add rows to table and mark them as added rows
+         */
+        AdvancedTableEditorDirective.prototype.add = function () {
+            var addItems = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                addItems[_i] = arguments[_i];
+            }
+            if (this.table == null) {
+                throw new AdvancedTableNotNullError();
+            }
+            // decorate items
+            var key = this.table.config.columns[0].property || this.table.config.columns[0].name;
+            for (var index = 0; index < addItems.length; index++) {
+                var element = addItems[index];
+                var tr = this.table.dataTable.rows(':has(input[data-id="' + element[key] + '"])').nodes().to$();
+                if (tr.hasClass('removed')) {
+                    tr.toggleClass('removed text-gray-400 text-decoration-line-through');
+                }
+                else {
+                    this.table.dataTable.rows.add([element]);
+                    tr = this.table.dataTable.rows(':has(input[data-id="' + element[key] + '"])').nodes().to$();
+                    tr.toggleClass('added font-weight-bold text-success');
+                }
+            }
+            this.table.dataTable.draw();
+            // find removed
+            var removedLength = this.table.dataTable.rows('.removed')[0].length;
+            // find added
+            var addedLength = this.table.dataTable.rows('.added')[0].length;
+            // and emit event
+            var items = this.table.dataTable.rows().data();
+            this.table.load.emit({
+                data: items,
+                recordsFiltered: items.length - removedLength,
+                recordsTotal: items.length - removedLength
+            });
+            this.dirty = (removedLength > 0 || addedLength > 0);
+            this.dirtyChange.emit(this.dirty);
+        };
+        /**
+         * Marks rows as removed rows
+         */
+        AdvancedTableEditorDirective.prototype.remove = function () {
+            var removeItems = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                removeItems[_i] = arguments[_i];
+            }
+            if (this.table == null) {
+                throw new AdvancedTableNotNullError();
+            }
+            // get key
+            var key = this.table.config.columns[0].property || this.table.config.columns[0].name;
+            var _loop_1 = function (index) {
+                var element = removeItems[index];
+                var tr = this_1.table.dataTable.rows(':has(input[data-id="' + element[key] + '"])').nodes().to$();
+                // if row is marked as added
+                if (tr.hasClass('added')) {
+                    // remove this dirty row
+                    this_1.table.dataTable.rows(tr).remove();
+                }
+                else {
+                    // otherwise unmarked row
+                    tr.toggleClass('removed text-gray-400 text-decoration-line-through');
+                }
+                // check if item is selected
+                var selectedIndex = this_1.table.selected.findIndex(function (item) {
+                    return item[key] === element[key];
+                });
+                // and remove it from selected collection
+                if (selectedIndex >= 0) {
+                    this_1.table.selected.splice(selectedIndex, 1);
+                }
+            };
+            var this_1 = this;
+            // loop items
+            for (var index = 0; index < removeItems.length; index++) {
+                _loop_1(index);
+            }
+            // re-draw table
+            this.table.dataTable.draw();
+            // get number of table items
+            var items = this.table.dataTable.rows().data();
+            // get number of removed items
+            var removedLength = this.table.dataTable.rows('.removed')[0].length;
+            // get number of added items
+            var addedLength = this.table.dataTable.rows('.added')[0].length;
+            // refresh
+            this.table.load.emit({
+                data: items,
+                recordsFiltered: items.length - removedLength,
+                recordsTotal: items.length - removedLength
+            });
+            this.dirty = (removedLength > 0 || addedLength > 0);
+            this.dirtyChange.emit(this.dirty);
+        };
+        AdvancedTableEditorDirective.prototype.set = function (items) {
+            if (this.table == null) {
+                throw new AdvancedTableNotNullError();
+            }
+            // clear rows
+            this.table.selected = [];
+            this.table.dataTable.clear();
+            // set items
+            this.table.dataTable.rows.add(items).draw();
+            this.table.load.emit({
+                data: items,
+                recordsFiltered: items.length,
+                recordsTotal: items.length
+            });
+        };
+        /**
+         * Undo changes
+         */
+        AdvancedTableEditorDirective.prototype.undo = function () {
+            if (this.table == null) {
+                throw new AdvancedTableNotNullError();
+            }
+            // reset removed rows
+            this.table.dataTable.rows('.removed').nodes().to$().toggleClass('removed text-gray-400 text-decoration-line-through');
+            // remove added rows
+            this.table.dataTable.rows('.added').remove();
+            // clear selected items
+            this.table.selected = [];
+            var items = this.table.dataTable.rows().data();
+            this.table.dataTable.draw();
+            this.table.load.emit({
+                data: items,
+                recordsFiltered: items.length,
+                recordsTotal: items.length
+            });
+            this.dirty = false;
+            this.dirtyChange.emit(this.dirty);
+        };
+        AdvancedTableEditorDirective.prototype.rows = function () {
+            if (this.table == null) {
+                throw new AdvancedTableNotNullError();
+            }
+            return Array.from(this.table.dataTable.rows(':not(.removed)').data());
+        };
+        AdvancedTableEditorDirective.decorators = [
+            { type: i0.Directive, args: [{
+                        selector: '[tableEditor]'
+                    },] }
+        ];
+        /** @nocollapse */
+        AdvancedTableEditorDirective.ctorParameters = function () {
+            return [
+                { type: AdvancedTableComponent }
+            ];
+        };
+        AdvancedTableEditorDirective.propDecorators = {
+            dirtyChange: [{ type: i0.Output }]
+        };
+        return AdvancedTableEditorDirective;
+    }());
+
+    var AdvancedAggregatorService = /** @class */ (function () {
+        function AdvancedAggregatorService(_context, _template) {
+            this._context = _context;
+            this._template = _template;
+        }
+        /**
+         *
+         * Formats and executes the data query
+         *
+         * @param {string} model The target model
+         * @param {object} fixedParams Pairs of parameters to always be applied
+         * @param {string} queryStatement The default query to use for fetching the data (e.g. expands etc)
+         * @param {Array<string>} filters A list of filter expressions to append at the query
+         * @param {string} searchTemplate The template to use for searching expressions
+         * @param {string} searchValue The value of the user search
+         *
+         * @returns {Promise<any>} The response of the query execution
+         */
+        AdvancedAggregatorService.prototype.fetchData = function (model, fixedParams, queryStatement, filters, searchTemplate, searchValue) {
+            if (queryStatement === void 0) {
+                queryStatement = '';
+            }
+            return __awaiter(this, void 0, void 0, function () {
+                var e_1, _a, query, filterExpressions, _b, _c, param, evaluatedSearch, words;
+                var _this = this;
+                return __generator(this, function (_d) {
+                    query = this._context.model(model).asQueryable();
+                    if (!fixedParams || typeof fixedParams !== 'object') {
+                        fixedParams = {};
+                    }
+                    filterExpressions = [];
+                    if (fixedParams) {
+                        try {
+                            for (_b = __values(Object.keys(fixedParams)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                                param = _c.value;
+                                filterExpressions.push(param + " eq " + fixedParams[param]);
+                            }
+                        }
+                        catch (e_1_1) {
+                            e_1 = { error: e_1_1 };
+                        }
+                        finally {
+                            try {
+                                if (_c && !_c.done && (_a = _b.return))
+                                    _a.call(_b);
+                            }
+                            finally {
+                                if (e_1)
+                                    throw e_1.error;
+                            }
+                        }
+                    }
+                    if (filters && Array.isArray(filters)) {
+                        filterExpressions = __spread(filterExpressions, filters);
+                    }
+                    if (searchTemplate && searchValue) {
+                        evaluatedSearch = void 0;
+                        if (/^"(.*?)"$/.test(searchValue)) { // validate search text in double quotes
+                            evaluatedSearch = this._template.transform(searchTemplate, __assign({}, fixedParams, { text: searchValue.replace(/^"|"$/g, '') }));
+                        }
+                        else {
+                            words = searchValue.split(' ');
+                            // join words to a single filter
+                            evaluatedSearch = words.map(function (word) {
+                                return _this._template.transform(searchTemplate, __assign({}, fixedParams, { text: word }));
+                            }).join(' and ');
+                        }
+                        filterExpressions.push(evaluatedSearch);
+                    }
+                    query.setParam('$filter', filterExpressions.join(' and '));
+                    return [2 /*return*/, query.expand(queryStatement).take(-1).getItems()];
+                });
+            });
+        };
+        /**
+         *
+         * Formats the received data to use flat keys
+         *
+         * @param config The applied configuration
+         * @param data The raw data
+         *
+         * @returns {Array<any>} The flat-key object list
+         *
+         */
+        AdvancedAggregatorService.prototype.formatData = function (config, data) {
+            try {
+                return data.map(function (entry) {
+                    var entryObject = {};
+                    for (var i = 0; i < config.columns.length; i++) {
+                        var keys = config.columns[i].name.split('/');
+                        var helperObject = entry[keys[0]];
+                        if (helperObject && keys.length > 1) {
+                            for (var i_1 = 1; i_1 < keys.length; i_1++) {
+                                if (helperObject === undefined || helperObject === null) {
+                                    break;
+                                }
+                                else {
+                                    helperObject = helperObject[keys[i_1]] !== undefined && helperObject[keys[i_1]] !== null
+                                        ? helperObject[keys[i_1]]
+                                        : undefined;
+                                }
+                            }
+                        }
+                        entryObject[config.columns[i].name] = helperObject;
+                    }
+                    if (entry.subitems) {
+                        entryObject.subitems = entry.subitems;
+                    }
+                    return entryObject;
+                });
+            }
+            catch (err) {
+                console.error(err);
+            }
+        };
+        AdvancedAggregatorService.decorators = [
+            { type: i0.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        AdvancedAggregatorService.ctorParameters = function () {
+            return [
+                { type: i1$1.AngularDataContext },
+                { type: i2.TemplatePipe }
+            ];
+        };
+        AdvancedAggregatorService.ngInjectableDef = i0.defineInjectable({ factory: function AdvancedAggregatorService_Factory() { return new AdvancedAggregatorService(i0.inject(i1$1.AngularDataContext), i0.inject(i2.TemplatePipe)); }, token: AdvancedAggregatorService, providedIn: "root" });
+        return AdvancedAggregatorService;
+    }());
+
+    /**
+     *
+     * @class AdvancedAggregatorComponent
+     * @classdesc An advanced list with the capability of aggregate data based on configurable filters
+     *
+     */
+    var AdvancedAggregatorComponent = /** @class */ (function () {
+        function AdvancedAggregatorComponent(_changeDetector, _advancedAggregatorService, _loadingService) {
+            this._changeDetector = _changeDetector;
+            this._advancedAggregatorService = _advancedAggregatorService;
+            this._loadingService = _loadingService;
+            this.groups = [];
+            this.eventHandler = new i0.EventEmitter();
+        }
+        Object.defineProperty(AdvancedAggregatorComponent.prototype, "config", {
+            get: function () {
+                return this._config;
+            },
+            set: function (value) {
+                this._config = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(AdvancedAggregatorComponent.prototype, "aggregators", {
+            get: function () {
+                return this._aggregators;
+            },
+            set: function (value) {
+                this._aggregators = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(AdvancedAggregatorComponent.prototype, "postProcessors", {
+            get: function () {
+                return this._postProcessors;
+            },
+            set: function (value) {
+                this._postProcessors = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        AdvancedAggregatorComponent.prototype.ngOnInit = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    this.selectedGroups$.subscribe(function (data) {
+                        _this.groups = data;
+                        _this._changeDetector.markForCheck();
+                    });
+                    this.filters$.subscribe(function (filters) {
+                        return __awaiter(_this, void 0, void 0, function () {
+                            var err_1;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        _a.trys.push([0, 2, , 3]);
+                                        return [4 /*yield*/, this.fetch(filters)];
+                                    case 1:
+                                        _a.sent();
+                                        return [3 /*break*/, 3];
+                                    case 2:
+                                        err_1 = _a.sent();
+                                        console.error(err_1);
+                                        return [3 /*break*/, 3];
+                                    case 3: return [2 /*return*/];
+                                }
+                            });
+                        });
+                    });
+                    return [2 /*return*/];
+                });
+            });
+        };
+        AdvancedAggregatorComponent.prototype.ngOnDestroy = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    this.selectedGroups$.unsubscribe();
+                    this.filters$.unsubscribe();
+                    return [2 /*return*/];
+                });
+            });
+        };
+        /**
+         *
+         * Retrieves the data
+         *
+         */
+        AdvancedAggregatorComponent.prototype.fetch = function (filters) {
+            return __awaiter(this, void 0, void 0, function () {
+                var data, i, err_2;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 6, 7, 8]);
+                            this._loadingService.showLoading();
+                            return [4 /*yield*/, this._advancedAggregatorService.fetchData(this.config.model, this.params, this.config.query, filters.filters, this.searchExpression, filters.text)];
+                        case 1:
+                            data = _a.sent();
+                            if (!(this.postProcessors && Object.keys(this.postProcessors).length > 0 && this.config.postProcessors && this.config.postProcessors.length > 0))
+                                return [3 /*break*/, 5];
+                            i = 0;
+                            _a.label = 2;
+                        case 2:
+                            if (!(i < this.config.postProcessors.length))
+                                return [3 /*break*/, 5];
+                            return [4 /*yield*/, this.postProcessors[this.config.postProcessors[i].name](data)];
+                        case 3:
+                            data = _a.sent();
+                            _a.label = 4;
+                        case 4:
+                            i++;
+                            return [3 /*break*/, 2];
+                        case 5:
+                            this.body = this._advancedAggregatorService.formatData(this.config, data);
+                            this._changeDetector.markForCheck();
+                            return [3 /*break*/, 8];
+                        case 6:
+                            err_2 = _a.sent();
+                            console.error(err_2);
+                            return [3 /*break*/, 8];
+                        case 7:
+                            this._loadingService.hideLoading();
+                            return [7 /*endfinally*/];
+                        case 8: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        /**
+         *
+         * Triggers the event handler event
+         *
+         * @param {*} event The event data
+         *
+         */
+        AdvancedAggregatorComponent.prototype.onActionEvent = function (event) {
+            this.eventHandler.emit(event);
+        };
+        AdvancedAggregatorComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'app-advanced-aggregator',
+                        template: "<ng-container *ngIf=\"config && body\">\n  <div class=\"w-100 text-center\" *ngIf=\"body && body.length === 0\">\n    <div>\n      <div class=\"mt-4\">\n        <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n      </div>\n      <div class=\"mt-4\">\n        <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n        <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n      </div>\n    </div>\n  </div>\n  <ng-container *ngIf=\"groups.length === 0\">\n    <div class=\"row mt-4\">\n      <app-advanced-aggregator-list [body]=\"body\" [config]=\"config\" (clickEvent)=\"onActionEvent($event)\" class=\"col-12\">\n      </app-advanced-aggregator-list>\n      <div *ngIf=\"config.aggregators && config.aggregators.length > 0\"\n        class=\"footer-text text-dark font-weight-normal text-right font-sm mt-3 mr-2 w-100\">\n        <div *ngFor=\"let aggregator of config.aggregators\">\n          <span *ngIf=\"aggregator.label\"> {{ aggregator.label | translate }} </span>:\n          <span class=\"font-weight-bold\"> {{ body | callAggregator: aggregators: aggregator.name }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"groups.length === 1\">\n    <ng-container *ngFor=\"let group of body | groupBy: groups[0].name | keyvalue\">\n      <div class=\"row mt-4\">\n        <h4 class=\"col text-secondary\"> {{ groups[0].title | aggregatorListTitle: group.key }} </h4>\n        <app-advanced-aggregator-list [body]=\"group.value\" [config]=\"config\" (clickEvent)=\"onActionEvent($event)\"\n          class=\"col-12\">\n        </app-advanced-aggregator-list>\n      </div>\n\n      <!-- Footer for the group -->\n      <div *ngIf=\"config.aggregators && config.aggregators.length > 0\"\n        class=\"footer-text text-dark font-weight-normal text-right font-sm mt-3 mr-2 w-100\">\n        <div *ngFor=\"let aggregator of config.aggregators\">\n          <span *ngIf=\"aggregator.label\"> {{ aggregator.label | translate }} </span>:\n          <span class=\"font-weight-bold\"> {{ group.value | callAggregator: aggregators: aggregator.name }} </span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"groups.length > 1\">\n    <ng-container *ngFor=\"let group of body | groupBy: groups[0].name | keyvalue\">\n      <div class=\"row mt-4\">\n        <h4 class=\"col text-secondary\"> {{ groups[0].title | aggregatorListTitle: group.key }} </h4>\n        <div *ngFor=\"let subgroup of group.value | groupBy: groups[1].name | keyvalue\" class=\"col-12 ml-4 pl-4\">\n          <div class=\"row mt-4\">\n            <h6 class=\"col-12 text-secondary\"> {{ groups[1].title | aggregatorListTitle: subgroup.key }} </h6>\n            <app-advanced-aggregator-list [body]=\"subgroup.value\" [config]=\"config\" (clickEvent)=\"onActionEvent($event)\"\n              class=\"col-12\">\n            </app-advanced-aggregator-list>\n          </div>\n\n          <!-- Footer for each subgroup -->\n          <div *ngIf=\"config.aggregators && config.aggregators.length > 0\"\n            class=\"footer-text text-dark font-weight-normal text-right font-sm mt-3 mr-2 w-100\">\n            <div *ngFor=\"let aggregator of config.aggregators\">\n              <span *ngIf=\"aggregator.label\"> {{ aggregator.label | translate }} </span>:\n              <span class=\"font-weight-bold\"> {{ subgroup.value | callAggregator: aggregators: aggregator.name }}\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-container>",
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                    }] }
+        ];
+        /** @nocollapse */
+        AdvancedAggregatorComponent.ctorParameters = function () {
+            return [
+                { type: i0.ChangeDetectorRef },
+                { type: AdvancedAggregatorService },
+                { type: i2.LoadingService }
+            ];
+        };
+        AdvancedAggregatorComponent.propDecorators = {
+            config: [{ type: i0.Input, args: ['config',] }],
+            aggregators: [{ type: i0.Input, args: ['aggregators',] }],
+            postProcessors: [{ type: i0.Input, args: ['postProcessors',] }],
+            params: [{ type: i0.Input, args: ['params',] }],
+            selectedGroups$: [{ type: i0.Input, args: ['selectedGroups',] }],
+            filters$: [{ type: i0.Input, args: ['filters',] }],
+            searchExpression: [{ type: i0.Input, args: ['searchExpression',] }],
+            eventHandler: [{ type: i0.Output }]
+        };
+        return AdvancedAggregatorComponent;
+    }());
+
+    var Lengths;
+    (function (Lengths) {
+        Lengths["XL"] = "xl";
+        Lengths["LG"] = "lg";
+        Lengths["MD"] = "md";
+        Lengths["SM"] = "sm";
+        Lengths["XS"] = "xs";
+    })(Lengths || (Lengths = {}));
+    var AdvancedAggregatorListComponent = /** @class */ (function () {
+        function AdvancedAggregatorListComponent(_template) {
+            this._template = _template;
+            this.clickEvent = new i0.EventEmitter();
+        }
+        AdvancedAggregatorListComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.config.columns.forEach(function (x) {
+                x.length = Object.values(Lengths).includes(x.length) ? _this._template.transform("sis--list-group-item_" + x.length + "_column", x) :
+                    !x.length ? 'sis--list-group-item_sm_column' : x.length;
+            });
+        };
+        /**
+         *
+         * Triggers the output event emitter
+         *
+         * @param type The type of the event as it's declared in the configuration
+         * @param item The value of the current item
+         * }
+         */
+        AdvancedAggregatorListComponent.prototype.callCallback = function (type, data) {
+            this.clickEvent.emit({
+                type: type,
+                data: data
+            });
+        };
+        AdvancedAggregatorListComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'app-advanced-aggregator-list',
+                        template: "<div id=\"group-list\" class=\"flex-column\" *ngIf=\"config && config.columns\">\n  <ul class=\"sis--list-group sis--list-group-header\">\n    <li class=\"sis--list-group-item text-wrap\">\n      <div class=\"d-flex justify-content-center align-items-center\" *ngIf=\"body && body.length > 0\">\n        <div *ngIf=\"config.actions && config.actions.length > 0\" class=\"sis--list-group-item_sm_column\"></div>\n        <div *ngFor=\"let column of config.columns; let i = index\" class=\"text-left\"\n             [class]=\"config.columns[i].length\"\n          [translate]=\"config.columns[i].type === 'action' ? '' : column.title\" [ngClass]=\"{\n            'd-none': config.columns[i].hidden\n          }\"></div>\n      </div>\n    </li>\n  </ul>\n\n  <!-- The list of entries -->\n  <ul class=\"sis--list-group sis--list-group-body\" *ngIf=\"body && body.length > 0\">\n    <li class=\"sis--list-group-item text-wrap\" *ngFor=\"let entry of body | orderBy: config.orderBy\">\n      <div class=\"d-flex justify-content-center align-items-center list-color\">\n        <!-- The list of actions -->\n        <div *ngIf=\"config.actions && config.actions.length > 0\" class=\"sis--list-group-item_sm_column text-left pr-0\">\n          <button *ngFor=\"let action of config.actions\" (click)=\"callCallback(action.identifier, entry)\"\n            [title]=\"(action.title ? action.title : '') | translate \" class=\"btn btn-default px-0\">\n            <i [class]=\"'fas text-indigo ml-2 ' + 'fa-' + action.icon\"></i>\n          </button>\n        </div>\n        <!-- The list of data -->\n        <div *ngFor=\"let column of config.columns; let i=index\" [class]=\"config.columns[i].length\" class=\"text-left\"\n          [ngClass]=\"{\n            'text-truncate': config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate,\n            'd-none': config.columns[i].hidden,\n            'd-md-block': !config.columns[i].hidden\n          }\"\n          [title]=\"config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate ? entry[column.name] : ''\">\n          <span class=\"text-secondary\"\n            *ngIf=\"!config.columns[i].hasOwnProperty('type') || (config.columns[i].hasOwnProperty('type') &&  config.columns[i].type === 'text')\"\n            [ngClass]=\"{\n              'font-xs': config.columns[i].variant !== 'primary',\n              'text-body': config.columns[i].variant === 'primary',\n              'text-success': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && entry[config.columns[i].condition],\n              'text-danger': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && !entry[config.columns[i].condition],\n              'font-lg': config.columns[i].variant === 'redGreen' && entry[column.name] && entry[column.name].length > 3,\n              'font-2xl': config.columns[i].variant === 'redGreen' && entry[column.name] && entry[column.name].length <= 3\n            }\">\n            {{entry[column.name] || '-'}}\n          </span>\n\n          <span *ngIf=\"config.columns[i].type === 'boolean'\">\n            <i class=\"fa font-lg\" [ngClass]=\"{\n                'fa-check text-success': entry[column.name].toString() === config.columns[i].trueValue,\n                'fa-times text-danger': entry[column.name].toString() !== config.columns[i].trueValue && config.columns[i].variant !== 'checkOrDash'\n              }\"></i>\n            <span\n              *ngIf=\"entry[column.name].toString() !== config.columns[i].trueValue && config.columns[i].variant === 'checkOrDash'\"\n              class=\"text-secondary font-xs\">-</span>\n          </span>\n        </div>\n      </div>\n      <ul *ngIf=\"entry && entry.subitems\">\n        <li *ngFor=\"let subitem of entry.subitems\" class=\"d-flex justify-content-center align-items-center list-color\">\n          <div class=\"text-left\"></div>\n          <div *ngFor=\"let column of config.columns; let i=index\" [class]=\"config.column[i].length\" class=\"text-left\"\n            [ngClass]=\"{\n              'text-truncate': config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate,\n              'd-none': config.columns[i].hidden,\n              'd-md-block': !config.columns[i].hidden\n            }\"\n            [title]=\"config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate ? entry[column.name] : ''\">\n            <span class=\"text-secondary\"\n              *ngIf=\"!config.columns[i].hasOwnProperty('type') || (config.columns[i].hasOwnProperty('type') &&  config.columns[i].type === 'text')\"\n              [ngClass]=\"{\n                'font-xs': config.columns[i].variant !== 'primary',\n                'text-body': config.columns[i].variant === 'primary',\n                'text-success': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && subitem[config.columns[i].condition],\n                'text-danger': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && !subitem[config.columns[i].condition],\n                'font-lg': config.columns[i].variant === 'redGreen' && subitem[column.name] && subitem[column.name].length > 3,\n                'font-2xl': config.columns[i].variant === 'redGreen' && subitem[column.name] && subitem[column.name].length <= 3\n              }\">\n              {{subitem[column.name] || '-'}}\n            </span>\n          </div>\n        </li>\n      </ul>\n    </li>\n  </ul>\n</div>\n"
+                    }] }
+        ];
+        /** @nocollapse */
+        AdvancedAggregatorListComponent.ctorParameters = function () {
+            return [
+                { type: i2.TemplatePipe }
+            ];
+        };
+        AdvancedAggregatorListComponent.propDecorators = {
+            config: [{ type: i0.Input }],
+            body: [{ type: i0.Input }],
+            clickEvent: [{ type: i0.Output }]
+        };
+        return AdvancedAggregatorListComponent;
+    }());
+
+    /**
+     *
+     * @class AdvancedAggregatorPipe
+     * @classdesc Given a list of items runs a user defined function against that list
+     *
+     */
+    var AdvancedAggregatorPipe = /** @class */ (function () {
+        function AdvancedAggregatorPipe() {
+        }
+        /**
+         *
+         * @override
+         *
+         * @param items The list of items to run the aggregator against
+         * @param functionPool The functions that are available from the list caller
+         * @param functionName The name of the function to be called
+         *
+         * @returns {string} The value to show at the UI
+         *
+         */
+        AdvancedAggregatorPipe.prototype.transform = function (items, functionPool, functionName) {
+            if (Array.isArray(items) && functionName && functionName in functionPool) {
+                return functionPool[functionName](items);
+            }
+            else {
+                return '-';
+            }
+        };
+        AdvancedAggregatorPipe.decorators = [
+            { type: i0.Pipe, args: [{
+                        name: 'callAggregator'
+                    },] }
+        ];
+        return AdvancedAggregatorPipe;
+    }());
+
+    /**
+     *
+     * @class ParseTitlePipe
+     * @classdesc Given a title of an aggregator list, translates and evaluates the parameter if any
+     *
+     */
+    var ParseTitlePipe = /** @class */ (function () {
+        function ParseTitlePipe(_translateService) {
+            this._translateService = _translateService;
+        }
+        /**
+         *
+         * @override
+         *
+         * @param {string} title The title of the list
+         * @param {string} key The current list key that is being used
+         *
+         */
+        ParseTitlePipe.prototype.transform = function (title, key) {
+            var _this = this;
+            if (!title) {
+                return '';
+            }
+            else {
+                if (key === undefined || key === null || key === 'undefined' || key === 'null') {
+                    key = this._translateService.instant('Tables.NotDefined');
+                }
+                return title.split(' ')
+                    .map(function (part) { return _this._translateService.instant(part); })
+                    .map(function (part) { return part.replace('${param}', key); })
+                    .join(' ');
+            }
+        };
+        ParseTitlePipe.decorators = [
+            { type: i0.Pipe, args: [{
+                        name: 'aggregatorListTitle'
+                    },] }
+        ];
+        /** @nocollapse */
+        ParseTitlePipe.ctorParameters = function () {
+            return [
+                { type: core.TranslateService }
+            ];
+        };
+        return ParseTitlePipe;
+    }());
+
+    var AddItemsComponent = /** @class */ (function (_super) {
+        __extends(AddItemsComponent, _super);
+        function AddItemsComponent(router, activatedRoute, _errorService, _modalService, _appEvent, _toastService, _loadingService, _translateService, _context) {
+            var _this = _super.call(this, router, activatedRoute) || this;
+            _this._errorService = _errorService;
+            _this._modalService = _modalService;
+            _this._appEvent = _appEvent;
+            _this._toastService = _toastService;
+            _this._loadingService = _loadingService;
+            _this._translateService = _translateService;
+            _this._context = _context;
+            _this.loading = false;
+            _this.items = [];
+            _this.messages = [];
+            // set modal size
+            _this.modalClass = 'modal-lg';
+            _this.okButtonDisabled = true;
+            return _this;
+        }
+        AddItemsComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.selectedSubscription = this.selectComponent.advancedTable.selectedItems.subscribe(function (items) {
+                if (_this.formName == null) {
+                    _this.okButtonDisabled = items.length === 0;
+                }
+            });
+            if (this.formName != null) {
+                this.formChangeSubscription = this.formComponent.form.change.subscribe(function (event) {
+                    if (Object.prototype.hasOwnProperty.call(event, 'isValid')) {
+                        // enable or disable button based on form status
+                        _this.okButtonDisabled = (!event.isValid);
+                    }
+                });
+            }
+            if (this.target) {
+                var target = this.target;
+            }
+        };
+        AddItemsComponent.prototype.cancel = function () {
+            this.clearMessages();
+            if (this.loading) {
+                return;
+            }
+            // close
+            if (this._modalService.modalRef) {
+                return this._modalService.modalRef.hide();
+            }
+        };
+        AddItemsComponent.prototype.ngOnDestroy = function () {
+            if (this.formLoadSubscription) {
+                this.formLoadSubscription.unsubscribe();
+            }
+            if (this.formChangeSubscription) {
+                this.formChangeSubscription.unsubscribe();
+            }
+            if (this.selectedSubscription) {
+                this.selectedSubscription.unsubscribe();
+            }
+        };
+        Object.defineProperty(AddItemsComponent.prototype, "formData", {
+            get: function () {
+                if (this.formComponent === null) {
+                    return null;
+                }
+                return this.formComponent.form.formio.data;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        AddItemsComponent.prototype.ok = function () {
+            var _this = this;
+            try {
+                this.clearMessages();
+                return new Promise(function (resolve, reject) {
+                    _this.loading = false;
+                    _this.lastError = null;
+                    // set courses
+                    _this.items = _this.selectComponent.advancedTable.selected;
+                    // execute add
+                    _this.executeSubscription = _this.execute.subscribe(function (result) {
+                        _this.loading = false;
+                        if (_this.executeSubscription) {
+                            _this.executeSubscription.unsubscribe();
+                        }
+                        // close modal
+                        if (_this._modalService.modalRef) {
+                            _this._modalService.modalRef.hide();
+                        }
+                        return resolve();
+                    }, function (err) {
+                        _this.loading = false;
+                        // ensure that loading is hidden
+                        _this._loadingService.hideLoading();
+                        // set last error
+                        _this.lastError = err;
+                        return resolve();
+                    });
+                });
+            }
+            catch (err) {
+                this.loading = false;
+                this._loadingService.hideLoading();
+                this.lastError = err;
+            }
+        };
+        AddItemsComponent.prototype.onChange = function ($event) { };
+        AddItemsComponent.prototype.clearMessages = function () {
+            this.messages = [];
+        };
+        AddItemsComponent.prototype.onFilterChange = function (event) { };
+        AddItemsComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'app-add-items',
+                        template: "<div>\n  <div class=\"modal-header\" *ngIf=\"modalTitle\">\n    <h5 class=\"modal-title\">{{modalTitle | translate}}</h5>\n    <button (click)=\"cancel()\" [disabled]=\"loading\"\n            type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Cancel\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n  <div class=\"modal-body pt-0\">\n    <div class=\"row\" *ngIf=\"lastError\">\n      <div class=\"alert alert-danger col-12\" role=\"alert\">\n        <span [translate]=\"'E' + (lastError.statusCode || 500) + '.title'\"></span><br>\n        <small *ngIf=\"lastError.statusCode >= 0\" [translate]=\"'E' + (lastError.statusCode || 500) + '.message'\"></small>\n        <small *ngIf=\"lastError.statusCode == null\">{{lastError.message}}</small>\n      </div>\n    </div>\n    <div class=\"row d-none\" *ngIf=\"items\">\n      <div class=\"col-12\">\n        <p [translate]=\"'StudyPrograms.AddCoursesHelp'\" [translateParams]=\"items\" ></p>\n      </div>\n    </div>\n    <div class=\"row mt-3\">\n      <div class=\"col-12\">\n        <ng-container>\n          <ul style=\"margin-left: -24px\" class=\"nav nav-tabs mb-1\" id=\"myTab\" role=\"tablist\">\n            <li class=\"nav-item\" *ngIf=\"tableConfiguration\">\n              <a class=\"nav-link active\" id=\"courses-tab\" data-toggle=\"tab\" href=\"#courses\" role=\"tab\" aria-controls=\"home\" aria-selected=\"true\" [translate]=\"'AddItems.SelectCourses'\" ></a>\n            </li>\n            <li class=\"nav-item\" *ngIf=\"formName\">\n              <a class=\"nav-link\" [ngClass]=\"{ 'disabled': !(selectComponent.advancedTable.selected && selectComponent.advancedTable.selected.length) }\" id=\"attributes-tab\" data-toggle=\"tab\" href=\"#attributes\" role=\"tab\" aria-controls=\"profile\" aria-selected=\"false\" [translate]=\"'AddItems.EditAttributes'\"></a>\n            </li>\n            <li class=\"nav-item\" *ngIf=\"messages && messages.length > 0\">\n              <a class=\"nav-link\"  id=\"messages-tab\" data-toggle=\"tab\" href=\"#messages\" role=\"tab\" aria-controls=\"profile\" aria-selected=\"false\" [translate]=\"'AddItems.Messages'\"></a>\n            </li>\n          </ul>\n          <div class=\"tab-content border-0\" id=\"myTabContent\">\n            <div class=\"tab-pane fade show active\" id=\"courses\" role=\"tabpanel\" aria-labelledby=\"home-tab\">\n              <app-advanced-table-modal #selectComponent (filter)=\"onFilterChange($event)\" [tableConfig]=\"tableConfiguration\"></app-advanced-table-modal>\n            </div>\n            <div class=\"tab-pane fade\" id=\"attributes\" role=\"tabpanel\" aria-labelledby=\"profile-tab\"\n                 [ngClass]=\"{'invisible':(formName == null)}\">\n<!--              <advanced-form-edit #formComponent [formName]=\"formName\" ></advanced-form-edit>-->\n            </div>\n            <div class=\"tab-pane fade\" id=\"messages\" role=\"tabpanel\" aria-labelledby=\"profile-tab\"\n                 [ngClass]=\"{'invisible':(messages == null)}\">\n              <ul *ngIf=\"messages && messages.length>0\" class=\"sis--list-group sis--list-group-header\">\n                <li class=\"sis--list-group-item\">\n                  <div class=\"d-flex justify-content-center align-items-center\">\n                    <div class=\"sis--list-group-item_lg_column\" [translate]=\"'AddItems.Messages'\"></div>\n                  </div>\n                </li>\n              </ul>\n              <ul class=\"sis--list-group sis--list-group-body\">\n                <li *ngFor=\"let message of messages\" class=\"sis--list-group-item\">\n                  <div class=\"d-flex justify-content-center align-items-center list-color\">\n                    <div class=\"sis--list-group-item_lg_column\">{{ message?.message }}</div>\n                  </div>\n                </li>\n              </ul>\n              <div *ngIf=\"messages && messages.length>0\">\n                <button [disabled]=\"loading\" (click)=\"clearMessages()\" type=\"button\" class=\"btn btn-indigo mt-3\">\n                  {{'Clear' | translate}}\n                </button>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"modal-footer justify-content-end\">\n    <button [disabled]=\"okButtonDisabled || loading || !(selectComponent.advancedTable.selected && selectComponent.advancedTable.selected.length) \" (click)=\"ok()\"\n            type=\"button\" [ngClass]=\"okButtonClass\">\n      {{'OK' | translate}}\n    </button>\n    <button [disabled]=\"cancelButtonDisabled || loading\"\n            (click)=\"cancel()\" type=\"button\" [ngClass]=\"cancelButtonClass\" data-dismiss=\"modal\">\n      {{'Cancel' | translate}}\n    </button>\n  </div>\n</div>\n"
+                    }] }
+        ];
+        /** @nocollapse */
+        AddItemsComponent.ctorParameters = function () {
+            return [
+                { type: i1.Router },
+                { type: i1.ActivatedRoute },
+                { type: i2.ErrorService },
+                { type: i2.ModalService },
+                { type: i2.AppEventService },
+                { type: i2.ToastService },
+                { type: i2.LoadingService },
+                { type: core.TranslateService },
+                { type: i1$1.AngularDataContext }
+            ];
+        };
+        AddItemsComponent.propDecorators = {
+            execute: [{ type: i0.Input }],
+            items: [{ type: i0.Input }],
+            target: [{ type: i0.Input }],
+            tableConfiguration: [{ type: i0.Input }],
+            formName: [{ type: i0.Input }],
+            messages: [{ type: i0.Input }],
+            formComponent: [{ type: i0.ViewChild, args: ['formComponent',] }],
+            selectComponent: [{ type: i0.ViewChild, args: ['selectComponent',] }]
+        };
+        return AddItemsComponent;
+    }(routing.RouterModalOkCancel));
+
+    var ɵ0 = FORMATTERS;
+    var TablesModule = /** @class */ (function () {
+        function TablesModule(_translateService) {
+            this._translateService = _translateService;
+            this.ngOnInit().catch(function (err) {
+                console.error('An error occurred while loading tables module');
+                console.error(err);
+            });
+        }
+        TablesModule.prototype.ngOnInit = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    this._translateService.setTranslation('en', TABLES_EN, true);
+                    this._translateService.setTranslation('el', TABLES_EL, true);
+                    return [2 /*return*/];
+                });
+            });
+        };
+        TablesModule.decorators = [
+            { type: i0.NgModule, args: [{
+                        imports: [
+                            common.CommonModule,
+                            i2.SharedModule,
+                            core.TranslateModule,
+                            forms.FormsModule,
+                            forms.ReactiveFormsModule,
+                            i1.RouterModule,
+                            routing.RouterModalModule,
+                            angularFormio.FormioModule,
+                            forms$1.AdvancedFormsModule,
+                            i2.SharedModule,
+                            modal.ModalModule,
+                            dropdown.BsDropdownModule,
+                            progressbar.ProgressbarModule,
+                            ngxPipes.NgPipesModule
+                        ],
+                        providers: [common.DatePipe, i2.TemplatePipe,
+                            {
+                                provide: COLUMN_FORMATTERS,
+                                useValue: ɵ0
+                            },
+                            AdvancedTableConfigurationResolver,
+                            AdvancedSearchConfigurationResolver,
+                            AdvancedSelectService,
+                            AdvancedAggregatorService,
+                            ngxPipes.GroupByPipe
+                        ],
+                        declarations: [
+                            AdvancedTableComponent,
+                            AdvancedTableSearchComponent,
+                            BtnExpDirective,
+                            AdvancedTableSettingsComponent,
+                            AdvancedTableModalBaseComponent,
+                            AdvancedSearchFormComponent,
+                            AdvancedListComponent,
+                            AdvancedRowActionComponent,
+                            TableSimpleHeaderComponent,
+                            SimpleHeaderToolsComponent,
+                            AdvancedSelectComponent,
+                            AdvancedTableEditorDirective,
+                            AdvancedAggregatorComponent,
+                            AdvancedAggregatorListComponent,
+                            AdvancedAggregatorPipe,
+                            ParseTitlePipe,
+                            AddItemsComponent
+                        ],
+                        exports: [
+                            AdvancedTableComponent,
+                            AdvancedTableSearchComponent,
+                            BtnExpDirective,
+                            AdvancedTableSettingsComponent,
+                            AdvancedSearchFormComponent,
+                            AdvancedListComponent,
+                            AdvancedRowActionComponent,
+                            TableSimpleHeaderComponent,
+                            SimpleHeaderToolsComponent,
+                            AdvancedSelectComponent,
+                            AdvancedTableEditorDirective,
+                            AdvancedAggregatorComponent,
+                            AdvancedAggregatorListComponent,
+                            AddItemsComponent
+                        ],
+                        entryComponents: [
+                            AdvancedTableModalBaseComponent,
+                            AdvancedTableSettingsComponent,
+                            AdvancedRowActionComponent,
+                            AdvancedSelectComponent,
+                            AddItemsComponent
+                        ],
+                        schemas: [i0.CUSTOM_ELEMENTS_SCHEMA]
+                    },] }
+        ];
+        /** @nocollapse */
+        TablesModule.ctorParameters = function () {
+            return [
+                { type: core.TranslateService }
+            ];
+        };
+        return TablesModule;
+    }());
+
+    /*
+     * Public API Surface of tables
+     */
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.ɵb = AdvancedFilterValueProvider;
+    exports.ɵa = AdvancedTableSearchBaseComponent;
+    exports.ɵe = AdvancedTableSettingsComponent;
+    exports.ɵf = SimpleHeaderToolsComponent;
+    exports.ɵg = TableSimpleHeaderComponent;
+    exports.ɵd = BtnExpDirective;
+    exports.ɵh = AdvancedAggregatorPipe;
+    exports.ɵi = ParseTitlePipe;
+    exports.ɵc = AdvancedAggregatorService;
+    exports.AdvancedListComponent = AdvancedListComponent;
+    exports.AdvancedRowActionComponent = AdvancedRowActionComponent;
+    exports.AdvancedSearchFormComponent = AdvancedSearchFormComponent;
+    exports.AdvancedTableConfigurationResolver = AdvancedTableConfigurationResolver;
+    exports.AdvancedSearchConfigurationResolver = AdvancedSearchConfigurationResolver;
+    exports.AdvancedColumnFormatter = AdvancedColumnFormatter;
+    exports.NestedPropertyFormatter = NestedPropertyFormatter;
+    exports.ButtonFormatter = ButtonFormatter;
+    exports.LinkFormatter = LinkFormatter;
+    exports.ActionLinkFormatter = ActionLinkFormatter;
+    exports.SelectRowFormatter = SelectRowFormatter;
+    exports.TemplateFormatter = TemplateFormatter;
+    exports.TrueFalseFormatter = TrueFalseFormatter;
+    exports.TranslationFormatter = TranslationFormatter;
+    exports.DateTimeFormatter = DateTimeFormatter;
+    exports.NgClassFormatter = NgClassFormatter;
+    exports.LanguageFormatter = LanguageFormatter;
+    exports.COLUMN_FORMATTERS = COLUMN_FORMATTERS;
+    exports.AdvancedTableConfiguration = AdvancedTableConfiguration;
+    exports.AdvancedTableComponent = AdvancedTableComponent;
+    exports.AdvancedTableSearchComponent = AdvancedTableSearchComponent;
+    exports.FORMATTERS = FORMATTERS;
+    exports.AdvancedTableModalBaseTemplate = AdvancedTableModalBaseTemplate;
+    exports.AdvancedTableModalBaseComponent = AdvancedTableModalBaseComponent;
+    exports.AdvancedSelectComponent = AdvancedSelectComponent;
+    exports.AdvancedSelectService = AdvancedSelectService;
+    exports.TablesModule = TablesModule;
+    exports.ɵ0 = ɵ0;
+    exports.ActivatedTableService = ActivatedTableService;
+    exports.AdvancedTableNotNullError = AdvancedTableNotNullError;
+    exports.AdvancedTableEditorDirective = AdvancedTableEditorDirective;
+    exports.AdvancedAggregatorComponent = AdvancedAggregatorComponent;
+    exports.AdvancedAggregatorListComponent = AdvancedAggregatorListComponent;
+    exports.AddItemsComponent = AddItemsComponent;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+
+//# sourceMappingURL=universis-ngx-tables.umd.js.map