@universis/ngx-tables 0.6.16 → 0.6.18

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('iso-639-1/build'), require('rxjs'), require('jquery'), require('datatables.net'), require('lodash'), require('datatables.net-scroller'), require('rxjs/add/observable/combineLatest'), require('@angular/common/http'), require('@themost/angular'), require('@themost/client'), require('@angular/core'), require('@angular/common'), require('@ngx-translate/core'), require('@angular/forms'), require('@universis/common'), require('@universis/common/routing'), require('@universis/forms'), require('angular-formio'), require('@angular/router'), require('ngx-bootstrap/modal'), require('ngx-bootstrap/progressbar'), require('ngx-pipes')) :
-    typeof define === 'function' && define.amd ? define('@universis/ngx-tables', ['exports', 'iso-639-1/build', 'rxjs', 'jquery', 'datatables.net', 'lodash', 'datatables.net-scroller', 'rxjs/add/observable/combineLatest', '@angular/common/http', '@themost/angular', '@themost/client', '@angular/core', '@angular/common', '@ngx-translate/core', '@angular/forms', '@universis/common', '@universis/common/routing', '@universis/forms', 'angular-formio', '@angular/router', 'ngx-bootstrap/modal', 'ngx-bootstrap/progressbar', 'ngx-pipes'], factory) :
-    (factory((global.universis = global.universis || {}, global.universis['ngx-tables'] = {}),global.ISO6391,global.rxjs,global.jQuery_,null,global.lodash,null,global.rxjs['add/observable/combineLatest'],global.ng.common.http,global.i1,global.client,global.ng.core,global.ng.common,global.core,global.ng.forms,global.i2,global.routing,global.forms$1,global.angularFormio,global.ng.router,global.modal,global.progressbar,global.ngxPipes));
-}(this, (function (exports,ISO6391,rxjs,jQuery_,datatables_net,lodash,datatables_netScroller,combineLatest,http,i1,client,i0,common,core,forms,i2,routing,forms$1,angularFormio,i1$1,modal,progressbar,ngxPipes) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('iso-639-1/build'), require('rxjs'), require('jquery'), require('datatables.net'), require('lodash'), require('datatables.net-scroller'), require('rxjs/add/observable/combineLatest'), require('@angular/common/http'), require('@themost/client'), require('@themost/angular'), require('@angular/core'), require('@angular/common'), require('@ngx-translate/core'), require('@angular/forms'), require('@universis/common'), require('@universis/common/routing'), require('@universis/forms'), require('angular-formio'), require('@angular/router'), require('ngx-bootstrap/modal'), require('ngx-bootstrap/progressbar'), require('ngx-pipes')) :
+    typeof define === 'function' && define.amd ? define('@universis/ngx-tables', ['exports', 'iso-639-1/build', 'rxjs', 'jquery', 'datatables.net', 'lodash', 'datatables.net-scroller', 'rxjs/add/observable/combineLatest', '@angular/common/http', '@themost/client', '@themost/angular', '@angular/core', '@angular/common', '@ngx-translate/core', '@angular/forms', '@universis/common', '@universis/common/routing', '@universis/forms', 'angular-formio', '@angular/router', 'ngx-bootstrap/modal', 'ngx-bootstrap/progressbar', 'ngx-pipes'], factory) :
+    (factory((global.universis = global.universis || {}, global.universis['ngx-tables'] = {}),global.ISO6391,global.rxjs,global.jQuery_,null,global.lodash,null,global.rxjs['add/observable/combineLatest'],global.ng.common.http,global.client,global.i1,global.ng.core,global.ng.common,global.core,global.ng.forms,global.i2,global.routing,global.forms$1,global.angularFormio,global.ng.router,global.modal,global.progressbar,global.ngxPipes));
+}(this, (function (exports,ISO6391,rxjs,jQuery_,datatables_net,lodash,datatables_netScroller,combineLatest,http,client,i1,i0,common,core,forms,i2,routing,forms$1,angularFormio,i1$1,modal,progressbar,ngxPipes) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -176,507 +176,6 @@
         return ar;
     }
 
-    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$1.Router },
-                { type: i1$1.ActivatedRoute },
-                { type: i2.ErrorService },
-                { type: i2.ModalService },
-                { type: i2.AppEventService },
-                { type: i2.ToastService },
-                { type: i2.LoadingService },
-                { type: core.TranslateService },
-                { type: i1.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 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) {
-            var _this = this;
-            try {
-                return data.map(function (entry) {
-                    if (entry.subitems && Array.isArray(entry.subitems)) {
-                        entry.subitems = _this.formatData(config, entry.subitems);
-                    }
-                    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.AngularDataContext },
-                { type: i2.TemplatePipe }
-            ];
-        };
-        AdvancedAggregatorService.ngInjectableDef = i0.defineInjectable({ factory: function AdvancedAggregatorService_Factory() { return new AdvancedAggregatorService(i0.inject(i1.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 *ngIf=\"action.type === 'edit'\" class=\"fas fa-edit text-indigo\"></i>\n          </button>\n          <span class=\"px-0\">\n            <i class=\"fa fa-fw\">&nbsp;</i>\n          </span>\n\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          <button *ngIf=\"config.columns[i].type === 'action' && config.columns[i].variant === 'edit'\"\n            (click)=\"callCallback(config.columns[i].identifier, entry)\"\n            [title]=\"(config.columns[i].title ? config.columns[i].title : '') | translate \"\n            class=\"btn btn-default px-0 mx-0\">\n            <i class=\"fas fa-edit text-indigo\"></i>\n          </button>\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      <div *ngIf=\"entry && entry.subitems\">\n        <div *ngFor=\"let subitem of entry.subitems\" class=\"d-flex justify-content-center align-items-center list-color\">\n          <div *ngIf=\"config.actions && config.actions.length > 0\" class=\"sis--list-group-item_sm_column text-left pr-0\">\n            <span class=\"px-0\">\n              <i class=\"fa fa-fw\">&nbsp;</i>\n            </span>\n            <button *ngFor=\"let action of config.actions\" (click)=\"callCallback(action.identifier, subitem)\"\n                    [title]=\"(action.title ? action.title : '') | translate \" class=\"btn btn-default px-0\">\n              <i *ngIf=\"action.type === 'edit'\" class=\"fas fa-edit text-indigo\"></i>\n            </button>\n          </div>\n          <div class=\"text-left\"></div>\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') && 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            <span *ngIf=\"config.columns[i].type === 'boolean'\">\n            <i class=\"fa font-lg\" [ngClass]=\"{\n                'fa-check text-success': subitem[column.name].toString() === config.columns[i].trueValue,\n                'fa-times text-danger': subitem[column.name].toString() !== config.columns[i].trueValue && config.columns[i].variant !== 'checkOrDash'\n              }\"></i>\n            <span\n              *ngIf=\"subitem[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      </div>\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;
-    }());
-
     var AdvancedColumnFormatter = /** @class */ (function () {
         function AdvancedColumnFormatter() {
         }
@@ -3878,604 +3377,1105 @@
                     queryParamsHandling: 'merge',
                 });
             }
-            else {
-                // clear filter
-                this.filter = {};
-                // clear list
-                this.selectedList = null;
-                // raise filter change event
-                this.filterChange.emit(this.filter);
+            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: [{
+                        // tslint:disable-next-line: component-selector
+                        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\">\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\">\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.AngularDataContext },
+                { type: i1$1.ActivatedRoute },
+                { type: common.DatePipe },
+                { type: modal.BsModalService },
+                { type: i2.UserStorageService },
+                { type: core.TranslateService },
+                { type: AdvancedFilterValueProvider },
+                { type: i2.TemplatePipe },
+                { type: i1$1.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(),
+        ActionButtonFormatter: new ActionButtonFormatter(),
+        ActionSplitButtonFormatter: new ActionSplitButtonFormatter(),
+    };
+
+    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];
+            }
+            var e_1, _a;
+            if (this.table == null) {
+                throw new AdvancedTableNotNullError();
+            }
+            // decorate items
+            var key = this.table.config.columns[0].property || this.table.config.columns[0].name;
+            try {
+                for (var addItems_1 = __values(addItems), addItems_1_1 = addItems_1.next(); !addItems_1_1.done; addItems_1_1 = addItems_1.next()) {
+                    var element = addItems_1_1.value;
+                    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');
+                    }
+                }
+            }
+            catch (e_1_1) {
+                e_1 = { error: e_1_1 };
+            }
+            finally {
+                try {
+                    if (addItems_1_1 && !addItems_1_1.done && (_a = addItems_1.return))
+                        _a.call(addItems_1);
+                }
+                finally {
+                    if (e_1)
+                        throw e_1.error;
+                }
+            }
+            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];
+            }
+            var e_2, _a;
+            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 (element) {
+                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;
+            try {
+                // loop items
+                for (var removeItems_1 = __values(removeItems), removeItems_1_1 = removeItems_1.next(); !removeItems_1_1.done; removeItems_1_1 = removeItems_1.next()) {
+                    var element = removeItems_1_1.value;
+                    _loop_1(element);
+                }
+            }
+            catch (e_2_1) {
+                e_2 = { error: e_2_1 };
+            }
+            finally {
+                try {
+                    if (removeItems_1_1 && !removeItems_1_1.done && (_a = removeItems_1.return))
+                        _a.call(removeItems_1);
+                }
+                finally {
+                    if (e_2)
+                        throw e_2.error;
+                }
+            }
+            // 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,
+            });
         };
