@universis/ngx-tables 0.6.13 → 0.6.18

package/fesm2015/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 } from 'tslib';
 import { Injectable, Directive, Output, EventEmitter, Pipe, Component, Input, ViewChild, ViewEncapsulation, ChangeDetectorRef, ElementRef, Inject, InjectionToken, Injector, NgModule, CUSTOM_ELEMENTS_SCHEMA, defineInjectable, inject, HostListener, 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';
@@ -1496,7 +1496,7 @@ AdvancedTableComponent.decorators = [
                 // tslint:disable-next-line: component-selector
                 selector: 'app-advanced-table',
                 template: `
-    <table #table class="dataTable nowrap mr-0">
+    <table #table class="dataTable">
     </table>
     <div #emptyTable class="d-none">
       <div>
@@ -1558,418 +1558,233 @@ AdvancedTableComponent.propDecorators = {
     query: [{ type: Input, args: ['query',] }]
 };
 
-// important: export this const due to AOT compilation errors
-// see more https://angular.io/guide/aot-metadata-errors#only-initialized-variables
-const AdvancedTableModalBaseTemplate = `
-<div>
-    <!-- search -->
-    <div class="row mt-3">
-      <div class="col-12 col-lg-3">
-        <div class="input-group mb-3">
-          <input spellcheck="false" type="text"
-                 (keyup)="onKeyUp($event)" [(ngModel)]="searchText"
-                 class="form-control bg-gray-100 border-0"
-                 placeholder="{{'Tables.SearchPlaceholder' | translate}}" aria-label="Search" aria-describedby="basic-addon2">
-          <div class="input-group-append">
-            <button class="btn btn-default bg-gray-100 border-0" type="button">
-              <i class="fa fa-search text-secondary"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div #emptyTable class="d-none">
-        <div>
-          <div class="mt-4">
-            <div class="icon-circle bg-gray-300 border-gray-100"></div>
-          </div>
-          <div class="mt-4">
-            <h4 class="font-3xl text-dark" [translate]="'Tables.EmptyTableTitle'"></h4>
-            <p class="font-lg text-dark" [translate]="'Tables.EmptyTableMessage'"></p>
-          </div>
-
-        </div>
-      </div>
-      <div class="col-12 col-lg-5">
-        <div class="btn-toolbar">
-          <button class="btn btn-gray-100">
-            <i class="fa fa-sliders-h pr-2 text-secondary" aria-hidden="true"></i>{{'Tables.Filters' | translate}}
-          </button>
-          <div #dropdownFilter class="dropdown ml-3">
-            <button class="btn btn-gray-100 dropdown-toggle"
-                    type="button" id="dropdownDefaultFilters"
-                    data-toggle="dropdown" dropdownToggle>
-              {{ this.defaultFilter.name | translate }}
-            </button>
-            <div class="dropdown-menu" aria-labelledby="dropdownDefaultFilters">
-              <button type="button" class="dropdown-item" *ngFor="let filter of defaultFilters" (click)="onFilterSelect(filter)">
-                {{ filter.name | translate }}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="col text-lg-right mt-3 mt-lg-0">
-        <button [disabled]="true" class="btn rounded-pill btn-outline-theme">
-          <span class="pr-2 font-lg">+</span><span [translate]="'Tables.AddItem'"></span>
-        </button>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-12" [ngClass]="{ 'component-loading': loading}">
-        <app-advanced-table #advancedTable (init)="onTableInit($event)"
-                            (load)="onDataLoad($event)"
-                            [selectable]="true"
-                            [multipleSelect]="true"
-                            [scrollX]="false" [scrollY]="320"
-                            [pageLength]="pageLength"
-                            [scrollable]="false" [showFooter]="false"
-                            [showActions]="false" [lengthMenu]="lengthMenu"
-                            [config]="tableConfig" [configSrc]="tableConfigSrc"></app-advanced-table>
-      </div>
-    </div>
-    <div class="row mt-3 table-custom-pager">
-      <div class="col-12 d-flex" *ngIf="recordsTotal">
-        <div class="mt-2 ml-auto mr-3 text-secondary" [translate]="'Tables.RecordsPerPage'"></div>
-        <div #dropdownLength class="dropdown mr-3">
-          <button class="btn btn-gray-100 dropdown-toggle"
-                  type="button" id="dropdownPageSize" data-toggle="dropdown"
-                  dropdownToggle>
-            {{pageLength}}
-          </button>
-          <div class="dropdown-menu" aria-labelledby="dropdownPageSize">
-            <button (click)="setLength(item)"
-                    class="dropdown-item dropdown-item-theme"
-                    type="button" *ngFor="let item of lengthMenu">{{item}}</button>
-          </div>
-        </div>
-        <div class="mt-2 mr-2" [translate]="'Tables.PageInfo'" [translateParams]="pageInfo"></div>
-        <button [disabled]="pageInfo && pageInfo.page === 0" class="btn text-nowrap" (click)="firstPage()">
-          <i class="fa fa-chevron-left text-color-theme"></i>
-          <i class="fa fa-chevron-left text-color-theme"></i>
-        </button>
-        <button [disabled]="pageInfo && pageInfo.page===0" class="btn" (click)="previousPage()">
-          <i class="fa fa-chevron-left text-color-theme"></i>
-        </button>
-        <button [disabled]="pageInfo && pageInfo.page===pageInfo.pages-1" class="btn" (click)="nextPage()">
-          <i class="fa fa-chevron-right text-color-theme"></i>
-        </button>
-        <button [disabled]="pageInfo && pageInfo.page===pageInfo.pages-1" class="btn text-nowrap" (click)="lastPage()">
-          <i class="fa fa-chevron-right text-color-theme"></i>
-          <i class="fa fa-chevron-right text-color-theme"></i>
-        </button>
-      </div>
-    </div>
-  </div>
-`;
-class AdvancedTableModalBaseComponent extends RouterModalOkCancel {
-    constructor(_router, _activatedRoute, _context, advancedFilterValueProvider, datePipe) {
-        super(_router, _activatedRoute);
+class AdvancedListComponent {
+    constructor(_context, _translateService, _activatedRoute, _errorService, _toastService, _modalService, _userActivityService) {
         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();
-    }
-    ngAfterViewInit() {
-        //
-    }
-    _getInputs(componentType) {
-        const props = componentType.__prop__metadata__;
-        const inputs = [];
-        if (props == null) {
-            return inputs;
-        }
-        Object.keys(props).forEach(prop => {
-            const member = props[prop][0];
-            if (member.ngMetadataName === 'Input') {
-                inputs.push(prop);
-            }
-        });
-        return inputs.sort();
-    }
-    hasInputs() {
-        return [];
-    }
-    ngOnInit() {
-        this.okButtonText = 'Tables.Apply';
-        this.cancelButtonText = 'Tables.Cancel';
-        // get route data
-        this.subscription = this.activatedRoute.data.subscribe(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
-            const inputs = this.hasInputs();
-            inputs.forEach(input => {
-                if (Object.prototype.hasOwnProperty.call(data, input)) {
-                    this[input] = data[input];
-                }
-            });
-            this.configChangesSubscription = this.advancedTable.configChanges.subscribe((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);
-                }
-            });
-        });
-    }
-    cancel() {
-        return this.close();
-    }
-    ok() {
-        return this.close();
+        this._translateService = _translateService;
+        this._activatedRoute = _activatedRoute;
+        this._errorService = _errorService;
+        this._toastService = _toastService;
+        this._modalService = _modalService;
+        this._userActivityService = _userActivityService;
+        this.allowSaveOption = true;
     }
     ngOnDestroy() {
+        if (this.dataSubscription) {
+            this.dataSubscription.unsubscribe();
+        }
+        if (this.reloadSubscription) {
+            this.reloadSubscription.unsubscribe();
+        }
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    onDataLoad(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;
-        }
-    }
-    previousPage() {
-        // go to next page
-        // noinspection TypeScriptValidateJSTypes
-        this.advancedTable.dataTable.page('previous').draw('page');
-    }
-    nextPage() {
-        // go to next page
-        // noinspection TypeScriptValidateJSTypes
-        this.advancedTable.dataTable.page('next').draw('page');
-    }
-    onTableInit(dataTable) {
-        const self = this;
-        // get initial page info
-        const 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 () {
-            const 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;
-            const pageInfo = dataTable.page.info();
-            pageInfo.start += 1;
-            self.pageInfo = pageInfo;
-        });
-    }
-    firstPage() {
-        // go to first page
-        // noinspection TypeScriptValidateJSTypes
-        this.advancedTable.dataTable.page('first').draw('page');
-    }
-    lastPage() {
-        // go to last page
-        // noinspection TypeScriptValidateJSTypes
-        this.advancedTable.dataTable.page('last').draw('page');
-    }
-    setLength(value) {
-        this.pageLength = value;
-        this.advancedTable.dataTable.page.len(value).draw();
-    }
-    onKeyUp(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
-     *
-     */
-    getFilters(tableConfig, defaultFilterValues = {}, searchItem) {
-        // Do nothing in absence of configuration.
-        if (!tableConfig || !Array.isArray(tableConfig.criteria)) {
-            return [];
-        }
-        if (searchItem.filter == null) {
-            return [];
-        }
-        const matchedCriterion = tableConfig.criteria.find(criterion => Object.prototype.hasOwnProperty.call(searchItem.filter, criterion.name));
-        if (matchedCriterion == null) {
-            return [];
-        }
-        const value = searchItem.filter[matchedCriterion.name];
-        const criterionSafeName = matchedCriterion.name !== null
-            ? matchedCriterion.name.toString()
-            : '';
-        let applicableFilter;
-        // Raw dates should be transformed to a specific format
-        if (criterionSafeName.includes('GMT')) {
-            const 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];
-    }
-    onFilterSelect(value) {
-        this.advancedSearch(value);
-    }
-    /**
-     *
-     * Runs a filter against the modal table
-     *
-     * @param {object} filter The filter to use in the search
-     *
-     */
-    advancedSearch(filter) {
+    ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
-            // Do nothing in absence of configuration.
-            if (!this.tableConfig && !Array.isArray(this.tableConfig.criteria)) {
-                console.warn('No table configuration available', this.tableConfig);
-                return;
-            }
-            // An advanced table has some filters by default
-            let defaultFilterValues;
             try {
-                defaultFilterValues = yield this.advancedFilterValueProvider.getValues();
+                // get metadata
+                const metadata = yield this._context.getMetadata();
+                // get route data
+                this.dataSubscription = this._activatedRoute.data.subscribe(routeData => {
+                    // get entityType
+                    const re = new RegExp(`^${routeData.model}$`, 'ig');
+                    const entitySet = metadata.EntityContainer.EntitySet.find(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
+                    const entityType = metadata.EntityType.find(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
+                    const defaultConfiguration = AdvancedTableConfiguration.cast(this.tableConfiguration, true);
+                    // correct edit button link
+                    const column = defaultConfiguration.columns.find(col => {
+                        return col.formatter === 'ButtonFormatter' && col.formatString === '(modal:edit)';
+                    });
+                    if (column) {
+                        const url = [];
+                        this._activatedRoute.snapshot.pathFromRoot.forEach(route => {
+                            url.push.apply(url, route.url);
+                        });
+                        column.formatString = `#/${url.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(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
+                    });
+                });
             }
             catch (err) {
-                defaultFilterValues = {};
-            }
-            const expressions = [];
-            let predefinedCriteria;
-            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;
+                console.error(err);
+                return this._errorService.showError(err);
             }
