@universis/ngx-tables 0.6.0

package/fesm5/universis-ngx-tables.js

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