-        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
+         * Undo changes
          */
-        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*/];
-                });
+        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);
         };
-        AdvancedTableSearchComponent.decorators = [
-            { type: i0.Component, args: [{
-                        // tslint:disable-next-line: component-selector
-                        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\">\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\">\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
-                    }] }
+        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: [{
+                        // tslint:disable-next-line: directive-selector
+                        selector: '[tableEditor]',
+                    },] }
         ];
         /** @nocollapse */
-        AdvancedTableSearchComponent.ctorParameters = function () {
+        AdvancedTableEditorDirective.ctorParameters = function () {
             return [
-                { type: i1.AngularDataContext },
-                { type: i1$1.ActivatedRoute },
-                { type: common.DatePipe },
-                { type: modal.BsModalService },
-                { type: i2.UserStorageService },
-                { type: core.TranslateService },
-                { type: AdvancedFilterValueProvider },
-                { type: i2.TemplatePipe },
-                { type: i1$1.Router },
-                { type: i2.ModalService }
+                { type: AdvancedTableComponent }
             ];
         };
-        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',] }]
+        AdvancedTableEditorDirective.propDecorators = {
+            dirtyChange: [{ type: i0.Output }]
         };
-        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(),
-        ActionButtonFormatter: new ActionButtonFormatter(),
-        ActionSplitButtonFormatter: new ActionSplitButtonFormatter(),
-    };
-
-    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;
+        return AdvancedTableEditorDirective;
     }());
