@universis/ngx-tables 0.6.0

package/fesm2015/universis-ngx-tables.js

@@ -0,0 +1,4127 @@
+import { at } from 'lodash';
+import { getNativeName } from 'iso-639-1/build';
+import * as jQuery_ from 'jquery';
+import 'datatables.net';
+import 'datatables.net-scroller';
+import 'rxjs/add/observable/combineLatest';
+import { HttpClient } from '@angular/common/http';
+import { DatePipe, CommonModule } from '@angular/common';
+import { ClientDataQueryable, ResponseError, TextUtils } from '@themost/client';
+import { FormArray, FormBuilder, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormioModule } from 'angular-formio';
+import { BsModalService, BsModalRef, ModalModule } from 'ngx-bootstrap/modal';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
+import { __awaiter } from 'tslib';
+import { GroupByPipe, NgPipesModule } from 'ngx-pipes';
+import { Injectable, Pipe, EventEmitter, Input, Output, Component, ElementRef, ViewChild, ViewEncapsulation, Directive, ChangeDetectorRef, Inject, InjectionToken, Injector, HostListener, defineInjectable, inject, NgModule, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy } from '@angular/core';
+import { RouterModalOkCancel, RouterModalModule } from '@universis/common/routing';
+import { ActivatedRoute, Router, NavigationStart, RouterModule } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+import { TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
+import { AngularDataContext } from '@themost/angular';
+import { ServiceUrlPreProcessor, TranslatePreProcessor, AdvancedFormsModule } from '@universis/forms';
+import { TemplatePipe, LoadingService, ErrorService, DIALOG_BUTTONS, ModalService, UserActivityService, ToastService, AppEventService, UserStorageService, ConfigurationService, SharedModule } from '@universis/common';
+
+class AdvancedColumnFormatter {
+}
+class NestedPropertyFormatter extends AdvancedColumnFormatter {
+    render(data, type, row, meta) {
+        // get column
+        const column = meta.settings.aoColumns[meta.col];
+        if (column && column.data) {
+            return at(row, column.data.replace(/\//g, '.'));
+        }
+        return data;
+    }
+    constructor() {
+        super();
+    }
+}
+class ButtonFormatter extends AdvancedColumnFormatter {
+    render(data, type, row, meta) {
+        if (data == null) {
+            return '';
+        }
+        // get column
+        const column = meta.settings.aoColumns[meta.col];
+        // get format options
+        const formatOptions = Object.assign({
+            buttonClass: 'btn btn-default'
+        }, this.formatOptions);
+        // get text content
+        let buttonText;
+        let buttonTitle = '';
+        if (formatOptions.buttonText) {
+            buttonText = this.injector.get(TranslateService).instant(formatOptions.buttonText);
+        }
+        else {
+            buttonText = formatOptions.buttonContent;
+        }
+        if (formatOptions.buttonTitle) {
+            buttonTitle = this.injector.get(TranslateService).instant(formatOptions.buttonTitle);
+        }
+        if (Array.isArray(this.formatOptions.commands)) {
+            const activatedRoute = this.injector.get(ActivatedRoute);
+            const router = this.injector.get(Router);
+            const commands = this.formatOptions.commands.map(command => {
+                if (typeof command === 'string') {
+                    return new TemplatePipe().transform(command, row);
+                }
+                if (command.outlets) {
+                    const commandOutlets = {};
+                    Object.keys(command.outlets).forEach((key) => {
+                        if (Object.prototype.hasOwnProperty.call(command.outlets, key)) {
+                            const outlet = command.outlets[key];
+                            if (Array.isArray(outlet)) {
+                                Object.defineProperty(commandOutlets, key, {
+                                    enumerable: true,
+                                    configurable: true,
+                                    writable: true,
+                                    value: outlet.map((x) => {
+                                        return new TemplatePipe().transform(x, row);
+                                    })
+                                });
+                            }
+                            else {
+                                Object.defineProperty(commandOutlets, key, {
+                                    enumerable: true,
+                                    configurable: true,
+                                    writable: true,
+                                    value: outlet
+                                });
+                            }
+                        }
+                    });
+                    return {
+                        outlets: commandOutlets
+                    };
+                }
+                return command;
+            });
+            const queryParams = {};
+            let replaceUrl = true;
+            if (this.formatOptions.navigationExtras && this.formatOptions.navigationExtras.queryParams) {
+                Object.keys(this.formatOptions.navigationExtras.queryParams).map(key => {
+                    queryParams[key] = new TemplatePipe().transform(this.formatOptions.navigationExtras.queryParams[key], row);
+                });
+            }
+            if (this.formatOptions.navigationExtras && typeof this.formatOptions.navigationExtras.replaceUrl !== 'undefined') {
+                replaceUrl = this.formatOptions.navigationExtras.replaceUrl;
+            }
+            let skipLocationChange = false;
+            if (this.formatOptions.navigationExtras && typeof this.formatOptions.navigationExtras.skipLocationChange !== 'undefined') {
+                skipLocationChange = this.formatOptions.navigationExtras.skipLocationChange;
+            }
+            const routerLink = router.createUrlTree(commands, {
+                relativeTo: activatedRoute,
+                queryParams: queryParams,
+                replaceUrl: replaceUrl,
+                skipLocationChange: skipLocationChange
+            }).toString();
+            return `<a class="${formatOptions.buttonClass}" title="${buttonTitle}" href="#${routerLink}">${buttonText}</a>`;
+        }
+        // and return button
+        const href = new TemplatePipe().transform(this.formatString, row);
+        return `<a class="${formatOptions.buttonClass}" title="${buttonTitle}" href="${href}">${buttonText}</a>`;
+    }
+    constructor() {
+        super();
+    }
+}
+class LinkFormatter extends AdvancedColumnFormatter {
+    render(data, type, row, meta) {
+        // get column
+        const column = meta.settings.aoColumns[meta.col];
+        if (column && column.data) {
+            return `<a href="${(new TemplatePipe().transform(this.formatString, row))}">${data}</a>`;
+        }
+        return data;
+    }
+    constructor() {
+        super();
+    }
+}
+class ActionLinkFormatter extends AdvancedColumnFormatter {
+    render(data, type, row, meta) {
+        // get column
+        const column = meta.settings.aoColumns[meta.col];
+        if (column && column.data) {
+            this.actions = this.actions || [];
+            const allowedActions = this.actions.filter(x => {
+                if (x.access && x.access.length > 0) {
+                    let access = x.access;
+                    access = access.filter(y => {
+                        if (y.studentStatuses) {
+                            return y.studentStatuses.find(z => z.alternateName === row.studentStatus);
+                        }
+                    });
+                    if (access && access.length > 0) {
+                        return x;
+                    }
+                }
+                else {
+                    return x;
+                }
+            });
+            // return the dropdown menu with 3 dots
+            return new TemplatePipe().transform(`<div class='dropdown details-control' data-id='${data}' data-type='student' >
+                  <a id="dropdownMenuButton-${data}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <span class="fa-2x text-dots"></span></a>
+                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton-${data}">
+                     ${allowedActions.map(x => `<a data-name='${x.name}' class="dropdown-item" href="${x.href}">
+                         ${this.injector.get(TranslateService).instant(new TemplatePipe().transform(x.title, ({ value: data })))}
+                        </a>`)
+                .join('')}
+                    </div>
+                </div>`, row);
+        }
+        return data;
+    }
+    constructor() {
+        super();
+    }
+}
+class SelectRowFormatter extends AdvancedColumnFormatter {
+    render(data, type, row, meta) {
+        // get column
+        const column = meta.settings.aoColumns[meta.col];
+        if (column && column.data) {
+            let _tpl = `<input class="checkbox checkbox-theme" type="checkbox"
+ id="s-${meta.row}" /><label for="s-${meta.row}">&nbsp;</label>`;
+            return new TemplatePipe().transform(_tpl, row);
+        }
+        return data;
+    }
+    constructor() {
+        super();
+    }
+}
+class TemplateFormatter extends AdvancedColumnFormatter {
+    render(data, type, row, meta) {
+        // get column
+        const column = meta.settings.aoColumns[meta.col];
+        if (column && column.data) {
+            return new TemplatePipe().transform(this.formatString, row);
+        }
+        return data;
+    }
+    constructor() {
+        super();
+    }
+}
+class TrueFalseFormatter extends AdvancedColumnFormatter {
+    render(data, type, row, meta) {
+        return data ? this.injector.get(TranslateService).instant('TrueFalse.long.Yes') :
+            this.injector.get(TranslateService).instant('TrueFalse.long.No');
+    }
+    constructor() {
+        super();
+    }
+}
+class TranslationFormatter extends AdvancedColumnFormatter {
+    render(data, type, row, meta) {
+        // get column
+        const column = meta.settings.aoColumns[meta.col];
+        if (column && data != null) {
+            return this.injector.get(TranslateService).instant(new TemplatePipe().transform(this.formatString, { value: data }));
+        }
+        return this.injector.get(TranslateService).instant('Unknown');
+    }
+    constructor() {
+        super();
+    }
+}
+class DateTimeFormatter extends AdvancedColumnFormatter {
+    render(data, type, row, meta) {
+        // get column
+        const column = meta.settings.aoColumns[meta.col];
+        if (column && column.data) {
+            const datePipe = new DatePipe(this.injector.get(TranslateService).currentLang);
+            if (typeof data === 'string' && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\+\d{2}$/.test(data)) {
+                return datePipe.transform(new Date(data + ':00'), this.formatString);
+            }
+            return datePipe.transform(data, this.formatString);
+        }
+        return data;
+    }
+    constructor() {
+        super();
+    }
+}
+class NgClassFormatter extends AdvancedColumnFormatter {
+    render(data, type, row, meta) {
+        // get column
+        const column = meta.settings.aoColumns[meta.col];
+        if (column && column.data) {
+            // get formatOptions
+            if (this.formatOptions) {
+                const ngClass = this.formatOptions.ngClass;
+                // check condition for each key
+                for (const key of Object.keys(ngClass)) {
+                    const result = new TemplatePipe().transform(ngClass[key], row);
+                    const fn = new Function(`return ${result};`);
+                    // if condition returns true add class
+                    if (fn() === true) {
+                        return `<span class="${key}">${data}</span>`;
+                    }
+                }
+            }
+            return data;
+        }
+        return data;
+    }
+    constructor() {
+        super();
+    }
+}
+class LanguageFormatter extends AdvancedColumnFormatter {
+    render(data, type, row, meta) {
+        if (data) {
+            return getNativeName(data);
+        }
+        return data;
+    }
+    constructor() {
+        super();
+    }
+}
+
+class AdvancedFilterValueProvider {
+    constructor() {
+        this.values = {};
+        this._template = new TemplatePipe();
+    }
+    buildFilter(filter) {
+        if (filter) {
+            return this._template.transform(filter, this.values);
+        }
+    }
+    asyncBuildFilter(filter) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (filter) {
+                return this._template.transform(filter, yield this.getValues());
+            }
+        });
+    }
+    getValues() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.values;
+        });
+    }
+}
+AdvancedFilterValueProvider.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+/** @nocollapse */
+AdvancedFilterValueProvider.ctorParameters = () => [];
+AdvancedFilterValueProvider.ngInjectableDef = defineInjectable({ factory: function AdvancedFilterValueProvider_Factory() { return new AdvancedFilterValueProvider(); }, token: AdvancedFilterValueProvider, providedIn: "root" });
+
+// restore jquery import to avoid Cannot call a namespace ('jquery') error
+const jQuery = jQuery_;
+const DataTablesApi = jQuery.fn.dataTable.Api;
+DataTablesApi.register('processing()', function (show) {
+    return this.iterator('table', function (ctx) {
+        ctx.oApi._fnProcessingDisplay(ctx, show);
+    });
+});
+class TableTranslationChangeDetector extends ChangeDetectorRef {
+    checkNoChanges() {
+    }
+    detach() {
+    }
+    detectChanges() {
+    }
+    markForCheck() {
+    }
+    reattach() {
+    }
+}
+let COLUMN_FORMATTERS = new InjectionToken('column.formatters');
+class ColumnFormatter extends AdvancedColumnFormatter {
+    constructor(injector) {
+        super();
+        this.injector = injector;
+    }
+    render(data, type, row, meta) {
+        //
+    }
+}
+function forceCast(input) {
+    return input;
+}
+class AdvancedTableConfiguration {
+    static cast(input, clone) {
+        if (clone) {
+            return forceCast(JSON.parse(JSON.stringify(input)));
+        }
+        return forceCast(input);
+    }
+}
+function getRandomIdentifier() {
+    return (Number(String(Math.random()).slice(2))).toString(36);
+}
+class AdvancedTableComponent {
+    constructor(_context, _columnFormatters, _activatedRoute, _translateService, _injector, _advancedFilterValueProvider, _element, _template, _loading, _http) {
+        this._context = _context;
+        this._columnFormatters = _columnFormatters;
+        this._activatedRoute = _activatedRoute;
+        this._translateService = _translateService;
+        this._injector = _injector;
+        this._advancedFilterValueProvider = _advancedFilterValueProvider;
+        this._element = _element;
+        this._template = _template;
+        this._loading = _loading;
+        this._http = _http;
+        this._firstLoad = true;
+        this._showFooter = true;
+        this._showPaging = false;
+        this._id = getRandomIdentifier();
+        this.smartSelect = false;
+        this.configChanges = new BehaviorSubject(null);
+        this.height = 800;
+        this.showActions = true;
+        this.autoLoad = true;
+        this.load = new EventEmitter();
+        this.init = new EventEmitter();
+        this.reload = new EventEmitter();
+        this.select = new EventEmitter();
+        this.selectedItems = new EventEmitter();
+        this.scrollable = true;
+        this.serverSide = true;
+        this.lengthMenu = [50, 100, 200, 500];
+        this.paging = true;
+        this.pageLength = 25;
+        this.scrollY = 800;
+        this.scrollX = true;
+        /**
+         * Enables row selection. The defaulr value is false
+         */
+        this.selectable = false;
+        /**
+         * Enables or disable multiple selection. The default values is true.
+         */
+        this.multipleSelect = true;
+        /**
+         * Enables custom selection and hides select column. The default value is  false
+         */
+        this.customSelect = false;
+        this.selected = [];
+        this.unselected = [];
+        // initialize translate pipe
+        this.translator = new TranslatePipe(this._translateService, new TableTranslationChangeDetector());
+        jQuery.fn.dataTable.ext.classes.sPageButton = 'btn';
+        jQuery.fn.dataTable.ext.classes.sPageButtonActive = 'btn btn-light';
+        this.reloadSubscription = this.reload.subscribe(data => {
+            this.fetch();
+        });
+    }
+    /**
+     * Gets or sets table configuration
+     */
+    set config(value) {
+        this._config = value;
+        // raise subscription
+        this.configChanges.next(this._config);
+    }
+    get config() {
+        return this._config;
+    }
+    /**
+     * Indicates whether table footer will be visible or not
+     */
+    set showFooter(value) {
+        this._showFooter = value;
+        // show or hide footer
+        if (this._element && this._element.nativeElement) {
+            const element = this._element.nativeElement
+                .querySelector('.dataTables_info');
+            if (element == null) {
+                return;
+            }
+            if (value) {
+                element.classList.remove('d-none');
+            }
+            else {
+                element.classList.add('d-none');
+            }
+        }
+    }
+    get showFooter() {
+        return this._showFooter;
+    }
+    /**
+     * Indicates whether paging information will be visible or not
+     */
+    set showPaging(value) {
+        this._showPaging = value;
+        // show or hide footer
+        if (this._element && this._element.nativeElement) {
+            const element = this._element.nativeElement
+                .querySelector('.dataTables_paginate');
+            if (element == null) {
+                return;
+            }
+            if (value) {
+                jQuery(element).show();
+            }
+            else {
+                jQuery(element).hide();
+            }
+        }
+    }
+    get showPaging() {
+        return this._showPaging;
+    }
+    /**
+     * Gets or sets an active query for this table
+     */
+    set query(value) {
+        this._query = value;
+    }
+    get query() {
+        return this._query;
+    }
+    // simple search
+    search(searchText) {
+        this.query = this.query || this._context.model(this.config.model).asQueryable();
+        if (searchText && this.config.searchExpression) {
+            // validate search text in double quotes
+            if (/^"(.*?)"$/.test(searchText)) {
+                this.query.setParam('$filter', this._template.transform(this.config.searchExpression, {
+                    text: searchText.replace(/^"|"$/g, '')
+                }));
+            }
+            else {
+                // try to split words
+                const words = searchText.split(' ');
+                // join words to a single filter
+                const filter = words.map(word => {
+                    return this._template.transform(this.config.searchExpression, {
+                        text: word
+                    });
+                }).join(' and ');
+                // set filter
+                this.query.setParam('$filter', filter);
+            }
+        }
+        else {
+            // clear filter
+            this.query.setParam('$filter', null);
+        }
+        this._firstLoad = false;
+        this.dataTable.draw();
+    }
+    fetch(clearSelected) {
+        // if data table is null
+        if (this.dataTable == null) {
+            // initialize data table
+            return this.ngOnInit();
+        }
+        // clear selection if parameter is not declared or it's true
+        if (clearSelected == null || clearSelected === true) {
+            // set smart select to false
+            this.smartSelect = false;
+            // clear selected items
+            if (this.selected.length) {
+                this.selected.splice(0, this.selected.length);
+            }
+            // clear unselected items
+            if (this.unselected.length) {
+                this.unselected.splice(0, this.unselected.length);
+            }
+        }
+        // otherwise load data only
+        this.dataTable.draw();
+    }
+    destroy() {
+        if (this.dataTable) {
+            this.dataTable.destroy();
+            this._firstLoad = true;
+            jQuery(this.table.nativeElement).empty();
+            this.dataTable = null;
+            // clear selected items
+            if (this.selected.length) {
+                this.selected.splice(0, this.selected.length);
+            }
+            // clear unselected items
+            if (this.unselected.length) {
+                this.unselected.splice(0, this.unselected.length);
+            }
+            // set smart select to false
+            this.smartSelect = false;
+        }
+    }
+    /**
+     * Selects the specified data row
+     */
+    selectRow(row, silent) {
+        if (row) {
+            // get row
+            const rowNode = row.node();
+            // if multiple select is false
+            if (this.multipleSelect === false) {
+                if (this.customSelect === false) {
+                    // enumerate row
+                    this.dataTable.rows().nodes().each((node) => {
+                        if (node !== rowNode) {
+                            jQuery(node).find(':checkbox').prop('checked', false);
+                        }
+                    });
+                }
+                else {
+                    this.dataTable.rows('.selected').nodes().each((node) => {
+                        if (node !== rowNode) {
+                            jQuery(node).removeClass('selected');
+                        }
+                    });
+                }
+                // clear selected
+                this.selected.splice(0, this.selected.length);
+            }
+            // if custom select mode is off
+            if (this.customSelect === false) {
+                jQuery(rowNode).find(':checkbox').prop('checked', true);
+            }
+            else {
+                // otherwise add class
+                jQuery(row.node()).addClass('selected');
+            }
+            // get row data
+            const key = this.config.columns[0].property || this.config.columns[0].name;
+            const data = row.data();
+            // search selected items
+            let findIndex = this.selected.findIndex((x) => {
+                return x[key] === data[key];
+            });
+            if (findIndex >= 0) {
+                // remove previously selected row
+                this.selected.splice(findIndex, 1);
+            }
+            this.selected.push(data);
+            // validate unselected data
+            findIndex = this.unselected.findIndex((x) => {
+                return x[key] === data[key];
+            });
+            if (findIndex >= 0) {
+                // remove previously selected row
+                this.unselected.splice(findIndex, 1);
+            }
+            if (silent) {
+                return;
+            }
+            this.selectedItems.emit(this.selected);
+        }
+    }
+    /**
+     * Unselects the specified data row if it's selected
+     */
+    unSelectRow(row, silent) {
+        if (row) {
+            // if custom select mode is off
+            if (this.customSelect === false) {
+                jQuery(row.node()).find(':checkbox').prop('checked', false);
+            }
+            else {
+                // otherwise add class
+                jQuery(row.node()).removeClass('selected');
+            }
+            // get first column key
+            const key = this.config.columns[0].property || this.config.columns[0].name;
+            const data = row.data();
+            const id = data[key];
+            let findIndex = this.selected.findIndex(x => {
+                return x[key] === id;
+            });
+            if (findIndex >= 0) {
+                this.selected.splice(findIndex, 1);
+                if (this.smartSelect) {
+                    // add this row to unselected rows
+                    findIndex = this.unselected.findIndex(x => {
+                        return x[key] === id;
+                    });
+                    if (findIndex < 0) {
+                        this.unselected.push(data);
+                    }
+                }
+                if (silent) {
+                    return;
+                }
+                this.selectedItems.emit(this.selected);
+            }
+        }
+    }
+    selectAny() {
+        if (this.dataTable && this.selectable) {
+            // set smart select flag
+            this.smartSelect = true;
+            // select any row
+            this.dataTable.rows().every((index) => {
+                const row = this.dataTable.row(index);
+                this.selectRow(row, true);
+            });
+            // emit selection event
+            this.selectedItems.emit(this.selected);
+        }
+    }
+    selectNone() {
+        if (this.dataTable && this.selectable) {
+            // set smart select flag
+            this.smartSelect = false;
+            this.unselected.splice(0, this.unselected.length);
+            // select any row
+            this.dataTable.rows().every((index) => {
+                const row = this.dataTable.row(index);
+                this.unSelectRow(row, true);
+            });
+            this.selected.splice(0, this.selected.length);
+            // emit selection event
+            this.selectedItems.emit(this.selected);
+        }
+    }
+    toggleSelectRow(row) {
+        if (row) {
+            const data = row.data();
+            // get first column key
+            const key = this.config.columns[0].property || this.config.columns[0].name;
+            // get id
+            const id = data[key];
+            // find if row is selected
+            const findIndex = this.selected.find(x => {
+                return x[key] === id;
+            });
+            // if row is selected
+            if (findIndex >= 0) {
+                // unselect
+                this.unSelectRow(row);
+            }
+            else {
+                this.selectRow(row);
+            }
+        }
+    }
+    // noinspection JSMethodCanBeStatic
+    /**
+     * Datatables column renderer for select checkbox
+     * @param data
+     * @param type
+     * @param row
+     * @param meta
+     * @private
+     */
+    _renderSelect(data, type, row, meta) {
+        // get column
+        const column = meta.settings.aoColumns[meta.col];
+        // render template
+        return this._template.transform(`<input class="checkbox checkbox-theme s-row" type="checkbox"
+ id="s-${this._id}-${meta.row}" data-id="${data}" /><label for="s-${this._id}-${meta.row}">&nbsp;</label>`, row);
+    }
+    ngOnInit() {
+        const self = this;
+        if (this.dataTable) {
+            this.destroy();
+        }
+        if (this.config) {
+            // parse properties
+            if (Object.prototype.hasOwnProperty.call(this.config, 'selectable')) {
+                this.selectable = this.config.selectable;
+            }
+            if (Object.prototype.hasOwnProperty.call(this.config, 'multipleSelect')) {
+                this.multipleSelect = this.config.multipleSelect;
+            }
+            // prepare configuration for columns
+            const tableColumns = this.config.columns
+                // filter action link column
+                .filter(column => {
+                if (column.formatter && column.formatter === 'ActionLinkFormatter' && this.showActions === false) {
+                    return false;
+                }
+                return true;
+            }).map(column => {
+                // convert column to advance table column
+                return Object.assign(new ColumnFormatter(this._injector), column);
+            }).map(column => {
+                const columnDefinition = {
+                    data: column.property || column.name,
+                    defaultContent: column.hasOwnProperty('defaultContent') ? column.defaultContent : '',
+                    title: this.translator.transform(column.title),
+                    sortable: column.hasOwnProperty('sortable') ? column.sortable : true,
+                    visible: column.hasOwnProperty('hidden') ? !column.hidden : true,
+                    name: column.name
+                };
+                if (column.className) {
+                    Object.assign(columnDefinition, {
+                        className: column.className
+                    });
+                }
+                else {
+                    Object.assign(columnDefinition, {
+                        className: ''
+                    });
+                }
+                if (column.formatters) {
+                    Object.assign(columnDefinition, {
+                        render: function (data, type, row, meta) {
+                            let result = data;
+                            column.formatters.forEach(columnFormatter => {
+                                const formatter = self._columnFormatters[columnFormatter.formatter];
+                                if (formatter && typeof formatter.render === 'function') {
+                                    column.formatString = columnFormatter.formatString;
+                                    column.formatOptions = columnFormatter.formatOptions;
+                                }
+                                result = formatter.render.bind(column)(result, type, row, meta);
+                            });
+                            delete column.formatString;
+                            delete column.formatOptions;
+                            return result;
+                        }
+                    });
+                }
+                if (column.formatter) {
+                    const formatter = self._columnFormatters[column.formatter];
+                    if (formatter && typeof formatter.render === 'function') {
+                        Object.assign(columnDefinition, {
+                            render: formatter.render.bind(column)
+                        });
+                    }
+                }
+                return columnDefinition;
+            });
+            // get table element
+            const tableElement = jQuery(this.table.nativeElement);
+            // allow selection
+            if (this.selectable) {
+                // get first column (as row primary key)
+                // todo::allow row primary key configuration
+                const firstColumn = this.config.columns[0];
+                // add select column
+                const selectColumnDefinition = {
+                    className: 'text-center pl-4 pr-0',
+                    data: firstColumn.property || firstColumn.name,
+                    defaultContent: '',
+                    title: '',
+                    sortable: false,
+                    visible: !this.customSelect,
+                    name: firstColumn.name,
+                };
+                // assign renderer
+                Object.assign(selectColumnDefinition, {
+                    render: this._renderSelect.bind(this)
+                });
+                // and finally add column
+                tableColumns.unshift(selectColumnDefinition);
+                // user interface additions
+                // handle page change event (a trick for firing draw.dt events)
+                tableElement
+                    // for each page
+                    .on('page.dt', ($event) => {
+                    const info = this.dataTable.page.info();
+                })
+                    // handle draw events
+                    .on('draw.dt', () => {
+                    if (this.customSelect) {
+                        // enable row selection event
+                        tableElement.find('tbody').on('click', 'tr', function () {
+                            // select row
+                            const row = self.dataTable.row(this);
+                            // add row
+                            self.select.emit(row);
+                        });
+                    }
+                    tableElement.find('input.s-row').on('click', this.onSelectionChange.bind(this));
+                    // make selection on current page
+                    const key = this.config.columns[0].property;
+                    if (this.selected.length > 0) {
+                        // enumerate selected items
+                        this.selected.forEach(item => {
+                            // find row identifier
+                            const id = item[key];
+                            // if identifier is defined
+                            if (id != null) {
+                                // try to find check element with this identifier in attribute data-id
+                                tableElement.find(`input[data-id='${id}']`).prop('checked', true);
+                            }
+                        });
+                    }
+                    if (this.smartSelect) {
+                        // select rows that are not selected
+                        // and do not included in unselected collection
+                        tableElement.find('input[data-id]').each((index, element) => {
+                            // get data id
+                            if (this.unselected.findIndex((x) => {
+                                // tslint:disable-next-line:triple-equals
+                                return x[key] == jQuery(element).attr('data-id');
+                            }) < 0) {
+                                this.selectRow(this.dataTable.row(index));
+                            }
+                        });
+                    }
+                    else if (this.selected.length === 0) {
+                        tableElement.find('input[data-id]').prop('checked', false);
+                    }
+                });
+            }
+            // initialize data table
+            const settings = {
+                // set length menu
+                lengthMenu: [5, 10, 50, 100, 200, 500],
+                // hide length menu
+                lengthChange: false,
+                // enable search but hide search box (css)
+                searching: true,
+                // enable data processing
+                processing: true,
+                // enable getting server side data
+                serverSide: this.serverSide,
+                // enumerate table columns
+                columns: tableColumns,
+                order: [],
+                // set scroll x
+                scrollX: this.scrollX,
+                dom: 'Bfrtip',
+                autoWidth: false,
+                buttons: [
+                    {
+                        extend: 'excel',
+                        filename: this.config.title,
+                        className: 'd-none',
+                        exportOptions: {
+                            columns: 'th:not(:first-child)'
+                        }
+                    }
+                ],
+                // define server data callback
+                fnServerData: function (sSource, aoData, fnCallback, oSettings) {
+                    // if method is invoked for the first time
+                    if (self._firstLoad) {
+                        // disabled first load flag
+                        self._firstLoad = false;
+                        // if auto load is disabled
+                        if (self.autoLoad === false) {
+                            const emptyDataSet = {
+                                recordsTotal: 0,
+                                recordsFiltered: 0,
+                                data: []
+                            };
+                            // emit empty data
+                            self.load.emit(emptyDataSet);
+                            // return empty data
+                            return fnCallback(emptyDataSet);
+                        }
+                    }
+                    // get activated route params
+                    const queryParams = self._activatedRoute.snapshot.queryParams;
+                    // get columns
+                    const columns = aoData[1].value;
+                    // get order expression
+                    const order = aoData[2].value;
+                    // get skip records param
+                    const skip = aoData[3].value;
+                    // get page size param
+                    const top = aoData[4].value;
+                    // get search value
+                    const searchText = aoData[5].value;
+                    // get data queryable
+                    const q = self._query instanceof ClientDataQueryable ? self._query : self._context.model(self.config.model).asQueryable();
+                    // apply paging params
+                    if (top) {
+                        q.take(top).skip(skip);
+                    }
+                    // apply order params
+                    if (order && order.length) {
+                        // get order query expression
+                        const orderByStr = order.map(expr => {
+                            return tableColumns[expr.column].name + ' ' + expr.dir || 'asc';
+                        }).join(',');
+                        // set order
+                        q.setParam('$orderby', orderByStr);
+                    }
+                    // configure $select parameter
+                    const select = self.config.columns.filter(column => {
+                        if (column.virtual === true) {
+                            return false;
+                        }
+                        return true;
+                    }).map(column => {
+                        if (column.property) {
+                            return column.name + ' as ' + column.property;
+                        }
+                        else {
+                            return column.name;
+                        }
+                    });
+                    q.select.apply(q, select);
+                    // configure $filter
+                    if (queryParams.$filter && queryParams.$filter.length) {
+                        // set route filter
+                        const qParams = q.getParams();
+                        q.setParam('$filter', null);
+                        const expressions = [queryParams.$filter];
+                        if (qParams.$filter) {
+                            expressions.push('(' + qParams.$filter + ')');
+                        }
+                        q.filter(expressions.join(' and '));
+                    }
+                    // check if query parameters contain filter
+                    if (queryParams.$expand && queryParams.$expand.length) {
+                        // set route $expand
+                        q.setParam('$expand', queryParams.$expand);
+                    }
+                    if (!q.getParams()['$orderby'] && self.config && self.config.defaults && self.config.defaults.orderBy) {
+                        q.setParam('$orderby', self.config.defaults.orderBy);
+                    }
+                    // append default filter
+                    if (self.config && self.config.defaults && self.config.defaults.filter) {
+                        return self._advancedFilterValueProvider.asyncBuildFilter(self.config.defaults.filter).then(defaultFilterString => {
+                            if (defaultFilterString) {
+                                const qParams = q.getParams();
+                                q.setParam('$filter', null);
+                                const expressions = [defaultFilterString];
+                                if (qParams.$filter) {
+                                    expressions.push('(' + qParams.$filter + ')');
+                                }
+                                q.filter(expressions.join(' and '));
+                            }
+                            self.lastQueryParams = q.getParams();
+                            q.getList().then(items => {
+                                const dataSet = {
+                                    recordsTotal: items.total,
+                                    recordsFiltered: items.total,
+                                    data: items.value
+                                };
+                                if (items.total === 0) {
+                                    self.resetEmptyTable();
+                                }
+                                // emit load event
+                                self.load.emit(dataSet);
+                                // return data
+                                return fnCallback(dataSet);
+                            });
+                        }).catch((err) => {
+                            console.error('TABLES', err);
+                        });
+                    }
+                    self.lastQueryParams = q.getParams();
+                    q.getList().then(items => {
+                        const dataSet = {
+                            recordsTotal: items.total,
+                            recordsFiltered: items.total,
+                            data: items.value
+                        };
+                        if (items.total === 0) {
+                            self.resetEmptyTable();
+                        }
+                        // emit load event
+                        self.load.emit(dataSet);
+                        // return data
+                        return fnCallback(dataSet);
+                    }).catch((err) => {
+                        console.error('TABLES', err);
+                    });
+                },
+                language: Object.assign({}, self.translator.transform('Tables.DataTable'), { emptyTable: ' ', processing: ' ' })
+            };
+            if (this.scrollable) {
+                // set continuous scrolling
+                Object.assign(settings, {
+                    scrollY: this.scrollY,
+                    scrollCollapse: false,
+                    scroller: {
+                        loadingIndicator: false,
+                        displayBuffer: 10
+                    },
+                });
+            }
+            else {
+                Object.assign(settings, {
+                    paging: this.paging,
+                    pageLength: this.pageLength
+                });
+            }
+            if (this.selectable) ;
+            // handle init.dt event and emit local event
+            this.dataTable = tableElement.DataTable(settings);
+            tableElement.on('init.dt', () => {
+                if (this.dataTable == null) {
+                    return;
+                }
+                // restore default empty table html
+                // (due to ng async binding)
+                this.init.emit(this.dataTable);
+            });
+            // show or hide footer
+            if (!this.showFooter) {
+                this._element.nativeElement
+                    .querySelector('.dataTables_info').classList.add('d-none');
+            }
+            // show or hide pager
+            if (this.showPaging) {
+                this.showPaging = true;
+            }
+        }
+    }
+    get lastQuery() {
+        if (this.config == null) {
+            return null;
+        }
+        if (this.lastQueryParams == null) {
+            return null;
+        }
+        const q = this._context.model(this.config.model).asQueryable();
+        Object.keys(this.lastQueryParams).forEach((key) => {
+            q.setParam(key, this.lastQueryParams[key]);
+        });
+        // return query
+        return q;
+    }
+    /**
+     * Fetches and updates a single row
+     * @param find - Any object which is being converted to a query
+     */
+    fetchOne(find) {
+        if (find == null) {
+            return;
+        }
+        if (this.dataTable == null) {
+            return;
+        }
+        if (this.lastQueryParams == null) {
+            return;
+        }
+        // get rows
+        const rows = Array.from(this.dataTable.rows().data());
+        if (rows && rows.length) {
+            // find result
+            const findKeys = Object.keys(find);
+            if (findKeys.length === 0) {
+                // do nothing
+                return;
+            }
+            // find row index by searching each property
+            const rowIndex = rows.findIndex((row) => {
+                return findKeys.map((key) => {
+                    return row[key] === find[key];
+                }).filter((res) => {
+                    return res === false;
+                }).length === 0;
+            });
+            // if row has been found
+            if (rowIndex >= 0) {
+                const query = this._context.model(this.config.model).asQueryable();
+                // select attributes
+                query.setParam('$select', this.lastQueryParams.$select);
+                // apply filter for row
+                findKeys.forEach((key) => {
+                    const column = this.config.columns.find((col) => {
+                        return col.property === key || col.name === key;
+                    });
+                    if (column) {
+                        // get property or name
+                        const property = column.property || column.name;
+                        query.and(property).equal(find[key]);
+                    }
+                    else {
+                        query.and(key).equal(find[key]);
+                    }
+                });
+                // and finally get item
+                return query.getItem().then((item) => {
+                    // if item exists
+                    const row = this.dataTable.row(rowIndex);
+                    const checked = jQuery(row.node()).find(':checkbox').prop('checked');
+                    if (item) {
+                        // redraw row
+                        row.data(item);
+                        jQuery(row.node()).find(':checkbox').on('click', this.onSelectionChange.bind(this));
+                        // if row is already selected
+                        if (checked) {
+                            this.selectRow(row, true);
+                        }
+                    }
+                    return Promise.resolve();
+                });
+            }
+        }
+        return Promise.resolve();
+    }
+    ngOnDestroy() {
+        if (this.reloadSubscription) {
+            this.reloadSubscription.unsubscribe();
+        }
+    }
+    /**
+     * Handle selection change
+     * @param $event
+     */
+    onSelectionChange($event) {
+        const input = $event.target;
+        // get row from id
+        const rowIndex = parseInt(/-(\d+)$/g.exec(input.id)[1], 10);
+        // get row
+        const row = this.dataTable.row(rowIndex).data();
+        // get row identifier
+        if (row) {
+            const key = this.config.columns[0].property;
+            const id = row[key];
+            let findItemIndex = this.selected.findIndex(item => {
+                return item[key] === id;
+            });
+            if (input.checked) {
+                if (findItemIndex < 0) {
+                    // add row to selected rows
+                    this.selected.push(row);
+                }
+            }
+            else {
+                if (findItemIndex >= 0) {
+                    // remove selected item
+                    this.selected.splice(findItemIndex, 1);
+                    if (this.smartSelect) {
+                        // add row to unselected rows
+                        findItemIndex = this.unselected.findIndex(item => {
+                            return item[key] === id;
+                        });
+                        if (findItemIndex < 0) {
+                            this.unselected.push(row);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    resetEmptyTable() {
+        // this operation is important
+        // due to ng data binding
+        // empty table template has no translated text during ngOnInit()
+        if (this.dataTable && this.dataTable.context[0]) {
+            this.dataTable.context[0].oLanguage.sEmptyTable = this.emptyTable.nativeElement.innerHTML;
+        }
+    }
+    clearEmptyTable() {
+        if (this.dataTable && this.dataTable.context[0]) {
+            this.dataTable.context[0].oLanguage.sEmptyTable = '';
+        }
+    }
+    export() {
+        const element = document.querySelector('.dt-buttons .buttons-excel');
+        element.click();
+    }
+    handleColumns(columnsToShow) {
+        const table = this.dataTable;
+        this.config.columns.slice(1).forEach((column, i) => {
+            if (!column.hidden) {
+                if (columnsToShow.includes(column.name)) {
+                    // noinspection TypeScriptValidateJSTypes
+                    table.column(column.name + ':name').visible(true);
+                }
+                else {
+                    // noinspection TypeScriptValidateJSTypes
+                    table.column(column.name + ':name').visible(false);
+                }
+            }
+        });
+    }
+    getConfig() {
+        return this.config;
+    }
+    ngOnChanges(changes) {
+        if (Object.prototype.hasOwnProperty.call(changes, 'configSrc')) {
+            if (changes.configSrc != null) {
+                // load table configuration on change
+                if (changes.configSrc.currentValue && (changes.configSrc.currentValue != changes.configSrc.previousValue)) {
+                    this._http.get(changes.configSrc.currentValue).toPromise().then((config) => {
+                        // set configuration
+                        this.config = config;
+                        // fetch and redraw
+                        this.fetch();
+                    }).catch((err) => {
+                        console.error('TABLES', 'An error occurred while loading table configuration.');
+                        console.error(err);
+                    });
+                }
+            }
+        }
+    }
+}
+AdvancedTableComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-advanced-table',
+                template: `
+    <table #table class="dataTable">
+    </table>
+    <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>
+  `,
+                encapsulation: ViewEncapsulation.None,
+                styles: ["table.dataTable thead .sorting{background-image:none}table.dataTable thead .sorting_asc{background-position:95% 60%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsSAAALEgHS3X78AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAEtJREFUKJFjYBgywAOKMQALFjE/BgaGTCibjYGBYRM+kz0ZGBh2MTAw8DAwMHAxMDBsY2BgCCBGMQzg1IRNMV5NuVAJXIALqmYwAgBBkAlPRCLcLwAAAABJRU5ErkJggg==)}table.dataTable thead .sorting_desc{background-position:95% 60%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAArzAAAK8wHvFRX1AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAFNJREFUKJHVzTEKgDAQRNGHZfBg2sSTeDMLKwXPYuVJbBKQQEyrH6bZ+cPyWWaElz4kR5cOJ1b0FXnBVRYjjmIUsGGqvX6OmnImYk+JLTkzpPyBGwrtCvfBe56nAAAAAElFTkSuQmCC)}table.dataTable thead th{color:#73818e;font-size:.75rem;font-weight:600;padding-top:16px;padding-bottom:4px;border-bottom:none;padding-left:8px}table.dataTable tbody tr:first-child td:first-child{border-radius:6px 0}table.dataTable tbody tr:first-child td:last-child{border-radius:0 6px}table.dataTable tbody tr{border-radius:6px}table.dataTable tbody tr td:first-child{border-left:1px solid #c2cfd6}table.dataTable tbody tr td:last-child{border-right:1px solid #c2cfd6}table.dataTable tbody tr td{padding-top:16px;padding-bottom:16px;border-top:1px solid #c2cfd6}table.dataTable tbody tr:last-child td:first-child{border-radius:0 0 0 6px}table.dataTable tbody tr:last-child td:last-child{border-radius:0 0 6px}table.dataTable tbody tr:last-child td{border-bottom:1px solid #c2cfd6}table.dataTable td.dataTables_empty{border:none!important}table.dataTable.no-footer{border-bottom:none}.dataTables_paginate .btn.previous{margin-right:8px}.dataTables_paginate .btn.next{margin-left:8px}.dataTables_info,.dataTables_paginate{margin-top:1rem}.dataTables_paginate span .btn{border-radius:1.5rem}.dataTables_filter{display:none}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:0;overflow:auto}.dataTables_paginate{display:none}.dataTables_wrapper .dataTables_processing{background:0 0;top:-40%;color:#73818e}.text-decoration-line-through{text-decoration:line-through!important}tr.removed .checkbox+label{visibility:hidden}"]
+            }] }
+];
+/** @nocollapse */
+AdvancedTableComponent.ctorParameters = () => [
+    { type: AngularDataContext },
+    { type: undefined, decorators: [{ type: Inject, args: [COLUMN_FORMATTERS,] }] },
+    { type: ActivatedRoute },
+    { type: TranslateService },
+    { type: Injector },
+    { type: AdvancedFilterValueProvider },
+    { type: ElementRef },
+    { type: TemplatePipe },
+    { type: LoadingService },
+    { type: HttpClient }
+];
+AdvancedTableComponent.propDecorators = {
+    table: [{ type: ViewChild, args: ['table',] }],
+    emptyTable: [{ type: ViewChild, args: ['emptyTable',] }],
+    loadingTable: [{ type: ViewChild, args: ['loadingTable',] }],
+    height: [{ type: Input }],
+    showActions: [{ type: Input }],
+    autoLoad: [{ type: Input }],
+    load: [{ type: Output, args: ['load',] }],
+    init: [{ type: Output, args: ['init',] }],
+    reload: [{ type: Input, args: ['reload',] }],
+    select: [{ type: Output, args: ['select',] }],
+    selectedItems: [{ type: Output, args: ['selectedItems',] }],
+    scrollable: [{ type: Input }],
+    serverSide: [{ type: Input }],
+    lengthMenu: [{ type: Input }],
+    paging: [{ type: Input }],
+    pageLength: [{ type: Input }],
+    scrollY: [{ type: Input }],
+    scrollX: [{ type: Input }],
+    selectable: [{ type: Input }],
+    multipleSelect: [{ type: Input }],
+    customSelect: [{ type: Input }],
+    selected: [{ type: Input }],
+    configSrc: [{ type: Input }],
+    config: [{ type: Input, args: ['config',] }],
+    showFooter: [{ type: Input, args: ['showFooter',] }],
+    showPaging: [{ type: Input, args: ['showPaging',] }],
+    query: [{ type: Input, args: ['query',] }]
+};
+
+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',] }]
+};
+
+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.modalIcon = 'fas fa-project-diagram';
+        this.progressType = 'indigo';
+        this.errorMessage = 'Tables.Actions.CompletedWithErrors';
+        this.loading = false;
+        this.refresh = new EventEmitter();
+        // set modal size
+        this.modalClass = 'modal-lg';
+        // set modal title
+        this.modalTitle = 'Tables.Actions.Label';
+        // disable ok button
+        this.okButtonDisabled = false;
+        // set button text
+        this.okButtonText = 'Tables.Actions.Start';
+    }
+    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;
+            }
+        });
+    }
+    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;
+                }
+            });
+        }
+    }
+    ngOnDestroy() {
+        if (this.refreshSubscription) {
+            this.refreshSubscription.unsubscribe();
+        }
+        if (this.executeSubscription) {
+            this.executeSubscription.unsubscribe();
+        }
+        if (this.invalidSubscription) {
+            this.invalidSubscription.unsubscribe();
+        }
+    }
+    cancel() {
+        if (this.loading) {
+            return;
+        }
+        // close
+        if (this._modalService.modalRef) {
+            return this._modalService.modalRef.hide();
+        }
+    }
+    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;
+            }
+        });
+    }
+}
+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
+        }
+        `]
+            }] }
+];
+/** @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;
+    }
+    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._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();
+                }
+            }
+        }
+        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 (Object.prototype.hasOwnProperty.call(changes, 'filter')) {
+            if (changes.filter != null) {
+                this.submission.data = changes.filter.currentValue || {};
+                this.refreshForm.emit({
+                    submission: this.submission
+                });
+            }
+        }
+    }
+    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
+                });
+            });
+        }
+    }
+    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];
+                }
+            }
+        });
+    }
+    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 = [
+    { 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}"]
+            }] }
+];
+/** @nocollapse */
+AdvancedSearchFormComponent.ctorParameters = () => [
+    { type: AngularDataContext },
+    { type: TranslateService },
+    { type: ActivatedRoute },
+    { type: HttpClient }
+];
+AdvancedSearchFormComponent.propDecorators = {
+    formComponent: [{ type: ViewChild, args: ['formioComponent',] }],
+    form: [{ type: Input }],
+    formSrc: [{ type: Input }],
+    refreshForm: [{ type: Output }]
+};
+
+class AdvancedTableConfigurationResolver {
+    constructor(_http) {
+        this._http = _http;
+    }
+    resolve(route, state) {
+        // get list
+        const list = route.data.list || route.params.list;
+        // get model
+        const model = route.data.model || route.params.model;
+        // get configuration
+        return this._http.get(`assets/lists/${model}/${list}.json`).toPromise();
+    }
+}
+AdvancedTableConfigurationResolver.decorators = [
+    { type: Injectable }
+];
+/** @nocollapse */
+AdvancedTableConfigurationResolver.ctorParameters = () => [
+    { type: HttpClient }
+];
+class AdvancedSearchConfigurationResolver {
+    constructor(_http) {
+        this._http = _http;
+    }
+    resolve(route, state) {
+        // get list
+        const list = route.data.list || route.params.list;
+        // get model
+        const model = route.data.model || route.params.model;
+        // get configuration
+        return this._http.get(`assets/lists/${model}/search.${list}.json`).toPromise();
+    }
+}
+AdvancedSearchConfigurationResolver.decorators = [
+    { type: Injectable }
+];
+/** @nocollapse */
+AdvancedSearchConfigurationResolver.ctorParameters = () => [
+    { type: HttpClient }
+];
+
+class AdvancedTableSearchComponent extends AdvancedTableSearchBaseComponent {
+    constructor(_context, _activatedRoute, datePipe, _modalService, _userStorage, _translate, _advancedSearchValueProvider, _template, _router, _modal) {
+        super();
+        this._context = _context;
+        this._activatedRoute = _activatedRoute;
+        this.datePipe = datePipe;
+        this._modalService = _modalService;
+        this._userStorage = _userStorage;
+        this._translate = _translate;
+        this._advancedSearchValueProvider = _advancedSearchValueProvider;
+        this._template = _template;
+        this._router = _router;
+        this._modal = _modal;
+        this.collapsed = true;
+        this.allowSave = true;
+        this.showMore = true;
+        this.mergeQueryParams = true;
+        this.viewChange = new EventEmitter();
+        this.userSearchList = [];
+        this.selectedList = null;
+    }
+    set text(value) {
+        if (this.searchText) {
+            this.searchText.nativeElement.value = value;
+        }
+    }
+    get text() {
+        if (this.searchText) {
+            return this.searchText.nativeElement.value;
+        }
+    }
+    ngOnInit() {
+        this.configChangesSubscription = this.table.configChanges.subscribe((config) => {
+            if (config == null) {
+                return;
+            }
+            // load user searches
+            this.loadUserSearchList().then(() => {
+                // if search component merges query params
+                // (uses queryParams to apply filter)
+                if (this.mergeQueryParams) {
+                    this.queryParamSubscription = this._activatedRoute.queryParams.subscribe((queryParams) => {
+                        this.applyQueryParams(queryParams);
+                    });
+                }
+            });
+        });
+    }
+    /**
+     * Applies query given by the queryParams of the activated route
+     * @param queryParams
+     */
+    applyQueryParams(queryParams) {
+        this.filter = {};
+        if (Object.prototype.hasOwnProperty.call(queryParams, 'q')) {
+            // set collapsed
+            this.collapsed = true;
+            // search text
+            this.text = queryParams.q;
+            return this.table.search(this.text);
+        }
+        else {
+            this.text = '';
+        }
+        let filterParams = Object.assign({}, queryParams);
+        if (Object.prototype.hasOwnProperty.call(queryParams, 's')) {
+            // set collapsed
+            this.collapsed = false;
+            // find user search by name
+            if (this.userSearchList) {
+                this.selectedList = this.userSearchList.find((item) => {
+                    return item.name === queryParams.s;
+                });
+                if (this.selectedList) {
+                    filterParams = this.selectedList.filter;
+                }
+            }
+        }
+        else {
+            this.selectedList = null;
+        }
+        Object.keys(filterParams).filter((key) => {
+            // search criteria
+            if (this.table && this.table.config && this.table.config.criteria) {
+                return this.table.config.criteria.find((item) => {
+                    return item.name === key;
+                });
+            }
+        }).forEach((key) => {
+            let value = filterParams[key];
+            if (TextUtils.isNumber(value)) {
+                value = parseFloat(filterParams[key]);
+            }
+            if (this.filter[key] !== value) {
+                // set value
+                Object.defineProperty(this.filter, key, {
+                    configurable: true,
+                    enumerable: true,
+                    writable: true,
+                    value: value
+                });
+            }
+            if (this.filter[key] != null) {
+                this.collapsed = false;
+            }
+        });
+        // call filterChange event to apply change to advanced search children
+        this.filterChange.emit(this.filter);
+        // apply query
+        this.getQuery().then((query) => {
+            // if table query is null
+            if (this.table.query == null) {
+                // set query
+                this.table.query = query;
+            }
+            else {
+                if (query != null) {
+                    const params = query.getParams();
+                    // otherwise set filter params
+                    this.table.query.setParam('$filter', params.$filter);
+                }
+                else {
+                    this.table.query.setParam('$filter', null);
+                }
+            }
+            // and finally fetch data
+            this.table.fetch(true);
+        });
+    }
+    ngOnDestroy() {
+        if (this.queryParamSubscription) {
+            this.queryParamSubscription.unsubscribe();
+        }
+        if (this.configChangesSubscription) {
+            this.configChangesSubscription.unsubscribe();
+        }
+    }
+    ngAfterViewInit() {
+    }
+    onSearchKeyDown(event) {
+        if (this.table && event.keyCode === 13) {
+            // get search text
+            const searchText = event.target.value;
+            // merge query params ?
+            if (this.mergeQueryParams) {
+                const queryParams = {
+                    q: searchText
+                };
+                if (this.table.config && this.table.config.criteria) {
+                    this.table.config.criteria.forEach((item) => {
+                        Object.defineProperty(queryParams, item.name, {
+                            configurable: true,
+                            enumerable: true,
+                            writable: true,
+                            value: null
+                        });
+                    });
+                }
+                // try to apply filter by appending query params
+                return this._router.navigate([], {
+                    relativeTo: this._activatedRoute,
+                    queryParams: queryParams,
+                    queryParamsHandling: 'merge'
+                });
+            }
+            // otherwise do search
+            this.table.search(searchText);
+            return false;
+        }
+    }
+    transformDate(date) {
+        date = this.datePipe.transform(date, 'MM/dd/yyyy'); // whatever format you need.
+        return date;
+    }
+    convertToString(nameFilter) {
+        let name = '';
+        if (nameFilter != null) {
+            name = nameFilter.toString();
+        }
+        return name;
+    }
+    //  Load saved criteria searches user has stored before
+    loadUserSearchList() {
+        this.storageKey = 'tables/' + this.table.config.model + '/searches';
+        return this._userStorage.getItem(this.storageKey).then((data) => {
+            const list = data.value || [];
+            // if table configuration has pre-defined searches
+            if (this.table && this.table.config.searches && this.table.config.searches.length) {
+                // add pre-defined lists
+                list.push.apply(list, this.table.config.searches.map(x => {
+                    x.readOnly = true; // as readonly
+                    x.name = this._translate.instant(x.name);
+                    return x;
+                }));
+            }
+            // set user search list
+            this.userSearchList = list;
+            return Promise.resolve();
+        }).catch((err) => {
+            // DO NOT THROW ERROR
+            // todo: notify component for this error in order to disable some actions
+            console.error('An error occurred while getting user search list');
+            console.error(err);
+            return Promise.resolve();
+        });
+    }
+    onSelectUserSearch(event) {
+        if (this.selectedList) {
+            const listFound = this.searchInListByName(this.selectedList.name);
+            if (listFound) {
+                if (this.mergeQueryParams) {
+                    const queryParams = { q: null, s: this.selectedList.name };
+                    // clear criteria if any
+                    this.table.config.criteria.forEach((item) => {
+                        if (Object.prototype.hasOwnProperty.call(queryParams, item.name) === false) {
+                            // set null value
+                            Object.defineProperty(queryParams, item.name, {
+                                configurable: true,
+                                enumerable: true,
+                                writable: true,
+                                value: null
+                            });
+                        }
+                    });
+                    return this._router.navigate([], {
+                        relativeTo: this._activatedRoute,
+                        queryParams: queryParams,
+                        queryParamsHandling: 'merge'
+                    });
+                }
+                this.selectedList = listFound;
+                this.filter = this.selectedList.filter;
+                this.filterChange.emit(this.filter);
+                return true;
+            }
+        }
+        else {
+            return this._router.navigate([], {
+                relativeTo: this._activatedRoute,
+                queryParams: { s: null },
+                queryParamsHandling: 'merge'
+            });
+        }
+        return false;
+    }
+    searchInListByName(name) {
+        if (Array.isArray(this.userSearchList)) {
+            const listFound = this.userSearchList.find(x => x.name === name);
+            if (listFound) {
+                return listFound;
+            }
+            else {
+                return false;
+            }
+        }
+    }
+    //  Update list item contents with given content (Search by object name property)
+    updateSavedSearchListItemByName(name, newItem) {
+        const itemInList = this.userSearchList.find(x => x.name === name);
+        const index = this.userSearchList.indexOf(itemInList);
+        this.userSearchList[index] = newItem;
+        this.selectedList = this.userSearchList[index];
+    }
+    //  Update list item contents with given content (Search by object)
+    updateSavedSearchListItemByObject(itemInList, newItem) {
+        const index = this.userSearchList.indexOf(itemInList);
+        this.userSearchList[index] = newItem;
+        this.selectedList = this.userSearchList[index];
+    }
+    //  Delete list item from list
+    deleteItemFromSavedSearchListByObject(itemInList) {
+        this.userSearchList = this.userSearchList.filter(item => item !== itemInList);
+        this.selectedList = null;
+        this.filter = {};
+        this.advancedSearch(true);
+        this.uploadListOnUserStorage();
+    }
+    //  User chose to save its advanced form search criteria
+    saveSearch(templateToLoad, newList = true) {
+        if (this.table.config.model) {
+            //      Set the corresponding key to its list and show a confirmation modal window
+            this.storageKey = `tables/${this.table.config.model}/searches`;
+            if (this.filter && Object.keys(this.filter).length) {
+                //      User wants to save an existing list from the dropdown
+                if (!newList && this.selectedList) {
+                    const newItem = { 'name': this.selectedList.name, 'filter': Object.assign({}, this.filter) };
+                    this.updateSavedSearchListItemByObject(this.selectedList, newItem);
+                    this.uploadListOnUserStorage();
+                    //      User wants to save a new list
+                }
+                else {
+                    this.modalRef = this._modalService.show(templateToLoad);
+                }
+            }
+            else {
+                //        User did not define any criteria
+                this._modal.showWarningDialog(this._translate.instant('AdvancedSearch.Modal.Title'), this._translate.instant('AdvancedSearch.Modal.EmptyCriteriaList'), DIALOG_BUTTONS.Ok);
+            }
+        }
+        else {
+            this._modal.showWarningDialog(this._translate.instant('AdvancedSearch.Modal.Title'), this._translate.instant('AdvancedSearch.Modal.NoListDefined'), DIALOG_BUTTONS.Ok);
+        }
+    }
+    //  User Accepted => Save list and Close modal
+    confirmModal(saveFormName) {
+        //    name given and list name is unique
+        if (saveFormName && !(this.searchInListByName(saveFormName))) {
+            const newInsertedValue = { 'name': saveFormName, 'filter': Object.assign({}, this.filter) };
+            if (this.userSearchList && this.userSearchList.length !== 0) {
+                this.userSearchList.push(newInsertedValue);
+                this.storageValue = this.userSearchList;
+                this.selectedList = newInsertedValue;
+            }
+            else {
+                this.storageValue = [newInsertedValue];
+                this.userSearchList = this.storageValue;
+                this.selectedList = newInsertedValue;
+            }
+            this.uploadListOnUserStorage();
+            this.modalRef.hide();
+        }
+        else if (saveFormName && (this.searchInListByName(saveFormName))) {
+            //      User should insert a different name cause this one is already in use
+            alert(this._translate.instant('AdvancedSearch.Modal.TitleOnListAlreadyCreated'));
+        }
+        else {
+            //      User did not insert any text
+            alert(this._translate.instant('AdvancedSearch.Modal.TitleOnUserError'));
+        }
+    }
+    //  User declined => Close modal
+    closeModal() {
+        this.modalRef.hide();
+    }
+    //  Upload user's criteria on User Storage
+    uploadListOnUserStorage() {
+        this._userStorage.setItem(this.storageKey, this.userSearchList.filter(x => {
+            return !x.readOnly;
+        }));
+    }
+    /**
+     * @deprecated This method is going to be deprecated. Use search() method instead.
+     * @param {*} event
+     */
+    asyncAdvancedSearch(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.table && this.table.config && Array.isArray(this.table.config.criteria)) {
+                const query = yield this.getQuery();
+                if (this.mergeQueryParams) {
+                    this.selectedList = null;
+                    const queryParams = Object.assign({ q: null, s: null }, this.filter);
+                    // enumerate criteria
+                    this.table.config.criteria.forEach((item) => {
+                        if (Object.prototype.hasOwnProperty.call(queryParams, item.name) === false) {
+                            // set null value
+                            Object.defineProperty(queryParams, item.name, {
+                                configurable: true,
+                                enumerable: true,
+                                writable: true,
+                                value: null
+                            });
+                        }
+                    });
+                    return this._router.navigate([], {
+                        relativeTo: this._activatedRoute,
+                        queryParams: queryParams,
+                        queryParamsHandling: 'merge'
+                    });
+                }
+                if (this.table.query) {
+                    this.table.query.setParam('$filter', query.getParams()['$filter']);
+                }
+                else {
+                    this.table.query = query;
+                }
+                this.table.fetch();
+            }
+        });
+    }
+    search() {
+        return this.asyncAdvancedSearch().then(() => {
+            // do nothing
+        });
+    }
+    getQuery() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // on simple search return null
+            if (this.collapsed) {
+                return null;
+            }
+            if (this.table && this.table.config && Array.isArray(this.table.config.criteria)) {
+                const expressions = [];
+                const values = yield this._advancedSearchValueProvider.getValues();
+                this.table.config.criteria.forEach((x) => {
+                    if (Object.prototype.hasOwnProperty.call(this.filter, x.name)) {
+                        const nameFilter = this.convertToString(this.filter[x.name]);
+                        if (nameFilter.includes('GMT')) {
+                            const newDate = this.transformDate(this.filter[x.name]);
+                            expressions.push(this._template.transform(x.filter, {
+                                value: newDate
+                            }));
+                        }
+                        else if (this.filter[x.name] !== 'undefined') {
+                            expressions.push(this._template.transform(x.filter, Object.assign({
+                                value: this.filter[x.name]
+                            }, values)));
+                        }
+                    }
+                });
+                let query;
+                if (expressions || expressions.length) {
+                    // create client query
+                    query = this._context.model(this.table.config.model).asQueryable();
+                    query.setParam('filter', expressions.join(' and '));
+                }
+                else {
+                    query = this._context.model(this.table.config.model).asQueryable();
+                }
+                return query;
+            }
+        });
+    }
+    advancedSearch(event) {
+        return this.asyncAdvancedSearch(event);
+    }
+    clear() {
+        if (this.mergeQueryParams) {
+            this.selectedList = null;
+            const queryParams = { q: null, s: null };
+            // enumerate criteria
+            this.table.config.criteria.forEach((item) => {
+                if (Object.prototype.hasOwnProperty.call(queryParams, item.name) === false) {
+                    // set null value
+                    Object.defineProperty(queryParams, item.name, {
+                        configurable: true,
+                        enumerable: true,
+                        writable: true,
+                        value: null
+                    });
+                }
+            });
+            return this._router.navigate([], {
+                relativeTo: this._activatedRoute,
+                queryParams: queryParams,
+                queryParamsHandling: 'merge'
+            });
+        }
+        else {
+            // clear filter
+            this.filter = {};
+            // clear list
+            this.selectedList = null;
+            // raise filter change event
+            this.filterChange.emit(this.filter);
+        }
+    }
+    /**
+     * Gets the view state of search control
+     */
+    get viewState() {
+        return {
+            advancedView: !this.collapsed
+        };
+    }
+    /**
+     * Switches view between simple and advanced search
+     */
+    toggleView() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.collapsed = !this.collapsed;
+            // emit event for view status change
+            this.viewChange.emit(this.viewState);
+        });
+    }
+}
+AdvancedTableSearchComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-advanced-table-search',
+                template: "<div class=\"s--list-navbar d-none d-sm-block\">\n\n  <div id=\"collapse-header\" [ngClass]=\"{'show':collapsed}\" class=\"collapse multi-collapse\">\n    <form class=\"form-inline p-3 col\">\n      <div class=\"form-group col-7\" [ngClass]= \"{ 'col-12': !showMore }\">\n        <label class=\"pr-3\" for=\"searchText\" [translate]=\"'Tables.Search'\"></label>\n        <input (keydown)=\"onSearchKeyDown($event)\" spellcheck=\"false\" type=\"text\" id=\"searchText\" name=\"searchText\"\n          class=\"form-control col text-left\" placeholder=\"{{ 'Tables.SearchPlaceholder' | translate }}\" #searchText>\n      </div>\n      <div *ngIf=\"showMore\" class=\"col-5 text-right text-secondary\" id=\"heading3\">\n        <button class=\"d-inline-block btn btn-link collapsed float-right text-secondary text-decoration-none\"\n          type=\"button\"  (click)=\"toggleView();\">\n          <span class=\"d-none d-sm-inline\" [translate]=\"'AdvancedSearch.More'\"></span>\n          <i class=\"ml-2 pt-1 fa fa-chevron-down\"></i>\n        </button>\n      </div>\n    </form>\n  </div>\n\n  <div id=\"collapse3\" [ngClass]=\"{'show':!collapsed}\"  class=\"collapse multi-collapse\" aria-labelledby=\"heading3\">\n    <div class=\"row\">\n      <div class=\"col-sm-12\">\n        <div id=\"advanced-form\">\n          <ng-content select=\"advanced-search\"></ng-content>\n          <hr class=\"mt-0 mb-0\" width=\"97%\">\n          <div class=\"row\">\n            <div class=\"col-sm-12\">\n              <div class=\"form-inline pb-3 pt-3 pr-1 pl-1 col\">\n\n                <div class=\"form-group col-4\">\n                  <div class=\"d-flex flex-row w-100\" *ngIf=\"allowSave\">\n                    <label class=\"pr-3 d-none\" [translate]=\"'AdvancedSearch.SavedSearches'\"></label>\n                    <select *ngIf=\"userSearchList\" class=\"custom-select text-secondary flex col-12\" (change)=\"onSelectUserSearch($event)\" [(ngModel)]=\"selectedList\">\n                      <option [ngValue]=\"null\" [translate]=\"'AdvancedSearch.Choose'\"></option>\n                      <option  *ngFor=\"let item of userSearchList\" [ngValue]=\"item\">{{ item.name }}</option>\n                    </select>\n                    <select *ngIf=\"!userSearchList\" class=\"custom-select flex col-6\">\n                      <option [value]=\"null\" [translate]=\"'AdvancedSearch.Choose'\"></option>\n                    </select>\n                  </div>\n                </div>\n\n                <div class=\"col-3 d-flex flex-row w-100\">\n                  <div class=\"btn-group\" *ngIf=\"allowSave\" dropdown>\n                    <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"saveSearch(templateToUse, ( (selectedList && selectedList.readOnly) ? true : false ) )\" [translate]=\"'AdvancedSearch.SaveCurrentSearch'\"></button>\n                    <button type=\"button\" dropdownToggle class=\"btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                      <span class=\"sr-only\" [translate]=\"'AdvancedSearch.ToggleDropdown'\"></span>\n                    </button>\n\n                    <div class=\"dropdown-menu\" *dropdownMenu>\n                      <a [ngClass]=\"{'disabled': selectedList && selectedList.readOnly}\" class=\"dropdown-item\" (click)=\"saveSearch(templateToUse, false)\" [translate]=\"'AdvancedSearch.Save'\" href=\"javascript:void(0)\"></a>\n                      <a class=\"dropdown-item\" (click)=\"saveSearch(templateToUse)\" [translate]=\"'AdvancedSearch.SaveAs'\" href=\"javascript:void(0)\"></a>\n                      <div  class=\"dropdown-divider\"></div>\n                      <a [ngClass]=\"{'disabled': selectedList && selectedList.readOnly}\" class=\"dropdown-item\" (click)=\"deleteItemFromSavedSearchListByObject(selectedList)\" [translate]=\"'AdvancedSearch.Delete'\" href=\"javascript:void(0)\"></a>\n                    </div>\n                  </div>\n                </div>\n\n                <div class=\"col-5 text-right text-secondary\">\n                  <button type=\"button\" class=\"btn btn-light text-secondary pl-2 pr-2 mr-2\" (click)=\"clear()\">\n                    <i class=\"fa fa-eraser\"></i>\n                  </button>\n                  <button type=\"button\" class=\"btn btn-success pl-4 pr-4 mr-2\" (click)=\"advancedSearch($event);\"\n                    [translate]=\"'Tables.Search'\"></button>\n                  <button class=\"d-inline-block btn btn-link collapsed float-right text-secondary text-decoration-none\"\n                          type=\"button\" (click)=\"toggleView();\">\n                    <span class=\"d-none d-sm-inline\" [translate]=\"'AdvancedSearch.Less'\"></span>\n                    <i class=\"ml-2 pt-1 fa fa-chevron-up\"></i>\n                  </button>\n                </div>\n\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-template #templateToUse>\n    <div class=\"modal-header\">\n      <h4 class=\"modal-title pull-left\" [translate]=\"'AdvancedSearch.Modal.Title'\"></h4>\n      <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"modalRef.hide()\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    </div>\n    <div class=\"modal-body mt-0 mb-0 text-center\">\n      <div>\n        <p class=\"text-secondary text-left\" [translate]=\"'AdvancedSearch.Modal.Help'\"></p>\n      </div>\n      <form class=\"p-3 text-center\" #newListForm=\"ngForm\" >\n        <div [ngVar]=\"{ name: ( selectedList?.name ? ( selectedList?.name + ' (1)'  ) : null ) }\" #model=\"ngVar\">\n          <input [(ngModel)]=\"model.value.name\" [required]=\"true\"  id=\"newListName\" name=\"newListName\" type=\"text\" class=\"form-control\" placeholder=\"{{ 'AdvancedSearch.Modal.SaveNamePlaceholder' | translate }}\"/>\n          <div class=\"btn-group mt-4\">\n            <button [disabled]=\"newListForm.invalid\" type=\"button\" class=\"btn btn-primary\" (click)=\"confirmModal(model.value.name)\" [translate]=\"'AdvancedSearch.Modal.Accept'\"></button>\n            <button type=\"button\" class=\"btn btn-gray-300 text-white\" (click)=\"closeModal()\" [translate]=\"'AdvancedSearch.Modal.Close'\"></button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </ng-template>\n\n</div>\n",
+                encapsulation: ViewEncapsulation.None
+            }] }
+];
+/** @nocollapse */
+AdvancedTableSearchComponent.ctorParameters = () => [
+    { type: AngularDataContext },
+    { type: ActivatedRoute },
+    { type: DatePipe },
+    { type: BsModalService },
+    { type: UserStorageService },
+    { type: TranslateService },
+    { type: AdvancedFilterValueProvider },
+    { type: TemplatePipe },
+    { type: Router },
+    { type: ModalService }
+];
+AdvancedTableSearchComponent.propDecorators = {
+    table: [{ type: Input }],
+    collapsed: [{ type: Input }],
+    allowSave: [{ type: Input }],
+    showMore: [{ type: Input }],
+    mergeQueryParams: [{ type: Input }],
+    searchText: [{ type: ViewChild, args: ['searchText',] }],
+    viewChange: [{ type: Output, args: ['viewChange',] }]
+};
+
+const FORMATTERS = {
+    ActionLinkFormatter: new ActionLinkFormatter(),
+    ButtonFormatter: new ButtonFormatter(),
+    DateTimeFormatter: new DateTimeFormatter(),
+    LanguageFormatter: new LanguageFormatter(),
+    LinkFormatter: new LinkFormatter(),
+    NestedPropertyFormatter: new NestedPropertyFormatter(),
+    NgClassFormatter: new NgClassFormatter(),
+    SelectRowFormatter: new SelectRowFormatter(),
+    TemplateFormatter: new TemplateFormatter(),
+    TranslationFormatter: new TranslationFormatter(),
+    TrueFalseFormatter: new TrueFalseFormatter()
+};
+
+// important: export this const due to AOT compilation errors
+// see more https://angular.io/guide/aot-metadata-errors#only-initialized-variables
+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" dropdown>
+            <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" *dropdownMenu>
+              <a class="dropdown-item" *ngFor="let filter of defaultFilters" (click)="advancedSearch(filter.filter ? filter : '')">
+                {{ filter.name | translate }}
+              </a>
+            </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" dropdown>
+          <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" *dropdownMenu>
+            <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.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();
+    }
+    ngOnDestroy() {
+        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)) {
+            console.warn('No table configuration available', this.tableConfig);
+            return [];
+        }
+        const matchedCriterion = tableConfig.criteria.find(criterion => Object.prototype.hasOwnProperty.call(searchItem.filter, criterion.name));
+        if (!matchedCriterion) {
+            return [];
+        }
+        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: matchedCriterion.filter
+            }, defaultFilterValues)));
+        }
+        else {
+            applicableFilter = '';
+        }
+        return [applicableFilter];
+    }
+    /**
+     *
+     * 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();
+        });
+    }
+}
+AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER = {
+    name: 'Tables.All',
+    filter: null
+};
+AdvancedTableModalBaseComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-advanced-table-modal',
+                template: AdvancedTableModalBaseTemplate,
+                styles: [`
+
+    `]
+            }] }
+];
+/** @nocollapse */
+AdvancedTableModalBaseComponent.ctorParameters = () => [
+    { type: Router },
+    { type: ActivatedRoute },
+    { type: AngularDataContext },
+    { type: AdvancedFilterValueProvider },
+    { type: DatePipe }
+];
+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 {
+    constructor(router, activatedRoute, context, advancedFilterValueProvider, datePipe, _modalRef) {
+        super(router, activatedRoute, context, advancedFilterValueProvider, datePipe);
+        this._modalRef = _modalRef;
+        this.dismiss = new EventEmitter();
+    }
+    ok() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._modalRef.hide();
+            this.dismiss.emit('ok');
+        });
+    }
+    cancel() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._modalRef.hide();
+            this.dismiss.emit('cancel');
+        });
+    }
+}
+AdvancedSelectComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-advanced-select',
+                template: "<div class=\"modal-header\" *ngIf=\"modalTitle\">\n  <h5 class=\"modal-title\">{{modalTitle | translate}}</h5>\n  <button [disabled]=\"cancelButtonDisabled\" (click)=\"cancel()\" type=\"button\" class=\"close\" data-dismiss=\"modal\"\n    aria-label=\"Cancel\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n    <div>\n      <!-- search -->\n      <div class=\"row mt-3\">\n        <div class=\"col-12 col-lg-3\">\n          <div class=\"input-group mb-3\">\n            <input spellcheck=\"false\" type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"searchText\"\n              class=\"form-control bg-gray-100 border-0\" placeholder=\"{{'Tables.SearchPlaceholder' | translate}}\"\n              aria-label=\"Search\" aria-describedby=\"basic-addon2\">\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-default bg-gray-100 border-0\" type=\"button\">\n                <i class=\"fa fa-search text-secondary\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n        <div #emptyTable class=\"d-none\">\n          <div>\n            <div class=\"mt-4\">\n              <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n            </div>\n            <div class=\"mt-4\">\n              <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n              <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n            </div>\n\n          </div>\n        </div>\n        <div class=\"col-12 col-lg-5\">\n          <div class=\"btn-toolbar\">\n            <button class=\"btn btn-gray-100\">\n              <i class=\"fa fa-sliders-h pr-2 text-secondary\" aria-hidden=\"true\"></i>{{'Tables.Filters' | translate}}\n            </button>\n            <div class=\"dropdown ml-3\" dropdown>\n              <button dropdownToggle class=\"btn btn-gray-100 dropdown-toggle\" type=\"button\" id=\"dropdownDefaultFilters\"\n                data-toggle=\"dropdown\">\n                {{ this.defaultFilter.name | translate }}\n              </button>\n              <div class=\"dropdown-menu\" aria-labelledby=\"dropdownDefaultFilters\" *dropdownMenu>\n                <a class=\"dropdown-item\" *ngFor=\"let filter of defaultFilters\"\n                  (click)=\"advancedSearch(filter.filter ? filter : '')\">\n                  {{ filter.name | translate }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"col text-lg-right mt-3 mt-lg-0\">\n          <button [disabled]=\"true\" class=\"btn rounded-pill btn-outline-theme\">\n            <span class=\"pr-2 font-lg\">+</span><span [translate]=\"'Tables.AddItem'\"></span>\n          </button>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12\" [ngClass]=\"{ 'component-loading': loading}\">\n          <app-advanced-table #advancedTable (init)=\"onTableInit($event)\" (load)=\"onDataLoad($event)\"\n            [selectable]=\"true\" [multipleSelect]=\"true\" [scrollX]=\"false\" [scrollY]=\"320\" [pageLength]=\"pageLength\"\n            [scrollable]=\"false\" [showFooter]=\"false\" [showActions]=\"false\" [lengthMenu]=\"lengthMenu\"\n            [config]=\"tableConfig\" [configSrc]=\"tableConfigSrc\"></app-advanced-table>\n        </div>\n      </div>\n      <div class=\"row mt-3 table-custom-pager\">\n        <div class=\"col-12 d-flex\" *ngIf=\"recordsTotal\">\n          <div class=\"mt-2 ml-auto mr-3 text-secondary\" [translate]=\"'Tables.RecordsPerPage'\"></div>\n          <div class=\"dropdown mr-3\" dropdown>\n            <button dropdownToggle class=\"btn btn-gray-100 dropdown-toggle\" type=\"button\" id=\"dropdownPageSize\"\n              data-toggle=\"dropdown\">\n              {{pageLength}}\n            </button>\n            <div class=\"dropdown-menu\" aria-labelledby=\"dropdownPageSize\" *dropdownMenu>\n              <button (click)=\"setLength(item)\" class=\"dropdown-item dropdown-item-theme\" type=\"button\"\n                *ngFor=\"let item of lengthMenu\">{{item}}</button>\n            </div>\n          </div>\n          <div class=\"mt-2 mr-2\" [translate]=\"'Tables.PageInfo'\" [translateParams]=\"pageInfo\"></div>\n          <button [disabled]=\"pageInfo && pageInfo.page === 0\" class=\"btn text-nowrap\" (click)=\"firstPage()\">\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===0\" class=\"btn\" (click)=\"previousPage()\">\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn\" (click)=\"nextPage()\">\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn text-nowrap\"\n            (click)=\"lastPage()\">\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n</div>\n<div class=\"modal-footer justify-content-end\">\n  <button [disabled]=\"okButtonDisabled\" (click)=\"ok()\" type=\"button\" [ngClass]=\"okButtonClass\">\n    {{okButtonText | translate}}\n  </button>\n  <button [disabled]=\"cancelButtonDisabled\" (click)=\"cancel()\" type=\"button\" [ngClass]=\"cancelButtonClass\"\n    data-dismiss=\"modal\">\n    {{ cancelButtonText | translate}}\n  </button>\n</div>\n",
+                encapsulation: ViewEncapsulation.None,
+                styles: [`
+    .modal-table .dataTables_wrapper {
+      height: 50vh;
+      overflow-y: auto;
+    }
+    `]
+            }] }
+];
+/** @nocollapse */
+AdvancedSelectComponent.ctorParameters = () => [
+    { type: Router },
+    { type: ActivatedRoute },
+    { type: AngularDataContext },
+    { type: AdvancedFilterValueProvider },
+    { type: DatePipe },
+    { type: BsModalRef }
+];
+
+class AdvancedSelectService {
+    constructor(_modal) {
+        this._modal = _modal;
+        //
+    }
+    select(initialState) {
+        return new Promise((resolve, reject) => {
+            try {
+                const modalRef = this._modal.openModalComponent(AdvancedSelectComponent, {
+                    class: 'modal-xl modal-table',
+                    ignoreBackdropClick: true,
+                    animated: true,
+                    initialState: initialState
+                });
+                const componentRef = modalRef.content;
+                componentRef.dismiss.subscribe((result) => {
+                    return resolve({
+                        result: result,
+                        items: componentRef.advancedTable.selected
+                    });
+                });
+            }
+            catch (err) {
+                return reject(err);
+            }
+        });
+    }
+}
+AdvancedSelectService.decorators = [
+    { type: Injectable }
+];
+/** @nocollapse */
+AdvancedSelectService.ctorParameters = () => [
+    { type: ModalService }
+];
+
+class ActivatedTableService {
+    constructor(_router, _activatedRoute) {
+        this._router = _router;
+        this._activatedRoute = _activatedRoute;
+        _router.events.forEach((event) => {
+            if (event instanceof NavigationStart) {
+                if (this._activeTable) {
+                    this._activeTable = null;
+                }
+            }
+        });
+    }
+    get activeTable() {
+        return this._activeTable;
+    }
+    set activeTable(tableComponent) {
+        this._activeTable = tableComponent;
+    }
+}
+ActivatedTableService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+/** @nocollapse */
+ActivatedTableService.ctorParameters = () => [
+    { type: Router },
+    { type: ActivatedRoute }
+];
+ActivatedTableService.ngInjectableDef = defineInjectable({ factory: function ActivatedTableService_Factory() { return new ActivatedTableService(inject(Router), inject(ActivatedRoute)); }, token: ActivatedTableService, providedIn: "root" });
+
+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
+     */
+    constructURL(query) {
+        const baseURL = query.getService().getBase();
+        let url = baseURL.endsWith('/') ? (baseURL + query.getModel() + '?') : (baseURL + '/' + query.getModel() + '?');
+        Object.keys(query.getParams()).forEach((key, index) => {
+            if (index === 0) {
+                url += key + '=' + query.getParams()[key];
+            }
+            else {
+                url += '&' + key + '=' + query.getParams()[key];
+            }
+        });
+        return url;
+    }
+    /**
+     * Constructs the query by setting the parameters of the
+     * advanced table's active filters, sets the necessary headers
+     * and build the select parameter of the query
+     * @param {ClientDataQueryable} query
+     * @param params: The filters of the last query of the activated table
+     * @param tableConfig: The configuration of the activated table
+     * @param {Headers} headers: The headers to append to the query
+     * @return ClientDataQueryable
+     */
+    constructQuery(query, params, tableConfig, headers) {
+        let _query = this.setParams(query, params);
+        _query = this.setHeaders(_query, headers);
+        _query = this.constructQueryParam(_query, tableConfig);
+        return _query;
+    }
+    /**
+     * Fetches and saves the xlsx file
+     * @param {String} url
+     * @param {Headers} serviceHeaders: The headers to append to the query
+     * @param modelName: The model name of the advanced table
+     */
+    downloadFile(url, serviceHeaders, modelName) {
+        this._loadingService.showLoading();
+        fetch(encodeURI(url), {
+            headers: serviceHeaders,
+            credentials: 'include'
+        }).then(response => {
+            if (response && !response.ok) {
+                throw new ResponseError(response.statusText, response.status);
+            }
+            return response.blob();
+        }).then(blob => {
+            const objectUrl = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            document.body.appendChild(a);
+            a.setAttribute('style', 'display: none');
+            a.href = objectUrl;
+            const downloadName = `${modelName}.xlsx`;
+            a.download = downloadName;
+            // this adds support for IE and MS Edge (up to version 44.19041)
+            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+                window.navigator.msSaveOrOpenBlob(blob, downloadName);
+            }
+            else {
+                // for all other browsers
+                a.click();
+            }
+            window.URL.revokeObjectURL(objectUrl);
+            a.remove();
+            this._loadingService.hideLoading();
+        }).catch(err => {
+            this._loadingService.hideLoading();
+            this._errorService.showError(err, {
+                continueLink: '.'
+            });
+        });
+    }
+}
+BtnExpDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '.universis-btn-export'
+            },] }
+];
+/** @nocollapse */
+BtnExpDirective.ctorParameters = () => [
+    { type: ActivatedTableService },
+    { type: AngularDataContext },
+    { type: ConfigurationService },
+    { type: TranslateService },
+    { type: LoadingService },
+    { type: ErrorService }
+];
+BtnExpDirective.propDecorators = {
+    clickEvent: [{ type: HostListener, args: ['click', ['$event'],] }]
+};
+
+class AdvancedTableSettingsComponent {
+    constructor(_context, _activatedRoute, elRef, modalService, userStorage, formBuilder, _activatedTable) {
+        this._context = _context;
+        this._activatedRoute = _activatedRoute;
+        this.elRef = elRef;
+        this.modalService = modalService;
+        this.userStorage = userStorage;
+        this.formBuilder = formBuilder;
+        this._activatedTable = _activatedTable;
+        this.params = this._activatedRoute.params;
+        this.columns = [];
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        this.activeTableConfig = this._activatedTable.activeTable.getConfig();
+        this.storageKey = 'registrar/settings/' + this.activeTableConfig.title + '/table/columns';
+        this.form = this.formBuilder.group({ columns: new FormArray([], this.minSelectedColumns(1)) });
+        this.userStorage.getItem(this.storageKey).then((data) => {
+            if (data) {
+                this.savedTableSettings = data.value;
+                if (this.savedTableSettings) {
+                    if (this._activatedTable.activeTable) {
+                        this._activatedTable.activeTable.handleColumns(this.savedTableSettings);
+                    }
+                }
+                this.addCheckboxes();
+            }
+        });
+    }
+    addCheckboxes() {
+        this.tableColumns = this.activeTableConfig.columns.slice(1);
+        this.tableColumns.forEach((column, i) => {
+            if (!column.hidden) {
+                const control = {
+                    id: column.name,
+                    name: column.title
+                };
+                this.columns.push(control);
+            }
+        });
+        if (this.savedTableSettings) {
+            this.columns.forEach((column, i) => {
+                column.check = false;
+                column.check = this.savedTableSettings.includes(column.id);
+            });
+            this.columns.map((column, i) => {
+                const control = new FormControl(column.check);
+                this.form.controls.columns.push(control);
+            });
+        }
+    }
+    openTableSettings(table_settings_modal) {
+        this.modalRef = this.modalService.show(table_settings_modal);
+    }
+    saveTableSettings() {
+        const selectedColumnsIds = this.form.value.columns
+            .map((v, i) => v ? this.columns[i].id : null)
+            .filter(v => v !== null);
+        this.userStorage.setItem(this.storageKey, selectedColumnsIds);
+        if (this._activatedTable.activeTable) {
+            this._activatedTable.activeTable.handleColumns(selectedColumnsIds);
+        }
+        this.modalRef.hide();
+    }
+    dismiss() {
+        this.modalRef.hide();
+    }
+    minSelectedColumns(min = 1) {
+        const validator = (formArray) => {
+            const totalSelected = formArray.controls
+                .map(control => control.value)
+                .reduce((prev, next) => next ? prev + next : prev, 0);
+            return totalSelected >= min ? null : { required: true };
+        };
+        return validator;
+    }
+}
+AdvancedTableSettingsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-advanced-table-settings',
+                template: "<i class=\"fa fa-edit fa-lg advanced-table-settings\" (click)=\"openTableSettings(modal_settings_template)\"></i>\r\n<ng-template #modal_settings_template>\r\n      <div class=\"modal-header\">\r\n        <h3 class=\"modal-title\" [translate]=\"'Tables.ColumnDisplay'\"></h3>\r\n        <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"dismiss()\">\r\n          <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n      </div>\r\n\r\n      <form class=\"form-group p-3 text-left\" [formGroup]=\"form\" (ngSubmit)=\"saveTableSettings()\">\r\n        <div class=\"modal-body\">\r\n          <p [translate]=\"'Tables.ColumnDisplayInfo'\"></p>\r\n            <!-- <div *ngFor=\"let column of form.controls.columns.controls; let i = index\">\r\n              <div formArrayName=\"columns\">\r\n                <input class=\"checkbox checkbox-primary\" type=\"checkbox\" [formControlName]=\"i\" id=\"checkbox{{i}}\">\r\n                <label for=\"checkbox{{i}}\">\r\n                  {{columns[i].name | translate}}\r\n                </label>\r\n              </div>\r\n            </div> -->\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n          <button type=\"button\" class=\"btn btn-light\" (click)=\"dismiss()\" [translate]=\"'Tables.Cancel'\"> </button>\r\n          <button type=\"submit\" class=\"btn btn-success\" [translate]=\"'Tables.Save'\"></button>\r\n        </div>\r\n      </form>\r\n</ng-template>\r\n",
+                encapsulation: ViewEncapsulation.None
+            }] }
+];
+/** @nocollapse */
+AdvancedTableSettingsComponent.ctorParameters = () => [
+    { type: AngularDataContext },
+    { type: ActivatedRoute },
+    { type: ElementRef },
+    { type: BsModalService },
+    { type: UserStorageService },
+    { type: FormBuilder },
+    { type: ActivatedTableService }
+];
+AdvancedTableSettingsComponent.propDecorators = {
+    table: [{ type: Input }],
+    modal_settings_template: [{ type: ViewChild, args: ['modal_settings_template',] }]
+};
+
+const TABLES_EL = {
+    "Tables": {
+        "Export": "Εξαγωγή",
+        "More": "Περισσότερα",
+        "Search": "Αναζήτηση",
+        "SearchPlaceholder": "Αναζήτηση...",
+        "GroupBy": "Ομαδοποίηση ανά",
+        "DataTable": {
+            "paginate": {
+                "first": "Πρώτη σελίδα",
+                "last": "Τελεταία σελίδα",
+                "next": "Επόμενη",
+                "previous": "Προηγούμενη"
+            },
+            "info": "Εμφάνιση _START_ έως _END_ από _TOTAL_ εγγραφές",
+            "infoEmpty": "Δεν βρέθηκαν εγγραφές",
+            "loading": "Εμφάνιση δεδομένων...",
+            "processing": "Παραλαβή δεδομένων...",
+            "emptyTable": "Δεν βρέθηκαν αποτελέσματα."
+        },
+        "ColumnDisplay": "Επιλογή Εμφάνισης στηλών",
+        "ColumnDisplayInfo": "Επιλέξτε τις στήλες που θέλετε να εμφανίζονται.",
+        "Save": "Εφαρμογή",
+        "Apply": "Εφαρμογή",
+        "Cancel": "Ακύρωση",
+        "RecordsPerPage": "Εγγραφές ανά σελίδα",
+        "PageInfo": "{{start}}-{{end}} από {{recordsTotal}}",
+        "SearchListPlaceholder": "Αναζητήστε στη λίστα...",
+        "Filters": "Φίλτρα",
+        "All": "Όλα",
+        "AddItem": "Προσθήκη στοιχείου",
+        "EmptyTableTitle": "Δεν βρέθηκαν αποτελέσματα.",
+        "EmptyTableMessage": "Προσπαθήστε να χρησιμοποιήσετε άλλες λέξεις κλειδιά.",
+        "RemoveItem": "Διαγραφή στοιχείου",
+        "Items": "στοιχεία",
+        "Item": "στοιχείο",
+        "AddItemMessage": {
+            "title": "Προσθήκη στοιχείων",
+            "one": "Ένα νέο στοιχείο προστέθηκε με επιτυχία.",
+            "many": "{{value}} νέα στοιχεία προστέθηκαν με επιτυχία."
+        },
+        "RemoveItemMessage": {
+            "title": "Αφαίρεση στοιχείων",
+            "one": "Ένα στοιχείο αφαιρέθηκε με επιτυχία.",
+            "many": "{{value}} στοιχεία αφαιρέθηκαν με επιτυχία."
+        },
+        "RemoveItemsTitle": "Διαγραφή στοιχείου",
+        "RemoveItemsMessage": "Πρόκειται να διαγράψετε ένα ή περισσότερα στοιχεία. Θέλετε να προχωρήσετε?",
+        "SelectAll": "Επιλογή όλων",
+        "ClearSelection": "Αναίρεση επιλογής",
+        "Actions": {
+            "Label": "Επεξεργασία",
+            "Start": "Έναρξη",
+            "ActionMessage": {
+                "None": "Δεν έχετε επιλέξει κανένα στοιχείο που να ακολουθεί τις προϋποθέσεις της ενέργειας.",
+                "One": "Έχετε επιλέξει ένα στοιχείο που ακολουθεί τις προϋποθέσεις της ενέργειας. Πατήστε το πλήκτρο Έναρξη για να ξεκινήσει η διαδικασία.",
+                "Many": "Έχετε επιλέξει {{length}} στοιχεία που ακολουθούν τις προϋποθέσεις της ενέργειας. Πατήστε το πλήκτρο Έναρξη για να ξεκινήσει η διαδικασία."
+            },
+            "CompletedWithErrors": {
+                "Title": "Η διαδικασία ολοκληρώθηκε με σφάλματα.",
+                "Description": {
+                    "One": "Ένα στοιχείο δεν ανανεώθηκε λόγω ενός σφάλματος που συνέβη κατά την εκτέλεση της διαδικασίας.",
+                    "Many": "{{errors}} στοιχεία δεν ανανεώθηκαν λόγω ενός σφάλματος που συνέβη κατά την εκτέλεση της διαδικασίας."
+                }
+            },
+            "CompletedWithSuccess": {
+                "Title": "Η διαδικασία ολοκληρώθηκε με επιτυχία."
+            }
+        }
+    },
+    "TrueFalse": {
+        "long": {
+            "Yes": "Ναι",
+            "No": "Όχι"
+        }
+    },
+    "AdvancedSearch": {
+        "Choose": "<Επιλέξτε μια αναζήτηση>",
+        "ChooseDate": "Επιλογή ημερομηνίας",
+        "SavedSearches": "Αποθηκευμένες αναζητήσεις",
+        "ToggleDropdown": "Εμφάνιση λίστας",
+        "SaveCurrentSearch": "Αποθήκευση αναζήτησης",
+        "SaveAs": "Αποθήκευση ως",
+        "Save": "Αποθήκευση",
+        "Delete": "Διαγραφή",
+        "More": "Περισσότερα",
+        "Less": "Λιγότερα",
+        "Modal": {
+            "Title": "Αποθήκευση κριτηρίων αναζήτησης",
+            "Help": "Ορίστε έναν τίτλο για τα επιλεγμένα κριτήρια αναζήτησης. Αυτός ο τίτλος θα σας βοηθήσει να τα χρησιμοποιήσετε ξανά στο μέλλον.",
+            "TitleOnUserError": "Παρακαλώ εισάγετε έναν τίτλο",
+            "TitleOnListAlreadyCreated": "Το όνομα αυτό χρησιμοποιείται ήδη. Διαλέξτε ένα διαφορετικό.",
+            "NoListDefined": "Δεν έχει οριστεί το σημείο αποθήκευσης της λίστας",
+            "EmptyCriteriaList": "Δεν έχετε καθορίσει κανένα κριτήριο για αποθήκευση",
+            "SaveNameLabel": "Ονομασία λίστας",
+            "SaveNamePlaceholder": "Εισάγετε έναν τίτλο",
+            "Accept": "Αποθήκευση",
+            "Decline": "Απόρριψη",
+            "Close": "Κλείσιμο"
+        }
+    }
+};
+
+const TABLES_EN = {
+    "Tables": {
+        "Export": "Export",
+        "More": "More",
+        "Search": "Search",
+        "SearchPlaceholder": "Search...",
+        "GroupBy": "Group by",
+        "DataTable": {
+            "paginate": {
+                "first": "First",
+                "last": "Last",
+                "next": "Next",
+                "previous": "Previous"
+            },
+            "info": "Showing _START_ to _END_ of _TOTAL_ entries",
+            "infoEmpty": "Showing 0 to 0 of 0 entries",
+            "processing": "Processing data...",
+            "emptyTable": "There are no matching records."
+        },
+        "ColumnDisplay": "Column Display",
+        "ColumnDisplayInfo": "Επιλέξτε τις στήλες που θέλετε να εμφανίζονται.",
+        "Save": "Save",
+        "Apply": "Apply",
+        "Cancel": "Cancel",
+        "RecordsPerPage": "Items per page",
+        "PageInfo": "{{start}}-{{end}} of {{recordsTotal}}",
+        "SearchListPlaceHolder": "Search in list...",
+        "Filters": "Filters",
+        "All": "All",
+        "AddItem": "Add item",
+        "EmptyTableTitle": "There are no matching records.",
+        "EmptyTableMessage": "Please try to use other keywords or search parameters.",
+        "RemoveItem": "Remove item",
+        "Items": "items",
+        "Item": "item",
+        "AddItemMessage": {
+            "title": "Add item",
+            "one": "A new item has been added successfully.",
+            "many": "{{value}} new items have been added successfully."
+        },
+        "RemoveItemMessage": {
+            "title": "Remove items",
+            "one": "An item has been successfully removed.",
+            "many": "{{value}} items have been successfully removed."
+        },
+        "RemoveItemsTitle": "Remove items",
+        "RemoveItemsMessage": "You are going to remove one or more instructor courses. Do you want to proceed?",
+        "SelectAll": "Select all",
+        "ClearSelection": "Clear selection",
+        "Actions": {
+            "Label": "Edit",
+            "Start": "Start",
+            "ActionMessage": {
+                "None": "There is no selected item that meets action requirements.",
+                "One": "You have selected one item that meets action requirements.",
+                "Many": "You have selected {{length}} items that meet action requirements."
+            },
+            "CompletedWithErrors": {
+                "Title": "The operation was completed with errors.",
+                "Description": {
+                    "One": "One item has not been updated due to an error occurred while executing process.",
+                    "Many": "{{errors}} items have not been updated due to an error occurred while executing process."
+                }
+            },
+            "CompletedWithSuccess": {
+                "Title": "The operation was completed successfully."
+            }
+        }
+    },
+    "TrueFalse": {
+        "long": {
+            "Yes": "Yes",
+            "No": "No"
+        }
+    },
+    "AdvancedSearch": {
+        "Choose": "<Select a saved search>",
+        "ChooseDate": "Choose date",
+        "SavedSearches": "Saved searches",
+        "ToggleDropdown": "Toggle Dropdown",
+        "SaveCurrentSearch": "Save search",
+        "SaveAs": "Save as...",
+        "Save": "Save",
+        "Delete": "Remove",
+        "More": "More",
+        "Less": "Less",
+        "Modal": {
+            "Title": "Save current search criteria",
+            "Help": "Please add a title for the given search criteria. This title will help you to use those criteria again in the future.",
+            "TitleOnUserError": "Please use a valid name for your list",
+            "TitleOnListAlreadyCreated": "Name already in use. Please choose a different one",
+            "NoListDefined": "Cannot define user storage key.",
+            "EmptyCriteriaList": "Please define search criteria before save.",
+            "SaveNameLabel": "List name",
+            "SaveNamePlaceholder": "Type a title here...",
+            "Accept": "Save",
+            "Decline": "Decline",
+            "Close": "Close"
+        }
+    }
+};
+
+class SimpleHeaderToolsComponent {
+}
+SimpleHeaderToolsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'table-simple-header-tools',
+                template: `
+  <ng-content></ng-content>
+  `
+            }] }
+];
+class TableSimpleHeaderComponent {
+    constructor() { }
+    ngOnChanges(changes) {
+        if (changes.table) {
+            if (changes.table.currentValue == null) {
+                if (this.dataLoadSubscription) {
+                    this.dataLoadSubscription.unsubscribe();
+                    return;
+                }
+            }
+            if (changes.table.currentValue != changes.table.previousValue) {
+                this.dataLoadSubscription = changes.table.currentValue.load.subscribe((data) => {
+                    this.recordsTotal = data.recordsTotal;
+                });
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this.dataLoadSubscription) {
+            this.dataLoadSubscription.unsubscribe();
+        }
+    }
+    ngOnInit() {
+        //
+    }
+}
+TableSimpleHeaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-table-simple-header',
+                template: "<div class=\"row\">\n   <div class=\"col-auto mt-4\">\n     <div class=\"font-xl text-secondary\" *ngIf=\"recordsTotal === 0\">\n        <span>&nbsp;</span>\n      </div>\n      <div class=\"font-xl text-secondary\" *ngIf=\"recordsTotal > 1\">\n        <span>{{recordsTotal}}</span><span>&nbsp;</span><span [translate]=\"'Tables.Items'\"></span>\n      </div>\n      <div class=\"font-xl text-secondary\" *ngIf=\"recordsTotal === 1\">\n        <span>{{recordsTotal}}</span><span>&nbsp;</span><span [translate]=\"'Tables.Item'\"></span>\n      </div>\n    </div>\n    <div class=\"pull-right ml-auto mr-3 mt-3\">\n      <div class=\"font-lg btn-toolbar mt-2\">\n        <ng-content select=\"table-simple-header-tools\"></ng-content>\n      </div>\n    </div>\n</div>\n\n"
+            }] }
+];
+/** @nocollapse */
+TableSimpleHeaderComponent.ctorParameters = () => [];
+TableSimpleHeaderComponent.propDecorators = {
+    table: [{ type: Input }]
+};
+
+class AdvancedTableNotNullError extends Error {
+    constructor() {
+        super('Advanced table component cannot be empty at this context.');
+    }
+}
+class AdvancedTableEditorDirective {
+    constructor(table) {
+        this.table = table;
+        this.dirty = false;
+        this.dirtyChange = new EventEmitter(false);
+        //
+    }
+    /**
+     * 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 (let index = 0; index < addItems.length; index++) {
+            const element = addItems[index];
+            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 (let index = 0; index < removeItems.length; index++) {
+            const element = removeItems[index];
+            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: [{
+                selector: '[tableEditor]'
+            },] }
+];
+/** @nocollapse */
+AdvancedTableEditorDirective.ctorParameters = () => [
+    { type: AdvancedTableComponent }
+];
+AdvancedTableEditorDirective.propDecorators = {
+    dirtyChange: [{ type: Output }]
+};
+
+class AdvancedAggregatorService {
+    constructor(_context, _template) {
+        this._context = _context;
+        this._template = _template;
+    }
+    /**
+     *
+     * Formats and executes the data query
+     *
+     * @param {string} model The target model
+     * @param {object} fixedParams Pairs of parameters to always be applied
+     * @param {string} queryStatement The default query to use for fetching the data (e.g. expands etc)
+     * @param {Array<string>} filters A list of filter expressions to append at the query
+     * @param {string} searchTemplate The template to use for searching expressions
+     * @param {string} searchValue The value of the user search
+     *
+     * @returns {Promise<any>} The response of the query execution
+     */
+    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();
+        });
+    }
+    /**
+     *
+     * 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) => {
+                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);
+        }
+    }
+}
+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();
+            });
+            this.filters$.subscribe((filters) => __awaiter(this, void 0, void 0, function* () {
+                try {
+                    yield this.fetch(filters);
+                }
+                catch (err) {
+                    console.error(err);
+                }
+            }));
+        });
+    }
+    ngOnDestroy() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.selectedGroups$.unsubscribe();
+            this.filters$.unsubscribe();
+        });
+    }
+    /**
+     *
+     * 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();
+            }
+        });
+    }
+    /**
+     *
+     * 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;
+        });
+    }
+    /**
+     *
+     * 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 [class]=\"'fas text-indigo ml-2 ' + 'fa-' + action.icon\"></i>\n          </button>\n        </div>\n        <!-- The list of data -->\n        <div *ngFor=\"let column of config.columns; let i=index\" [class]=\"config.columns[i].length\" class=\"text-left\"\n          [ngClass]=\"{\n            'text-truncate': config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate,\n            'd-none': config.columns[i].hidden,\n            'd-md-block': !config.columns[i].hidden\n          }\"\n          [title]=\"config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate ? entry[column.name] : ''\">\n          <span class=\"text-secondary\"\n            *ngIf=\"!config.columns[i].hasOwnProperty('type') || (config.columns[i].hasOwnProperty('type') &&  config.columns[i].type === 'text')\"\n            [ngClass]=\"{\n              'font-xs': config.columns[i].variant !== 'primary',\n              'text-body': config.columns[i].variant === 'primary',\n              'text-success': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && entry[config.columns[i].condition],\n              'text-danger': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && !entry[config.columns[i].condition],\n              'font-lg': config.columns[i].variant === 'redGreen' && entry[column.name] && entry[column.name].length > 3,\n              'font-2xl': config.columns[i].variant === 'redGreen' && entry[column.name] && entry[column.name].length <= 3\n            }\">\n            {{entry[column.name] || '-'}}\n          </span>\n\n          <span *ngIf=\"config.columns[i].type === 'boolean'\">\n            <i class=\"fa font-lg\" [ngClass]=\"{\n                'fa-check text-success': entry[column.name].toString() === config.columns[i].trueValue,\n                'fa-times text-danger': entry[column.name].toString() !== config.columns[i].trueValue && config.columns[i].variant !== 'checkOrDash'\n              }\"></i>\n            <span\n              *ngIf=\"entry[column.name].toString() !== config.columns[i].trueValue && config.columns[i].variant === 'checkOrDash'\"\n              class=\"text-secondary font-xs\">-</span>\n          </span>\n        </div>\n      </div>\n      <ul *ngIf=\"entry && entry.subitems\">\n        <li *ngFor=\"let subitem of entry.subitems\" class=\"d-flex justify-content-center align-items-center list-color\">\n          <div class=\"text-left\"></div>\n          <div *ngFor=\"let column of config.columns; let i=index\" [class]=\"config.column[i].length\" class=\"text-left\"\n            [ngClass]=\"{\n              'text-truncate': config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate,\n              'd-none': config.columns[i].hidden,\n              'd-md-block': !config.columns[i].hidden\n            }\"\n            [title]=\"config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate ? entry[column.name] : ''\">\n            <span class=\"text-secondary\"\n              *ngIf=\"!config.columns[i].hasOwnProperty('type') || (config.columns[i].hasOwnProperty('type') &&  config.columns[i].type === 'text')\"\n              [ngClass]=\"{\n                'font-xs': config.columns[i].variant !== 'primary',\n                'text-body': config.columns[i].variant === 'primary',\n                'text-success': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && subitem[config.columns[i].condition],\n                'text-danger': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && !subitem[config.columns[i].condition],\n                'font-lg': config.columns[i].variant === 'redGreen' && subitem[column.name] && subitem[column.name].length > 3,\n                'font-2xl': config.columns[i].variant === 'redGreen' && subitem[column.name] && subitem[column.name].length <= 3\n              }\">\n              {{subitem[column.name] || '-'}}\n            </span>\n          </div>\n        </li>\n      </ul>\n    </li>\n  </ul>\n</div>\n"
+            }] }
+];
+/** @nocollapse */
+AdvancedAggregatorListComponent.ctorParameters = () => [
+    { type: TemplatePipe }
+];
+AdvancedAggregatorListComponent.propDecorators = {
+    config: [{ type: Input }],
+    body: [{ type: Input }],
+    clickEvent: [{ type: Output }]
+};
+
+/**
+ *
+ * @class AdvancedAggregatorPipe
+ * @classdesc Given a list of items runs a user defined function against that list
+ *
+ */
+class AdvancedAggregatorPipe {
+    /**
+     *
+     * @override
+     *
+     * @param items The list of items to run the aggregator against
+     * @param functionPool The functions that are available from the list caller
+     * @param functionName The name of the function to be called
+     *
+     * @returns {string} The value to show at the UI
+     *
+     */
+    transform(items, functionPool, functionName) {
+        if (Array.isArray(items) && functionName && functionName in functionPool) {
+            return functionPool[functionName](items);
+        }
+        else {
+            return '-';
+        }
+    }
+}
+AdvancedAggregatorPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'callAggregator'
+            },] }
+];
+
+/**
+ *
+ * @class ParseTitlePipe
+ * @classdesc Given a title of an aggregator list, translates and evaluates the parameter if any
+ *
+ */
+class ParseTitlePipe {
+    constructor(_translateService) {
+        this._translateService = _translateService;
+    }
+    /**
+     *
+     * @override
+     *
+     * @param {string} title The title of the list
+     * @param {string} key The current list key that is being used
+     *
+     */
+    transform(title, key) {
+        if (!title) {
+            return '';
+        }
+        else {
+            if (key === undefined || key === null || key === 'undefined' || key === 'null') {
+                key = this._translateService.instant('Tables.NotDefined');
+            }
+            return title.split(' ')
+                .map((part) => this._translateService.instant(part))
+                .map((part) => part.replace('${param}', key))
+                .join(' ');
+        }
+    }
+}
+ParseTitlePipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'aggregatorListTitle'
+            },] }
+];
+/** @nocollapse */
+ParseTitlePipe.ctorParameters = () => [
+    { type: TranslateService }
+];
+
+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;
+    }
+    ngOnInit() {
+        this.selectedSubscription = this.selectComponent.advancedTable.selectedItems.subscribe((items) => {
+            if (this.formName == null) {
+                this.okButtonDisabled = items.length === 0;
+            }
+        });
+        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) { }
+}
+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 */
+AddItemsComponent.ctorParameters = () => [
+    { type: Router },
+    { type: ActivatedRoute },
+    { type: ErrorService },
+    { type: ModalService },
+    { type: AppEventService },
+    { type: ToastService },
+    { type: LoadingService },
+    { type: TranslateService },
+    { type: AngularDataContext }
+];
+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',] }]
+};
+
+const ɵ0 = FORMATTERS;
+class TablesModule {
+    constructor(_translateService) {
+        this._translateService = _translateService;
+        this.ngOnInit().catch(err => {
+            console.error('An error occurred while loading tables module');
+            console.error(err);
+        });
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._translateService.setTranslation('en', TABLES_EN, true);
+            this._translateService.setTranslation('el', TABLES_EL, true);
+        });
+    }
+}
+TablesModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    SharedModule,
+                    TranslateModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    RouterModule,
+                    RouterModalModule,
+                    FormioModule,
+                    AdvancedFormsModule,
+                    SharedModule,
+                    ModalModule,
+                    BsDropdownModule,
+                    ProgressbarModule,
+                    NgPipesModule
+                ],
+                providers: [DatePipe, TemplatePipe,
+                    {
+                        provide: COLUMN_FORMATTERS,
+                        useValue: ɵ0
+                    },
+                    AdvancedTableConfigurationResolver,
+                    AdvancedSearchConfigurationResolver,
+                    AdvancedSelectService,
+                    AdvancedAggregatorService,
+                    GroupByPipe
+                ],
+                declarations: [
+                    AdvancedTableComponent,
+                    AdvancedTableSearchComponent,
+                    BtnExpDirective,
+                    AdvancedTableSettingsComponent,
+                    AdvancedTableModalBaseComponent,
+                    AdvancedSearchFormComponent,
+                    AdvancedListComponent,
+                    AdvancedRowActionComponent,
+                    TableSimpleHeaderComponent,
+                    SimpleHeaderToolsComponent,
+                    AdvancedSelectComponent,
+                    AdvancedTableEditorDirective,
+                    AdvancedAggregatorComponent,
+                    AdvancedAggregatorListComponent,
+                    AdvancedAggregatorPipe,
+                    ParseTitlePipe,
+                    AddItemsComponent
+                ],
+                exports: [
+                    AdvancedTableComponent,
+                    AdvancedTableSearchComponent,
+                    BtnExpDirective,
+                    AdvancedTableSettingsComponent,
+                    AdvancedSearchFormComponent,
+                    AdvancedListComponent,
+                    AdvancedRowActionComponent,
+                    TableSimpleHeaderComponent,
+                    SimpleHeaderToolsComponent,
+                    AdvancedSelectComponent,
+                    AdvancedTableEditorDirective,
+                    AdvancedAggregatorComponent,
+                    AdvancedAggregatorListComponent,
+                    AddItemsComponent
+                ],
+                entryComponents: [
+                    AdvancedTableModalBaseComponent,
+                    AdvancedTableSettingsComponent,
+                    AdvancedRowActionComponent,
+                    AdvancedSelectComponent,
+                    AddItemsComponent
+                ],
+                schemas: [CUSTOM_ELEMENTS_SCHEMA]
+            },] }
+];
+/** @nocollapse */
+TablesModule.ctorParameters = () => [
+    { type: TranslateService }
+];
+
+/*
+ * Public API Surface of tables
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AdvancedFilterValueProvider as ɵb, AdvancedTableSearchBaseComponent as ɵa, AdvancedTableSettingsComponent as ɵe, SimpleHeaderToolsComponent as ɵf, TableSimpleHeaderComponent as ɵg, BtnExpDirective as ɵd, AdvancedAggregatorPipe as ɵh, ParseTitlePipe as ɵi, AdvancedAggregatorService as ɵc, AdvancedListComponent, AdvancedRowActionComponent, AdvancedSearchFormComponent, AdvancedTableConfigurationResolver, AdvancedSearchConfigurationResolver, AdvancedColumnFormatter, NestedPropertyFormatter, ButtonFormatter, LinkFormatter, ActionLinkFormatter, SelectRowFormatter, TemplateFormatter, TrueFalseFormatter, TranslationFormatter, DateTimeFormatter, NgClassFormatter, LanguageFormatter, COLUMN_FORMATTERS, AdvancedTableConfiguration, AdvancedTableComponent, AdvancedTableSearchComponent, FORMATTERS, AdvancedTableModalBaseTemplate, AdvancedTableModalBaseComponent, AdvancedSelectComponent, AdvancedSelectService, TablesModule, ɵ0, ActivatedTableService, AdvancedTableNotNullError, AdvancedTableEditorDirective, AdvancedAggregatorComponent, AdvancedAggregatorListComponent, AddItemsComponent };
+
+//# sourceMappingURL=universis-ngx-tables.js.map