@universis/ngx-tables 0.6.13 → 0.6.18

package/fesm5/universis-ngx-tables.js

@@ -4,16 +4,16 @@ import 'datatables.net';
 import { template, at } from 'lodash';
 import 'datatables.net-scroller';
 import 'rxjs/add/observable/combineLatest';
-import { BehaviorSubject } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
-import { AngularDataContext } from '@themost/angular';
 import { ClientDataQueryable, ResponseError, TextUtils } from '@themost/client';
+import { BehaviorSubject } from 'rxjs';
+import { AngularDataContext } from '@themost/angular';
 import { __awaiter, __generator, __extends, __values, __assign, __spread } from 'tslib';
-import { Injectable, Pipe, Component, Input, Output, EventEmitter, ElementRef, ViewChild, ViewEncapsulation, NgModule, CUSTOM_ELEMENTS_SCHEMA, defineInjectable, inject, Directive, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, InjectionToken, Inject, Injector } from '@angular/core';
+import { Injectable, Pipe, Component, ElementRef, Input, ViewChild, ViewEncapsulation, EventEmitter, Output, NgModule, CUSTOM_ELEMENTS_SCHEMA, defineInjectable, inject, Directive, HostListener, ChangeDetectorRef, InjectionToken, Inject, Injector, ChangeDetectionStrategy } from '@angular/core';
 import { DatePipe, CommonModule } from '@angular/common';
 import { TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import { FormArray, FormBuilder, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { TemplatePipe, LoadingService, AppEventService, ErrorService, ModalService, ToastService, SharedModule, ConfigurationService, DIALOG_BUTTONS, UserActivityService, UserStorageService } from '@universis/common';
+import { TemplatePipe, LoadingService, ErrorService, DIALOG_BUTTONS, ModalService, UserActivityService, ToastService, AppEventService, UserStorageService, ConfigurationService, SharedModule } from '@universis/common';
 import { RouterModalOkCancel, RouterModalModule } from '@universis/common/routing';
 import { ServiceUrlPreProcessor, TranslatePreProcessor, AdvancedFormsModule } from '@universis/forms';
 import { FormioModule } from 'angular-formio';
@@ -1583,7 +1583,7 @@ var AdvancedTableComponent = /** @class */ (function () {
         { type: Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'app-advanced-table',
-                    template: "\n    <table #table class=\"dataTable nowrap mr-0\">\n    </table>\n    <div #emptyTable class=\"d-none\">\n      <div>\n        <div class=\"mt-4\">\n          <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n        </div>\n        <div class=\"mt-4\">\n          <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n          <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n        </div>\n      </div>\n    </div>\n  ",
+                    template: "\n    <table #table class=\"dataTable\">\n    </table>\n    <div #emptyTable class=\"d-none\">\n      <div>\n        <div class=\"mt-4\">\n          <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n        </div>\n        <div class=\"mt-4\">\n          <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n          <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n        </div>\n      </div>\n    </div>\n  ",
                     encapsulation: ViewEncapsulation.None,
                     styles: ["table.dataTable thead .sorting{background-image:none}table.dataTable thead .sorting_asc{background-position:95% 60%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsSAAALEgHS3X78AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAEtJREFUKJFjYBgywAOKMQALFjE/BgaGTCibjYGBYRM+kz0ZGBh2MTAw8DAwMHAxMDBsY2BgCCBGMQzg1IRNMV5NuVAJXIALqmYwAgBBkAlPRCLcLwAAAABJRU5ErkJggg==)}table.dataTable thead .sorting_desc{background-position:95% 60%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAArzAAAK8wHvFRX1AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAFNJREFUKJHVzTEKgDAQRNGHZfBg2sSTeDMLKwXPYuVJbBKQQEyrH6bZ+cPyWWaElz4kR5cOJ1b0FXnBVRYjjmIUsGGqvX6OmnImYk+JLTkzpPyBGwrtCvfBe56nAAAAAElFTkSuQmCC)}table.dataTable thead th{color:#73818e;font-size:.75rem;font-weight:600;padding-top:16px;padding-bottom:4px;border-bottom:none;padding-left:8px}table.dataTable tbody tr:first-child td:first-child{border-radius:6px 0}table.dataTable tbody tr:first-child td:last-child{border-radius:0 6px}table.dataTable tbody tr{border-radius:6px}table.dataTable tbody tr td:first-child{border-left:1px solid #c2cfd6}table.dataTable tbody tr td:last-child{border-right:1px solid #c2cfd6}table.dataTable tbody tr td{padding-top:8px;padding-bottom:8px;border-top:1px solid #c2cfd6}table.dataTable tbody tr:last-child td:first-child{border-radius:0 0 0 6px}table.dataTable tbody tr:last-child td:last-child{border-radius:0 0 6px}table.dataTable tbody tr:last-child td{border-bottom:1px solid #c2cfd6}table.dataTable td.dataTables_empty{border:none!important}table.dataTable.no-footer{border-bottom:none}.dataTables_paginate .btn.previous{margin-right:8px}.dataTables_paginate .btn.next{margin-left:8px}.dataTables_info,.dataTables_paginate{margin-top:1rem}.dataTables_paginate span .btn{border-radius:1.5rem}.dataTables_filter{display:none}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:0;overflow:auto}.dataTables_paginate{display:none}.dataTable.processing{opacity:15%}.dataTables_wrapper .dataTables_processing{background:0 0;position:absolute;display:inline-block;top:25%;z-index:5;color:#73818e}.text-decoration-line-through{text-decoration:line-through!important}tr.removed .checkbox+label{visibility:hidden}"]
                 }] }
@@ -1634,336 +1634,252 @@ var AdvancedTableComponent = /** @class */ (function () {
     return AdvancedTableComponent;
 }());
 
-// important: export this const due to AOT compilation errors
-// see more https://angular.io/guide/aot-metadata-errors#only-initialized-variables
-var AdvancedTableModalBaseTemplate = "\n<div>\n    <!-- search -->\n    <div class=\"row mt-3\">\n      <div class=\"col-12 col-lg-3\">\n        <div class=\"input-group mb-3\">\n          <input spellcheck=\"false\" type=\"text\"\n                 (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"searchText\"\n                 class=\"form-control bg-gray-100 border-0\"\n                 placeholder=\"{{'Tables.SearchPlaceholder' | translate}}\" aria-label=\"Search\" aria-describedby=\"basic-addon2\">\n          <div class=\"input-group-append\">\n            <button class=\"btn btn-default bg-gray-100 border-0\" type=\"button\">\n              <i class=\"fa fa-search text-secondary\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div #emptyTable class=\"d-none\">\n        <div>\n          <div class=\"mt-4\">\n            <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n          </div>\n          <div class=\"mt-4\">\n            <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n            <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n          </div>\n\n        </div>\n      </div>\n      <div class=\"col-12 col-lg-5\">\n        <div class=\"btn-toolbar\">\n          <button class=\"btn btn-gray-100\">\n            <i class=\"fa fa-sliders-h pr-2 text-secondary\" aria-hidden=\"true\"></i>{{'Tables.Filters' | translate}}\n          </button>\n          <div #dropdownFilter class=\"dropdown ml-3\">\n            <button class=\"btn btn-gray-100 dropdown-toggle\"\n                    type=\"button\" id=\"dropdownDefaultFilters\"\n                    data-toggle=\"dropdown\" dropdownToggle>\n              {{ this.defaultFilter.name | translate }}\n            </button>\n            <div class=\"dropdown-menu\" aria-labelledby=\"dropdownDefaultFilters\">\n              <button type=\"button\" class=\"dropdown-item\" *ngFor=\"let filter of defaultFilters\" (click)=\"onFilterSelect(filter)\">\n                {{ filter.name | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col text-lg-right mt-3 mt-lg-0\">\n        <button [disabled]=\"true\" class=\"btn rounded-pill btn-outline-theme\">\n          <span class=\"pr-2 font-lg\">+</span><span [translate]=\"'Tables.AddItem'\"></span>\n        </button>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-12\" [ngClass]=\"{ 'component-loading': loading}\">\n        <app-advanced-table #advancedTable (init)=\"onTableInit($event)\"\n                            (load)=\"onDataLoad($event)\"\n                            [selectable]=\"true\"\n                            [multipleSelect]=\"true\"\n                            [scrollX]=\"false\" [scrollY]=\"320\"\n                            [pageLength]=\"pageLength\"\n                            [scrollable]=\"false\" [showFooter]=\"false\"\n                            [showActions]=\"false\" [lengthMenu]=\"lengthMenu\"\n                            [config]=\"tableConfig\" [configSrc]=\"tableConfigSrc\"></app-advanced-table>\n      </div>\n    </div>\n    <div class=\"row mt-3 table-custom-pager\">\n      <div class=\"col-12 d-flex\" *ngIf=\"recordsTotal\">\n        <div class=\"mt-2 ml-auto mr-3 text-secondary\" [translate]=\"'Tables.RecordsPerPage'\"></div>\n        <div #dropdownLength class=\"dropdown mr-3\">\n          <button class=\"btn btn-gray-100 dropdown-toggle\"\n                  type=\"button\" id=\"dropdownPageSize\" data-toggle=\"dropdown\"\n                  dropdownToggle>\n            {{pageLength}}\n          </button>\n          <div class=\"dropdown-menu\" aria-labelledby=\"dropdownPageSize\">\n            <button (click)=\"setLength(item)\"\n                    class=\"dropdown-item dropdown-item-theme\"\n                    type=\"button\" *ngFor=\"let item of lengthMenu\">{{item}}</button>\n          </div>\n        </div>\n        <div class=\"mt-2 mr-2\" [translate]=\"'Tables.PageInfo'\" [translateParams]=\"pageInfo\"></div>\n        <button [disabled]=\"pageInfo && pageInfo.page === 0\" class=\"btn text-nowrap\" (click)=\"firstPage()\">\n          <i class=\"fa fa-chevron-left text-color-theme\"></i>\n          <i class=\"fa fa-chevron-left text-color-theme\"></i>\n        </button>\n        <button [disabled]=\"pageInfo && pageInfo.page===0\" class=\"btn\" (click)=\"previousPage()\">\n          <i class=\"fa fa-chevron-left text-color-theme\"></i>\n        </button>\n        <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn\" (click)=\"nextPage()\">\n          <i class=\"fa fa-chevron-right text-color-theme\"></i>\n        </button>\n        <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn text-nowrap\" (click)=\"lastPage()\">\n          <i class=\"fa fa-chevron-right text-color-theme\"></i>\n          <i class=\"fa fa-chevron-right text-color-theme\"></i>\n        </button>\n      </div>\n    </div>\n  </div>\n";
-var AdvancedTableModalBaseComponent = /** @class */ (function (_super) {
-    __extends(AdvancedTableModalBaseComponent, _super);
-    function AdvancedTableModalBaseComponent(_router, _activatedRoute, _context, advancedFilterValueProvider, datePipe) {
-        var _this = _super.call(this, _router, _activatedRoute) || this;
-        _this._context = _context;
-        _this.advancedFilterValueProvider = advancedFilterValueProvider;
-        _this.datePipe = datePipe;
-        _this.pageLength = 25;
-        _this.lengthMenu = [5, 10, 25, 50, 100];
-        _this.recordsTotal = 0;
-        _this.loading = false;
-        _this.recordsFiltered = 0;
-        _this.defaultFilters = [AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER];
-        _this.defaultFilter = AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER;
-        _this.pageInfo = {
-            serverSide: true
-        };
-        _this.modalClass = 'modal-xl modal-table';
-        _this._template = new TemplatePipe();
-        return _this;
+var AdvancedListComponent = /** @class */ (function () {
+    function AdvancedListComponent(_context, _translateService, _activatedRoute, _errorService, _toastService, _modalService, _userActivityService) {
+        this._context = _context;
+        this._translateService = _translateService;
+        this._activatedRoute = _activatedRoute;
+        this._errorService = _errorService;
+        this._toastService = _toastService;
+        this._modalService = _modalService;
+        this._userActivityService = _userActivityService;
+        this.allowSaveOption = true;
     }
-    AdvancedTableModalBaseComponent.prototype.ngAfterViewInit = function () {
-        //
-    };
-    AdvancedTableModalBaseComponent.prototype._getInputs = function (componentType) {
-        var props = componentType.__prop__metadata__;
-        var inputs = [];
-        if (props == null) {
-            return inputs;
+    AdvancedListComponent.prototype.ngOnDestroy = function () {
+        if (this.dataSubscription) {
+            this.dataSubscription.unsubscribe();
+        }
+        if (this.reloadSubscription) {
+            this.reloadSubscription.unsubscribe();
         }
-        Object.keys(props).forEach(function (prop) {
-            var member = props[prop][0];
-            if (member.ngMetadataName === 'Input') {
-                inputs.push(prop);
-            }
-        });
-        return inputs.sort();
-    };
-    AdvancedTableModalBaseComponent.prototype.hasInputs = function () {
-        return [];
-    };
-    AdvancedTableModalBaseComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        this.okButtonText = 'Tables.Apply';
-        this.cancelButtonText = 'Tables.Cancel';
-        // get route data
-        this.subscription = this.activatedRoute.data.subscribe(function (data) {
-            // set modal title if any
-            if (data.title) {
-                _this.modalTitle = data.title;
-            }
-            if (data.config) {
-                _this.tableConfig = data.config;
-            }
-            if (_this.tableConfig) {
-                _this.defaultFilters.push.apply(_this.defaultFilters, _this.tableConfig.searches);
-            }
-            // important: use hasInputs due to AOT compilation. Metadata properties cannot be used (e.g. @Input())
-            // because there are empty during runtime
-            // so we need to define manually input properties that are going to be bind through this process
-            // bind all inputs
-            var inputs = _this.hasInputs();
-            inputs.forEach(function (input) {
-                if (Object.prototype.hasOwnProperty.call(data, input)) {
-                    _this[input] = data[input];
-                }
-            });
-            _this.configChangesSubscription = _this.advancedTable.configChanges.subscribe(function (config) {
-                if (_this.tableConfig) {
-                    // reset default filter
-                    _this.defaultFilter = AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER;
-                    // init filter
-                    _this.defaultFilters = [AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER];
-                    // add extra filters
-                    _this.defaultFilters.push.apply(_this.defaultFilters, _this.tableConfig.searches);
-                }
-            });
-        });
-    };
-    AdvancedTableModalBaseComponent.prototype.cancel = function () {
-        return this.close();
-    };
-    AdvancedTableModalBaseComponent.prototype.ok = function () {
-        return this.close();
-    };
-    AdvancedTableModalBaseComponent.prototype.ngOnDestroy = function () {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     };
-    AdvancedTableModalBaseComponent.prototype.onDataLoad = function (data) {
-        this.recordsTotal = data.recordsTotal;
-        this.recordsFiltered = data.recordsFiltered;
-        // get first page info (because page is not going to be fired for first page)
-        if (data.recordsTotal > 0 && this.pageInfo.recordsTotal === 0) {
-            this.pageInfo.recordsTotal = data.recordsTotal;
-        }
-    };
-    AdvancedTableModalBaseComponent.prototype.previousPage = function () {
-        // go to next page
-        // noinspection TypeScriptValidateJSTypes
-        this.advancedTable.dataTable.page('previous').draw('page');
-    };
-    AdvancedTableModalBaseComponent.prototype.nextPage = function () {
-        // go to next page
-        // noinspection TypeScriptValidateJSTypes
-        this.advancedTable.dataTable.page('next').draw('page');
-    };
-    AdvancedTableModalBaseComponent.prototype.onTableInit = function (dataTable) {
-        var self = this;
-        // get initial page info
-        var initialPageInfo = dataTable.page.info();
-        initialPageInfo.start += 1;
-        self.pageInfo = initialPageInfo;
-        // change emptyTableMessage
-        dataTable.context[0].oLanguage.sEmptyTable = this.emptyTable.nativeElement.innerHTML;
-        // bind page change event
-        dataTable.on('page.dt', function () {
-            var pageInfo = dataTable.page.info();
-            pageInfo.start += 1;
-            self.pageInfo = pageInfo;
-        });
-        // bind draw change event
-        dataTable.on('draw.dt', function () {
-            // for future use
-            self.loading = false;
-            var pageInfo = dataTable.page.info();
-            pageInfo.start += 1;
-            self.pageInfo = pageInfo;
-        });
-    };
-    AdvancedTableModalBaseComponent.prototype.firstPage = function () {
-        // go to first page
-        // noinspection TypeScriptValidateJSTypes
-        this.advancedTable.dataTable.page('first').draw('page');
-    };
-    AdvancedTableModalBaseComponent.prototype.lastPage = function () {
-        // go to last page
-        // noinspection TypeScriptValidateJSTypes
-        this.advancedTable.dataTable.page('last').draw('page');
-    };
-    AdvancedTableModalBaseComponent.prototype.setLength = function (value) {
-        this.pageLength = value;
-        this.advancedTable.dataTable.page.len(value).draw();
-    };
-    AdvancedTableModalBaseComponent.prototype.onKeyUp = function (event) {
-        if (event.code === 'Enter') {
-            // loading
-            this.loading = true;
-            this.advancedTable.search(event.target.value);
-        }
-    };
-    /**
-     *
-     * Reads the modal table and returns a list of filters to use in the table
-     * query.
-     *
-     * @param tableConfig {object} The table configuration from json file
-     * @param defaultFilterValues {object} A list of default filters
-     * @param {object} searchItem The searchItem to use
-     *
-     */
-    AdvancedTableModalBaseComponent.prototype.getFilters = function (tableConfig, defaultFilterValues, searchItem) {
-        if (defaultFilterValues === void 0) { defaultFilterValues = {}; }
-        // Do nothing in absence of configuration.
-        if (!tableConfig || !Array.isArray(tableConfig.criteria)) {
-            return [];
-        }
-        if (searchItem.filter == null) {
-            return [];
-        }
-        var matchedCriterion = tableConfig.criteria.find(function (criterion) {
-            return Object.prototype.hasOwnProperty.call(searchItem.filter, criterion.name);
-        });
-        if (matchedCriterion == null) {
-            return [];
-        }
-        var value = searchItem.filter[matchedCriterion.name];
-        var criterionSafeName = matchedCriterion.name !== null
-            ? matchedCriterion.name.toString()
-            : '';
-        var applicableFilter;
-        // Raw dates should be transformed to a specific format
-        if (criterionSafeName.includes('GMT')) {
-            var newDate = this.datePipe.transform(criterionSafeName, 'MM/dd/yyyy');
-            applicableFilter = this._template.transform(matchedCriterion.filter, {
-                value: newDate
-            });
-        }
-        else if (criterionSafeName !== 'undefined') {
-            applicableFilter = (this._template.transform(matchedCriterion.filter, Object.assign({
-                value: value
-            }, defaultFilterValues)));
-        }
-        else {
-            applicableFilter = '';
-        }
-        return [applicableFilter];
-    };
-    AdvancedTableModalBaseComponent.prototype.onFilterSelect = function (value) {
-        this.advancedSearch(value);
-    };
-    /**
-     *
-     * Runs a filter against the modal table
-     *
-     * @param {object} filter The filter to use in the search
-     *
-     */
-    AdvancedTableModalBaseComponent.prototype.advancedSearch = function (filter) {
+    AdvancedListComponent.prototype.ngOnInit = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var defaultFilterValues, err_1, expressions, predefinedCriteria, query;
+            var metadata_1, err_1;
+            var _this = this;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        // Do nothing in absence of configuration.
-                        if (!this.tableConfig && !Array.isArray(this.tableConfig.criteria)) {
-                            console.warn('No table configuration available', this.tableConfig);
-                            return [2 /*return*/];
-                        }
-                        _a.label = 1;
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, this._context.getMetadata()];
                     case 1:
-                        _a.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, this.advancedFilterValueProvider.getValues()];
-                    case 2:
-                        defaultFilterValues = _a.sent();
-                        return [3 /*break*/, 4];
-                    case 3:
-                        err_1 = _a.sent();
-                        defaultFilterValues = {};
-                        return [3 /*break*/, 4];
-                    case 4:
-                        expressions = [];
-                        if (filter) {
-                            this.defaultFilter = filter;
-                            predefinedCriteria = this.getFilters(this.tableConfig, defaultFilterValues, filter);
-                        }
-                        else {
-                            // Empty a falsy filter resets the results
-                            this.defaultFilter = AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER;
-                        }
-                        // search filter is applied separately, there is no need to add here.
-                        expressions.push(predefinedCriteria);
-                        query = this._context.model(this.advancedTable.config.model).asQueryable();
-                        query.setParam('filter', expressions.join(' and ')).prepare();
-                        this.advancedTable.query = query;
-                        this.advancedTable.fetch();
-                        return [2 /*return*/];
+                        metadata_1 = _a.sent();
+                        // get route data
+                        this.dataSubscription = this._activatedRoute.data.subscribe(function (routeData) {
+                            // get entityType
+                            var re = new RegExp("^" + routeData.model + "$", 'ig');
+                            var entitySet = metadata_1.EntityContainer.EntitySet.find(function (x) {
+                                return re.test(x.Name);
+                            });
+                            // if entity type is null
+                            if (entitySet == null) {
+                                // navigate to error
+                                return _this._errorService.navigateToError(new ResponseError('EntitySet Not Found', 404));
+                            }
+                            // get entity type
+                            var entityType = metadata_1.EntityType.find(function (x) {
+                                return x.Name === entitySet.EntityType;
+                            });
+                            if (entityType == null) {
+                                return _this._errorService.navigateToError(new ResponseError('EntityType Not Found', 404));
+                            }
+                            if (routeData.searchConfiguration) {
+                                if (Object.prototype.hasOwnProperty.call(routeData.searchConfiguration, 'allowSave')) {
+                                    _this.allowSaveOption = routeData.searchConfiguration.allowSave;
+                                }
+                                _this.searchConfiguration = routeData.searchConfiguration;
+                            }
+                            if (routeData.tableConfiguration) {
+                                _this.tableConfiguration = routeData.tableConfiguration;
+                            }
+                            if (routeData.description) {
+                                _this.description = _this._translateService.instant(routeData.description);
+                            }
+                            if (routeData.longDescription) {
+                                _this.longDescription = _this._translateService.instant(routeData.longDescription);
+                            }
+                            if (routeData.category) {
+                                _this.category = _this._translateService.instant(routeData.category);
+                            }
+                            // clone default configuration
+                            var defaultConfiguration = AdvancedTableConfiguration.cast(_this.tableConfiguration, true);
+                            // correct edit button link
+                            var column = defaultConfiguration.columns.find(function (col) {
+                                return col.formatter === 'ButtonFormatter' && col.formatString === '(modal:edit)';
+                            });
+                            if (column) {
+                                var url_1 = [];
+                                _this._activatedRoute.snapshot.pathFromRoot.forEach(function (route) {
+                                    url_1.push.apply(url_1, route.url);
+                                });
+                                column.formatString = "#/" + url_1.join('/') + "/(modal:${id}/edit)";
+                            }
+                            // create list configuration by assigning list entity set
+                            _this.table.config = Object.assign({
+                                model: entitySet.Name
+                            }, defaultConfiguration);
+                            // fetch data
+                            _this.table.fetch(true);
+                            // do reload by using hidden fragment e.g. /classes#reload
+                            _this.reloadSubscription = _this._activatedRoute.fragment.subscribe(function (fragment) {
+                                if (fragment && fragment === 'reload') {
+                                    _this._toastService.show(_this.description, _this._translateService.instant('Settings.OperationCompleted'));
+                                    _this.table.fetch(true);
+                                }
+                            });
+                            // finally add user activity
+                            _this._userActivityService.setItem({
+                                category: _this.category,
+                                description: _this.description,
+                                url: window.location.hash.substring(1),
+                                dateCreated: new Date
+                            });
+                        });
+                        return [3 /*break*/, 3];
+                    case 2:
+                        err_1 = _a.sent();
+                        console.error(err_1);
+                        return [2 /*return*/, this._errorService.showError(err_1)];
+                    case 3: return [2 /*return*/];
                 }
             });
         });
     };
-    AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER = {
-        name: 'Tables.All',
-        filter: null
+    /**
+     * Data load event handler of advanced table component
+     * @param {AdvancedTableDataResult} data
+     */
+    AdvancedListComponent.prototype.onDataLoad = function (data) {
+        this.recordsTotal = data.recordsTotal;
     };
-    AdvancedTableModalBaseComponent.decorators = [
+    /**
+     * Remove selected items
+     */
+    AdvancedListComponent.prototype.remove = function () {
+        var _this = this;
+        if (this.table && this.table.selected && this.table.selected.length) {
+            // get items to remove
+            var items_1 = this.table.selected;
+            return this._modalService.showWarningDialog(this._translateService.instant('Tables.RemoveItemsTitle'), this._translateService.instant('Tables.RemoveItemsMessage'), DIALOG_BUTTONS.OkCancel).then(function (result) {
+                if (result === 'ok') {
+                    _this._context.model(_this.table.config.model).remove(items_1).then(function () {
+                        _this._toastService.show(_this.description + ':' + _this._translateService.instant('Tables.RemoveItemMessage.title'), _this._translateService.instant((items_1.length === 1 ?
+                            'Tables.RemoveItemMessage.one' : 'Tables.RemoveItemMessage.many'), { value: items_1.length }));
+                        _this.table.fetch(true);
+                    }).catch(function (err) {
+                        _this._errorService.showError(err, {
+                            continueLink: '.'
+                        });
+                    });
+                }
+            });
+        }
+    };
+    AdvancedListComponent.decorators = [
         { type: Component, args: [{
-                    // tslint:disable-next-line: component-selector
-                    selector: 'app-advanced-table-modal',
-                    template: AdvancedTableModalBaseTemplate,
-                    styles: ["\n\n    "]
+                    selector: 'app-advanced-list',
+                    template: "<div>\n  <div class=\"row\" *ngIf=\"description\">\n    <div class=\"col-auto\">\n      <h2>{{description}}</h2>\n      <p *ngIf=\"longDescription\">{{longDescription}}</p>\n    </div>\n  </div>\n  <div class=\"row\" *ngIf=\"searchConfiguration\">\n    <div class=\"col-12\" [ngVar]=\"{}\" #filter=\"ngVar\">\n      <app-advanced-table-search #advancedSearch [(filter)]=\"filter.value\" [collapsed]=\"true\" [table]=\"table\" [allowSave]=\"allowSaveOption\">\n        <advanced-search>\n          <app-advanced-search-form [form]=\"searchConfiguration\" (filterChange)=\"advancedSearch.asyncAdvancedSearch()\" #search [(filter)]=\"filter.value\"></app-advanced-search-form>\n        </advanced-search>\n      </app-advanced-table-search>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-auto mt-4\">\n      <div class=\"font-xl text-secondary\" *ngIf=\"recordsTotal > 1\">\n        <span>{{recordsTotal}}</span><span>&nbsp;</span><span [translate]=\"'Tables.Items'\"></span>\n      </div>\n      <div class=\"font-xl text-secondary\" *ngIf=\"recordsTotal === 1\">\n        <span>{{recordsTotal}}</span><span>&nbsp;</span><span [translate]=\"'Tables.Item'\"></span>\n      </div>\n    </div>\n    <div class=\"pull-right ml-auto mr-3 mt-3\">\n      <div class=\"font-lg btn-toolbar mt-3\">\n        <a *ngIf=\"table && table.selected && table.selected.length\"\n          class=\"text-danger text-decoration-none mr-2\" href=\"javascript:void(0)\" (click)=\"remove()\">\n          <span>-</span><span>&nbsp;</span><span [translate]=\"'Tables.RemoveItem'\"></span>\n        </a>\n        <a class=\"text-indigo text-decoration-none\" [routerLink]=\"['.', { outlets:{ modal:'add'} }]\">\n          <span>+</span><span>&nbsp;</span><span [translate]=\"'Tables.AddItem'\"></span>\n        </a>\n      </div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-12 mb-4\">\n      <app-advanced-table [selectable]=\"true\" #table\n      [showFooter]=\"false\"\n      (load)=\"onDataLoad($event)\" [height]=\"600\"></app-advanced-table>\n    </div>\n  </div>\n  <router-modal></router-modal>\n</div>\n"
                 }] }
     ];
     /** @nocollapse */
-    AdvancedTableModalBaseComponent.ctorParameters = function () { return [
-        { type: Router },
-        { type: ActivatedRoute },
+    AdvancedListComponent.ctorParameters = function () { return [
         { type: AngularDataContext },
-        { type: AdvancedFilterValueProvider },
-        { type: DatePipe }
+        { type: TranslateService },
+        { type: ActivatedRoute },
+        { type: ErrorService },
+        { type: ToastService },
+        { type: ModalService },
+        { type: UserActivityService }
     ]; };
-    AdvancedTableModalBaseComponent.propDecorators = {
-        advancedTable: [{ type: ViewChild, args: ['advancedTable',] }],
-        emptyTable: [{ type: ViewChild, args: ['emptyTable',] }],
-        dropdownFilter: [{ type: ViewChild, args: ['dropdownFilter',] }],
-        dropdownLength: [{ type: ViewChild, args: ['dropdownLength',] }],
-        tableConfig: [{ type: Input, args: ['tableConfig',] }],
-        tableConfigSrc: [{ type: Input, args: ['tableConfigSrc',] }],
-        pageLength: [{ type: Input, args: ['pageLength',] }],
-        searchText: [{ type: Input, args: ['searchText',] }],
-        lengthMenu: [{ type: Input, args: ['lengthMenu',] }],
-        defaultFilter: [{ type: Input, args: ['defaultFilter',] }]
+    AdvancedListComponent.propDecorators = {
+        entitySet: [{ type: Input, args: ['entitySet',] }],
+        category: [{ type: Input, args: ['category',] }],
+        description: [{ type: Input, args: ['description',] }],
+        longDescription: [{ type: Input, args: ['longDescription',] }],
+        tableConfiguration: [{ type: Input, args: ['tableConfiguration',] }],
+        searchConfiguration: [{ type: Input, args: ['searchConfiguration',] }],
+        table: [{ type: ViewChild, args: ['table',] }],
+        allowSaveOption: [{ type: Input, args: ['allowSaveOption',] }]
     };
-    return AdvancedTableModalBaseComponent;
-}(RouterModalOkCancel));
+    return AdvancedListComponent;
+}());
 
-var AddItemsComponent = /** @class */ (function (_super) {
-    __extends(AddItemsComponent, _super);
-    function AddItemsComponent(router, activatedRoute, _errorService, _modalService, _appEvent, _toastService, _loadingService, _translateService, _context) {
+var AdvancedRowActionComponent = /** @class */ (function (_super) {
+    __extends(AdvancedRowActionComponent, _super);
+    function AdvancedRowActionComponent(router, activatedRoute, _translateService, _context, _errorService, _modalService, _appEvent) {
         var _this = _super.call(this, router, activatedRoute) || this;
+        _this._translateService = _translateService;
+        _this._context = _context;
         _this._errorService = _errorService;
         _this._modalService = _modalService;
         _this._appEvent = _appEvent;
-        _this._toastService = _toastService;
-        _this._loadingService = _loadingService;
-        _this._translateService = _translateService;
-        _this._context = _context;
+        _this.modalIcon = 'fas fa-project-diagram';
+        _this.progressType = 'indigo';
+        _this.errorMessage = 'Tables.Actions.CompletedWithErrors';
         _this.loading = false;
-        _this.items = [];
-        _this.messages = [];
+        _this.refresh = new EventEmitter();
         // set modal size
         _this.modalClass = 'modal-lg';
-        _this.okButtonDisabled = true;
+        // set modal title
+        _this.modalTitle = 'Tables.Actions.Label';
+        // disable ok button
+        _this.okButtonDisabled = false;
+        // set button text
+        _this.okButtonText = 'Tables.Actions.Start';
         return _this;
     }
-    AddItemsComponent.prototype.ngOnInit = function () {
+    Object.defineProperty(AdvancedRowActionComponent.prototype, "form", {
+        get: function () {
+            return this.formComponent;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    AdvancedRowActionComponent.prototype.ngOnInit = function () {
         var _this = this;
-        this.selectedSubscription = this.selectComponent.advancedTable.selectedItems.subscribe(function (items) {
-            if (_this.formName == null) {
-                _this.okButtonDisabled = items.length === 0;
+        this.refreshSubscription = this.refresh.subscribe(function (value) {
+            if (value && value.progress) {
+                var progress = 0;
+                if (value.progress < 0) {
+                    progress = 0;
+                }
+                else if (value.progress > 100) {
+                    progress = 100;
+                }
+                else {
+                    progress = value.progress;
+                }
+                _this.progressComponent.value = progress;
+                _this.showProgress();
             }
         });
-        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);
+    };
+    AdvancedRowActionComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        if (this.formComponent && this.formComponent.form) {
+            this.okButtonDisabled = true;
+            this.invalidSubscription = this.formComponent.form.change.subscribe(function (event) {
+                if (Object.prototype.hasOwnProperty.call(event, "isValid") && (event.changed != null)) {
+                    _this.okButtonDisabled = !event.isValid;
                 }
             });
         }
-        if (this.target) {
-            var target = this.target;
+    };
+    AdvancedRowActionComponent.prototype.ngOnDestroy = function () {
+        if (this.refreshSubscription) {
+            this.refreshSubscription.unsubscribe();
+        }
+        if (this.executeSubscription) {
+            this.executeSubscription.unsubscribe();
+        }
+        if (this.invalidSubscription) {
+            this.invalidSubscription.unsubscribe();
         }
     };
-    AddItemsComponent.prototype.cancel = function () {
-        this.clearMessages();
+    AdvancedRowActionComponent.prototype.cancel = function () {
         if (this.loading) {
             return;
         }
@@ -1972,928 +1888,540 @@ var AddItemsComponent = /** @class */ (function (_super) {
             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();
+    AdvancedRowActionComponent.prototype.ok = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                try {
+                    this.loading = true;
+                    this.lastError = null;
+                    if (this.formComponent && this.formComponent.form &&
+                        this.formComponent.form.formio && this.formComponent.form.formio.data) {
+                        // set data
+                        this.data = this.formComponent.form.formio.data;
                     }
-                    return resolve();
-                }, function (err) {
-                    _this.loading = false;
-                    // ensure that loading is hidden
-                    _this._loadingService.hideLoading();
-                    // set last error
-                    _this.lastError = err;
-                    return resolve();
-                });
+                    // do action
+                    this.execute.subscribe(function (result) {
+                        _this.loading = false;
+                        _this.refresh.emit({
+                            progress: 100
+                        });
+                        if (result && result.errors && result.errors > 0) {
+                            // show message for partial success
+                            if (result.errors === 1) {
+                                _this.lastError = new Error(_this._translateService.instant(_this.errorMessage + ".Description.One"));
+                            }
+                            else {
+                                _this.lastError = new Error(_this._translateService.instant(_this.errorMessage + ".Description.Many", result));
+                            }
+                            _this.refresh.emit({
+                                progress: 1
+                            });
+                            _this.hideProgress();
+                            return;
+                        }
+                        if (_this._modalService.modalRef) {
+                            _this._modalService.modalRef.hide();
+                        }
+                    }, function (err) {
+                        _this.loading = false;
+                        _this.lastError = err;
+                        _this.refresh.emit({
+                            progress: 0
+                        });
+                    });
+                }
+                catch (err) {
+                    this.loading = false;
+                    this.lastError = err;
+                }
+                return [2 /*return*/];
             });
-        }
-        catch (err) {
-            this.loading = false;
-            this._loadingService.hideLoading();
-            this.lastError = err;
-        }
+        });
     };
-    AddItemsComponent.prototype.onChange = function ($event) { };
-    AddItemsComponent.prototype.clearMessages = function () {
-        this.messages = [];
+    AdvancedRowActionComponent.prototype.showProgress = function () {
+        this.progressContainer.nativeElement.classList.replace('invisible', 'visible');
     };
-    AddItemsComponent.prototype.onFilterChange = function (event) { };
-    AddItemsComponent.decorators = [
+    AdvancedRowActionComponent.prototype.hideProgress = function () {
+        this.progressContainer.nativeElement.classList.replace('visible', 'invisible');
+    };
+    AdvancedRowActionComponent.decorators = [
         { type: 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"
+                    selector: 'app-advanced-row-action',
+                    template: "<div>\n    <div class=\"modal-header\" *ngIf=\"modalTitle\">\n        <h5 class=\"modal-title\">{{modalTitle | translate}}</h5>\n        <button (click)=\"cancel()\" [disabled]=\"loading\"\n                type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Cancel\">\n            <span aria-hidden=\"true\">&times;</span>\n        </button>\n    </div>\n    <div class=\"modal-body pt-0 mt-2 pb-0\">\n        <div class=\"row\" *ngIf=\"lastError\">\n            <div class=\"col-12\">\n                <div class=\"alert alert-warning\" role=\"alert\">\n                    <span>{{ 'Tables.Actions.CompletedWithErrors.Title' | translate }}</span><br>\n                    <small *ngIf=\"lastError.status >= 0\" [translate]=\"'E' + lastError.status + '.message'\"></small>\n                    <small *ngIf=\"lastError.status == null\">{{lastError.message}}</small>\n                </div>\n            </div>\n        </div>\n        <div class=\"row\" *ngIf=\"description\">\n          <div class=\"col-12 mb-3\">\n              <div class=\"text-justify\">\n                  {{description | translate}}\n              </div>\n          </div>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-12\">\n                <div *ngIf=\"items && items.length > 1\" [translate]=\"'Tables.Actions.ActionMessage.Many'\"  [translateParams]=\"items\"></div>\n                <div *ngIf=\"items && items.length === 1\" [translate]=\"'Tables.Actions.ActionMessage.One'\"></div>\n                <div class=\"font-weight-bold text-danger\" *ngIf=\"items && items.length <= 0\" [translate]=\"'Tables.Actions.ActionMessage.None'\"></div>\n              <div class=\"pt-2 font-weight-bold text-danger\" *ngIf=\"additionalMessage && items && items.length <= 0\">{{additionalMessage}}</div>\n            </div>\n        </div>\n      <div class=\"row pt-3\" *ngIf=\"formTemplate\">\n        <div class=\"col-12 mb-3\">\n          <div>\n            <advanced-form-edit #formComponent [formName]=\"formTemplate\" [(data)]=\"data\"></advanced-form-edit>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"row mt-3\">\n            <div class=\"col-12 invisible\" #progressContainer>\n                    <progressbar #progress [type]=\"progressType\" [max]=\"100\">\n                    </progressbar>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"modal-footer justify-content-end\">\n        <button [disabled]=\"okButtonDisabled || loading || (items && items.length === 0)\" (click)=\"ok()\"\n                type=\"button\" [ngClass]=\"okButtonClass\">\n            {{okButtonText | translate}}\n        </button>\n        <button [disabled]=\"cancelButtonDisabled || loading\"\n                (click)=\"cancel()\"  type=\"button\" [ngClass]=\"cancelButtonClass\" data-dismiss=\"modal\">\n            {{cancelButtonText | translate}}\n        </button>\n    </div>\n</div>\n",
+                    encapsulation: ViewEncapsulation.None,
+                    styles: ["\n        .fa-1_5x {\n            font-size: 1.5rem;\n        }\n        .form-control:disabled, .form-control[readonly] {\n            background-color: inherit;\n        }\n        .form-check.checkbox {\n          position: relative\n        }\n        "]
                 }] }
     ];
     /** @nocollapse */
-    AddItemsComponent.ctorParameters = function () { return [
+    AdvancedRowActionComponent.ctorParameters = function () { return [
         { type: Router },
         { type: ActivatedRoute },
+        { type: TranslateService },
+        { type: AngularDataContext },
         { type: ErrorService },
         { type: ModalService },
-        { type: AppEventService },
-        { type: ToastService },
-        { type: LoadingService },
-        { type: TranslateService },
-        { type: AngularDataContext }
+        { type: AppEventService }
     ]; };
-    AddItemsComponent.propDecorators = {
-        execute: [{ type: Input }],
+    AdvancedRowActionComponent.propDecorators = {
         items: [{ type: Input }],
-        target: [{ type: Input }],
-        tableConfiguration: [{ type: Input }],
-        formName: [{ type: Input }],
-        messages: [{ type: Input }],
+        modalIcon: [{ type: Input }],
+        description: [{ type: Input }],
+        formTemplate: [{ type: Input }],
+        progressType: [{ type: Input }],
+        data: [{ type: Output }],
+        additionalMessage: [{ type: Input }],
+        errorMessage: [{ type: Input }],
+        progressComponent: [{ type: ViewChild, args: ['progress',] }],
+        progressContainer: [{ type: ViewChild, args: ['progressContainer',] }],
         formComponent: [{ type: ViewChild, args: ['formComponent',] }],
-        selectComponent: [{ type: ViewChild, args: ['selectComponent',] }]
+        refresh: [{ type: Input }],
+        execute: [{ type: Input }]
     };
-    return AddItemsComponent;
+    return AdvancedRowActionComponent;
 }(RouterModalOkCancel));
 
-var AdvancedAggregatorService = /** @class */ (function () {
-    function AdvancedAggregatorService(_context, _template) {
-        this._context = _context;
-        this._template = _template;
+var AdvancedTableSearchBaseComponent = /** @class */ (function () {
+    function AdvancedTableSearchBaseComponent() {
+        this.filterChange = new EventEmitter();
     }
-    /**
-     *
-     * 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()];
-            });
-        });
+    Object.defineProperty(AdvancedTableSearchBaseComponent.prototype, "filter", {
+        get: function () {
+            return this._filter;
+        },
+        set: function (value) {
+            this._filter = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    AdvancedTableSearchBaseComponent.prototype.onKeyEnter = function (event) {
+        if (event.code === 'Enter') {
+            this.filterChange.emit(this._filter);
+        }
     };
-    /**
-     *
-     * 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) {
+    AdvancedTableSearchBaseComponent.propDecorators = {
+        filterChange: [{ type: Output }],
+        filter: [{ type: Input }]
+    };
+    return AdvancedTableSearchBaseComponent;
+}());
+
+var AdvancedSearchFormComponent = /** @class */ (function (_super) {
+    __extends(AdvancedSearchFormComponent, _super);
+    function AdvancedSearchFormComponent(_context, _translateService, _activatedRoute, _http) {
+        var _this = _super.call(this) || this;
+        _this._context = _context;
+        _this._translateService = _translateService;
+        _this._activatedRoute = _activatedRoute;
+        _this._http = _http;
+        _this.form = {};
+        _this.refreshForm = new EventEmitter();
+        _this.submission = { data: {} };
+        _this.loading = true;
+        return _this;
+    }
+    AdvancedSearchFormComponent.prototype.ngOnChanges = function (changes) {
         var _this = this;
-        try {
-            return data.map(function (entry) {
-                if (entry.subitems && Array.isArray(entry.subitems)) {
-                    entry.subitems = _this.formatData(config, entry.subitems);
+        if (Object.prototype.hasOwnProperty.call(changes, 'form')) {
+            if (changes.form != null) {
+                if (changes.form.currentValue &&
+                    changes.form.currentValue != changes.form.previousValue) {
+                    this.ngOnInit();
                 }
-                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;
+            }
+        }
+        if (Object.prototype.hasOwnProperty.call(changes, 'formSrc')) {
+            if (changes.formSrc != null) {
+                if (changes.formSrc.currentValue &&
+                    changes.formSrc.currentValue != changes.formSrc.previousValue) {
+                    this._http.get(changes.formSrc.currentValue).toPromise().then(function (form) {
+                        // set form
+                        _this.form = form;
+                        // and init
+                        _this.ngOnInit();
+                    }).catch(function (err) {
+                        console.error('An error occurred while loading search configuration');
+                        console.error(err);
+                    });
                 }
-                return entryObject;
-            });
+            }
         }
-        catch (err) {
-            console.error(err);
+        if (Object.prototype.hasOwnProperty.call(changes, 'filter')) {
+            if (changes.filter != null) {
+                this.submission.data = changes.filter.currentValue || {};
+                this.refreshForm.emit({
+                    submission: this.submission
+                });
+            }
         }
     };
-    AdvancedAggregatorService.decorators = [
-        { type: Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    /** @nocollapse */
-    AdvancedAggregatorService.ctorParameters = function () { return [
-        { type: AngularDataContext },
-        { type: TemplatePipe }
-    ]; };
-    AdvancedAggregatorService.ngInjectableDef = defineInjectable({ factory: function AdvancedAggregatorService_Factory() { return new AdvancedAggregatorService(inject(AngularDataContext), inject(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 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*/];
+    AdvancedSearchFormComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        if (this.form) {
+            new ServiceUrlPreProcessor(this._context).parse(this.form);
+            new TranslatePreProcessor(this._translateService).parse(this.form);
+            this.submission = {
+                data: this.filter
+            };
+            this.refreshForm.emit({
+                form: this.form
             });
-        });
-    };
-    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*/];
+            this.loading = false;
+            this.filterSubscription = this.filterChange.subscribe(function (filter) {
+                _this.submission.data = filter;
+                _this.refreshForm.emit({
+                    submission: _this.submission
+                });
             });
-        });
+        }
     };
-    /**
-     *
-     * 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*/];
+    AdvancedSearchFormComponent.prototype.onChange = function (event) {
+        var _this = this;
+        Object.keys(this.formComponent.submission.data).forEach(function (key) {
+            if (Object.prototype.hasOwnProperty.call(_this.formComponent.submission.data, key)) {
+                var value = _this.formComponent.submission.data[key];
+                // the filter with type is a string and is not empty
+                var isEmptyString = typeof value === 'string' && value.length === 0;
+                if (!isEmptyString) {
+                    Object.defineProperty(_this.filter, key, {
+                        configurable: true,
+                        enumerable: true,
+                        value: value
+                    });
                 }
-            });
+                else {
+                    delete _this.filter[key];
+                }
+            }
         });
     };
-    /**
-     *
-     * Triggers the event handler event
-     *
-     * @param {*} event The event data
-     *
-     */
-    AdvancedAggregatorComponent.prototype.onActionEvent = function (event) {
-        this.eventHandler.emit(event);
+    AdvancedSearchFormComponent.prototype.onFormLoad = function (form) {
+        var currentLang = this._translateService.currentLang;
+        this.formComponent.formio.i18next.options.resources[currentLang] = { translation: this._translateService.instant("Forms") };
+        this.formComponent.formio.language = currentLang;
     };
-    AdvancedAggregatorComponent.decorators = [
+    AdvancedSearchFormComponent.prototype.ngAfterViewInit = function () {
+        //
+    };
+    AdvancedSearchFormComponent.prototype.ngOnDestroy = function () {
+        if (this.filterSubscription) {
+            this.filterSubscription.unsubscribe();
+        }
+    };
+    AdvancedSearchFormComponent.decorators = [
         { type: 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: ChangeDetectionStrategy.OnPush
+                    selector: 'app-advanced-search-form',
+                    template: "\n    <div class=\"p-4\">\n      <formio #formioComponent class=\"formio-search\" (keydown)=\"onKeyEnter($event)\" (change)=\"onChange($event)\" (formLoad)=\"onFormLoad($event)\"\n              [refresh]=\"refreshForm\" [submission]=\"submission\" [form]=\"form\"></formio>\n    </div>\n  ",
+                    encapsulation: ViewEncapsulation.None,
+                    styles: ["formio.formio-search .form-group{margin-bottom:0}formio.formio-search .form-group .col-form-label{font-size:90%;padding-top:4px;padding-bottom:4px}.choices__list.choices__list--single .choices__item:first-child.choices__item--selectable{width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}"]
                 }] }
     ];
     /** @nocollapse */
-    AdvancedAggregatorComponent.ctorParameters = function () { return [
-        { type: ChangeDetectorRef },
-        { type: AdvancedAggregatorService },
-        { type: LoadingService }
+    AdvancedSearchFormComponent.ctorParameters = function () { return [
+        { type: AngularDataContext },
+        { type: TranslateService },
+        { type: ActivatedRoute },
+        { type: HttpClient }
     ]; };
-    AdvancedAggregatorComponent.propDecorators = {
-        config: [{ type: Input, args: ['config',] }],
-        aggregators: [{ type: Input, args: ['aggregators',] }],
-        postProcessors: [{ type: Input, args: ['postProcessors',] }],
-        params: [{ type: Input, args: ['params',] }],
-        selectedGroups$: [{ type: Input, args: ['selectedGroups',] }],
-        filters$: [{ type: Input, args: ['filters',] }],
-        searchExpression: [{ type: Input, args: ['searchExpression',] }],
-        eventHandler: [{ type: Output }]
+    AdvancedSearchFormComponent.propDecorators = {
+        formComponent: [{ type: ViewChild, args: ['formioComponent',] }],
+        form: [{ type: Input }],
+        formSrc: [{ type: Input }],
+        refreshForm: [{ type: Output }]
     };
-    return AdvancedAggregatorComponent;
-}());
+    return AdvancedSearchFormComponent;
+}(AdvancedTableSearchBaseComponent));
 
-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 EventEmitter();
+// important: export this const due to AOT compilation errors
+// see more https://angular.io/guide/aot-metadata-errors#only-initialized-variables
+var AdvancedTableModalBaseTemplate = "\n<div>\n    <!-- search -->\n    <div class=\"row mt-3\">\n      <div class=\"col-12 col-lg-3\">\n        <div class=\"input-group mb-3\">\n          <input spellcheck=\"false\" type=\"text\"\n                 (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"searchText\"\n                 class=\"form-control bg-gray-100 border-0\"\n                 placeholder=\"{{'Tables.SearchPlaceholder' | translate}}\" aria-label=\"Search\" aria-describedby=\"basic-addon2\">\n          <div class=\"input-group-append\">\n            <button class=\"btn btn-default bg-gray-100 border-0\" type=\"button\">\n              <i class=\"fa fa-search text-secondary\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div #emptyTable class=\"d-none\">\n        <div>\n          <div class=\"mt-4\">\n            <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n          </div>\n          <div class=\"mt-4\">\n            <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n            <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n          </div>\n\n        </div>\n      </div>\n      <div class=\"col-12 col-lg-5\">\n        <div class=\"btn-toolbar\">\n          <button class=\"btn btn-gray-100\">\n            <i class=\"fa fa-sliders-h pr-2 text-secondary\" aria-hidden=\"true\"></i>{{'Tables.Filters' | translate}}\n          </button>\n          <div #dropdownFilter class=\"dropdown ml-3\">\n            <button class=\"btn btn-gray-100 dropdown-toggle\"\n                    type=\"button\" id=\"dropdownDefaultFilters\"\n                    data-toggle=\"dropdown\" dropdownToggle>\n              {{ this.defaultFilter.name | translate }}\n            </button>\n            <div class=\"dropdown-menu\" aria-labelledby=\"dropdownDefaultFilters\">\n              <button type=\"button\" class=\"dropdown-item\" *ngFor=\"let filter of defaultFilters\" (click)=\"onFilterSelect(filter)\">\n                {{ filter.name | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col text-lg-right mt-3 mt-lg-0 d-none\">\n        <button [disabled]=\"true\" class=\"btn rounded-pill btn-outline-theme\">\n          <span class=\"pr-2 font-lg\">+</span><span [translate]=\"'Tables.AddItem'\"></span>\n        </button>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-12\" [ngClass]=\"{ 'component-loading': loading}\">\n        <app-advanced-table #advancedTable (init)=\"onTableInit($event)\"\n                            (load)=\"onDataLoad($event)\"\n                            [selectable]=\"true\"\n                            [multipleSelect]=\"true\"\n                            [scrollX]=\"false\" [scrollY]=\"320\"\n                            [pageLength]=\"pageLength\"\n                            [scrollable]=\"false\" [showFooter]=\"false\"\n                            [showActions]=\"false\" [lengthMenu]=\"lengthMenu\"\n                            [config]=\"tableConfig\" [configSrc]=\"tableConfigSrc\"></app-advanced-table>\n      </div>\n    </div>\n    <div class=\"row mt-3 table-custom-pager\">\n      <div class=\"col-12 d-flex\" *ngIf=\"recordsTotal\">\n        <div class=\"mt-2 ml-auto mr-3 text-secondary\" [translate]=\"'Tables.RecordsPerPage'\"></div>\n        <div #dropdownLength class=\"dropdown mr-3\">\n          <button class=\"btn btn-gray-100 dropdown-toggle\"\n                  type=\"button\" id=\"dropdownPageSize\" data-toggle=\"dropdown\"\n                  dropdownToggle>\n            {{pageLength}}\n          </button>\n          <div class=\"dropdown-menu\" aria-labelledby=\"dropdownPageSize\">\n            <button (click)=\"setLength(item)\"\n                    class=\"dropdown-item dropdown-item-theme\"\n                    type=\"button\" *ngFor=\"let item of lengthMenu\">{{item}}</button>\n          </div>\n        </div>\n        <div class=\"mt-2 mr-2\" [translate]=\"'Tables.PageInfo'\" [translateParams]=\"pageInfo\"></div>\n        <button [disabled]=\"pageInfo && pageInfo.page === 0\" class=\"btn text-nowrap\" (click)=\"firstPage()\">\n          <i class=\"fa fa-chevron-left text-color-theme\"></i>\n          <i class=\"fa fa-chevron-left text-color-theme\"></i>\n        </button>\n        <button [disabled]=\"pageInfo && pageInfo.page===0\" class=\"btn\" (click)=\"previousPage()\">\n          <i class=\"fa fa-chevron-left text-color-theme\"></i>\n        </button>\n        <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn\" (click)=\"nextPage()\">\n          <i class=\"fa fa-chevron-right text-color-theme\"></i>\n        </button>\n        <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn text-nowrap\" (click)=\"lastPage()\">\n          <i class=\"fa fa-chevron-right text-color-theme\"></i>\n          <i class=\"fa fa-chevron-right text-color-theme\"></i>\n        </button>\n      </div>\n    </div>\n  </div>\n";
+var AdvancedTableModalBaseComponent = /** @class */ (function (_super) {
+    __extends(AdvancedTableModalBaseComponent, _super);
+    function AdvancedTableModalBaseComponent(_router, _activatedRoute, _context, advancedFilterValueProvider, datePipe) {
+        var _this = _super.call(this, _router, _activatedRoute) || this;
+        _this._context = _context;
+        _this.advancedFilterValueProvider = advancedFilterValueProvider;
+        _this.datePipe = datePipe;
+        _this.pageLength = 25;
+        _this.lengthMenu = [5, 10, 25, 50, 100];
+        _this.recordsTotal = 0;
+        _this.loading = false;
+        _this.recordsFiltered = 0;
+        _this.defaultFilters = [AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER];
+        _this.defaultFilter = AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER;
+        _this.pageInfo = {
+            serverSide: true
+        };
+        _this.modalClass = 'modal-xl modal-table';
+        _this._template = new TemplatePipe();
+        return _this;
     }
-    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: 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: TemplatePipe }
-    ]; };
-    AdvancedAggregatorListComponent.propDecorators = {
-        config: [{ type: Input }],
-        body: [{ type: Input }],
-        clickEvent: [{ type: Output }]
+    AdvancedTableModalBaseComponent.prototype.ngAfterViewInit = function () {
+        //
     };
-    return AdvancedAggregatorListComponent;
-}());
-
-var AdvancedListComponent = /** @class */ (function () {
-    function AdvancedListComponent(_context, _translateService, _activatedRoute, _errorService, _toastService, _modalService, _userActivityService) {
-        this._context = _context;
-        this._translateService = _translateService;
-        this._activatedRoute = _activatedRoute;
-        this._errorService = _errorService;
-        this._toastService = _toastService;
-        this._modalService = _modalService;
-        this._userActivityService = _userActivityService;
-        this.allowSaveOption = true;
-    }
-    AdvancedListComponent.prototype.ngOnDestroy = function () {
-        if (this.dataSubscription) {
-            this.dataSubscription.unsubscribe();
-        }
-        if (this.reloadSubscription) {
-            this.reloadSubscription.unsubscribe();
-        }
-        if (this.subscription) {
-            this.subscription.unsubscribe();
+    AdvancedTableModalBaseComponent.prototype._getInputs = function (componentType) {
+        var props = componentType.__prop__metadata__;
+        var inputs = [];
+        if (props == null) {
+            return inputs;
         }
-    };
-    AdvancedListComponent.prototype.ngOnInit = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var metadata_1, err_1;
-            var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, this._context.getMetadata()];
-                    case 1:
-                        metadata_1 = _a.sent();
-                        // get route data
-                        this.dataSubscription = this._activatedRoute.data.subscribe(function (routeData) {
-                            // get entityType
-                            var re = new RegExp("^" + routeData.model + "$", 'ig');
-                            var entitySet = metadata_1.EntityContainer.EntitySet.find(function (x) {
-                                return re.test(x.Name);
-                            });
-                            // if entity type is null
-                            if (entitySet == null) {
-                                // navigate to error
-                                return _this._errorService.navigateToError(new ResponseError('EntitySet Not Found', 404));
-                            }
-                            // get entity type
-                            var entityType = metadata_1.EntityType.find(function (x) {
-                                return x.Name === entitySet.EntityType;
-                            });
-                            if (entityType == null) {
-                                return _this._errorService.navigateToError(new ResponseError('EntityType Not Found', 404));
-                            }
-                            if (routeData.searchConfiguration) {
-                                if (Object.prototype.hasOwnProperty.call(routeData.searchConfiguration, 'allowSave')) {
-                                    _this.allowSaveOption = routeData.searchConfiguration.allowSave;
-                                }
-                                _this.searchConfiguration = routeData.searchConfiguration;
-                            }
-                            if (routeData.tableConfiguration) {
-                                _this.tableConfiguration = routeData.tableConfiguration;
-                            }
-                            if (routeData.description) {
-                                _this.description = _this._translateService.instant(routeData.description);
-                            }
-                            if (routeData.longDescription) {
-                                _this.longDescription = _this._translateService.instant(routeData.longDescription);
-                            }
-                            if (routeData.category) {
-                                _this.category = _this._translateService.instant(routeData.category);
-                            }
-                            // clone default configuration
-                            var defaultConfiguration = AdvancedTableConfiguration.cast(_this.tableConfiguration, true);
-                            // correct edit button link
-                            var column = defaultConfiguration.columns.find(function (col) {
-                                return col.formatter === 'ButtonFormatter' && col.formatString === '(modal:edit)';
-                            });
-                            if (column) {
-                                var url_1 = [];
-                                _this._activatedRoute.snapshot.pathFromRoot.forEach(function (route) {
-                                    url_1.push.apply(url_1, route.url);
-                                });
-                                column.formatString = "#/" + url_1.join('/') + "/(modal:${id}/edit)";
-                            }
-                            // create list configuration by assigning list entity set
-                            _this.table.config = Object.assign({
-                                model: entitySet.Name
-                            }, defaultConfiguration);
-                            // fetch data
-                            _this.table.fetch(true);
-                            // do reload by using hidden fragment e.g. /classes#reload
-                            _this.reloadSubscription = _this._activatedRoute.fragment.subscribe(function (fragment) {
-                                if (fragment && fragment === 'reload') {
-                                    _this._toastService.show(_this.description, _this._translateService.instant('Settings.OperationCompleted'));
-                                    _this.table.fetch(true);
-                                }
-                            });
-                            // finally add user activity
-                            _this._userActivityService.setItem({
-                                category: _this.category,
-                                description: _this.description,
-                                url: window.location.hash.substring(1),
-                                dateCreated: new Date
-                            });
-                        });
-                        return [3 /*break*/, 3];
-                    case 2:
-                        err_1 = _a.sent();
-                        console.error(err_1);
-                        return [2 /*return*/, this._errorService.showError(err_1)];
-                    case 3: return [2 /*return*/];
-                }
-            });
+        Object.keys(props).forEach(function (prop) {
+            var member = props[prop][0];
+            if (member.ngMetadataName === 'Input') {
+                inputs.push(prop);
+            }
         });
+        return inputs.sort();
     };
-    /**
-     * Data load event handler of advanced table component
-     * @param {AdvancedTableDataResult} data
-     */
-    AdvancedListComponent.prototype.onDataLoad = function (data) {
-        this.recordsTotal = data.recordsTotal;
+    AdvancedTableModalBaseComponent.prototype.hasInputs = function () {
+        return [];
     };
-    /**
-     * Remove selected items
-     */
-    AdvancedListComponent.prototype.remove = function () {
+    AdvancedTableModalBaseComponent.prototype.ngOnInit = function () {
         var _this = this;
-        if (this.table && this.table.selected && this.table.selected.length) {
-            // get items to remove
-            var items_1 = this.table.selected;
-            return this._modalService.showWarningDialog(this._translateService.instant('Tables.RemoveItemsTitle'), this._translateService.instant('Tables.RemoveItemsMessage'), DIALOG_BUTTONS.OkCancel).then(function (result) {
-                if (result === 'ok') {
-                    _this._context.model(_this.table.config.model).remove(items_1).then(function () {
-                        _this._toastService.show(_this.description + ':' + _this._translateService.instant('Tables.RemoveItemMessage.title'), _this._translateService.instant((items_1.length === 1 ?
-                            'Tables.RemoveItemMessage.one' : 'Tables.RemoveItemMessage.many'), { value: items_1.length }));
-                        _this.table.fetch(true);
-                    }).catch(function (err) {
-                        _this._errorService.showError(err, {
-                            continueLink: '.'
-                        });
-                    });
+        this.okButtonText = 'Tables.Apply';
+        this.cancelButtonText = 'Tables.Cancel';
+        // get route data
+        this.subscription = this.activatedRoute.data.subscribe(function (data) {
+            // set modal title if any
+            if (data.title) {
+                _this.modalTitle = data.title;
+            }
+            if (data.config) {
+                _this.tableConfig = data.config;
+            }
+            if (_this.tableConfig) {
+                _this.defaultFilters.push.apply(_this.defaultFilters, _this.tableConfig.searches);
+            }
+            // important: use hasInputs due to AOT compilation. Metadata properties cannot be used (e.g. @Input())
+            // because there are empty during runtime
+            // so we need to define manually input properties that are going to be bind through this process
+            // bind all inputs
+            var inputs = _this.hasInputs();
+            inputs.forEach(function (input) {
+                if (Object.prototype.hasOwnProperty.call(data, input)) {
+                    _this[input] = data[input];
                 }
             });
-        }
-    };
-    AdvancedListComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'app-advanced-list',
-                    template: "<div>\n  <div class=\"row\" *ngIf=\"description\">\n    <div class=\"col-auto\">\n      <h2>{{description}}</h2>\n      <p *ngIf=\"longDescription\">{{longDescription}}</p>\n    </div>\n  </div>\n  <div class=\"row\" *ngIf=\"searchConfiguration\">\n    <div class=\"col-12\" [ngVar]=\"{}\" #filter=\"ngVar\">\n      <app-advanced-table-search #advancedSearch [(filter)]=\"filter.value\" [collapsed]=\"true\" [table]=\"table\" [allowSave]=\"allowSaveOption\">\n        <advanced-search>\n          <app-advanced-search-form [form]=\"searchConfiguration\" (filterChange)=\"advancedSearch.asyncAdvancedSearch()\" #search [(filter)]=\"filter.value\"></app-advanced-search-form>\n        </advanced-search>\n      </app-advanced-table-search>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-auto mt-4\">\n      <div class=\"font-xl text-secondary\" *ngIf=\"recordsTotal > 1\">\n        <span>{{recordsTotal}}</span><span>&nbsp;</span><span [translate]=\"'Tables.Items'\"></span>\n      </div>\n      <div class=\"font-xl text-secondary\" *ngIf=\"recordsTotal === 1\">\n        <span>{{recordsTotal}}</span><span>&nbsp;</span><span [translate]=\"'Tables.Item'\"></span>\n      </div>\n    </div>\n    <div class=\"pull-right ml-auto mr-3 mt-3\">\n      <div class=\"font-lg btn-toolbar mt-3\">\n        <a *ngIf=\"table && table.selected && table.selected.length\"\n          class=\"text-danger text-decoration-none mr-2\" href=\"javascript:void(0)\" (click)=\"remove()\">\n          <span>-</span><span>&nbsp;</span><span [translate]=\"'Tables.RemoveItem'\"></span>\n        </a>\n        <a class=\"text-indigo text-decoration-none\" [routerLink]=\"['.', { outlets:{ modal:'add'} }]\">\n          <span>+</span><span>&nbsp;</span><span [translate]=\"'Tables.AddItem'\"></span>\n        </a>\n      </div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-12 mb-4\">\n      <app-advanced-table [selectable]=\"true\" #table\n      [autoLoad]=false\n      [showFooter]=\"false\"\n      (load)=\"onDataLoad($event)\" [height]=\"600\"></app-advanced-table>\n    </div>\n  </div>\n  <router-modal></router-modal>\n</div>\n"
-                }] }
-    ];
-    /** @nocollapse */
-    AdvancedListComponent.ctorParameters = function () { return [
-        { type: AngularDataContext },
-        { type: TranslateService },
-        { type: ActivatedRoute },
-        { type: ErrorService },
-        { type: ToastService },
-        { type: ModalService },
-        { type: UserActivityService }
-    ]; };
-    AdvancedListComponent.propDecorators = {
-        entitySet: [{ type: Input, args: ['entitySet',] }],
-        category: [{ type: Input, args: ['category',] }],
-        description: [{ type: Input, args: ['description',] }],
-        longDescription: [{ type: Input, args: ['longDescription',] }],
-        tableConfiguration: [{ type: Input, args: ['tableConfiguration',] }],
-        searchConfiguration: [{ type: Input, args: ['searchConfiguration',] }],
-        table: [{ type: ViewChild, args: ['table',] }],
-        allowSaveOption: [{ type: Input, args: ['allowSaveOption',] }]
-    };
-    return AdvancedListComponent;
-}());
-
-var AdvancedRowActionComponent = /** @class */ (function (_super) {
-    __extends(AdvancedRowActionComponent, _super);
-    function AdvancedRowActionComponent(router, activatedRoute, _translateService, _context, _errorService, _modalService, _appEvent) {
-        var _this = _super.call(this, router, activatedRoute) || this;
-        _this._translateService = _translateService;
-        _this._context = _context;
-        _this._errorService = _errorService;
-        _this._modalService = _modalService;
-        _this._appEvent = _appEvent;
-        _this.modalIcon = 'fas fa-project-diagram';
-        _this.progressType = 'indigo';
-        _this.errorMessage = 'Tables.Actions.CompletedWithErrors';
-        _this.loading = false;
-        _this.refresh = new EventEmitter();
-        // set modal size
-        _this.modalClass = 'modal-lg';
-        // set modal title
-        _this.modalTitle = 'Tables.Actions.Label';
-        // disable ok button
-        _this.okButtonDisabled = false;
-        // set button text
-        _this.okButtonText = 'Tables.Actions.Start';
-        return _this;
-    }
-    Object.defineProperty(AdvancedRowActionComponent.prototype, "form", {
-        get: function () {
-            return this.formComponent;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    AdvancedRowActionComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        this.refreshSubscription = this.refresh.subscribe(function (value) {
-            if (value && value.progress) {
-                var progress = 0;
-                if (value.progress < 0) {
-                    progress = 0;
-                }
-                else if (value.progress > 100) {
-                    progress = 100;
-                }
-                else {
-                    progress = value.progress;
+            _this.configChangesSubscription = _this.advancedTable.configChanges.subscribe(function (config) {
+                if (_this.tableConfig) {
+                    // reset default filter
+                    _this.defaultFilter = AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER;
+                    // init filter
+                    _this.defaultFilters = [AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER];
+                    // add extra filters
+                    _this.defaultFilters.push.apply(_this.defaultFilters, _this.tableConfig.searches);
                 }
-                _this.progressComponent.value = progress;
-            }
+            });
         });
     };
-    AdvancedRowActionComponent.prototype.ngAfterViewInit = function () {
-        var _this = this;
-        if (this.formComponent && this.formComponent.form) {
-            this.okButtonDisabled = true;
-            this.invalidSubscription = this.formComponent.form.change.subscribe(function (event) {
-                if (Object.prototype.hasOwnProperty.call(event, "isValid") && (event.changed != null)) {
-                    _this.okButtonDisabled = !event.isValid;
-                }
-            });
-        }
+    AdvancedTableModalBaseComponent.prototype.cancel = function () {
+        return this.close();
     };
-    AdvancedRowActionComponent.prototype.ngOnDestroy = function () {
-        if (this.refreshSubscription) {
-            this.refreshSubscription.unsubscribe();
-        }
-        if (this.executeSubscription) {
-            this.executeSubscription.unsubscribe();
-        }
-        if (this.invalidSubscription) {
-            this.invalidSubscription.unsubscribe();
-        }
+    AdvancedTableModalBaseComponent.prototype.ok = function () {
+        return this.close();
     };
-    AdvancedRowActionComponent.prototype.cancel = function () {
-        if (this.loading) {
-            return;
+    AdvancedTableModalBaseComponent.prototype.ngOnDestroy = function () {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
         }
-        // close
-        if (this._modalService.modalRef) {
-            return this._modalService.modalRef.hide();
+    };
+    AdvancedTableModalBaseComponent.prototype.onDataLoad = function (data) {
+        this.recordsTotal = data.recordsTotal;
+        this.recordsFiltered = data.recordsFiltered;
+        // get first page info (because page is not going to be fired for first page)
+        if (data.recordsTotal > 0 && this.pageInfo.recordsTotal === 0) {
+            this.pageInfo.recordsTotal = data.recordsTotal;
         }
     };
-    AdvancedRowActionComponent.prototype.ok = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var _this = this;
-            return __generator(this, function (_a) {
-                try {
-                    this.loading = true;
-                    this.lastError = null;
-                    if (this.formComponent && this.formComponent.form &&
-                        this.formComponent.form.formio && this.formComponent.form.formio.data) {
-                        // set data
-                        this.data = this.formComponent.form.formio.data;
-                    }
-                    // do action
-                    this.execute.subscribe(function (result) {
-                        _this.loading = false;
-                        _this.refresh.emit({
-                            progress: 100
-                        });
-                        if (result && result.errors && result.errors > 0) {
-                            // show message for partial success
-                            if (result.errors === 1) {
-                                _this.lastError = new Error(_this._translateService.instant(_this.errorMessage + ".Description.One"));
-                            }
-                            else {
-                                _this.lastError = new Error(_this._translateService.instant(_this.errorMessage + ".Description.Many", result));
-                            }
-                            _this.refresh.emit({
-                                progress: 1
-                            });
-                            return;
-                        }
-                        if (_this._modalService.modalRef) {
-                            _this._modalService.modalRef.hide();
-                        }
-                    }, function (err) {
-                        _this.loading = false;
-                        _this.lastError = err;
-                        _this.refresh.emit({
-                            progress: 0
-                        });
-                    });
-                }
-                catch (err) {
-                    this.loading = false;
-                    this.lastError = err;
-                }
-                return [2 /*return*/];
-            });
+    AdvancedTableModalBaseComponent.prototype.previousPage = function () {
+        // go to next page
+        // noinspection TypeScriptValidateJSTypes
+        this.advancedTable.dataTable.page('previous').draw('page');
+    };
+    AdvancedTableModalBaseComponent.prototype.nextPage = function () {
+        // go to next page
+        // noinspection TypeScriptValidateJSTypes
+        this.advancedTable.dataTable.page('next').draw('page');
+    };
+    AdvancedTableModalBaseComponent.prototype.onTableInit = function (dataTable) {
+        var self = this;
+        // get initial page info
+        var initialPageInfo = dataTable.page.info();
+        initialPageInfo.start += 1;
+        self.pageInfo = initialPageInfo;
+        // change emptyTableMessage
+        dataTable.context[0].oLanguage.sEmptyTable = this.emptyTable.nativeElement.innerHTML;
+        // bind page change event
+        dataTable.on('page.dt', function () {
+            var pageInfo = dataTable.page.info();
+            pageInfo.start += 1;
+            self.pageInfo = pageInfo;
+        });
+        // bind draw change event
+        dataTable.on('draw.dt', function () {
+            // for future use
+            self.loading = false;
+            var pageInfo = dataTable.page.info();
+            pageInfo.start += 1;
+            self.pageInfo = pageInfo;
         });
     };
-    AdvancedRowActionComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'app-advanced-row-action',
-                    template: "<div>\n    <div class=\"modal-header\" *ngIf=\"modalTitle\">\n        <h5 class=\"modal-title\">{{modalTitle | translate}}</h5>\n        <button (click)=\"cancel()\" [disabled]=\"loading\"\n                type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Cancel\">\n            <span aria-hidden=\"true\">&times;</span>\n        </button>\n    </div>\n    <div class=\"modal-body pt-0 mt-2 pb-0\">\n        <div class=\"row\" *ngIf=\"lastError\">\n            <div class=\"col-12\">\n                <div class=\"alert alert-warning\" role=\"alert\">\n                    <span>{{ 'Tables.Actions.CompletedWithErrors.Title' | translate }}</span><br>\n                    <small *ngIf=\"lastError.status >= 0\" [translate]=\"'E' + lastError.status + '.message'\"></small>\n                    <small *ngIf=\"lastError.status == null\">{{lastError.message}}</small>\n                </div>\n            </div>\n        </div>\n        <div class=\"row\" *ngIf=\"description\">\n          <div class=\"col-12 mb-3\">\n              <div class=\"text-justify\">\n                  {{description | translate}}\n              </div>\n          </div>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-12\">\n                <div *ngIf=\"items && items.length > 1\" [translate]=\"'Tables.Actions.ActionMessage.Many'\"  [translateParams]=\"items\"></div>\n                <div *ngIf=\"items && items.length === 1\" [translate]=\"'Tables.Actions.ActionMessage.One'\"></div>\n                <div class=\"font-weight-bold text-danger\" *ngIf=\"items && items.length <= 0\" [translate]=\"'Tables.Actions.ActionMessage.None'\"></div>\n              <div class=\"pt-2 font-weight-bold text-danger\" *ngIf=\"additionalMessage && items && items.length <= 0\">{{additionalMessage}}</div>\n            </div>\n        </div>\n      <div class=\"row pt-3\" *ngIf=\"formTemplate\">\n        <div class=\"col-12 mb-3\">\n          <div>\n            <advanced-form-edit #formComponent [formName]=\"formTemplate\" [(data)]=\"data\"></advanced-form-edit>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"row mt-3\">\n            <div class=\"col-12\">\n                    <progressbar #progress [type]=\"progressType\" [max]=\"100\">\n                    </progressbar>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"modal-footer justify-content-end\">\n        <button [disabled]=\"okButtonDisabled || loading || (items && items.length === 0)\" (click)=\"ok()\"\n                type=\"button\" [ngClass]=\"okButtonClass\">\n            {{okButtonText | translate}}\n        </button>\n        <button [disabled]=\"cancelButtonDisabled || loading\"\n                (click)=\"cancel()\"  type=\"button\" [ngClass]=\"cancelButtonClass\" data-dismiss=\"modal\">\n            {{cancelButtonText | translate}}\n        </button>\n    </div>\n</div>\n",
-                    encapsulation: ViewEncapsulation.None,
-                    styles: ["\n        .fa-1_5x {\n            font-size: 1.5rem;\n        }\n        .form-control:disabled, .form-control[readonly] {\n            background-color: inherit;\n        }\n        .form-check.checkbox {\n          position: relative\n        }\n        "]
-                }] }
-    ];
-    /** @nocollapse */
-    AdvancedRowActionComponent.ctorParameters = function () { return [
-        { type: Router },
-        { type: ActivatedRoute },
-        { type: TranslateService },
-        { type: AngularDataContext },
-        { type: ErrorService },
-        { type: ModalService },
-        { type: AppEventService }
-    ]; };
-    AdvancedRowActionComponent.propDecorators = {
-        items: [{ type: Input }],
-        modalIcon: [{ type: Input }],
-        description: [{ type: Input }],
-        formTemplate: [{ type: Input }],
-        progressType: [{ type: Input }],
-        data: [{ type: Output }],
-        additionalMessage: [{ type: Input }],
-        errorMessage: [{ type: Input }],
-        progressComponent: [{ type: ViewChild, args: ['progress',] }],
-        formComponent: [{ type: ViewChild, args: ['formComponent',] }],
-        refresh: [{ type: Input }],
-        execute: [{ type: Input }]
+    AdvancedTableModalBaseComponent.prototype.firstPage = function () {
+        // go to first page
+        // noinspection TypeScriptValidateJSTypes
+        this.advancedTable.dataTable.page('first').draw('page');
+    };
+    AdvancedTableModalBaseComponent.prototype.lastPage = function () {
+        // go to last page
+        // noinspection TypeScriptValidateJSTypes
+        this.advancedTable.dataTable.page('last').draw('page');
     };
-    return AdvancedRowActionComponent;
-}(RouterModalOkCancel));
-
-var AdvancedTableSearchBaseComponent = /** @class */ (function () {
-    function AdvancedTableSearchBaseComponent() {
-        this.filterChange = new EventEmitter();
-    }
-    Object.defineProperty(AdvancedTableSearchBaseComponent.prototype, "filter", {
-        get: function () {
-            return this._filter;
-        },
-        set: function (value) {
-            this._filter = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    AdvancedTableSearchBaseComponent.prototype.onKeyEnter = function (event) {
+    AdvancedTableModalBaseComponent.prototype.setLength = function (value) {
+        this.pageLength = value;
+        this.advancedTable.dataTable.page.len(value).draw();
+    };
+    AdvancedTableModalBaseComponent.prototype.onKeyUp = function (event) {
         if (event.code === 'Enter') {
-            this.filterChange.emit(this._filter);
+            // loading
+            this.loading = true;
+            this.advancedTable.search(event.target.value);
         }
     };
-    AdvancedTableSearchBaseComponent.propDecorators = {
-        filterChange: [{ type: Output }],
-        filter: [{ type: Input }]
-    };
-    return AdvancedTableSearchBaseComponent;
-}());
-
-var AdvancedSearchFormComponent = /** @class */ (function (_super) {
-    __extends(AdvancedSearchFormComponent, _super);
-    function AdvancedSearchFormComponent(_context, _translateService, _activatedRoute, _http) {
-        var _this = _super.call(this) || this;
-        _this._context = _context;
-        _this._translateService = _translateService;
-        _this._activatedRoute = _activatedRoute;
-        _this._http = _http;
-        _this.form = {};
-        _this.refreshForm = new EventEmitter();
-        _this.submission = { data: {} };
-        _this.loading = true;
-        return _this;
-    }
-    AdvancedSearchFormComponent.prototype.ngOnChanges = function (changes) {
-        var _this = this;
-        if (Object.prototype.hasOwnProperty.call(changes, 'form')) {
-            if (changes.form != null) {
-                if (changes.form.currentValue &&
-                    changes.form.currentValue != changes.form.previousValue) {
-                    this.ngOnInit();
-                }
-            }
+    /**
+     *
+     * Reads the modal table and returns a list of filters to use in the table
+     * query.
+     *
+     * @param tableConfig {object} The table configuration from json file
+     * @param defaultFilterValues {object} A list of default filters
+     * @param {object} searchItem The searchItem to use
+     *
+     */
+    AdvancedTableModalBaseComponent.prototype.getFilters = function (tableConfig, defaultFilterValues, searchItem) {
+        if (defaultFilterValues === void 0) { defaultFilterValues = {}; }
+        // Do nothing in absence of configuration.
+        if (!tableConfig || !Array.isArray(tableConfig.criteria)) {
+            return [];
         }
-        if (Object.prototype.hasOwnProperty.call(changes, 'formSrc')) {
-            if (changes.formSrc != null) {
-                if (changes.formSrc.currentValue &&
-                    changes.formSrc.currentValue != changes.formSrc.previousValue) {
-                    this._http.get(changes.formSrc.currentValue).toPromise().then(function (form) {
-                        // set form
-                        _this.form = form;
-                        // and init
-                        _this.ngOnInit();
-                    }).catch(function (err) {
-                        console.error('An error occurred while loading search configuration');
-                        console.error(err);
-                    });
-                }
-            }
+        if (searchItem.filter == null) {
+            return [];
         }
-        if (Object.prototype.hasOwnProperty.call(changes, 'filter')) {
-            if (changes.filter != null) {
-                this.submission.data = changes.filter.currentValue || {};
-                this.refreshForm.emit({
-                    submission: this.submission
-                });
-            }
+        var matchedCriterion = tableConfig.criteria.find(function (criterion) {
+            return Object.prototype.hasOwnProperty.call(searchItem.filter, criterion.name);
+        });
+        if (matchedCriterion == null) {
+            return [];
         }
-    };
-    AdvancedSearchFormComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        if (this.form) {
-            new ServiceUrlPreProcessor(this._context).parse(this.form);
-            new TranslatePreProcessor(this._translateService).parse(this.form);
-            this.submission = {
-                data: this.filter
-            };
-            this.refreshForm.emit({
-                form: this.form
-            });
-            this.loading = false;
-            this.filterSubscription = this.filterChange.subscribe(function (filter) {
-                _this.submission.data = filter;
-                _this.refreshForm.emit({
-                    submission: _this.submission
-                });
+        var value = searchItem.filter[matchedCriterion.name];
+        var criterionSafeName = matchedCriterion.name !== null
+            ? matchedCriterion.name.toString()
+            : '';
+        var applicableFilter;
+        // Raw dates should be transformed to a specific format
+        if (criterionSafeName.includes('GMT')) {
+            var newDate = this.datePipe.transform(criterionSafeName, 'MM/dd/yyyy');
+            applicableFilter = this._template.transform(matchedCriterion.filter, {
+                value: newDate
             });
         }
+        else if (criterionSafeName !== 'undefined') {
+            applicableFilter = (this._template.transform(matchedCriterion.filter, Object.assign({
+                value: value
+            }, defaultFilterValues)));
+        }
+        else {
+            applicableFilter = '';
+        }
+        return [applicableFilter];
     };
-    AdvancedSearchFormComponent.prototype.onChange = function (event) {
-        var _this = this;
-        Object.keys(this.formComponent.submission.data).forEach(function (key) {
-            if (Object.prototype.hasOwnProperty.call(_this.formComponent.submission.data, key)) {
-                var value = _this.formComponent.submission.data[key];
-                // the filter with type is a string and is not empty
-                var isEmptyString = typeof value === 'string' && value.length === 0;
-                if (!isEmptyString) {
-                    Object.defineProperty(_this.filter, key, {
-                        configurable: true,
-                        enumerable: true,
-                        value: value
-                    });
-                }
-                else {
-                    delete _this.filter[key];
+    AdvancedTableModalBaseComponent.prototype.onFilterSelect = function (value) {
+        this.advancedSearch(value);
+    };
+    /**
+     *
+     * Runs a filter against the modal table
+     *
+     * @param {object} filter The filter to use in the search
+     *
+     */
+    AdvancedTableModalBaseComponent.prototype.advancedSearch = function (filter) {
+        return __awaiter(this, void 0, void 0, function () {
+            var defaultFilterValues, err_1, expressions, predefinedCriteria, query;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        // Do nothing in absence of configuration.
+                        if (!this.tableConfig && !Array.isArray(this.tableConfig.criteria)) {
+                            console.warn('No table configuration available', this.tableConfig);
+                            return [2 /*return*/];
+                        }
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, this.advancedFilterValueProvider.getValues()];
+                    case 2:
+                        defaultFilterValues = _a.sent();
+                        return [3 /*break*/, 4];
+                    case 3:
+                        err_1 = _a.sent();
+                        defaultFilterValues = {};
+                        return [3 /*break*/, 4];
+                    case 4:
+                        expressions = [];
+                        if (filter) {
+                            this.defaultFilter = filter;
+                            predefinedCriteria = this.getFilters(this.tableConfig, defaultFilterValues, filter);
+                        }
+                        else {
+                            // Empty a falsy filter resets the results
+                            this.defaultFilter = AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER;
+                        }
+                        // search filter is applied separately, there is no need to add here.
+                        expressions.push(predefinedCriteria);
+                        query = this._context.model(this.advancedTable.config.model).asQueryable();
+                        query.setParam('filter', expressions.join(' and ')).prepare();
+                        this.advancedTable.query = query;
+                        this.advancedTable.fetch();
+                        return [2 /*return*/];
                 }
-            }
+            });
         });
     };
-    AdvancedSearchFormComponent.prototype.onFormLoad = function (form) {
-        var currentLang = this._translateService.currentLang;
-        this.formComponent.formio.i18next.options.resources[currentLang] = { translation: this._translateService.instant("Forms") };
-        this.formComponent.formio.language = currentLang;
-    };
-    AdvancedSearchFormComponent.prototype.ngAfterViewInit = function () {
-        //
-    };
-    AdvancedSearchFormComponent.prototype.ngOnDestroy = function () {
-        if (this.filterSubscription) {
-            this.filterSubscription.unsubscribe();
-        }
+    AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER = {
+        name: 'Tables.All',
+        filter: null
     };
-    AdvancedSearchFormComponent.decorators = [
+    AdvancedTableModalBaseComponent.decorators = [
         { type: Component, args: [{
-                    selector: 'app-advanced-search-form',
-                    template: "\n    <div class=\"p-4\">\n      <formio #formioComponent class=\"formio-search\" (keydown)=\"onKeyEnter($event)\" (change)=\"onChange($event)\" (formLoad)=\"onFormLoad($event)\"\n              [refresh]=\"refreshForm\" [submission]=\"submission\" [form]=\"form\"></formio>\n    </div>\n  ",
-                    encapsulation: ViewEncapsulation.None,
-                    styles: ["formio.formio-search .form-group{margin-bottom:0}formio.formio-search .form-group .col-form-label{font-size:90%;padding-top:4px;padding-bottom:4px}.choices__list.choices__list--single .choices__item:first-child.choices__item--selectable{width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}"]
+                    // tslint:disable-next-line: component-selector
+                    selector: 'app-advanced-table-modal',
+                    template: AdvancedTableModalBaseTemplate,
+                    styles: ["\n\n    "]
                 }] }
     ];
     /** @nocollapse */
-    AdvancedSearchFormComponent.ctorParameters = function () { return [
-        { type: AngularDataContext },
-        { type: TranslateService },
+    AdvancedTableModalBaseComponent.ctorParameters = function () { return [
+        { type: Router },
         { type: ActivatedRoute },
-        { type: HttpClient }
+        { type: AngularDataContext },
+        { type: AdvancedFilterValueProvider },
+        { type: DatePipe }
     ]; };
-    AdvancedSearchFormComponent.propDecorators = {
-        formComponent: [{ type: ViewChild, args: ['formioComponent',] }],
-        form: [{ type: Input }],
-        formSrc: [{ type: Input }],
-        refreshForm: [{ type: Output }]
+    AdvancedTableModalBaseComponent.propDecorators = {
+        advancedTable: [{ type: ViewChild, args: ['advancedTable',] }],
+        emptyTable: [{ type: ViewChild, args: ['emptyTable',] }],
+        dropdownFilter: [{ type: ViewChild, args: ['dropdownFilter',] }],
+        dropdownLength: [{ type: ViewChild, args: ['dropdownLength',] }],
+        tableConfig: [{ type: Input, args: ['tableConfig',] }],
+        tableConfigSrc: [{ type: Input, args: ['tableConfigSrc',] }],
+        pageLength: [{ type: Input, args: ['pageLength',] }],
+        searchText: [{ type: Input, args: ['searchText',] }],
+        lengthMenu: [{ type: Input, args: ['lengthMenu',] }],
+        defaultFilter: [{ type: Input, args: ['defaultFilter',] }]
     };
-    return AdvancedSearchFormComponent;
-}(AdvancedTableSearchBaseComponent));
+    return AdvancedTableModalBaseComponent;
+}(RouterModalOkCancel));
 
 var AdvancedSelectComponent = /** @class */ (function (_super) {
     __extends(AdvancedSelectComponent, _super);
@@ -2925,7 +2453,7 @@ var AdvancedSelectComponent = /** @class */ (function (_super) {
         { type: Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'app-advanced-select',
-                    template: "<div class=\"modal-header\" *ngIf=\"modalTitle\">\n  <h5 class=\"modal-title\">{{modalTitle | translate}}</h5>\n  <button [disabled]=\"cancelButtonDisabled\" (click)=\"cancel()\" type=\"button\" class=\"close\" data-dismiss=\"modal\"\n    aria-label=\"Cancel\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n    <div>\n      <!-- search -->\n      <div class=\"row mt-3\">\n        <div class=\"col-12 col-lg-3\">\n          <div class=\"input-group mb-3\">\n            <input spellcheck=\"false\" type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"searchText\"\n              class=\"form-control bg-gray-100 border-0\" placeholder=\"{{'Tables.SearchPlaceholder' | translate}}\"\n              aria-label=\"Search\" aria-describedby=\"basic-addon2\">\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-default bg-gray-100 border-0\" type=\"button\">\n                <i class=\"fa fa-search text-secondary\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n        <div #emptyTable class=\"d-none\">\n          <div>\n            <div class=\"mt-4\">\n              <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n            </div>\n            <div class=\"mt-4\">\n              <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n              <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n            </div>\n\n          </div>\n        </div>\n        <div class=\"col-12 col-lg-5\">\n          <div class=\"btn-toolbar\">\n            <button class=\"btn btn-gray-100\">\n              <i class=\"fa fa-sliders-h pr-2 text-secondary\" aria-hidden=\"true\"></i>{{'Tables.Filters' | translate}}\n            </button>\n            <div class=\"dropdown ml-3\">\n              <button dropdownToggle class=\"btn btn-gray-100 dropdown-toggle\" type=\"button\" id=\"dropdownDefaultFilters\"\n                data-toggle=\"dropdown\">\n                {{ this.defaultFilter.name | translate }}\n              </button>\n              <div class=\"dropdown-menu\" aria-labelledby=\"dropdownDefaultFilters\">\n                <a class=\"dropdown-item\" *ngFor=\"let filter of defaultFilters\"\n                  (click)=\"advancedSearch(filter.filter ? filter : '')\">\n                  {{ filter.name | translate }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"col text-lg-right mt-3 mt-lg-0\">\n          <button [disabled]=\"true\" class=\"btn rounded-pill btn-outline-theme\">\n            <span class=\"pr-2 font-lg\">+</span><span [translate]=\"'Tables.AddItem'\"></span>\n          </button>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12\" [ngClass]=\"{ 'component-loading': loading}\">\n          <app-advanced-table #advancedTable (init)=\"onTableInit($event)\" (load)=\"onDataLoad($event)\"\n            [autoLoad]=\"true\"\n            [selectable]=\"true\" [multipleSelect]=\"true\" [scrollX]=\"false\" [scrollY]=\"320\" [pageLength]=\"pageLength\"\n            [scrollable]=\"false\" [showFooter]=\"false\" [showActions]=\"false\" [lengthMenu]=\"lengthMenu\"\n            [config]=\"tableConfig\" [configSrc]=\"tableConfigSrc\"></app-advanced-table>\n        </div>\n      </div>\n      <div class=\"row mt-3 table-custom-pager\">\n        <div class=\"col-12 d-flex\" *ngIf=\"recordsTotal\">\n          <div class=\"mt-2 ml-auto mr-3 text-secondary\" [translate]=\"'Tables.RecordsPerPage'\"></div>\n          <div class=\"dropdown mr-3\">\n            <button dropdownToggle class=\"btn btn-gray-100 dropdown-toggle\" type=\"button\" id=\"dropdownPageSize\"\n              data-toggle=\"dropdown\">\n              {{pageLength}}\n            </button>\n            <div class=\"dropdown-menu\" aria-labelledby=\"dropdownPageSize\">\n              <button (click)=\"setLength(item)\" class=\"dropdown-item dropdown-item-theme\" type=\"button\"\n                *ngFor=\"let item of lengthMenu\">{{item}}</button>\n            </div>\n          </div>\n          <div class=\"mt-2 mr-2\" [translate]=\"'Tables.PageInfo'\" [translateParams]=\"pageInfo\"></div>\n          <button [disabled]=\"pageInfo && pageInfo.page === 0\" class=\"btn text-nowrap\" (click)=\"firstPage()\">\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===0\" class=\"btn\" (click)=\"previousPage()\">\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn\" (click)=\"nextPage()\">\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn text-nowrap\"\n            (click)=\"lastPage()\">\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n</div>\n<div class=\"modal-footer justify-content-end\">\n  <button [disabled]=\"okButtonDisabled\" (click)=\"ok()\" type=\"button\" [ngClass]=\"okButtonClass\">\n    {{okButtonText | translate}}\n  </button>\n  <button [disabled]=\"cancelButtonDisabled\" (click)=\"cancel()\" type=\"button\" [ngClass]=\"cancelButtonClass\"\n    data-dismiss=\"modal\">\n    {{ cancelButtonText | translate}}\n  </button>\n</div>\n",
+                    template: "<div class=\"modal-header\" *ngIf=\"modalTitle\">\n  <h5 class=\"modal-title\">{{modalTitle | translate}}</h5>\n  <button [disabled]=\"cancelButtonDisabled\" (click)=\"cancel()\" type=\"button\" class=\"close\" data-dismiss=\"modal\"\n    aria-label=\"Cancel\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n    <div>\n      <!-- search -->\n      <div class=\"row mt-3\">\n        <div class=\"col-12 col-lg-3\">\n          <div class=\"input-group mb-3\">\n            <input spellcheck=\"false\" type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"searchText\"\n              class=\"form-control bg-gray-100 border-0\" placeholder=\"{{'Tables.SearchPlaceholder' | translate}}\"\n              aria-label=\"Search\" aria-describedby=\"basic-addon2\">\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-default bg-gray-100 border-0\" type=\"button\">\n                <i class=\"fa fa-search text-secondary\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n        <div #emptyTable class=\"d-none\">\n          <div>\n            <div class=\"mt-4\">\n              <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n            </div>\n            <div class=\"mt-4\">\n              <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n              <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n            </div>\n\n          </div>\n        </div>\n        <div class=\"col-12 col-lg-5\">\n          <div class=\"btn-toolbar\">\n            <button class=\"btn btn-gray-100\">\n              <i class=\"fa fa-sliders-h pr-2 text-secondary\" aria-hidden=\"true\"></i>{{'Tables.Filters' | translate}}\n            </button>\n            <div class=\"dropdown ml-3\">\n              <button dropdownToggle class=\"btn btn-gray-100 dropdown-toggle\" type=\"button\" id=\"dropdownDefaultFilters\"\n                data-toggle=\"dropdown\">\n                {{ this.defaultFilter.name | translate }}\n              </button>\n              <div class=\"dropdown-menu\" aria-labelledby=\"dropdownDefaultFilters\">\n                <a class=\"dropdown-item\" *ngFor=\"let filter of defaultFilters\"\n                  (click)=\"advancedSearch(filter.filter ? filter : '')\">\n                  {{ filter.name | translate }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"col text-lg-right mt-3 mt-lg-0 d-none\">\n          <button [disabled]=\"true\" class=\"btn rounded-pill btn-outline-theme\">\n            <span class=\"pr-2 font-lg\">+</span><span [translate]=\"'Tables.AddItem'\"></span>\n          </button>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12\" [ngClass]=\"{ 'component-loading': loading}\">\n          <app-advanced-table #advancedTable (init)=\"onTableInit($event)\" (load)=\"onDataLoad($event)\"\n            [autoLoad]=\"true\"\n            [selectable]=\"true\" [multipleSelect]=\"true\" [scrollX]=\"false\" [scrollY]=\"320\" [pageLength]=\"pageLength\"\n            [scrollable]=\"false\" [showFooter]=\"false\" [showActions]=\"false\" [lengthMenu]=\"lengthMenu\"\n            [config]=\"tableConfig\" [configSrc]=\"tableConfigSrc\"></app-advanced-table>\n        </div>\n      </div>\n      <div class=\"row mt-3 table-custom-pager\">\n        <div class=\"col-12 d-flex\" *ngIf=\"recordsTotal\">\n          <div class=\"mt-2 ml-auto mr-3 text-secondary\" [translate]=\"'Tables.RecordsPerPage'\"></div>\n          <div class=\"dropdown mr-3\">\n            <button dropdownToggle class=\"btn btn-gray-100 dropdown-toggle\" type=\"button\" id=\"dropdownPageSize\"\n              data-toggle=\"dropdown\">\n              {{pageLength}}\n            </button>\n            <div class=\"dropdown-menu\" aria-labelledby=\"dropdownPageSize\">\n              <button (click)=\"setLength(item)\" class=\"dropdown-item dropdown-item-theme\" type=\"button\"\n                *ngFor=\"let item of lengthMenu\">{{item}}</button>\n            </div>\n          </div>\n          <div class=\"mt-2 mr-2\" [translate]=\"'Tables.PageInfo'\" [translateParams]=\"pageInfo\"></div>\n          <button [disabled]=\"pageInfo && pageInfo.page === 0\" class=\"btn text-nowrap\" (click)=\"firstPage()\">\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===0\" class=\"btn\" (click)=\"previousPage()\">\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn\" (click)=\"nextPage()\">\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn text-nowrap\"\n            (click)=\"lastPage()\">\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n</div>\n<div class=\"modal-footer justify-content-end\">\n  <button [disabled]=\"okButtonDisabled\" (click)=\"ok()\" type=\"button\" [ngClass]=\"okButtonClass\">\n    {{okButtonText | translate}}\n  </button>\n  <button [disabled]=\"cancelButtonDisabled\" (click)=\"cancel()\" type=\"button\" [ngClass]=\"cancelButtonClass\"\n    data-dismiss=\"modal\">\n    {{ cancelButtonText | translate}}\n  </button>\n</div>\n",
                     encapsulation: ViewEncapsulation.None,
                     styles: ["\n    .modal-table .dataTables_wrapper {\n      height: 50vh;\n      overflow-y: auto;\n    }\n    "]
                 }] }
@@ -3745,469 +3273,950 @@ var TableSimpleHeaderComponent = /** @class */ (function () {
                     this.dataLoadSubscription.unsubscribe();
                     return;
                 }
-            }
-            if (changes.table.currentValue != changes.table.previousValue) {
-                this.dataLoadSubscription = changes.table.currentValue.load.subscribe(function (data) {
-                    _this.recordsTotal = data.recordsTotal;
-                });
-            }
-        }
+            }
+            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: 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: 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 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,
+        });
+    };
+    /**
+     * Undo changes
+     */
+    AdvancedTableEditorDirective.prototype.undo = function () {
+        if (this.table == null) {
+            throw new AdvancedTableNotNullError();
+        }
+        // reset removed rows
+        this.table.dataTable.rows('.removed').nodes().to$().toggleClass('removed text-gray-400 text-decoration-line-through');
+        // remove added rows
+        this.table.dataTable.rows('.added').remove();
+        // clear selected items
+        this.table.selected = [];
+        var items = this.table.dataTable.rows().data();
+        this.table.dataTable.draw();
+        this.table.load.emit({
+            data: items,
+            recordsFiltered: items.length,
+            recordsTotal: items.length,
+        });
+        this.dirty = false;
+        this.dirtyChange.emit(this.dirty);
+    };
+    AdvancedTableEditorDirective.prototype.rows = function () {
+        if (this.table == null) {
+            throw new AdvancedTableNotNullError();
+        }
+        return Array.from(this.table.dataTable.rows(':not(.removed)').data());
+    };
+    AdvancedTableEditorDirective.decorators = [
+        { type: Directive, args: [{
+                    // tslint:disable-next-line: directive-selector
+                    selector: '[tableEditor]',
+                },] }
+    ];
+    /** @nocollapse */
+    AdvancedTableEditorDirective.ctorParameters = function () { return [
+        { type: AdvancedTableComponent }
+    ]; };
+    AdvancedTableEditorDirective.propDecorators = {
+        dirtyChange: [{ type: Output }]
+    };
+    return AdvancedTableEditorDirective;
+}());
+
+var MAX_EXPORT_ITEMS = 500;
+var BtnExpDirective = /** @class */ (function () {
+    function BtnExpDirective(_activatedTable, _context, _config, _translate, _loadingService, _errorService) {
+        this._activatedTable = _activatedTable;
+        this._context = _context;
+        this._config = _config;
+        this._translate = _translate;
+        this._loadingService = _loadingService;
+        this._errorService = _errorService;
+    }
+    BtnExpDirective.prototype.clickEvent = function (event) {
+        return __awaiter(this, void 0, void 0, function () {
+            var lastQuery, tableConfig, serviceHeaders, queryModel, query, queryParams, maxExportItems, url;
+            return __generator(this, function (_a) {
+                event.preventDefault();
+                event.stopPropagation();
+                if (this._activatedTable.activeTable) {
+                    lastQuery = this._activatedTable.activeTable.lastQuery;
+                    tableConfig = this._activatedTable.activeTable.config;
+                    serviceHeaders = this._context.getService().getHeaders();
+                    queryModel = lastQuery.getModel();
+                    query = this._context.model(queryModel).asQueryable();
+                    queryParams = lastQuery.getParams();
+                    query = this.constructQuery(query, queryParams, tableConfig, serviceHeaders);
+                    maxExportItems = 1000;
+                    if (maxExportItems && typeof maxExportItems === 'number' && maxExportItems > 0) {
+                        query.skip(0).take(maxExportItems);
+                    }
+                    else {
+                        query.skip(0).take(MAX_EXPORT_ITEMS);
+                    }
+                    url = this.constructURL(query);
+                    this.downloadFile(url, query.getService().getHeaders(), query.getModel());
+                }
+                return [2 /*return*/];
+            });
+        });
     };
-    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: 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: 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 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');
+    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; }
+                    }
                 }
-                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');
+            }
+            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];
             }
-        }
-        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);
+            return words.join(' ');
+        });
+        selectQuery = selectQueryArray.join(',');
+        query.setParam('$select', selectQuery);
+        return query;
+    };
+    /**
+     * Constructs the fetch URL based the query parameters
+     * @param {ClientDataQueryable} query
+     * @return String
+     */
+    BtnExpDirective.prototype.constructURL = function (query) {
+        var baseURL = query.getService().getBase();
+        var url = baseURL.endsWith('/') ? (baseURL + query.getModel() + '?') : (baseURL + '/' + query.getModel() + '?');
+        Object.keys(query.getParams()).forEach(function (key, index) {
+            if (index === 0) {
+                url += key + '=' + query.getParams()[key];
+            }
+            else {
+                url += '&' + key + '=' + query.getParams()[key];
             }
-            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);
+        return url;
     };
     /**
-     * Marks rows as removed rows
+     * 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
      */
-    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.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 ResponseError(response.statusText, response.status);
+            }
+            return response.blob();
+        }).then(function (blob) {
+            var objectUrl = window.URL.createObjectURL(blob);
+            var a = document.createElement('a');
+            document.body.appendChild(a);
+            a.setAttribute('style', 'display: none');
+            a.href = objectUrl;
+            var downloadName = modelName + ".xlsx";
+            a.download = downloadName;
+            // this adds support for IE and MS Edge (up to version 44.19041)
+            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+                window.navigator.msSaveOrOpenBlob(blob, downloadName);
             }
             else {
-                // otherwise unmarked row
-                tr.toggleClass('removed text-gray-400 text-decoration-line-through');
+                // for all other browsers
+                a.click();
             }
-            // check if item is selected
-            var selectedIndex = this_1.table.selected.findIndex(function (item) {
-                return item[key] === element[key];
+            window.URL.revokeObjectURL(objectUrl);
+            a.remove();
+            _this._loadingService.hideLoading();
+        }).catch(function (err) {
+            _this._loadingService.hideLoading();
+            _this._errorService.showError(err, {
+                continueLink: '.'
             });
-            // 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,
-        });
+    BtnExpDirective.decorators = [
+        { type: Directive, args: [{
+                    selector: '.universis-btn-export'
+                },] }
+    ];
+    /** @nocollapse */
+    BtnExpDirective.ctorParameters = function () { return [
+        { type: ActivatedTableService },
+        { type: AngularDataContext },
+        { type: ConfigurationService },
+        { type: TranslateService },
+        { type: LoadingService },
+        { type: ErrorService }
+    ]; };
+    BtnExpDirective.propDecorators = {
+        clickEvent: [{ type: 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();
-        }
-        // 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,
+    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()];
+            });
         });
-        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: Directive, args: [{
-                    // tslint:disable-next-line: directive-selector
-                    selector: '[tableEditor]',
+    AdvancedAggregatorService.decorators = [
+        { type: Injectable, args: [{
+                    providedIn: 'root'
                 },] }
     ];
     /** @nocollapse */
-    AdvancedTableEditorDirective.ctorParameters = function () { return [
-        { type: AdvancedTableComponent }
+    AdvancedAggregatorService.ctorParameters = function () { return [
+        { type: AngularDataContext },
+        { type: TemplatePipe }
     ]; };
-    AdvancedTableEditorDirective.propDecorators = {
-        dirtyChange: [{ type: Output }]
-    };
-    return AdvancedTableEditorDirective;
+    AdvancedAggregatorService.ngInjectableDef = defineInjectable({ factory: function AdvancedAggregatorService_Factory() { return new AdvancedAggregatorService(inject(AngularDataContext), inject(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 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: 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: ChangeDetectionStrategy.OnPush
+                }] }
+    ];
+    /** @nocollapse */
+    AdvancedAggregatorComponent.ctorParameters = function () { return [
+        { type: ChangeDetectorRef },
+        { type: AdvancedAggregatorService },
+        { type: LoadingService }
+    ]; };
+    AdvancedAggregatorComponent.propDecorators = {
+        config: [{ type: Input, args: ['config',] }],
+        aggregators: [{ type: Input, args: ['aggregators',] }],
+        postProcessors: [{ type: Input, args: ['postProcessors',] }],
+        params: [{ type: Input, args: ['params',] }],
+        selectedGroups$: [{ type: Input, args: ['selectedGroups',] }],
+        filters$: [{ type: Input, args: ['filters',] }],
+        searchExpression: [{ type: Input, args: ['searchExpression',] }],
+        eventHandler: [{ type: 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 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: 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: TemplatePipe }
+    ]; };
+    AdvancedAggregatorListComponent.propDecorators = {
+        config: [{ type: Input }],
+        body: [{ type: Input }],
+        clickEvent: [{ type: Output }]
     };
-    /**
-     * 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) {
+    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 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: 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: 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 () { return [
-        { type: ActivatedTableService },
-        { type: AngularDataContext },
-        { type: ConfigurationService },
-        { type: TranslateService },
+    AddItemsComponent.ctorParameters = function () { return [
+        { type: Router },
+        { type: ActivatedRoute },
+        { type: ErrorService },
+        { type: ModalService },
+        { type: AppEventService },
+        { type: ToastService },
         { type: LoadingService },
-        { type: ErrorService }
+        { type: TranslateService },
+        { type: AngularDataContext }
     ]; };
-    BtnExpDirective.propDecorators = {
-        clickEvent: [{ type: HostListener, args: ['click', ['$event'],] }]
+    AddItemsComponent.propDecorators = {
+        execute: [{ type: Input }],
+        items: [{ type: Input }],
+        target: [{ type: Input }],
+        tableConfiguration: [{ type: Input }],
+        formName: [{ type: Input }],
+        messages: [{ type: Input }],
+        formComponent: [{ type: ViewChild, args: ['formComponent',] }],
+        selectComponent: [{ type: ViewChild, args: ['selectComponent',] }]
     };
-    return BtnExpDirective;
-}());
+    return AddItemsComponent;
+}(RouterModalOkCancel));
 
 /**
  *
@@ -4297,6 +4306,7 @@ var TABLES_EL = {
         "Search": "Αναζήτηση",
         "SearchPlaceholder": "Αναζήτηση...",
         "GroupBy": "Ομαδοποίηση ανά",
+        "NotDefined": "Μη προσδιορισμένο",
         "DataTable": {
             "paginate": {
                 "first": "Πρώτη σελίδα",
@@ -4400,6 +4410,7 @@ var TABLES_EN = {
         "Search": "Search",
         "SearchPlaceholder": "Search...",
         "GroupBy": "Group by",
+        "NotDefined": "Not defined",
         "DataTable": {
             "paginate": {
                 "first": "First",
@@ -4601,6 +4612,6 @@ var TablesModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { AddItemsComponent, AdvancedAggregatorComponent, AdvancedAggregatorListComponent, AdvancedListComponent, AdvancedRowActionComponent, AdvancedSearchFormComponent, AdvancedSelectComponent, AdvancedSelectService, AdvancedTableConfigurationResolver, AdvancedSearchConfigurationResolver, AdvancedColumnFormatter, NestedPropertyFormatter, ButtonFormatter, LinkFormatter, ActionLinkFormatter, ActionButtonFormatter, ActionSplitButtonFormatter, SelectRowFormatter, TemplateFormatter, TrueFalseFormatter, TranslationFormatter, DateTimeFormatter, NgClassFormatter, LanguageFormatter, COLUMN_FORMATTERS, AdvancedTableConfiguration, AdvancedTableComponent, AdvancedTableSettingsComponent, AdvancedTableSearchBaseComponent, AdvancedTableSearchComponent, FORMATTERS, AdvancedFilterValueProvider, AdvancedTableModalBaseTemplate, AdvancedTableModalBaseComponent, SimpleHeaderToolsComponent, TableSimpleHeaderComponent, AdvancedTableNotNullError, AdvancedTableEditorDirective, BtnExpDirective, AdvancedAggregatorPipe, ParseTitlePipe, AdvancedAggregatorService, TablesModule, ɵ0, ActivatedTableService };
+export { AdvancedListComponent, AdvancedRowActionComponent, AdvancedSearchFormComponent, AdvancedSelectComponent, AdvancedSelectService, AdvancedTableConfigurationResolver, AdvancedSearchConfigurationResolver, AdvancedColumnFormatter, NestedPropertyFormatter, ButtonFormatter, LinkFormatter, ActionLinkFormatter, ActionButtonFormatter, ActionSplitButtonFormatter, SelectRowFormatter, TemplateFormatter, TrueFalseFormatter, TranslationFormatter, DateTimeFormatter, NgClassFormatter, LanguageFormatter, COLUMN_FORMATTERS, AdvancedTableConfiguration, AdvancedTableComponent, AdvancedTableSettingsComponent, AdvancedTableSearchBaseComponent, AdvancedTableSearchComponent, FORMATTERS, AdvancedFilterValueProvider, AdvancedTableModalBaseTemplate, AdvancedTableModalBaseComponent, SimpleHeaderToolsComponent, TableSimpleHeaderComponent, AdvancedTableNotNullError, AdvancedTableEditorDirective, BtnExpDirective, AdvancedAggregatorComponent, AdvancedAggregatorListComponent, AddItemsComponent, AdvancedAggregatorPipe, ParseTitlePipe, AdvancedAggregatorService, TablesModule, ɵ0, ActivatedTableService };
 
 //# sourceMappingURL=universis-ngx-tables.js.map