-    var TableSimpleHeaderComponent = /** @class */ (function () {
-        function TableSimpleHeaderComponent() {
+
+    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;
         }
-        TableSimpleHeaderComponent.prototype.ngOnChanges = function (changes) {
-            var _this = this;
-            if (changes.table) {
-                if (changes.table.currentValue == null) {
-                    if (this.dataLoadSubscription) {
-                        this.dataLoadSubscription.unsubscribe();
-                        return;
+        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());
                     }
-                }
-                if (changes.table.currentValue != changes.table.previousValue) {
-                    this.dataLoadSubscription = changes.table.currentValue.load.subscribe(function (data) {
-                        _this.recordsTotal = data.recordsTotal;
-                    });
-                }
-            }
+                    return [2 /*return*/];
+                });
+            });
         };
-        TableSimpleHeaderComponent.prototype.ngOnDestroy = function () {
-            if (this.dataLoadSubscription) {
-                this.dataLoadSubscription.unsubscribe();
+        /**
+         * 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;
         };
-        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 }]
+        /**
+         * 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;
         };
-        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
+         * 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
          */
-        AdvancedTableEditorDirective.prototype.add = function () {
-            var addItems = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                addItems[_i] = arguments[_i];
-            }
-            var e_1, _a;
-            if (this.table == null) {
-                throw new AdvancedTableNotNullError();
-            }
-            // decorate items
-            var key = this.table.config.columns[0].property || this.table.config.columns[0].name;
-            try {
-                for (var addItems_1 = __values(addItems), addItems_1_1 = addItems_1.next(); !addItems_1_1.done; addItems_1_1 = addItems_1.next()) {
-                    var element = addItems_1_1.value;
-                    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');
+        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;
+                            }
+                        }
                     }
                 }