-            // search filter is applied separately, there is no need to add here.
-            expressions.push(predefinedCriteria);
-            const query = this._context.model(this.advancedTable.config.model).asQueryable();
-            query.setParam('filter', expressions.join(' and ')).prepare();
-            this.advancedTable.query = query;
-            this.advancedTable.fetch();
         });
     }
+    /**
+     * Data load event handler of advanced table component
+     * @param {AdvancedTableDataResult} data
+     */
+    onDataLoad(data) {
+        this.recordsTotal = data.recordsTotal;
+    }
+    /**
+     * Remove selected items
+     */
+    remove() {
+        if (this.table && this.table.selected && this.table.selected.length) {
+            // get items to remove
+            const items = this.table.selected;
+            return this._modalService.showWarningDialog(this._translateService.instant('Tables.RemoveItemsTitle'), this._translateService.instant('Tables.RemoveItemsMessage'), DIALOG_BUTTONS.OkCancel).then(result => {
+                if (result === 'ok') {
+                    this._context.model(this.table.config.model).remove(items).then(() => {
+                        this._toastService.show(this.description + ':' + this._translateService.instant('Tables.RemoveItemMessage.title'), this._translateService.instant((items.length === 1 ?
+                            'Tables.RemoveItemMessage.one' : 'Tables.RemoveItemMessage.many'), { value: items.length }));
+                        this.table.fetch(true);
+                    }).catch(err => {
+                        this._errorService.showError(err, {
+                            continueLink: '.'
+                        });
+                    });
+                }
+            });
+        }
+    }
 }
-AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER = {
-    name: 'Tables.All',
-    filter: null
-};
-AdvancedTableModalBaseComponent.decorators = [
+AdvancedListComponent.decorators = [
     { type: Component, args: [{
-                // tslint:disable-next-line: component-selector
-                selector: 'app-advanced-table-modal',
-                template: AdvancedTableModalBaseTemplate,
-                styles: [`
-
-    `]
+                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 = () => [
-    { type: Router },
-    { type: ActivatedRoute },
+AdvancedListComponent.ctorParameters = () => [
     { 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',] }]
 };
 
-class AddItemsComponent extends RouterModalOkCancel {
-    constructor(router, activatedRoute, _errorService, _modalService, _appEvent, _toastService, _loadingService, _translateService, _context) {
+class AdvancedRowActionComponent extends RouterModalOkCancel {
+    constructor(router, activatedRoute, _translateService, _context, _errorService, _modalService, _appEvent) {
         super(router, activatedRoute);
+        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;
-    }
-    ngOnInit() {
-        this.selectedSubscription = this.selectComponent.advancedTable.selectedItems.subscribe((items) => {
-            if (this.formName == null) {
-                this.okButtonDisabled = items.length === 0;
+        // set modal title
+        this.modalTitle = 'Tables.Actions.Label';
+        // disable ok button
+        this.okButtonDisabled = false;
+        // set button text
+        this.okButtonText = 'Tables.Actions.Start';
+    }
+    get form() {
+        return this.formComponent;
+    }
+    ngOnInit() {
+        this.refreshSubscription = this.refresh.subscribe((value) => {
+            if (value && value.progress) {
+                let 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((event) => {
-                if (Object.prototype.hasOwnProperty.call(event, 'isValid')) {
-                    // enable or disable button based on form status
-                    this.okButtonDisabled = (!event.isValid);
+    }
+    ngAfterViewInit() {
+        if (this.formComponent && this.formComponent.form) {
+            this.okButtonDisabled = true;
+            this.invalidSubscription = this.formComponent.form.change.subscribe((event) => {
+                if (Object.prototype.hasOwnProperty.call(event, "isValid") && (event.changed != null)) {
+                    this.okButtonDisabled = !event.isValid;
                 }
             });
         }
-        if (this.target) {
-            const target = this.target;
+    }
+    ngOnDestroy() {
+        if (this.refreshSubscription) {
+            this.refreshSubscription.unsubscribe();
+        }
+        if (this.executeSubscription) {
+            this.executeSubscription.unsubscribe();
+        }
+        if (this.invalidSubscription) {
+            this.invalidSubscription.unsubscribe();
         }
     }
     cancel() {
-        this.clearMessages();
         if (this.loading) {
             return;
         }
@@ -1978,838 +1793,623 @@ class AddItemsComponent extends RouterModalOkCancel {
             return this._modalService.modalRef.hide();
         }
     }
-    ngOnDestroy() {
-        if (this.formLoadSubscription) {
-            this.formLoadSubscription.unsubscribe();
-        }
-        if (this.formChangeSubscription) {
-            this.formChangeSubscription.unsubscribe();
-        }
-        if (this.selectedSubscription) {
-            this.selectedSubscription.unsubscribe();
-        }
-    }
-    get formData() {
-        if (this.formComponent === null) {
-            return null;
-        }
-        return this.formComponent.form.formio.data;
-    }
     ok() {
-        try {
-            this.clearMessages();
-            return new Promise((resolve, reject) => {
-                this.loading = false;
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                this.loading = true;
                 this.lastError = null;
-                // set courses
-                this.items = this.selectComponent.advancedTable.selected;
-                // execute add
-                this.executeSubscription = this.execute.subscribe((result) => {
+                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((result) => {
                     this.loading = false;
-                    if (this.executeSubscription) {
-                        this.executeSubscription.unsubscribe();
+                    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;
                     }
-                    // close modal
                     if (this._modalService.modalRef) {
                         this._modalService.modalRef.hide();
                     }
-                    return resolve();
                 }, (err) => {
                     this.loading = false;
-                    // ensure that loading is hidden
-                    this._loadingService.hideLoading();
-                    // set last error
                     this.lastError = err;
-                    return resolve();
+                    this.refresh.emit({
+                        progress: 0
+                    });
                 });
-            });
-        }
-        catch (err) {
-            this.loading = false;
-            this._loadingService.hideLoading();
-            this.lastError = err;
-        }
+            }
+            catch (err) {
+                this.loading = false;
+                this.lastError = err;
+            }
+        });
     }
-    onChange($event) { }
-    clearMessages() {
-        this.messages = [];
+    showProgress() {
+        this.progressContainer.nativeElement.classList.replace('invisible', 'visible');
+    }
+    hideProgress() {
+        this.progressContainer.nativeElement.classList.replace('visible', 'invisible');
     }
-    onFilterChange(event) { }
 }
-AddItemsComponent.decorators = [
+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: [`
+        .fa-1_5x {
+            font-size: 1.5rem;
+        }
+        .form-control:disabled, .form-control[readonly] {
+            background-color: inherit;
+        }
+        .form-check.checkbox {
+          position: relative
+        }
+        `]
             }] }
 ];
 /** @nocollapse */
-AddItemsComponent.ctorParameters = () => [
+AdvancedRowActionComponent.ctorParameters = () => [
     { 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 }]
 };
 
-class AdvancedAggregatorService {
-    constructor(_context, _template) {
+class AdvancedTableSearchBaseComponent {
+    constructor() {
+        this.filterChange = new EventEmitter();
+    }
+    get filter() {
+        return this._filter;
+    }
+    set filter(value) {
+        this._filter = value;
+    }
+    onKeyEnter(event) {
+        if (event.code === 'Enter') {
+            this.filterChange.emit(this._filter);
+        }
+    }
+}
+AdvancedTableSearchBaseComponent.propDecorators = {
+    filterChange: [{ type: Output }],
+    filter: [{ type: Input }]
+};
+
+class AdvancedSearchFormComponent extends AdvancedTableSearchBaseComponent {
+    constructor(_context, _translateService, _activatedRoute, _http) {
+        super();
         this._context = _context;
-        this._template = _template;
+        this._translateService = _translateService;
+        this._activatedRoute = _activatedRoute;
+        this._http = _http;
+        this.form = {};
+        this.refreshForm = new EventEmitter();
+        this.submission = { data: {} };
+        this.loading = true;
     }
-    /**
-     *
-     * 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
-     */
-    fetchData(model, fixedParams, queryStatement = '', filters, searchTemplate, searchValue) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const query = this._context.model(model).asQueryable();
-            if (!fixedParams || typeof fixedParams !== 'object') {
-                fixedParams = {};
+    ngOnChanges(changes) {
+        if (Object.prototype.hasOwnProperty.call(changes, 'form')) {
+            if (changes.form != null) {
+                if (changes.form.currentValue &&
+                    changes.form.currentValue != changes.form.previousValue) {
+                    this.ngOnInit();
+                }
             }
-            let filterExpressions = [];
-            if (fixedParams) {
-                for (let param of Object.keys(fixedParams)) {
-                    filterExpressions.push(`${param} eq ${fixedParams[param]}`);
+        }
+        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((form) => {
+                        // set form
+                        this.form = form;
+                        // and init
+                        this.ngOnInit();
+                    }).catch((err) => {
+                        console.error('An error occurred while loading search configuration');
+                        console.error(err);
+                    });
                 }
             }
-            if (filters && Array.isArray(filters)) {
-                filterExpressions = [
-                    ...filterExpressions,
-                    ...filters
-                ];
-            }
-            if (searchTemplate && searchValue) {
-                let evaluatedSearch;
-                if (/^"(.*?)"$/.test(searchValue)) { // validate search text in double quotes
-                    evaluatedSearch = this._template.transform(searchTemplate, Object.assign({}, fixedParams, { text: searchValue.replace(/^"|"$/g, '') }));
-                }
-                else {
-                    // try to split words
-                    const words = searchValue.split(' ');
-                    // join words to a single filter
-                    evaluatedSearch = words.map(word => {
-                        return this._template.transform(searchTemplate, Object.assign({}, fixedParams, { text: word }));
-                    }).join(' and ');
-                }
-                filterExpressions.push(evaluatedSearch);
-            }
-            query.setParam('$filter', filterExpressions.join('and'));
-            return query.expand(queryStatement).take(-1).getItems();
-        });
-    }
-    /**
-     *
-     * Formats the received data to use flat keys
-     *
-     * @param config The applied configuration
-     * @param data The raw data
-     *
-     * @returns {Array<any>} The flat-key object list
-     *
-     */
-    formatData(config, data) {
-        try {
-            return data.map((entry) => {
-                if (entry.subitems && Array.isArray(entry.subitems)) {
-                    entry.subitems = this.formatData(config, entry.subitems);
-                }
-                let entryObject = {};
-                for (let i = 0; i < config.columns.length; i++) {
-                    const keys = config.columns[i].name.split('/');
-                    let helperObject = entry[keys[0]];
-                    if (helperObject && keys.length > 1) {
-                        for (let i = 1; i < keys.length; i++) {
-                            if (helperObject === undefined || helperObject === null) {
-                                break;
-                            }
-                            else {
-                                helperObject = helperObject[keys[i]] !== undefined && helperObject[keys[i]] !== null
-                                    ? helperObject[keys[i]]
-                                    : undefined;
-                            }
-                        }
-                    }
-                    entryObject[config.columns[i].name] = helperObject;
-                }
-                if (entry.subitems) {
-                    entryObject.subitems = entry.subitems;
-                }
-                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 = () => [
-    { type: AngularDataContext },
-    { type: TemplatePipe }
-];
-AdvancedAggregatorService.ngInjectableDef = defineInjectable({ factory: function AdvancedAggregatorService_Factory() { return new AdvancedAggregatorService(inject(AngularDataContext), inject(TemplatePipe)); }, token: AdvancedAggregatorService, providedIn: "root" });
-
-/**
- *
- * @class AdvancedAggregatorComponent
- * @classdesc An advanced list with the capability of aggregate data based on configurable filters
- *
- */
-class AdvancedAggregatorComponent {
-    constructor(_changeDetector, _advancedAggregatorService, _loadingService) {
-        this._changeDetector = _changeDetector;
-        this._advancedAggregatorService = _advancedAggregatorService;
-        this._loadingService = _loadingService;
-        this.groups = [];
-        this.eventHandler = new EventEmitter();
-    }
-    set config(value) {
-        this._config = value;
-    }
-    set aggregators(value) {
-        this._aggregators = value;
-    }
-    set postProcessors(value) {
-        this._postProcessors = value;
-    }
-    get config() {
-        return this._config;
-    }
-    get aggregators() {
-        return this._aggregators;
-    }
-    get postProcessors() {
-        return this._postProcessors;
-    }
     ngOnInit() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.selectedGroups$.subscribe((data) => {
-                this.groups = data;
-                this._changeDetector.markForCheck();
+        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.filters$.subscribe((filters) => __awaiter(this, void 0, void 0, function* () {
-                try {
-                    yield this.fetch(filters);
+            this.loading = false;
+            this.filterSubscription = this.filterChange.subscribe(filter => {
+                this.submission.data = filter;
+                this.refreshForm.emit({
+                    submission: this.submission
+                });
+            });
+        }
+    }
+    onChange(event) {
+        Object.keys(this.formComponent.submission.data).forEach(key => {
+            if (Object.prototype.hasOwnProperty.call(this.formComponent.submission.data, key)) {
+                const value = this.formComponent.submission.data[key];
+                // the filter with type is a string and is not empty
+                const isEmptyString = typeof value === 'string' && value.length === 0;
+                if (!isEmptyString) {
+                    Object.defineProperty(this.filter, key, {
+                        configurable: true,
+                        enumerable: true,
+                        value: value
+                    });
                 }
-                catch (err) {
-                    console.error(err);
+                else {
+                    delete this.filter[key];
                 }
-            }));
+            }
         });
     }
-    ngOnDestroy() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.selectedGroups$.unsubscribe();
-            this.filters$.unsubscribe();
-        });
+    onFormLoad(form) {
+        const currentLang = this._translateService.currentLang;
+        this.formComponent.formio.i18next.options.resources[currentLang] = { translation: this._translateService.instant(`Forms`) };
+        this.formComponent.formio.language = currentLang;
     }
-    /**
-     *
-     * Retrieves the data
-     *
-     */
-    fetch(filters) {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                this._loadingService.showLoading();
-                let data = yield this._advancedAggregatorService.fetchData(this.config.model, this.params, this.config.query, filters.filters, this.searchExpression, filters.text);
-                if (this.postProcessors && Object.keys(this.postProcessors).length > 0 && this.config.postProcessors && this.config.postProcessors.length > 0) {
-                    for (let i = 0; i < this.config.postProcessors.length; i++) {
-                        data = yield this.postProcessors[this.config.postProcessors[i].name](data);
-                    }
-                }
-                this.body = this._advancedAggregatorService.formatData(this.config, data);
-                this._changeDetector.markForCheck();
-            }
-            catch (err) {
-                console.error(err);
-            }
-            finally {
-                this._loadingService.hideLoading();
-            }
-        });
+    ngAfterViewInit() {
+        //
     }
-    /**
-     *
-     * Triggers the event handler event
-     *
-     * @param {*} event The event data
-     *
-     */
-    onActionEvent(event) {
-        this.eventHandler.emit(event);
+    ngOnDestroy() {
+        if (this.filterSubscription) {
+            this.filterSubscription.unsubscribe();
+        }
     }
 }
-AdvancedAggregatorComponent.decorators = [
+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: `
+    <div class="p-4">
+      <formio #formioComponent class="formio-search" (keydown)="onKeyEnter($event)" (change)="onChange($event)" (formLoad)="onFormLoad($event)"
+              [refresh]="refreshForm" [submission]="submission" [form]="form"></formio>
+    </div>
+  `,
+                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 = () => [
-    { type: ChangeDetectorRef },
-    { type: AdvancedAggregatorService },
-    { type: LoadingService }
+AdvancedSearchFormComponent.ctorParameters = () => [
+    { 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 }]
 };
 
-var Lengths;
-(function (Lengths) {
-    Lengths["XL"] = "xl";
-    Lengths["LG"] = "lg";
-    Lengths["MD"] = "md";
-    Lengths["SM"] = "sm";
-    Lengths["XS"] = "xs";
-})(Lengths || (Lengths = {}));
-class AdvancedAggregatorListComponent {
-    constructor(_template) {
-        this._template = _template;
-        this.clickEvent = new EventEmitter();
-    }
-    ngOnInit() {
-        this.config.columns.forEach(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
-     * }
-     */
-    callCallback(type, data) {
-        this.clickEvent.emit({
-            type,
-            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 = () => [
-    { type: TemplatePipe }
-];
-AdvancedAggregatorListComponent.propDecorators = {
-    config: [{ type: Input }],
-    body: [{ type: Input }],
-    clickEvent: [{ type: Output }]
-};
-
-class AdvancedListComponent {
-    constructor(_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;
-    }
-    ngOnDestroy() {
-        if (this.dataSubscription) {
-            this.dataSubscription.unsubscribe();
-        }
-        if (this.reloadSubscription) {
-            this.reloadSubscription.unsubscribe();
-        }
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
-    ngOnInit() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                // get metadata
-                const metadata = yield this._context.getMetadata();
-                // get route data
-                this.dataSubscription = this._activatedRoute.data.subscribe(routeData => {
-                    // get entityType
-                    const re = new RegExp(`^${routeData.model}$`, 'ig');
-                    const entitySet = metadata.EntityContainer.EntitySet.find(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
-                    const entityType = metadata.EntityType.find(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
-                    const defaultConfiguration = AdvancedTableConfiguration.cast(this.tableConfiguration, true);
-                    // correct edit button link
-                    const column = defaultConfiguration.columns.find(col => {
-                        return col.formatter === 'ButtonFormatter' && col.formatString === '(modal:edit)';
-                    });
-                    if (column) {
-                        const url = [];
-                        this._activatedRoute.snapshot.pathFromRoot.forEach(route => {
-                            url.push.apply(url, route.url);
-                        });
-                        column.formatString = `#/${url.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(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
-                    });
-                });
-            }
-            catch (err) {
-                console.error(err);
-                return this._errorService.showError(err);
-            }
-        });
-    }
-    /**
-     * Data load event handler of advanced table component
-     * @param {AdvancedTableDataResult} data
-     */
-    onDataLoad(data) {
-        this.recordsTotal = data.recordsTotal;
-    }
-    /**
-     * Remove selected items
-     */
-    remove() {
-        if (this.table && this.table.selected && this.table.selected.length) {
-            // get items to remove
-            const items = this.table.selected;
-            return this._modalService.showWarningDialog(this._translateService.instant('Tables.RemoveItemsTitle'), this._translateService.instant('Tables.RemoveItemsMessage'), DIALOG_BUTTONS.OkCancel).then(result => {
-                if (result === 'ok') {
-                    this._context.model(this.table.config.model).remove(items).then(() => {
-                        this._toastService.show(this.description + ':' + this._translateService.instant('Tables.RemoveItemMessage.title'), this._translateService.instant((items.length === 1 ?
-                            'Tables.RemoveItemMessage.one' : 'Tables.RemoveItemMessage.many'), { value: items.length }));
-                        this.table.fetch(true);
-                    }).catch(err => {
-                        this._errorService.showError(err, {
-                            continueLink: '.'
-                        });
-                    });
-                }
-            });
-        }
-    }
-}
-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 = () => [
-    { 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',] }]
-};
+// important: export this const due to AOT compilation errors
+// see more https://angular.io/guide/aot-metadata-errors#only-initialized-variables
+const AdvancedTableModalBaseTemplate = `
+<div>
+    <!-- search -->
+    <div class="row mt-3">
+      <div class="col-12 col-lg-3">
+        <div class="input-group mb-3">
+          <input spellcheck="false" type="text"
+                 (keyup)="onKeyUp($event)" [(ngModel)]="searchText"
+                 class="form-control bg-gray-100 border-0"
+                 placeholder="{{'Tables.SearchPlaceholder' | translate}}" aria-label="Search" aria-describedby="basic-addon2">
+          <div class="input-group-append">
+            <button class="btn btn-default bg-gray-100 border-0" type="button">
+              <i class="fa fa-search text-secondary"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div #emptyTable class="d-none">
+        <div>
+          <div class="mt-4">
+            <div class="icon-circle bg-gray-300 border-gray-100"></div>
+          </div>
+          <div class="mt-4">
+            <h4 class="font-3xl text-dark" [translate]="'Tables.EmptyTableTitle'"></h4>
+            <p class="font-lg text-dark" [translate]="'Tables.EmptyTableMessage'"></p>
+          </div>
 
-class AdvancedRowActionComponent extends RouterModalOkCancel {
-    constructor(router, activatedRoute, _translateService, _context, _errorService, _modalService, _appEvent) {
-        super(router, activatedRoute);
-        this._translateService = _translateService;
+        </div>
+      </div>
+      <div class="col-12 col-lg-5">
+        <div class="btn-toolbar">
+          <button class="btn btn-gray-100">
+            <i class="fa fa-sliders-h pr-2 text-secondary" aria-hidden="true"></i>{{'Tables.Filters' | translate}}
+          </button>
+          <div #dropdownFilter class="dropdown ml-3">
+            <button class="btn btn-gray-100 dropdown-toggle"
+                    type="button" id="dropdownDefaultFilters"
+                    data-toggle="dropdown" dropdownToggle>
+              {{ this.defaultFilter.name | translate }}
+            </button>
+            <div class="dropdown-menu" aria-labelledby="dropdownDefaultFilters">
+              <button type="button" class="dropdown-item" *ngFor="let filter of defaultFilters" (click)="onFilterSelect(filter)">
+                {{ filter.name | translate }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col text-lg-right mt-3 mt-lg-0 d-none">
+        <button [disabled]="true" class="btn rounded-pill btn-outline-theme">
+          <span class="pr-2 font-lg">+</span><span [translate]="'Tables.AddItem'"></span>
+        </button>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12" [ngClass]="{ 'component-loading': loading}">
+        <app-advanced-table #advancedTable (init)="onTableInit($event)"
+                            (load)="onDataLoad($event)"
+                            [selectable]="true"
+                            [multipleSelect]="true"
+                            [scrollX]="false" [scrollY]="320"
+                            [pageLength]="pageLength"
+                            [scrollable]="false" [showFooter]="false"
+                            [showActions]="false" [lengthMenu]="lengthMenu"
+                            [config]="tableConfig" [configSrc]="tableConfigSrc"></app-advanced-table>
+      </div>
+    </div>
+    <div class="row mt-3 table-custom-pager">
+      <div class="col-12 d-flex" *ngIf="recordsTotal">
+        <div class="mt-2 ml-auto mr-3 text-secondary" [translate]="'Tables.RecordsPerPage'"></div>
+        <div #dropdownLength class="dropdown mr-3">
+          <button class="btn btn-gray-100 dropdown-toggle"
+                  type="button" id="dropdownPageSize" data-toggle="dropdown"
+                  dropdownToggle>
+            {{pageLength}}
+          </button>
+          <div class="dropdown-menu" aria-labelledby="dropdownPageSize">
+            <button (click)="setLength(item)"
+                    class="dropdown-item dropdown-item-theme"
+                    type="button" *ngFor="let item of lengthMenu">{{item}}</button>
+          </div>
+        </div>
+        <div class="mt-2 mr-2" [translate]="'Tables.PageInfo'" [translateParams]="pageInfo"></div>
+        <button [disabled]="pageInfo && pageInfo.page === 0" class="btn text-nowrap" (click)="firstPage()">
+          <i class="fa fa-chevron-left text-color-theme"></i>
+          <i class="fa fa-chevron-left text-color-theme"></i>
+        </button>
+        <button [disabled]="pageInfo && pageInfo.page===0" class="btn" (click)="previousPage()">
+          <i class="fa fa-chevron-left text-color-theme"></i>
+        </button>
+        <button [disabled]="pageInfo && pageInfo.page===pageInfo.pages-1" class="btn" (click)="nextPage()">
+          <i class="fa fa-chevron-right text-color-theme"></i>
+        </button>
+        <button [disabled]="pageInfo && pageInfo.page===pageInfo.pages-1" class="btn text-nowrap" (click)="lastPage()">
+          <i class="fa fa-chevron-right text-color-theme"></i>
+          <i class="fa fa-chevron-right text-color-theme"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+`;
+class AdvancedTableModalBaseComponent extends RouterModalOkCancel {
+    constructor(_router, _activatedRoute, _context, advancedFilterValueProvider, datePipe) {
+        super(_router, _activatedRoute);
         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.advancedFilterValueProvider = advancedFilterValueProvider;
+        this.datePipe = datePipe;
+        this.pageLength = 25;
+        this.lengthMenu = [5, 10, 25, 50, 100];
+        this.recordsTotal = 0;
         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';
+        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();
     }
-    get form() {
-        return this.formComponent;
+    ngAfterViewInit() {
+        //
     }
-    ngOnInit() {
-        this.refreshSubscription = this.refresh.subscribe((value) => {
-            if (value && value.progress) {
-                let progress = 0;
-                if (value.progress < 0) {
-                    progress = 0;
-                }
-                else if (value.progress > 100) {
-                    progress = 100;
-                }
-                else {
-                    progress = value.progress;
-                }
-                this.progressComponent.value = progress;
+    _getInputs(componentType) {
+        const props = componentType.__prop__metadata__;
+        const inputs = [];
+        if (props == null) {
+            return inputs;
+        }
+        Object.keys(props).forEach(prop => {
+            const member = props[prop][0];
+            if (member.ngMetadataName === 'Input') {
+                inputs.push(prop);
             }
         });
+        return inputs.sort();
     }
-    ngAfterViewInit() {
-        if (this.formComponent && this.formComponent.form) {
-            this.okButtonDisabled = true;
-            this.invalidSubscription = this.formComponent.form.change.subscribe((event) => {
-                if (Object.prototype.hasOwnProperty.call(event, "isValid") && (event.changed != null)) {
-                    this.okButtonDisabled = !event.isValid;
+    hasInputs() {
+        return [];
+    }
+    ngOnInit() {
+        this.okButtonText = 'Tables.Apply';
+        this.cancelButtonText = 'Tables.Cancel';
+        // get route data
+        this.subscription = this.activatedRoute.data.subscribe(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
+            const inputs = this.hasInputs();
+            inputs.forEach(input => {
+                if (Object.prototype.hasOwnProperty.call(data, input)) {
+                    this[input] = data[input];
                 }
             });
-        }
-    }
-    ngOnDestroy() {
-        if (this.refreshSubscription) {
-            this.refreshSubscription.unsubscribe();
-        }
-        if (this.executeSubscription) {
-            this.executeSubscription.unsubscribe();
-        }
-        if (this.invalidSubscription) {
-            this.invalidSubscription.unsubscribe();
-        }
+            this.configChangesSubscription = this.advancedTable.configChanges.subscribe((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);
+                }
+            });
+        });
     }
     cancel() {
-        if (this.loading) {
-            return;
-        }
-        // close
-        if (this._modalService.modalRef) {
-            return this._modalService.modalRef.hide();
-        }
+        return this.close();
     }
     ok() {
-        return __awaiter(this, void 0, void 0, function* () {
-            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((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();
-                    }
-                }, (err) => {
-                    this.loading = false;
-                    this.lastError = err;
-                    this.refresh.emit({
-                        progress: 0
-                    });
-                });
-            }
-            catch (err) {
-                this.loading = false;
-                this.lastError = err;
-            }
-        });
+        return this.close();
     }
-}
-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: [`
-        .fa-1_5x {
-            font-size: 1.5rem;
-        }
-        .form-control:disabled, .form-control[readonly] {
-            background-color: inherit;
-        }
-        .form-check.checkbox {
-          position: relative
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
         }
-        `]
-            }] }
-];
-/** @nocollapse */
-AdvancedRowActionComponent.ctorParameters = () => [
-    { 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 }]
-};
-
-class AdvancedTableSearchBaseComponent {
-    constructor() {
-        this.filterChange = new EventEmitter();
     }
-    get filter() {
-        return this._filter;
+    onDataLoad(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;
+        }
     }
-    set filter(value) {
-        this._filter = value;
+    previousPage() {
+        // go to next page
+        // noinspection TypeScriptValidateJSTypes
+        this.advancedTable.dataTable.page('previous').draw('page');
     }
-    onKeyEnter(event) {
+    nextPage() {
+        // go to next page
+        // noinspection TypeScriptValidateJSTypes
+        this.advancedTable.dataTable.page('next').draw('page');
+    }
+    onTableInit(dataTable) {
+        const self = this;
+        // get initial page info
+        const 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 () {
+            const 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;
+            const pageInfo = dataTable.page.info();
+            pageInfo.start += 1;
+            self.pageInfo = pageInfo;
+        });
+    }
+    firstPage() {
+        // go to first page
+        // noinspection TypeScriptValidateJSTypes
+        this.advancedTable.dataTable.page('first').draw('page');
+    }
+    lastPage() {
+        // go to last page
+        // noinspection TypeScriptValidateJSTypes
+        this.advancedTable.dataTable.page('last').draw('page');
+    }
+    setLength(value) {
+        this.pageLength = value;
+        this.advancedTable.dataTable.page.len(value).draw();
+    }
+    onKeyUp(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 }]
-};
-
-class AdvancedSearchFormComponent extends AdvancedTableSearchBaseComponent {
-    constructor(_context, _translateService, _activatedRoute, _http) {
-        super();
-        this._context = _context;
-        this._translateService = _translateService;
-        this._activatedRoute = _activatedRoute;
-        this._http = _http;
-        this.form = {};
-        this.refreshForm = new EventEmitter();
-        this.submission = { data: {} };
-        this.loading = true;
-    }
-    ngOnChanges(changes) {
-        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
+     *
+     */
+    getFilters(tableConfig, defaultFilterValues = {}, searchItem) {
+        // 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((form) => {
-                        // set form
-                        this.form = form;
-                        // and init
-                        this.ngOnInit();
-                    }).catch((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
-                });
-            }
+        const matchedCriterion = tableConfig.criteria.find(criterion => Object.prototype.hasOwnProperty.call(searchItem.filter, criterion.name));
+        if (matchedCriterion == null) {
+            return [];
         }
-    }
-    ngOnInit() {
-        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(filter => {
-                this.submission.data = filter;
-                this.refreshForm.emit({
-                    submission: this.submission
-                });
+        const value = searchItem.filter[matchedCriterion.name];
+        const criterionSafeName = matchedCriterion.name !== null
+            ? matchedCriterion.name.toString()
+            : '';
+        let applicableFilter;
+        // Raw dates should be transformed to a specific format
+        if (criterionSafeName.includes('GMT')) {
+            const 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];
     }
-    onChange(event) {
-        Object.keys(this.formComponent.submission.data).forEach(key => {
-            if (Object.prototype.hasOwnProperty.call(this.formComponent.submission.data, key)) {
-                const value = this.formComponent.submission.data[key];
-                // the filter with type is a string and is not empty
-                const 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];
-                }
+    onFilterSelect(value) {
+        this.advancedSearch(value);
+    }
+    /**
+     *
+     * Runs a filter against the modal table
+     *
+     * @param {object} filter The filter to use in the search
+     *
+     */
+    advancedSearch(filter) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Do nothing in absence of configuration.
+            if (!this.tableConfig && !Array.isArray(this.tableConfig.criteria)) {
+                console.warn('No table configuration available', this.tableConfig);
+                return;
+            }
+            // An advanced table has some filters by default
+            let defaultFilterValues;
+            try {
+                defaultFilterValues = yield this.advancedFilterValueProvider.getValues();
+            }
+            catch (err) {
+                defaultFilterValues = {};
+            }
+            const expressions = [];
+            let predefinedCriteria;
+            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);
+            const query = this._context.model(this.advancedTable.config.model).asQueryable();
+            query.setParam('filter', expressions.join(' and ')).prepare();
+            this.advancedTable.query = query;
+            this.advancedTable.fetch();
         });
     }
-    onFormLoad(form) {
-        const currentLang = this._translateService.currentLang;
-        this.formComponent.formio.i18next.options.resources[currentLang] = { translation: this._translateService.instant(`Forms`) };
-        this.formComponent.formio.language = currentLang;
-    }
-    ngAfterViewInit() {
-        //
-    }
-    ngOnDestroy() {
-        if (this.filterSubscription) {
-            this.filterSubscription.unsubscribe();
-        }
-    }
 }
-AdvancedSearchFormComponent.decorators = [
+AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER = {
+    name: 'Tables.All',
+    filter: null
+};
+AdvancedTableModalBaseComponent.decorators = [
     { type: Component, args: [{
-                selector: 'app-advanced-search-form',
-                template: `
-    <div class="p-4">
-      <formio #formioComponent class="formio-search" (keydown)="onKeyEnter($event)" (change)="onChange($event)" (formLoad)="onFormLoad($event)"
-              [refresh]="refreshForm" [submission]="submission" [form]="form"></formio>
-    </div>
-  `,
-                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: [`
+
+    `]
             }] }
 ];
 /** @nocollapse */
-AdvancedSearchFormComponent.ctorParameters = () => [
-    { type: AngularDataContext },
-    { type: TranslateService },
+AdvancedTableModalBaseComponent.ctorParameters = () => [
+    { 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',] }]
 };
 
 class AdvancedSelectComponent extends AdvancedTableModalBaseComponent {
@@ -2835,7 +2435,7 @@ AdvancedSelectComponent.decorators = [
     { 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: [`
     .modal-table .dataTables_wrapper {
@@ -3646,357 +3246,766 @@ class AdvancedTableEditorDirective {
         //
     }
     /**
-     * Add rows to table and mark them as added rows
+     * Add rows to table and mark them as added rows
+     */
+    add(...addItems) {
+        if (this.table == null) {
+            throw new AdvancedTableNotNullError();
+        }
+        // decorate items
+        const key = this.table.config.columns[0].property || this.table.config.columns[0].name;
+        for (const element of addItems) {
+            let tr = this.table.dataTable.rows(':has(input[data-id="' + element[key] + '"])').nodes().to$();
+            if (tr.hasClass('removed')) {
+                tr.toggleClass('removed text-gray-400 text-decoration-line-through');
+            }
+            else {
+                this.table.dataTable.rows.add([element]);
+                tr = this.table.dataTable.rows(':has(input[data-id="' + element[key] + '"])').nodes().to$();
+                tr.toggleClass('added font-weight-bold text-success');
+            }
+        }
+        this.table.dataTable.draw();
+        // find removed
+        const removedLength = this.table.dataTable.rows('.removed')[0].length;
+        // find added
+        const addedLength = this.table.dataTable.rows('.added')[0].length;
+        // and emit event
+        const 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
+     */
+    remove(...removeItems) {
+        if (this.table == null) {
+            throw new AdvancedTableNotNullError();
+        }
+        // get key
+        const key = this.table.config.columns[0].property || this.table.config.columns[0].name;
+        // loop items
+        for (const element of removeItems) {
+            const tr = this.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.table.dataTable.rows(tr).remove();
+            }
+            else {
+                // otherwise unmarked row
+                tr.toggleClass('removed text-gray-400 text-decoration-line-through');
+            }
+            // check if item is selected
+            const selectedIndex = this.table.selected.findIndex((item) => {
+                return item[key] === element[key];
+            });
+            // and remove it from selected collection
+            if (selectedIndex >= 0) {
+                this.table.selected.splice(selectedIndex, 1);
+            }
+        }
+        // re-draw table
+        this.table.dataTable.draw();
+        // get number of table items
+        const items = this.table.dataTable.rows().data();
+        // get number of removed items
+        const removedLength = this.table.dataTable.rows('.removed')[0].length;
+        // get number of added items
+        const 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);
+    }
+    set(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
+     */
+    undo() {
+        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 = [];
+        const 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);
+    }
+    rows() {
+        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 = () => [
+    { type: AdvancedTableComponent }
+];
+AdvancedTableEditorDirective.propDecorators = {
+    dirtyChange: [{ type: Output }]
+};
+
+class BtnExpDirective {
+    constructor(_activatedTable, _context, _config, _translate, _loadingService, _errorService) {
+        this._activatedTable = _activatedTable;
+        this._context = _context;
+        this._config = _config;
+        this._translate = _translate;
+        this._loadingService = _loadingService;
+        this._errorService = _errorService;
+    }
+    clickEvent(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this._activatedTable.activeTable) {
+                const lastQuery = this._activatedTable.activeTable.lastQuery;
+                const tableConfig = this._activatedTable.activeTable.config;
+                const serviceHeaders = this._context.getService().getHeaders();
+                const queryModel = lastQuery.getModel();
+                let query = this._context.model(queryModel).asQueryable();
+                const queryParams = lastQuery.getParams();
+                query = this.constructQuery(query, queryParams, tableConfig, serviceHeaders);
+                const maxExportItems = 1000;
+                {
+                    query.skip(0).take(maxExportItems);
+                }
+                // This constructs the URI based on the way @themost does
+                const url = this.constructURL(query);
+                this.downloadFile(url, query.getService().getHeaders(), query.getModel());
+            }
+        });
+    }
+    /**
+     * Sets the parameters to the query based on
+     * the active filters of the activated table
+     * @param {ClientDataQueryable} query
+     * @param params: The filters of the last query of the activated table
+     * @return ClientDataQueryable
+     */
+    setParams(query, params) {
+        if (params && typeof params === 'object') {
+            Object.keys(params).forEach((key) => {
+                query.setParam(key, params[key]);
+            });
+        }
+        return query;
+    }
+    /**
+     * Sets the headers to the query based on
+     * the default headers of the DataContext
+     * and appending the accept header to get
+     * an xlsx file from the API
+     * @param {ClientDataQueryable} query
+     * @param {Headers} headers: The headers to append to the query
+     * @return ClientDataQueryable
+     */
+    setHeaders(query, headers) {
+        Object.keys(headers).forEach((key) => {
+            if (headers.hasOwnProperty(key)) {
+                query.getService().setHeader(key, headers[key]);
+            }
+        });
+        // sets a header to accept xlsx files
+        query.getService().setHeader('Accept', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
+        return query;
+    }
+    /**
+     * Constructs the select parameter of the
+     * ClientDataQuery by replacing the target name
+     * of the field based on the localized translation
+     * of that property on the advanced tabled
+     * @param {ClientDataQueryable} query
+     * @param tableConfig: The configuration of the activated table
+     * @return ClientDataQueryable
+     */
+    constructQueryParam(query, tableConfig) {
+        let selectQuery = query.getParams().$select;
+        let selectQueryArray = selectQuery.split(',');
+        selectQueryArray = selectQueryArray.map((select) => {
+            const words = select.split(' ');
+            if (words.length === 3) {
+                if (tableConfig && tableConfig.columns) {
+                    for (const column of tableConfig.columns) {
+                        if (column.property === words[2] && column.title) {
+                            words[2] = `"${this._translate.instant(column.title)}"`;
+                        }
+                        else if (column.property === words[2]) {
+                            words[2] = `"${this._translate.instant(words[2])}"`;
+                        }
+                    }
+                }
+            }
+            if (words.length === 1) {
+                if (tableConfig && tableConfig.columns) {
+                    for (const column of tableConfig.columns) {
+                        if (column.name === words[0] && column.title) {
+                            words[0] = `${words[0]} as "${this._translate.instant(column.title)}"`;
+                            break;
+                        }
+                        else if (column.name === words[0] && column.property) {
+                            words[0] = `${words[0]} as "${this._translate.instant(column.property)}"`;
+                            break;
+                        }
+                        else if (words[0] === column.name && words[0] === "id" && column.hidden) {
+                            break;
+                        }
+                        else if (words[0] == column.name || words[0] === column.property) {
+                            words[0] = `${words[0]} as "${this._translate.instant(words[0])}"`;
+                        }
+                    }
+                }
+                return words[0];
+            }
+            return words.join(' ');
+        });
+        selectQuery = selectQueryArray.join(',');
+        query.setParam('$select', selectQuery);
+        return query;
+    }
+    /**
+     * Constructs the fetch URL based the query parameters
+     * @param {ClientDataQueryable} query
+     * @return String
      */
-    add(...addItems) {
-        if (this.table == null) {
-            throw new AdvancedTableNotNullError();
-        }
-        // decorate items
-        const key = this.table.config.columns[0].property || this.table.config.columns[0].name;
-        for (const element of addItems) {
-            let 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');
+    constructURL(query) {
+        const baseURL = query.getService().getBase();
+        let url = baseURL.endsWith('/') ? (baseURL + query.getModel() + '?') : (baseURL + '/' + query.getModel() + '?');
+        Object.keys(query.getParams()).forEach((key, index) => {
+            if (index === 0) {
+                url += key + '=' + query.getParams()[key];
             }
             else {
-                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');
+                url += '&' + key + '=' + query.getParams()[key];
             }
-        }
-        this.table.dataTable.draw();
-        // find removed
-        const removedLength = this.table.dataTable.rows('.removed')[0].length;
-        // find added
-        const addedLength = this.table.dataTable.rows('.added')[0].length;
-        // and emit event
-        const 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
      */
-    remove(...removeItems) {
-        if (this.table == null) {
-            throw new AdvancedTableNotNullError();
-        }
-        // get key
-        const key = this.table.config.columns[0].property || this.table.config.columns[0].name;
-        // loop items
-        for (const element of removeItems) {
-            const tr = this.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.table.dataTable.rows(tr).remove();
+    constructQuery(query, params, tableConfig, headers) {
+        let _query = this.setParams(query, params);
+        _query = this.setHeaders(_query, headers);
+        _query = this.constructQueryParam(_query, tableConfig);
+        return _query;
+    }
+    /**
+     * Fetches and saves the xlsx file
+     * @param {String} url
+     * @param {Headers} serviceHeaders: The headers to append to the query
+     * @param modelName: The model name of the advanced table
+     */
+    downloadFile(url, serviceHeaders, modelName) {
+        this._loadingService.showLoading();
+        fetch(encodeURI(url), {
+            headers: serviceHeaders,
+            credentials: 'include'
+        }).then(response => {
+            if (response && !response.ok) {
+                throw new ResponseError(response.statusText, response.status);
+            }
+            return response.blob();
+        }).then(blob => {
+            const objectUrl = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            document.body.appendChild(a);
+            a.setAttribute('style', 'display: none');
+            a.href = objectUrl;
+            const downloadName = `${modelName}.xlsx`;
+            a.download = downloadName;
+            // this adds support for IE and MS Edge (up to version 44.19041)
+            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+                window.navigator.msSaveOrOpenBlob(blob, downloadName);
             }
             else {
-                // otherwise unmarked row
-                tr.toggleClass('removed text-gray-400 text-decoration-line-through');
+                // for all other browsers
+                a.click();
             }
-            // check if item is selected
-            const selectedIndex = this.table.selected.findIndex((item) => {
-                return item[key] === element[key];
+            window.URL.revokeObjectURL(objectUrl);
+            a.remove();
+            this._loadingService.hideLoading();
+        }).catch(err => {
+            this._loadingService.hideLoading();
+            this._errorService.showError(err, {
+                continueLink: '.'
             });
-            // and remove it from selected collection
-            if (selectedIndex >= 0) {
-                this.table.selected.splice(selectedIndex, 1);
-            }
-        }
-        // re-draw table
-        this.table.dataTable.draw();
-        // get number of table items
-        const items = this.table.dataTable.rows().data();
-        // get number of removed items
-        const removedLength = this.table.dataTable.rows('.removed')[0].length;
-        // get number of added items
-        const 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);
     }
-    set(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 = () => [
+    { type: ActivatedTableService },
+    { type: AngularDataContext },
+    { type: ConfigurationService },
+    { type: TranslateService },
+    { type: LoadingService },
+    { type: ErrorService }
+];
+BtnExpDirective.propDecorators = {
+    clickEvent: [{ type: HostListener, args: ['click', ['$event'],] }]
+};
+
+class AdvancedAggregatorService {
+    constructor(_context, _template) {
+        this._context = _context;
+        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
      */
-    undo() {
-        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 = [];
-        const items = this.table.dataTable.rows().data();
-        this.table.dataTable.draw();
-        this.table.load.emit({
-            data: items,
-            recordsFiltered: items.length,
-            recordsTotal: items.length,
+    fetchData(model, fixedParams, queryStatement = '', filters, searchTemplate, searchValue) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const query = this._context.model(model).asQueryable();
+            if (!fixedParams || typeof fixedParams !== 'object') {
+                fixedParams = {};
+            }
+            let filterExpressions = [];
+            if (fixedParams) {
+                for (let param of Object.keys(fixedParams)) {
+                    filterExpressions.push(`${param} eq ${fixedParams[param]}`);
+                }
+            }
+            if (filters && Array.isArray(filters)) {
+                filterExpressions = [
+                    ...filterExpressions,
+                    ...filters
+                ];
+            }
+            if (searchTemplate && searchValue) {
+                let evaluatedSearch;
+                if (/^"(.*?)"$/.test(searchValue)) { // validate search text in double quotes
+                    evaluatedSearch = this._template.transform(searchTemplate, Object.assign({}, fixedParams, { text: searchValue.replace(/^"|"$/g, '') }));
+                }
+                else {
+                    // try to split words
+                    const words = searchValue.split(' ');
+                    // join words to a single filter
+                    evaluatedSearch = words.map(word => {
+                        return this._template.transform(searchTemplate, Object.assign({}, fixedParams, { text: word }));
+                    }).join(' and ');
+                }
+                filterExpressions.push(evaluatedSearch);
+            }
+            query.setParam('$filter', filterExpressions.join('and'));
+            return query.expand(queryStatement).take(-1).getItems();
         });
-        this.dirty = false;
-        this.dirtyChange.emit(this.dirty);
     }
-    rows() {
-        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
+     *
+     */
+    formatData(config, data) {
+        try {
+            return data.map((entry) => {
+                if (entry.subitems && Array.isArray(entry.subitems)) {
+                    entry.subitems = this.formatData(config, entry.subitems);
+                }
+                let entryObject = {};
+                for (let i = 0; i < config.columns.length; i++) {
+                    const keys = config.columns[i].name.split('/');
+                    let helperObject = entry[keys[0]];
+                    if (helperObject && keys.length > 1) {
+                        for (let i = 1; i < keys.length; i++) {
+                            if (helperObject === undefined || helperObject === null) {
+                                break;
+                            }
+                            else {
+                                helperObject = helperObject[keys[i]] !== undefined && helperObject[keys[i]] !== null
+                                    ? helperObject[keys[i]]
+                                    : 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 = () => [
-    { type: AdvancedTableComponent }
+AdvancedAggregatorService.ctorParameters = () => [
+    { type: AngularDataContext },
+    { type: TemplatePipe }
 ];
-AdvancedTableEditorDirective.propDecorators = {
-    dirtyChange: [{ type: Output }]
-};
+AdvancedAggregatorService.ngInjectableDef = defineInjectable({ factory: function AdvancedAggregatorService_Factory() { return new AdvancedAggregatorService(inject(AngularDataContext), inject(TemplatePipe)); }, token: AdvancedAggregatorService, providedIn: "root" });
 
-class BtnExpDirective {
-    constructor(_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
+ *
+ */
+class AdvancedAggregatorComponent {
+    constructor(_changeDetector, _advancedAggregatorService, _loadingService) {
+        this._changeDetector = _changeDetector;
+        this._advancedAggregatorService = _advancedAggregatorService;
         this._loadingService = _loadingService;
-        this._errorService = _errorService;
+        this.groups = [];
+        this.eventHandler = new EventEmitter();
     }
-    clickEvent(event) {
+    set config(value) {
+        this._config = value;
+    }
+    set aggregators(value) {
+        this._aggregators = value;
+    }
+    set postProcessors(value) {
+        this._postProcessors = value;
+    }
+    get config() {
+        return this._config;
+    }
+    get aggregators() {
+        return this._aggregators;
+    }
+    get postProcessors() {
+        return this._postProcessors;
+    }
+    ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
-            event.preventDefault();
-            event.stopPropagation();
-            if (this._activatedTable.activeTable) {
-                const lastQuery = this._activatedTable.activeTable.lastQuery;
-                const tableConfig = this._activatedTable.activeTable.config;
-                const serviceHeaders = this._context.getService().getHeaders();
-                const queryModel = lastQuery.getModel();
-                let query = this._context.model(queryModel).asQueryable();
-                const queryParams = lastQuery.getParams();
-                query = this.constructQuery(query, queryParams, tableConfig, serviceHeaders);
-                const maxExportItems = 1000;
-                {
-                    query.skip(0).take(maxExportItems);
+            this.selectedGroups$.subscribe((data) => {
+                this.groups = data;
+                this._changeDetector.markForCheck();
+            });
+            this.filters$.subscribe((filters) => __awaiter(this, void 0, void 0, function* () {
+                try {
+                    yield this.fetch(filters);
                 }
-                // This constructs the URI based on the way @themost does
-                const url = this.constructURL(query);
-                this.downloadFile(url, query.getService().getHeaders(), query.getModel());
-            }
+                catch (err) {
+                    console.error(err);
+                }
+            }));
         });
     }
-    /**
-     * Sets the parameters to the query based on
-     * the active filters of the activated table
-     * @param {ClientDataQueryable} query
-     * @param params: The filters of the last query of the activated table
-     * @return ClientDataQueryable
-     */
-    setParams(query, params) {
-        if (params && typeof params === 'object') {
-            Object.keys(params).forEach((key) => {
-                query.setParam(key, params[key]);
-            });
-        }
-        return query;
-    }
-    /**
-     * Sets the headers to the query based on
-     * the default headers of the DataContext
-     * and appending the accept header to get
-     * an xlsx file from the API
-     * @param {ClientDataQueryable} query
-     * @param {Headers} headers: The headers to append to the query
-     * @return ClientDataQueryable
-     */
-    setHeaders(query, headers) {
-        Object.keys(headers).forEach((key) => {
-            if (headers.hasOwnProperty(key)) {
-                query.getService().setHeader(key, headers[key]);
-            }
+    ngOnDestroy() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.selectedGroups$.unsubscribe();
+            this.filters$.unsubscribe();
         });
-        // 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
+     *
+     * Retrieves the data
+     *
      */
-    constructQueryParam(query, tableConfig) {
-        let selectQuery = query.getParams().$select;
-        let selectQueryArray = selectQuery.split(',');
-        selectQueryArray = selectQueryArray.map((select) => {
-            const words = select.split(' ');
-            if (words.length === 3) {
-                if (tableConfig && tableConfig.columns) {
-                    for (const column of tableConfig.columns) {
-                        if (column.property === words[2] && column.title) {
-                            words[2] = `"${this._translate.instant(column.title)}"`;
-                        }
-                        else if (column.property === words[2]) {
-                            words[2] = `"${this._translate.instant(words[2])}"`;
-                        }
+    fetch(filters) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                this._loadingService.showLoading();
+                let data = yield this._advancedAggregatorService.fetchData(this.config.model, this.params, this.config.query, filters.filters, this.searchExpression, filters.text);
+                if (this.postProcessors && Object.keys(this.postProcessors).length > 0 && this.config.postProcessors && this.config.postProcessors.length > 0) {
+                    for (let i = 0; i < this.config.postProcessors.length; i++) {
+                        data = yield this.postProcessors[this.config.postProcessors[i].name](data);
                     }
                 }
+                this.body = this._advancedAggregatorService.formatData(this.config, data);
+                this._changeDetector.markForCheck();
             }
-            if (words.length === 1) {
-                if (tableConfig && tableConfig.columns) {
-                    for (const column of tableConfig.columns) {
-                        if (column.name === words[0] && column.title) {
-                            words[0] = `${words[0]} as "${this._translate.instant(column.title)}"`;
-                            break;
-                        }
-                        else if (column.name === words[0] && column.property) {
-                            words[0] = `${words[0]} as "${this._translate.instant(column.property)}"`;
-                            break;
-                        }
-                        else if (words[0] === column.name && words[0] === "id" && column.hidden) {
-                            break;
-                        }
-                        else if (words[0] == column.name || words[0] === column.property) {
-                            words[0] = `${words[0]} as "${this._translate.instant(words[0])}"`;
-                        }
-                    }
-                }
-                return words[0];
+            catch (err) {
+                console.error(err);
             }
-            return words.join(' ');
+            finally {
+                this._loadingService.hideLoading();
+            }
+        });
+    }
+    /**
+     *
+     * Triggers the event handler event
+     *
+     * @param {*} event The event data
+     *
+     */
+    onActionEvent(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 = () => [
+    { 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 }]
+};
+
+var Lengths;
+(function (Lengths) {
+    Lengths["XL"] = "xl";
+    Lengths["LG"] = "lg";
+    Lengths["MD"] = "md";
+    Lengths["SM"] = "sm";
+    Lengths["XS"] = "xs";
+})(Lengths || (Lengths = {}));
+class AdvancedAggregatorListComponent {
+    constructor(_template) {
+        this._template = _template;
+        this.clickEvent = new EventEmitter();
+    }
+    ngOnInit() {
+        this.config.columns.forEach(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
+     * }
      */
-    constructURL(query) {
-        const baseURL = query.getService().getBase();
-        let url = baseURL.endsWith('/') ? (baseURL + query.getModel() + '?') : (baseURL + '/' + query.getModel() + '?');
-        Object.keys(query.getParams()).forEach((key, index) => {
-            if (index === 0) {
-                url += key + '=' + query.getParams()[key];
-            }
-            else {
-                url += '&' + key + '=' + query.getParams()[key];
-            }
+    callCallback(type, data) {
+        this.clickEvent.emit({
+            type,
+            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
-     */
-    constructQuery(query, params, tableConfig, headers) {
-        let _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 = () => [
+    { type: TemplatePipe }
+];
+AdvancedAggregatorListComponent.propDecorators = {
+    config: [{ type: Input }],
+    body: [{ type: Input }],
+    clickEvent: [{ type: Output }]
+};
+
+class AddItemsComponent extends RouterModalOkCancel {
+    constructor(router, activatedRoute, _errorService, _modalService, _appEvent, _toastService, _loadingService, _translateService, _context) {
+        super(router, activatedRoute);
+        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;
     }
-    /**
-     * Fetches and saves the xlsx file
-     * @param {String} url
-     * @param {Headers} serviceHeaders: The headers to append to the query
-     * @param modelName: The model name of the advanced table
-     */
-    downloadFile(url, serviceHeaders, modelName) {
-        this._loadingService.showLoading();
-        fetch(encodeURI(url), {
-            headers: serviceHeaders,
-            credentials: 'include'
-        }).then(response => {
-            if (response && !response.ok) {
-                throw new ResponseError(response.statusText, response.status);
-            }
-            return response.blob();
-        }).then(blob => {
-            const objectUrl = window.URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            document.body.appendChild(a);
-            a.setAttribute('style', 'display: none');
-            a.href = objectUrl;
-            const downloadName = `${modelName}.xlsx`;
-            a.download = downloadName;
-            // this adds support for IE and MS Edge (up to version 44.19041)
-            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
-                window.navigator.msSaveOrOpenBlob(blob, downloadName);
-            }
-            else {
-                // for all other browsers
-                a.click();
+    ngOnInit() {
+        this.selectedSubscription = this.selectComponent.advancedTable.selectedItems.subscribe((items) => {
+            if (this.formName == null) {
+                this.okButtonDisabled = items.length === 0;
             }
-            window.URL.revokeObjectURL(objectUrl);
-            a.remove();
-            this._loadingService.hideLoading();
-        }).catch(err => {
-            this._loadingService.hideLoading();
-            this._errorService.showError(err, {
-                continueLink: '.'
-            });
         });
+        if (this.formName != null) {
+            this.formChangeSubscription = this.formComponent.form.change.subscribe((event) => {
+                if (Object.prototype.hasOwnProperty.call(event, 'isValid')) {
+                    // enable or disable button based on form status
+                    this.okButtonDisabled = (!event.isValid);
+                }
+            });
+        }
+        if (this.target) {
+            const target = this.target;
+        }
+    }
+    cancel() {
+        this.clearMessages();
+        if (this.loading) {
+            return;
+        }
+        // close
+        if (this._modalService.modalRef) {
+            return this._modalService.modalRef.hide();
+        }
+    }
+    ngOnDestroy() {
+        if (this.formLoadSubscription) {
+            this.formLoadSubscription.unsubscribe();
+        }
+        if (this.formChangeSubscription) {
+            this.formChangeSubscription.unsubscribe();
+        }
+        if (this.selectedSubscription) {
+            this.selectedSubscription.unsubscribe();
+        }
+    }
+    get formData() {
+        if (this.formComponent === null) {
+            return null;
+        }
+        return this.formComponent.form.formio.data;
+    }
+    ok() {
+        try {
+            this.clearMessages();
+            return new Promise((resolve, reject) => {
+                this.loading = false;
+                this.lastError = null;
+                // set courses
+                this.items = this.selectComponent.advancedTable.selected;
+                // execute add
+                this.executeSubscription = this.execute.subscribe((result) => {
+                    this.loading = false;
+                    if (this.executeSubscription) {
+                        this.executeSubscription.unsubscribe();
+                    }
+                    // close modal
+                    if (this._modalService.modalRef) {
+                        this._modalService.modalRef.hide();
+                    }
+                    return resolve();
+                }, (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;
+        }
     }
+    onChange($event) { }
+    clearMessages() {
+        this.messages = [];
+    }
+    onFilterChange(event) { }
 }
-BtnExpDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '.universis-btn-export'
-            },] }
+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 = () => [
-    { type: ActivatedTableService },
-    { type: AngularDataContext },
-    { type: ConfigurationService },
-    { type: TranslateService },
+AddItemsComponent.ctorParameters = () => [
+    { 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',] }]
 };
 
 /**
@@ -4082,6 +4091,7 @@ const TABLES_EL = {
         "Search": "Αναζήτηση",
         "SearchPlaceholder": "Αναζήτηση...",
         "GroupBy": "Ομαδοποίηση ανά",
+        "NotDefined": "Μη προσδιορισμένο",
         "DataTable": {
             "paginate": {
                 "first": "Πρώτη σελίδα",
@@ -4185,6 +4195,7 @@ const TABLES_EN = {
         "Search": "Search",
         "SearchPlaceholder": "Search...",
         "GroupBy": "Group by",
+        "NotDefined": "Not defined",
         "DataTable": {
             "paginate": {
                 "first": "First",
@@ -4382,6 +4393,6 @@ TablesModule.ctorParameters = () => [
  * 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