-            }
-            catch (e_1_1) {
-                e_1 = { error: e_1_1 };
-            }
-            finally {
-                try {
-                    if (addItems_1_1 && !addItems_1_1.done && (_a = addItems_1.return))
-                        _a.call(addItems_1);
-                }
-                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];
                 }
-            }
-            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,
+                return words.join(' ');
             });
-            this.dirty = (removedLength > 0 || addedLength > 0);
-            this.dirtyChange.emit(this.dirty);
+            selectQuery = selectQueryArray.join(',');
+            query.setParam('$select', selectQuery);
+            return query;
         };
         /**
-         * Marks rows as removed rows
+         * Constructs the fetch URL based the query parameters
+         * @param {ClientDataQueryable} query
+         * @return String
          */
-        AdvancedTableEditorDirective.prototype.remove = function () {
-            var removeItems = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                removeItems[_i] = arguments[_i];
-            }
-            var e_2, _a;
-            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 (element) {
-                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();
+        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 {
-                    // 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;
-            try {
-                // loop items
-                for (var removeItems_1 = __values(removeItems), removeItems_1_1 = removeItems_1.next(); !removeItems_1_1.done; removeItems_1_1 = removeItems_1.next()) {
-                    var element = removeItems_1_1.value;
-                    _loop_1(element);
-                }
-            }
-            catch (e_2_1) {
-                e_2 = { error: e_2_1 };
-            }
-            finally {
-                try {
-                    if (removeItems_1_1 && !removeItems_1_1.done && (_a = removeItems_1.return))
-                        _a.call(removeItems_1);
+                    url += '&' + key + '=' + query.getParams()[key];
                 }
-                finally {
-                    if (e_2)
-                        throw e_2.error;
+            });
+            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);
                 }
-            }
-            // 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,
+                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: '.'
+                });
             });
-            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,
-            });
+        BtnExpDirective.decorators = [
+            { type: i0.Directive, args: [{
+                        selector: '.universis-btn-export'
+                    },] }
+        ];
+        /** @nocollapse */
+        BtnExpDirective.ctorParameters = function () {
+            return [
+                { type: ActivatedTableService },
+                { type: i1.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 AdvancedAggregatorService = /** @class */ (function () {
+        function AdvancedAggregatorService(_context, _template) {
+            this._context = _context;
+            this._template = _template;
+        }
         /**
-         * Undo changes
+         *
+         * 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
          */
-        AdvancedTableEditorDirective.prototype.undo = function () {
-            if (this.table == null) {
-                throw new AdvancedTableNotNullError();
+        AdvancedAggregatorService.prototype.fetchData = function (model, fixedParams, queryStatement, filters, searchTemplate, searchValue) {
+            if (queryStatement === void 0) {
+                queryStatement = '';
             }
-            // 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,
+            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()];
+                });
             });
-            this.dirty = false;
-            this.dirtyChange.emit(this.dirty);
         };
-        AdvancedTableEditorDirective.prototype.rows = function () {
-            if (this.table == null) {
-                throw new AdvancedTableNotNullError();
+        /**
+         *
+         * 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) {
+            var _this = this;
+            try {
+                return data.map(function (entry) {
+                    if (entry.subitems && Array.isArray(entry.subitems)) {
+                        entry.subitems = _this.formatData(config, entry.subitems);
+                    }
+                    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);
             }
-            return Array.from(this.table.dataTable.rows(':not(.removed)').data());
         };
-        AdvancedTableEditorDirective.decorators = [
-            { type: i0.Directive, args: [{
-                        // tslint:disable-next-line: directive-selector
-                        selector: '[tableEditor]',
+        AdvancedAggregatorService.decorators = [
+            { type: i0.Injectable, args: [{
+                        providedIn: 'root'
                     },] }
         ];
         /** @nocollapse */
-        AdvancedTableEditorDirective.ctorParameters = function () {
+        AdvancedAggregatorService.ctorParameters = function () {
             return [
-                { type: AdvancedTableComponent }
+                { type: i1.AngularDataContext },
+                { type: i2.TemplatePipe }
             ];
         };
-        AdvancedTableEditorDirective.propDecorators = {
-            dirtyChange: [{ type: i0.Output }]
-        };
-        return AdvancedTableEditorDirective;
+        AdvancedAggregatorService.ngInjectableDef = i0.defineInjectable({ factory: function AdvancedAggregatorService_Factory() { return new AdvancedAggregatorService(i0.inject(i1.AngularDataContext), i0.inject(i2.TemplatePipe)); }, token: AdvancedAggregatorService, providedIn: "root" });
+        return AdvancedAggregatorService;
     }());
 
-    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;
+    /**
+     *
+     * @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._errorService = _errorService;
+            this.groups = [];
+            this.eventHandler = new i0.EventEmitter();
         }
-        BtnExpDirective.prototype.clickEvent = function (event) {
+        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 lastQuery, tableConfig, serviceHeaders, queryModel, query, queryParams, maxExportItems, url;
+                var _this = this;
                 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());
-                    }
+                    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*/];
                 });
             });
         };
-        /**
-         * 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]);
+        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*/];
                 });
-            }
-            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
+         *
+         * Retrieves the data
+         *
          */
-        BtnExpDirective.prototype.setHeaders = function (query, headers) {
-            Object.keys(headers).forEach(function (key) {
-                if (headers.hasOwnProperty(key)) {
-                    query.getService().setHeader(key, headers[key]);
-                }
+        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*/];
+                    }
+                });
             });
-            // 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
+         *
+         * Triggers the event handler event
+         *
+         * @param {*} event The event data
+         *
          */
-        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(' ');
+        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;
             });
-            selectQuery = selectQueryArray.join(',');
-            query.setParam('$select', selectQuery);
-            return query;
         };
         /**
-         * Constructs the fetch URL based the query parameters
-         * @param {ClientDataQueryable} query
-         * @return String
+         *
+         * 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
+         * }
          */
-        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];
-                }
+        AdvancedAggregatorListComponent.prototype.callCallback = function (type, data) {
+            this.clickEvent.emit({
+                type: type,
+                data: data
             });
-            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;
+        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 *ngIf=\"action.type === 'edit'\" class=\"fas fa-edit text-indigo\"></i>\n          </button>\n          <span class=\"px-0\">\n            <i class=\"fa fa-fw\">&nbsp;</i>\n          </span>\n\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          <button *ngIf=\"config.columns[i].type === 'action' && config.columns[i].variant === 'edit'\"\n            (click)=\"callCallback(config.columns[i].identifier, entry)\"\n            [title]=\"(config.columns[i].title ? config.columns[i].title : '') | translate \"\n            class=\"btn btn-default px-0 mx-0\">\n            <i class=\"fas fa-edit text-indigo\"></i>\n          </button>\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      <div *ngIf=\"entry && entry.subitems\">\n        <div *ngFor=\"let subitem of entry.subitems\" class=\"d-flex justify-content-center align-items-center list-color\">\n          <div *ngIf=\"config.actions && config.actions.length > 0\" class=\"sis--list-group-item_sm_column text-left pr-0\">\n            <span class=\"px-0\">\n              <i class=\"fa fa-fw\">&nbsp;</i>\n            </span>\n            <button *ngFor=\"let action of config.actions\" (click)=\"callCallback(action.identifier, subitem)\"\n                    [title]=\"(action.title ? action.title : '') | translate \" class=\"btn btn-default px-0\">\n              <i *ngIf=\"action.type === 'edit'\" class=\"fas fa-edit text-indigo\"></i>\n            </button>\n          </div>\n          <div class=\"text-left\"></div>\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') && 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            <span *ngIf=\"config.columns[i].type === 'boolean'\">\n            <i class=\"fa font-lg\" [ngClass]=\"{\n                'fa-check text-success': subitem[column.name].toString() === config.columns[i].trueValue,\n                'fa-times text-danger': subitem[column.name].toString() !== config.columns[i].trueValue && config.columns[i].variant !== 'checkOrDash'\n              }\"></i>\n            <span\n              *ngIf=\"subitem[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      </div>\n    </li>\n  </ul>\n</div>\n"
+                    }] }
+        ];
+        /** @nocollapse */
+        AdvancedAggregatorListComponent.ctorParameters = function () {
+            return [
+                { type: i2.TemplatePipe }
+            ];
         };
-        /**
-         * 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) {
+        AdvancedAggregatorListComponent.propDecorators = {
+            config: [{ type: i0.Input }],
+            body: [{ type: i0.Input }],
+            clickEvent: [{ type: i0.Output }]
+        };
+        return AdvancedAggregatorListComponent;
+    }());
+
+    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._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);
+            this.selectedSubscription = this.selectComponent.advancedTable.selectedItems.subscribe(function (items) {
+                if (_this.formName == null) {
+                    _this.okButtonDisabled = items.length === 0;
                 }
-                else {
-                    // for all other browsers
-                    a.click();
+            });
+            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;
                 }
-                window.URL.revokeObjectURL(objectUrl);
-                a.remove();
-                _this._loadingService.hideLoading();
-            }).catch(function (err) {
-                _this._loadingService.hideLoading();
-                _this._errorService.showError(err, {
-                    continueLink: '.'
+                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;
+            }
         };
-        BtnExpDirective.decorators = [
-            { type: i0.Directive, args: [{
-                        selector: '.universis-btn-export'
-                    },] }
+        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 */
-        BtnExpDirective.ctorParameters = function () {
+        AddItemsComponent.ctorParameters = function () {
             return [
-                { type: ActivatedTableService },
-                { type: i1.AngularDataContext },
-                { type: i2.ConfigurationService },
-                { type: core.TranslateService },
+                { type: i1$1.Router },
+                { type: i1$1.ActivatedRoute },
+                { type: i2.ErrorService },
+                { type: i2.ModalService },
+                { type: i2.AppEventService },
+                { type: i2.ToastService },
                 { type: i2.LoadingService },
-                { type: i2.ErrorService }
+                { type: core.TranslateService },
+                { type: i1.AngularDataContext }
             ];
         };
-        BtnExpDirective.propDecorators = {
-            clickEvent: [{ type: i0.HostListener, args: ['click', ['$event'],] }]
+        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 BtnExpDirective;
-    }());
+        return AddItemsComponent;
+    }(routing.RouterModalOkCancel));
 
     /**
      *
@@ -4875,9 +4875,6 @@
      * Generated bundle index. Do not edit.
      */
 
-    exports.AddItemsComponent = AddItemsComponent;
-    exports.AdvancedAggregatorComponent = AdvancedAggregatorComponent;
-    exports.AdvancedAggregatorListComponent = AdvancedAggregatorListComponent;
     exports.AdvancedListComponent = AdvancedListComponent;
     exports.AdvancedRowActionComponent = AdvancedRowActionComponent;
     exports.AdvancedSearchFormComponent = AdvancedSearchFormComponent;
@@ -4914,6 +4911,9 @@
     exports.AdvancedTableNotNullError = AdvancedTableNotNullError;
     exports.AdvancedTableEditorDirective = AdvancedTableEditorDirective;
     exports.BtnExpDirective = BtnExpDirective;
+    exports.AdvancedAggregatorComponent = AdvancedAggregatorComponent;
+    exports.AdvancedAggregatorListComponent = AdvancedAggregatorListComponent;
+    exports.AddItemsComponent = AddItemsComponent;
     exports.AdvancedAggregatorPipe = AdvancedAggregatorPipe;
     exports.ParseTitlePipe = ParseTitlePipe;
     exports.AdvancedAggregatorService = AdvancedAggregatorService;