@universis/ngx-tables 0.6.7 → 0.6.11

package/fesm5/universis-ngx-tables.js

@@ -1,5 +1,4 @@
 import { getNativeName } from 'iso-639-1/build';
-import { Dropdown } from 'bootstrap';
 import * as jQuery_ from 'jquery';
 import 'datatables.net';
 import { template, at } from 'lodash';
@@ -20,7 +19,6 @@ import { ServiceUrlPreProcessor, TranslatePreProcessor, AdvancedFormsModule } fr
 import { FormioModule } from 'angular-formio';
 import { ActivatedRoute, Router, NavigationStart, RouterModule } from '@angular/router';
 import { BsModalRef, BsModalService, ModalModule } from 'ngx-bootstrap/modal';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 import { GroupByPipe, NgPipesModule } from 'ngx-pipes';
 
@@ -36,6 +34,68 @@ var AdvancedColumnFormatter = /** @class */ (function () {
         AdvancedColumnFormatter.templateCache.set(expr, result);
         return result;
     };
+    AdvancedColumnFormatter.prototype.createUrlTree = function (data, options) {
+        if (Array.isArray(options.commands)) {
+            var activatedRoute = this.injector.get(ActivatedRoute);
+            var router = this.injector.get(Router);
+            var commands = options.commands.map(function (command) {
+                if (typeof command === 'string') {
+                    return AdvancedColumnFormatter.template(command)(data);
+                }
+                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 AdvancedColumnFormatter.template(x)(data);
+                                    }),
+                                });
+                            }
+                            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 (options.navigationExtras && options.navigationExtras.queryParams) {
+                Object.keys(options.navigationExtras.queryParams).map(function (key) {
+                    var text = options.navigationExtras.queryParams[key];
+                    queryParams_1[key] = AdvancedColumnFormatter.template(text)(data);
+                });
+            }
+            if (options.navigationExtras && typeof options.navigationExtras.replaceUrl !== 'undefined') {
+                replaceUrl = options.navigationExtras.replaceUrl;
+            }
+            var skipLocationChange = false;
+            if (options.navigationExtras && typeof options.navigationExtras.skipLocationChange !== 'undefined') {
+                skipLocationChange = options.navigationExtras.skipLocationChange;
+            }
+            return router.createUrlTree(commands, {
+                relativeTo: activatedRoute,
+                queryParams: queryParams_1,
+                replaceUrl: replaceUrl,
+                skipLocationChange: skipLocationChange,
+            });
+        }
+    };
     AdvancedColumnFormatter.templateCache = new Map();
     return AdvancedColumnFormatter;
 }());
@@ -60,7 +120,6 @@ var ButtonFormatter = /** @class */ (function (_super) {
         return _super.call(this) || this;
     }
     ButtonFormatter.prototype.render = function (data, type, row, meta) {
-        var _this = this;
         if (data == null) {
             return '';
         }
@@ -83,63 +142,7 @@ var ButtonFormatter = /** @class */ (function (_super) {
             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 AdvancedColumnFormatter.template(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 AdvancedColumnFormatter.template(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] = AdvancedColumnFormatter.template(_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();
+            var routerLink = this.createUrlTree(row, this.formatOptions);
             return "<a class=\"" + formatOptions.buttonClass + "\" title=\"" + buttonTitle + "\" href=\"#" + routerLink + "\">" + buttonText + "</a>";
         }
         // and return button
@@ -193,10 +196,14 @@ var ActionLinkFormatter = /** @class */ (function (_super) {
                 finally { if (e_1) throw e_1.error; }
             }
             // return the dropdown menu with 3 dots
-            return "<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                     " + actions.map(function (x) {
+            return "<div class='dropdown details-control' data-id='" + data + "' data-type='student' >\n                    <a id=\"dropdownMenuButton-" + data + "\"\n                      data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                      <span class=\"fa-2x text-dots\"></span>\n                    </a>\n                    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton-" + data + "\">\n                     " + actions.map(function (x) {
                 if (x.type === 'divider') {
                     return "<div class=\"dropdown-divider\"></div>";
                 }
+                if (x.formatOptions && x.formatOptions.commands) {
+                    var urlTree = _this.createUrlTree(row, x.formatOptions);
+                    return "<a data-name='" + x.name + "' class=\"dropdown-item\" href=\"" + urlTree.toString() + "\">\n                            " + _this.injector.get(TranslateService).instant(x.title) + "\n                          </a>";
+                }
                 return "<a data-name='" + x.name + "' class=\"dropdown-item\" href=\"" + AdvancedColumnFormatter.template(x.href)(row) + "\">\n                          " + _this.injector.get(TranslateService).instant(x.title) + "\n                        </a>";
             })
                 .join('') + "\n                    </div>\n                </div>";
@@ -204,12 +211,137 @@ var ActionLinkFormatter = /** @class */ (function (_super) {
         return data;
     };
     ActionLinkFormatter.prototype.afterRender = function (cell, cellData, rowData, rowIndex, colIndex) {
-        // assign bootstrap dropdown
-        // tslint:disable-next-line: no-unused-expression
-        new Dropdown(cell);
+        // assign bootstrap dropdown (?)
     };
     return ActionLinkFormatter;
 }(AdvancedColumnFormatter));
+var ActionButtonFormatter = /** @class */ (function (_super) {
+    __extends(ActionButtonFormatter, _super);
+    function ActionButtonFormatter() {
+        return _super.call(this) || this;
+    }
+    ActionButtonFormatter.prototype.render = function (data, type, row, meta) {
+        var _this = this;
+        var e_2, _a;
+        // get column
+        var column = meta.settings.aoColumns[meta.col];
+        if (column && column.data) {
+            var actions = this.actions || [];
+            var index = 1;
+            try {
+                for (var actions_2 = __values(actions), actions_2_1 = actions_2.next(); !actions_2_1.done; actions_2_1 = actions_2.next()) {
+                    var action = actions_2_1.value;
+                    Object.assign(action, {
+                        name: action.name || "action" + index,
+                    });
+                    index += 1;
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (actions_2_1 && !actions_2_1.done && (_a = actions_2.return)) _a.call(actions_2);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            var buttonText = void 0;
+            if (this.formatOptions && this.formatOptions.buttonText) {
+                // if button text is a literal expression
+                if (this.formatOptions.buttonText.includes('${')) {
+                    // use template
+                    buttonText = AdvancedColumnFormatter.template(this.formatOptions.buttonText)(row);
+                }
+                else {
+                    // otherwise translate it
+                    buttonText = this.injector.get(TranslateService).instant(this.formatOptions.buttonText);
+                }
+            }
+            var buttonTitle = void 0;
+            if (this.formatOptions && this.formatOptions.buttonTitle) {
+                buttonTitle = this.injector.get(TranslateService).instant(this.formatOptions.buttonTbuttonTitleext);
+            }
+            var buttonClass = (this.formatOptions && this.formatOptions.buttonClass) || 'btn btn-light';
+            // return the dropdown menu with 3 dots
+            return "<div class='dropdown details-control' data-id='" + data + "'>\n                    <a class=\"" + buttonClass + " dropdown-toggle\" href=\"#\" role=\"button\" title=\"" + buttonTitle + "\"\n                      id=\"dropdownMenuButton-" + data + "\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                      " + buttonText + "\n                    </a>\n                    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton-" + data + "\">\n                     " + actions.map(function (x) {
+                if (x.type === 'divider') {
+                    return "<div class=\"dropdown-divider\"></div>";
+                }
+                if (x.commands) {
+                    var urlTree = _this.createUrlTree(row, x);
+                    return "<a class=\"dropdown-item\" href=\"" + urlTree.toString() + "\">\n                            " + _this.injector.get(TranslateService).instant(x.title) + "\n                          </a>";
+                }
+                return "<a class=\"dropdown-item\" href=\"" + AdvancedColumnFormatter.template(x.href)(row) + "\">\n                          " + _this.injector.get(TranslateService).instant(x.title) + "\n                        </a>";
+            })
+                .join('') + "\n                    </div>\n                </div>";
+        }
+        return data;
+    };
+    ActionButtonFormatter.prototype.afterRender = function (cell, cellData, rowData, rowIndex, colIndex) {
+        // assign bootstrap dropdown (?)
+    };
+    return ActionButtonFormatter;
+}(AdvancedColumnFormatter));
+var ActionSplitButtonFormatter = /** @class */ (function (_super) {
+    __extends(ActionSplitButtonFormatter, _super);
+    function ActionSplitButtonFormatter() {
+        return _super.call(this) || this;
+    }
+    ActionSplitButtonFormatter.prototype.render = function (data, type, row, meta) {
+        var _this = this;
+        var e_3, _a;
+        // get column
+        var column = meta.settings.aoColumns[meta.col];
+        if (column && column.data) {
+            var actions = this.actions || [];
+            var index = 1;
+            try {
+                for (var actions_3 = __values(actions), actions_3_1 = actions_3.next(); !actions_3_1.done; actions_3_1 = actions_3.next()) {
+                    var action = actions_3_1.value;
+                    Object.assign(action, {
+                        name: action.name || "action" + index,
+                    });
+                    index += 1;
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (actions_3_1 && !actions_3_1.done && (_a = actions_3.return)) _a.call(actions_3);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+            if (actions.length === 0) {
+                return;
+            }
+            var buttonClass = (this.formatOptions && this.formatOptions.buttonClass) || 'btn btn-light';
+            // return the dropdown menu with 3 dots
+            var defaultAction = actions[0];
+            var defaultActionHref = void 0;
+            if (defaultAction && defaultAction.commands) {
+                defaultActionHref = this.createUrlTree(row, defaultAction).toString();
+            }
+            else {
+                defaultActionHref = AdvancedColumnFormatter.template(defaultAction.href)(row);
+            }
+            return "<div class=\"btn-group\">\n                    <a type=\"button\" class=\"" + buttonClass + "\" href=\"" + defaultActionHref + "\">\n                      " + this.injector.get(TranslateService).instant(defaultAction.title) + "\n                    </a>\n                    <button type=\"button\" class=\"" + buttonClass + " dropdown-toggle dropdown-toggle-split\"\n                      data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                      <span class=\"sr-only\">" + this.injector.get(TranslateService).instant('Toggle Dropdown') + "</span>\n                    </button>\n                    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton-" + data + "\">\n                     " + actions.map(function (x) {
+                if (x.title === '-') {
+                    return "<div class=\"dropdown-divider\"></div>";
+                }
+                if (x.commands) {
+                    var urlTree = _this.createUrlTree(row, x);
+                    return "<a class=\"dropdown-item\" href=\"" + urlTree.toString() + "\">\n                            " + _this.injector.get(TranslateService).instant(x.title) + "\n                          </a>";
+                }
+                return "<a class=\"dropdown-item\" href=\"" + AdvancedColumnFormatter.template(x.href)(row) + "\">\n                          " + _this.injector.get(TranslateService).instant(x.title) + "\n                        </a>";
+            })
+                .join('') + "\n                    </div>\n                </div>";
+        }
+        return data;
+    };
+    ActionSplitButtonFormatter.prototype.afterRender = function (cell, cellData, rowData, rowIndex, colIndex) {
+        // assign bootstrap dropdown (?)
+    };
+    return ActionSplitButtonFormatter;
+}(AdvancedColumnFormatter));
 var SelectRowFormatter = /** @class */ (function (_super) {
     __extends(SelectRowFormatter, _super);
     function SelectRowFormatter() {
@@ -294,7 +426,7 @@ var NgClassFormatter = /** @class */ (function (_super) {
         return _super.call(this) || this;
     }
     NgClassFormatter.prototype.render = function (data, type, row, meta) {
-        var e_2, _a;
+        var e_4, _a;
         // get column
         var column = meta.settings.aoColumns[meta.col];
         if (column && column.data) {
@@ -314,12 +446,12 @@ var NgClassFormatter = /** @class */ (function (_super) {
                         }
                     }
                 }
-                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                catch (e_4_1) { e_4 = { error: e_4_1 }; }
                 finally {
                     try {
                         if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                     }
-                    finally { if (e_2) throw e_2.error; }
+                    finally { if (e_4) throw e_4.error; }
                 }
             }
             return data;
@@ -463,7 +595,7 @@ var AdvancedTableComponent = /** @class */ (function () {
         this.configChanges = new BehaviorSubject(null);
         this.height = 800;
         this.showActions = true;
-        this.autoLoad = false;
+        this.autoLoad = true;
         this.load = new EventEmitter();
         this.init = new EventEmitter();
         this.reload = new EventEmitter();
@@ -923,7 +1055,7 @@ var AdvancedTableComponent = /** @class */ (function () {
                     });
                     if (items_1.length > 0) {
                         Object.assign(columnDefinition, {
-                            afterRender: function (cell, cellData, rowData, rowIndex, colIndex) {
+                            createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
                                 items_1.forEach(function (columnFormatter) {
                                     var formatter = self._columnFormatters[columnFormatter.formatter];
                                     if (formatter && typeof formatter.afterRender === 'function') {
@@ -941,6 +1073,14 @@ var AdvancedTableComponent = /** @class */ (function () {
                             render: formatter.render.bind(column),
                         });
                     }
+                    if (formatter && typeof formatter.afterRender === 'function') {
+                        Object.assign(columnDefinition, {
+                            render: formatter.render.bind(column),
+                        });
+                        Object.assign(columnDefinition, {
+                            createdCell: formatter.afterRender.bind(column),
+                        });
+                    }
                 }
                 return columnDefinition;
             });
@@ -1000,7 +1140,8 @@ var AdvancedTableComponent = /** @class */ (function () {
                             self.select.emit(row);
                         });
                     }
-                    tableElement_1.find('input.s-row').on('click', _this.onSelectionChange.bind(_this));
+                    var elements = tableElement_1.find('input.s-row');
+                    elements.off('click').on('click', _this.onSelectionChange.bind(_this));
                     // make selection on current page
                     var key = _this.config.columns[0].property;
                     if (_this.selected.length > 0) {
@@ -1212,6 +1353,7 @@ var AdvancedTableComponent = /** @class */ (function () {
             }
             else {
                 Object.assign(settings, {
+                    scrollY: this.scrollY,
                     paging: this.paging,
                     pageLength: this.pageLength,
                 });
@@ -1323,7 +1465,7 @@ var AdvancedTableComponent = /** @class */ (function () {
                     if (item) {
                         // redraw row
                         row.data(item);
-                        jQuery(row.node()).find(':checkbox').on('click', _this.onSelectionChange.bind(_this));
+                        jQuery(row.node()).find(':checkbox').off('click').on('click', _this.onSelectionChange.bind(_this));
                         // if row is already selected
                         if (checked) {
                             _this.selectRow(row, true);
@@ -1361,6 +1503,7 @@ var AdvancedTableComponent = /** @class */ (function () {
                 if (findItemIndex < 0) {
                     // add row to selected rows
                     this.selected.push(row);
+                    this.selectedItems.emit(this.selected);
                 }
             }
             else {
@@ -1374,6 +1517,7 @@ var AdvancedTableComponent = /** @class */ (function () {
                         });
                         if (findItemIndex < 0) {
                             this.unselected.push(row);
+                            this.selectedItems.emit(this.selected);
                         }
                     }
                 }
@@ -1441,7 +1585,7 @@ var AdvancedTableComponent = /** @class */ (function () {
                     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}.dataTable.processing{opacity:15%}.dataTables_wrapper .dataTables_processing{background:0 0;position:absolute;display:inline-block;top:25%;z-index:5;color:#73818e}.text-decoration-line-through{text-decoration:line-through!important}tr.removed .checkbox+label{visibility:hidden}"]
+                    styles: ["table.dataTable thead .sorting{background-image:none}table.dataTable thead .sorting_asc{background-position:95% 60%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsSAAALEgHS3X78AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAEtJREFUKJFjYBgywAOKMQALFjE/BgaGTCibjYGBYRM+kz0ZGBh2MTAw8DAwMHAxMDBsY2BgCCBGMQzg1IRNMV5NuVAJXIALqmYwAgBBkAlPRCLcLwAAAABJRU5ErkJggg==)}table.dataTable thead .sorting_desc{background-position:95% 60%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAArzAAAK8wHvFRX1AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAFNJREFUKJHVzTEKgDAQRNGHZfBg2sSTeDMLKwXPYuVJbBKQQEyrH6bZ+cPyWWaElz4kR5cOJ1b0FXnBVRYjjmIUsGGqvX6OmnImYk+JLTkzpPyBGwrtCvfBe56nAAAAAElFTkSuQmCC)}table.dataTable thead th{color:#73818e;font-size:.75rem;font-weight:600;padding-top:16px;padding-bottom:4px;border-bottom:none;padding-left:8px}table.dataTable tbody tr:first-child td:first-child{border-radius:6px 0}table.dataTable tbody tr:first-child td:last-child{border-radius:0 6px}table.dataTable tbody tr{border-radius:6px}table.dataTable tbody tr td:first-child{border-left:1px solid #c2cfd6}table.dataTable tbody tr td:last-child{border-right:1px solid #c2cfd6}table.dataTable tbody tr td{padding-top:8px;padding-bottom:8px;border-top:1px solid #c2cfd6}table.dataTable tbody tr:last-child td:first-child{border-radius:0 0 0 6px}table.dataTable tbody tr:last-child td:last-child{border-radius:0 0 6px}table.dataTable tbody tr:last-child td{border-bottom:1px solid #c2cfd6}table.dataTable td.dataTables_empty{border:none!important}table.dataTable.no-footer{border-bottom:none}.dataTables_paginate .btn.previous{margin-right:8px}.dataTables_paginate .btn.next{margin-left:8px}.dataTables_info,.dataTables_paginate{margin-top:1rem}.dataTables_paginate span .btn{border-radius:1.5rem}.dataTables_filter{display:none}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:0;overflow:auto}.dataTables_paginate{display:none}.dataTable.processing{opacity:15%}.dataTables_wrapper .dataTables_processing{background:0 0;position:absolute;display:inline-block;top:25%;z-index:5;color:#73818e}.text-decoration-line-through{text-decoration:line-through!important}tr.removed .checkbox+label{visibility:hidden}"]
                 }] }
     ];
     /** @nocollapse */
@@ -1492,7 +1636,7 @@ var AdvancedTableComponent = /** @class */ (function () {
 
 // 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 AdvancedTableModalBaseTemplate = "\n<div>\n    <!-- search -->\n    <div class=\"row mt-3\">\n      <div class=\"col-12 col-lg-3\">\n        <div class=\"input-group mb-3\">\n          <input spellcheck=\"false\" type=\"text\"\n                 (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"searchText\"\n                 class=\"form-control bg-gray-100 border-0\"\n                 placeholder=\"{{'Tables.SearchPlaceholder' | translate}}\" aria-label=\"Search\" aria-describedby=\"basic-addon2\">\n          <div class=\"input-group-append\">\n            <button class=\"btn btn-default bg-gray-100 border-0\" type=\"button\">\n              <i class=\"fa fa-search text-secondary\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div #emptyTable class=\"d-none\">\n        <div>\n          <div class=\"mt-4\">\n            <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n          </div>\n          <div class=\"mt-4\">\n            <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n            <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n          </div>\n\n        </div>\n      </div>\n      <div class=\"col-12 col-lg-5\">\n        <div class=\"btn-toolbar\">\n          <button class=\"btn btn-gray-100\">\n            <i class=\"fa fa-sliders-h pr-2 text-secondary\" aria-hidden=\"true\"></i>{{'Tables.Filters' | translate}}\n          </button>\n          <div #dropdownFilter class=\"dropdown ml-3\">\n            <button class=\"btn btn-gray-100 dropdown-toggle\"\n                    type=\"button\" id=\"dropdownDefaultFilters\"\n                    data-toggle=\"dropdown\" dropdownToggle>\n              {{ this.defaultFilter.name | translate }}\n            </button>\n            <div class=\"dropdown-menu\" aria-labelledby=\"dropdownDefaultFilters\">\n              <button type=\"button\" class=\"dropdown-item\" *ngFor=\"let filter of defaultFilters\" (click)=\"onFilterSelect(filter)\">\n                {{ filter.name | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col text-lg-right mt-3 mt-lg-0\">\n        <button [disabled]=\"true\" class=\"btn rounded-pill btn-outline-theme\">\n          <span class=\"pr-2 font-lg\">+</span><span [translate]=\"'Tables.AddItem'\"></span>\n        </button>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-12\" [ngClass]=\"{ 'component-loading': loading}\">\n        <app-advanced-table #advancedTable (init)=\"onTableInit($event)\"\n                            (load)=\"onDataLoad($event)\"\n                            [selectable]=\"true\"\n                            [multipleSelect]=\"true\"\n                            [scrollX]=\"false\" [scrollY]=\"320\"\n                            [pageLength]=\"pageLength\"\n                            [scrollable]=\"false\" [showFooter]=\"false\"\n                            [showActions]=\"false\" [lengthMenu]=\"lengthMenu\"\n                            [config]=\"tableConfig\" [configSrc]=\"tableConfigSrc\"></app-advanced-table>\n      </div>\n    </div>\n    <div class=\"row mt-3 table-custom-pager\">\n      <div class=\"col-12 d-flex\" *ngIf=\"recordsTotal\">\n        <div class=\"mt-2 ml-auto mr-3 text-secondary\" [translate]=\"'Tables.RecordsPerPage'\"></div>\n        <div #dropdownLength class=\"dropdown mr-3\">\n          <button class=\"btn btn-gray-100 dropdown-toggle\"\n                  type=\"button\" id=\"dropdownPageSize\" data-toggle=\"dropdown\"\n                  dropdownToggle>\n            {{pageLength}}\n          </button>\n          <div class=\"dropdown-menu\" aria-labelledby=\"dropdownPageSize\">\n            <button (click)=\"setLength(item)\"\n                    class=\"dropdown-item dropdown-item-theme\"\n                    type=\"button\" *ngFor=\"let item of lengthMenu\">{{item}}</button>\n          </div>\n        </div>\n        <div class=\"mt-2 mr-2\" [translate]=\"'Tables.PageInfo'\" [translateParams]=\"pageInfo\"></div>\n        <button [disabled]=\"pageInfo && pageInfo.page === 0\" class=\"btn text-nowrap\" (click)=\"firstPage()\">\n          <i class=\"fa fa-chevron-left text-color-theme\"></i>\n          <i class=\"fa fa-chevron-left text-color-theme\"></i>\n        </button>\n        <button [disabled]=\"pageInfo && pageInfo.page===0\" class=\"btn\" (click)=\"previousPage()\">\n          <i class=\"fa fa-chevron-left text-color-theme\"></i>\n        </button>\n        <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn\" (click)=\"nextPage()\">\n          <i class=\"fa fa-chevron-right text-color-theme\"></i>\n        </button>\n        <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn text-nowrap\" (click)=\"lastPage()\">\n          <i class=\"fa fa-chevron-right text-color-theme\"></i>\n          <i class=\"fa fa-chevron-right text-color-theme\"></i>\n        </button>\n      </div>\n    </div>\n  </div>\n";
 var AdvancedTableModalBaseComponent = /** @class */ (function (_super) {
     __extends(AdvancedTableModalBaseComponent, _super);
     function AdvancedTableModalBaseComponent(_router, _activatedRoute, _context, advancedFilterValueProvider, datePipe) {
@@ -1659,15 +1803,18 @@ var AdvancedTableModalBaseComponent = /** @class */ (function (_super) {
         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 [];
+        }
+        if (searchItem.filter == null) {
             return [];
         }
         var matchedCriterion = tableConfig.criteria.find(function (criterion) {
             return Object.prototype.hasOwnProperty.call(searchItem.filter, criterion.name);
         });
-        if (!matchedCriterion) {
+        if (matchedCriterion == null) {
             return [];
         }
+        var value = searchItem.filter[matchedCriterion.name];
         var criterionSafeName = matchedCriterion.name !== null
             ? matchedCriterion.name.toString()
             : '';
@@ -1681,7 +1828,7 @@ var AdvancedTableModalBaseComponent = /** @class */ (function (_super) {
         }
         else if (criterionSafeName !== 'undefined') {
             applicableFilter = (this._template.transform(matchedCriterion.filter, Object.assign({
-                value: matchedCriterion.filter
+                value: value
             }, defaultFilterValues)));
         }
         else {
@@ -1689,6 +1836,9 @@ var AdvancedTableModalBaseComponent = /** @class */ (function (_super) {
         }
         return [applicableFilter];
     };
+    AdvancedTableModalBaseComponent.prototype.onFilterSelect = function (value) {
+        this.advancedSearch(value);
+    };
     /**
      *
      * Runs a filter against the modal table
@@ -1745,6 +1895,7 @@ var AdvancedTableModalBaseComponent = /** @class */ (function (_super) {
     };
     AdvancedTableModalBaseComponent.decorators = [
         { type: Component, args: [{
+                    // tslint:disable-next-line: component-selector
                     selector: 'app-advanced-table-modal',
                     template: AdvancedTableModalBaseTemplate,
                     styles: ["\n\n    "]
@@ -2770,7 +2921,7 @@ var AdvancedSelectComponent = /** @class */ (function (_super) {
         { type: Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'app-advanced-select',
-                    template: "<div class=\"modal-header\" *ngIf=\"modalTitle\">\n  <h5 class=\"modal-title\">{{modalTitle | translate}}</h5>\n  <button [disabled]=\"cancelButtonDisabled\" (click)=\"cancel()\" type=\"button\" class=\"close\" data-dismiss=\"modal\"\n    aria-label=\"Cancel\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n    <div>\n      <!-- search -->\n      <div class=\"row mt-3\">\n        <div class=\"col-12 col-lg-3\">\n          <div class=\"input-group mb-3\">\n            <input spellcheck=\"false\" type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"searchText\"\n              class=\"form-control bg-gray-100 border-0\" placeholder=\"{{'Tables.SearchPlaceholder' | translate}}\"\n              aria-label=\"Search\" aria-describedby=\"basic-addon2\">\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-default bg-gray-100 border-0\" type=\"button\">\n                <i class=\"fa fa-search text-secondary\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n        <div #emptyTable class=\"d-none\">\n          <div>\n            <div class=\"mt-4\">\n              <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n            </div>\n            <div class=\"mt-4\">\n              <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n              <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n            </div>\n\n          </div>\n        </div>\n        <div class=\"col-12 col-lg-5\">\n          <div class=\"btn-toolbar\">\n            <button class=\"btn btn-gray-100\">\n              <i class=\"fa fa-sliders-h pr-2 text-secondary\" aria-hidden=\"true\"></i>{{'Tables.Filters' | translate}}\n            </button>\n            <div class=\"dropdown ml-3\" 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            [autoLoad]=\"true\"\n            [selectable]=\"true\" [multipleSelect]=\"true\" [scrollX]=\"false\" [scrollY]=\"320\" [pageLength]=\"pageLength\"\n            [scrollable]=\"false\" [showFooter]=\"false\" [showActions]=\"false\" [lengthMenu]=\"lengthMenu\"\n            [config]=\"tableConfig\" [configSrc]=\"tableConfigSrc\"></app-advanced-table>\n        </div>\n      </div>\n      <div class=\"row mt-3 table-custom-pager\">\n        <div class=\"col-12 d-flex\" *ngIf=\"recordsTotal\">\n          <div class=\"mt-2 ml-auto mr-3 text-secondary\" [translate]=\"'Tables.RecordsPerPage'\"></div>\n          <div class=\"dropdown mr-3\" 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",
+                    template: "<div class=\"modal-header\" *ngIf=\"modalTitle\">\n  <h5 class=\"modal-title\">{{modalTitle | translate}}</h5>\n  <button [disabled]=\"cancelButtonDisabled\" (click)=\"cancel()\" type=\"button\" class=\"close\" data-dismiss=\"modal\"\n    aria-label=\"Cancel\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n    <div>\n      <!-- search -->\n      <div class=\"row mt-3\">\n        <div class=\"col-12 col-lg-3\">\n          <div class=\"input-group mb-3\">\n            <input spellcheck=\"false\" type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"searchText\"\n              class=\"form-control bg-gray-100 border-0\" placeholder=\"{{'Tables.SearchPlaceholder' | translate}}\"\n              aria-label=\"Search\" aria-describedby=\"basic-addon2\">\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-default bg-gray-100 border-0\" type=\"button\">\n                <i class=\"fa fa-search text-secondary\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n        <div #emptyTable class=\"d-none\">\n          <div>\n            <div class=\"mt-4\">\n              <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n            </div>\n            <div class=\"mt-4\">\n              <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n              <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n            </div>\n\n          </div>\n        </div>\n        <div class=\"col-12 col-lg-5\">\n          <div class=\"btn-toolbar\">\n            <button class=\"btn btn-gray-100\">\n              <i class=\"fa fa-sliders-h pr-2 text-secondary\" aria-hidden=\"true\"></i>{{'Tables.Filters' | translate}}\n            </button>\n            <div class=\"dropdown ml-3\">\n              <button dropdownToggle class=\"btn btn-gray-100 dropdown-toggle\" type=\"button\" id=\"dropdownDefaultFilters\"\n                data-toggle=\"dropdown\">\n                {{ this.defaultFilter.name | translate }}\n              </button>\n              <div class=\"dropdown-menu\" aria-labelledby=\"dropdownDefaultFilters\">\n                <a class=\"dropdown-item\" *ngFor=\"let filter of defaultFilters\"\n                  (click)=\"advancedSearch(filter.filter ? filter : '')\">\n                  {{ filter.name | translate }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"col text-lg-right mt-3 mt-lg-0\">\n          <button [disabled]=\"true\" class=\"btn rounded-pill btn-outline-theme\">\n            <span class=\"pr-2 font-lg\">+</span><span [translate]=\"'Tables.AddItem'\"></span>\n          </button>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12\" [ngClass]=\"{ 'component-loading': loading}\">\n          <app-advanced-table #advancedTable (init)=\"onTableInit($event)\" (load)=\"onDataLoad($event)\"\n            [autoLoad]=\"true\"\n            [selectable]=\"true\" [multipleSelect]=\"true\" [scrollX]=\"false\" [scrollY]=\"320\" [pageLength]=\"pageLength\"\n            [scrollable]=\"false\" [showFooter]=\"false\" [showActions]=\"false\" [lengthMenu]=\"lengthMenu\"\n            [config]=\"tableConfig\" [configSrc]=\"tableConfigSrc\"></app-advanced-table>\n        </div>\n      </div>\n      <div class=\"row mt-3 table-custom-pager\">\n        <div class=\"col-12 d-flex\" *ngIf=\"recordsTotal\">\n          <div class=\"mt-2 ml-auto mr-3 text-secondary\" [translate]=\"'Tables.RecordsPerPage'\"></div>\n          <div class=\"dropdown mr-3\">\n            <button dropdownToggle class=\"btn btn-gray-100 dropdown-toggle\" type=\"button\" id=\"dropdownPageSize\"\n              data-toggle=\"dropdown\">\n              {{pageLength}}\n            </button>\n            <div class=\"dropdown-menu\" aria-labelledby=\"dropdownPageSize\">\n              <button (click)=\"setLength(item)\" class=\"dropdown-item dropdown-item-theme\" type=\"button\"\n                *ngFor=\"let item of lengthMenu\">{{item}}</button>\n            </div>\n          </div>\n          <div class=\"mt-2 mr-2\" [translate]=\"'Tables.PageInfo'\" [translateParams]=\"pageInfo\"></div>\n          <button [disabled]=\"pageInfo && pageInfo.page === 0\" class=\"btn text-nowrap\" (click)=\"firstPage()\">\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===0\" class=\"btn\" (click)=\"previousPage()\">\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn\" (click)=\"nextPage()\">\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn text-nowrap\"\n            (click)=\"lastPage()\">\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n</div>\n<div class=\"modal-footer justify-content-end\">\n  <button [disabled]=\"okButtonDisabled\" (click)=\"ok()\" type=\"button\" [ngClass]=\"okButtonClass\">\n    {{okButtonText | translate}}\n  </button>\n  <button [disabled]=\"cancelButtonDisabled\" (click)=\"cancel()\" type=\"button\" [ngClass]=\"cancelButtonClass\"\n    data-dismiss=\"modal\">\n    {{ cancelButtonText | translate}}\n  </button>\n</div>\n",
                     encapsulation: ViewEncapsulation.None,
                     styles: ["\n    .modal-table .dataTables_wrapper {\n      height: 50vh;\n      overflow-y: auto;\n    }\n    "]
                 }] }
@@ -3027,7 +3178,7 @@ var AdvancedTableSearchComponent = /** @class */ (function (_super) {
         _this.collapsed = true;
         _this.allowSave = true;
         _this.showMore = true;
-        _this.mergeQueryParams = true;
+        _this.mergeQueryParams = false;
         _this.viewChange = new EventEmitter();
         _this.userSearchList = [];
         _this.selectedList = null;
@@ -3523,7 +3674,7 @@ var AdvancedTableSearchComponent = /** @class */ (function (_super) {
         { type: Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'app-advanced-table-search',
-                    template: "<div class=\"s--list-navbar d-none d-sm-block\">\n\n  <div id=\"collapse-header\" [ngClass]=\"{'show':collapsed}\" class=\"collapse multi-collapse\">\n    <form class=\"form-inline p-3 col\">\n      <div class=\"form-group col-7\" [ngClass]= \"{ 'col-12': !showMore }\">\n        <label class=\"pr-3\" for=\"searchText\" [translate]=\"'Tables.Search'\"></label>\n        <input (keydown)=\"onSearchKeyDown($event)\" spellcheck=\"false\" type=\"text\" id=\"searchText\" name=\"searchText\"\n          class=\"form-control col text-left\" placeholder=\"{{ 'Tables.SearchPlaceholder' | translate }}\" #searchText>\n      </div>\n      <div *ngIf=\"showMore\" class=\"col-5 text-right text-secondary\" id=\"heading3\">\n        <button class=\"d-inline-block btn btn-link collapsed float-right text-secondary text-decoration-none\"\n          type=\"button\"  (click)=\"toggleView();\">\n          <span class=\"d-none d-sm-inline\" [translate]=\"'AdvancedSearch.More'\"></span>\n          <i class=\"ml-2 pt-1 fa fa-chevron-down\"></i>\n        </button>\n      </div>\n    </form>\n  </div>\n\n  <div id=\"collapse3\" [ngClass]=\"{'show':!collapsed}\"  class=\"collapse multi-collapse\" aria-labelledby=\"heading3\">\n    <div class=\"row\">\n      <div class=\"col-sm-12\">\n        <div id=\"advanced-form\">\n          <ng-content select=\"advanced-search\"></ng-content>\n          <hr class=\"mt-0 mb-0\" width=\"97%\">\n          <div class=\"row\">\n            <div class=\"col-sm-12\">\n              <div class=\"form-inline pb-3 pt-3 pr-1 pl-1 col\">\n\n                <div class=\"form-group col-4\">\n                  <div class=\"d-flex flex-row w-100\" *ngIf=\"allowSave\">\n                    <label class=\"pr-3 d-none\" [translate]=\"'AdvancedSearch.SavedSearches'\"></label>\n                    <select *ngIf=\"userSearchList\" class=\"custom-select text-secondary flex col-12\" (change)=\"onSelectUserSearch($event)\" [(ngModel)]=\"selectedList\">\n                      <option [ngValue]=\"null\" [translate]=\"'AdvancedSearch.Choose'\"></option>\n                      <option  *ngFor=\"let item of userSearchList\" [ngValue]=\"item\">{{ item.name }}</option>\n                    </select>\n                    <select *ngIf=\"!userSearchList\" class=\"custom-select flex col-6\">\n                      <option [value]=\"null\" [translate]=\"'AdvancedSearch.Choose'\"></option>\n                    </select>\n                  </div>\n                </div>\n\n                <div class=\"col-3 d-flex flex-row w-100\">\n                  <div class=\"btn-group\" *ngIf=\"allowSave\" 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",
+                    template: "<div class=\"s--list-navbar d-none d-sm-block\">\n\n  <div id=\"collapse-header\" [ngClass]=\"{'show':collapsed}\" class=\"collapse multi-collapse\">\n    <form class=\"form-inline p-3 col\">\n      <div class=\"form-group col-7\" [ngClass]= \"{ 'col-12': !showMore }\">\n        <label class=\"pr-3\" for=\"searchText\" [translate]=\"'Tables.Search'\"></label>\n        <input (keydown)=\"onSearchKeyDown($event)\" spellcheck=\"false\" type=\"text\" id=\"searchText\" name=\"searchText\"\n          class=\"form-control col text-left\" placeholder=\"{{ 'Tables.SearchPlaceholder' | translate }}\" #searchText>\n      </div>\n      <div *ngIf=\"showMore\" class=\"col-5 text-right text-secondary\" id=\"heading3\">\n        <button class=\"d-inline-block btn btn-link collapsed float-right text-secondary text-decoration-none\"\n          type=\"button\"  (click)=\"toggleView();\">\n          <span class=\"d-none d-sm-inline\" [translate]=\"'AdvancedSearch.More'\"></span>\n          <i class=\"ml-2 pt-1 fa fa-chevron-down\"></i>\n        </button>\n      </div>\n    </form>\n  </div>\n\n  <div id=\"collapse3\" [ngClass]=\"{'show':!collapsed}\"  class=\"collapse multi-collapse\" aria-labelledby=\"heading3\">\n    <div class=\"row\">\n      <div class=\"col-sm-12\">\n        <div id=\"advanced-form\">\n          <ng-content select=\"advanced-search\"></ng-content>\n          <hr class=\"mt-0 mb-0\" width=\"97%\">\n          <div class=\"row\">\n            <div class=\"col-sm-12\">\n              <div class=\"form-inline pb-3 pt-3 pr-1 pl-1 col\">\n\n                <div class=\"form-group col-4\">\n                  <div class=\"d-flex flex-row w-100\" *ngIf=\"allowSave\">\n                    <label class=\"pr-3 d-none\" [translate]=\"'AdvancedSearch.SavedSearches'\"></label>\n                    <select *ngIf=\"userSearchList\" class=\"custom-select text-secondary flex col-12\" (change)=\"onSelectUserSearch($event)\" [(ngModel)]=\"selectedList\">\n                      <option [ngValue]=\"null\" [translate]=\"'AdvancedSearch.Choose'\"></option>\n                      <option  *ngFor=\"let item of userSearchList\" [ngValue]=\"item\">{{ item.name }}</option>\n                    </select>\n                    <select *ngIf=\"!userSearchList\" class=\"custom-select flex col-6\">\n                      <option [value]=\"null\" [translate]=\"'AdvancedSearch.Choose'\"></option>\n                    </select>\n                  </div>\n                </div>\n\n                <div class=\"col-3 d-flex flex-row w-100\">\n                  <div class=\"btn-group\" *ngIf=\"allowSave\">\n                    <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"saveSearch(templateToUse, ( (selectedList && selectedList.readOnly) ? true : false ) )\" [translate]=\"'AdvancedSearch.SaveCurrentSearch'\"></button>\n                    <button type=\"button\" dropdownToggle class=\"btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                      <span class=\"sr-only\" [translate]=\"'AdvancedSearch.ToggleDropdown'\"></span>\n                    </button>\n\n                    <div class=\"dropdown-menu\">\n                      <a [ngClass]=\"{'disabled': selectedList && selectedList.readOnly}\" class=\"dropdown-item\" (click)=\"saveSearch(templateToUse, false)\" [translate]=\"'AdvancedSearch.Save'\" href=\"javascript:void(0)\"></a>\n                      <a class=\"dropdown-item\" (click)=\"saveSearch(templateToUse)\" [translate]=\"'AdvancedSearch.SaveAs'\" href=\"javascript:void(0)\"></a>\n                      <div  class=\"dropdown-divider\"></div>\n                      <a [ngClass]=\"{'disabled': selectedList && selectedList.readOnly}\" class=\"dropdown-item\" (click)=\"deleteItemFromSavedSearchListByObject(selectedList)\" [translate]=\"'AdvancedSearch.Delete'\" href=\"javascript:void(0)\"></a>\n                    </div>\n                  </div>\n                </div>\n\n                <div class=\"col-5 text-right text-secondary\">\n                  <button type=\"button\" class=\"btn btn-light text-secondary pl-2 pr-2 mr-2\" (click)=\"clear()\">\n                    <i class=\"fa fa-eraser\"></i>\n                  </button>\n                  <button type=\"button\" class=\"btn btn-success pl-4 pr-4 mr-2\" (click)=\"advancedSearch($event);\"\n                    [translate]=\"'Tables.Search'\"></button>\n                  <button class=\"d-inline-block btn btn-link collapsed float-right text-secondary text-decoration-none\"\n                          type=\"button\" (click)=\"toggleView();\">\n                    <span class=\"d-none d-sm-inline\" [translate]=\"'AdvancedSearch.Less'\"></span>\n                    <i class=\"ml-2 pt-1 fa fa-chevron-up\"></i>\n                  </button>\n                </div>\n\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-template #templateToUse>\n    <div class=\"modal-header\">\n      <h4 class=\"modal-title pull-left\" [translate]=\"'AdvancedSearch.Modal.Title'\"></h4>\n      <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"modalRef.hide()\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    </div>\n    <div class=\"modal-body mt-0 mb-0 text-center\">\n      <div>\n        <p class=\"text-secondary text-left\" [translate]=\"'AdvancedSearch.Modal.Help'\"></p>\n      </div>\n      <form class=\"p-3 text-center\" #newListForm=\"ngForm\" >\n        <div [ngVar]=\"{ name: ( selectedList?.name ? ( selectedList?.name + ' (1)'  ) : null ) }\" #model=\"ngVar\">\n          <input [(ngModel)]=\"model.value.name\" [required]=\"true\"  id=\"newListName\" name=\"newListName\" type=\"text\" class=\"form-control\" placeholder=\"{{ 'AdvancedSearch.Modal.SaveNamePlaceholder' | translate }}\"/>\n          <div class=\"btn-group mt-4\">\n            <button [disabled]=\"newListForm.invalid\" type=\"button\" class=\"btn btn-primary\" (click)=\"confirmModal(model.value.name)\" [translate]=\"'AdvancedSearch.Modal.Accept'\"></button>\n            <button type=\"button\" class=\"btn btn-gray-300 text-white\" (click)=\"closeModal()\" [translate]=\"'AdvancedSearch.Modal.Close'\"></button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </ng-template>\n\n</div>\n",
                     encapsulation: ViewEncapsulation.None
                 }] }
     ];
@@ -3564,6 +3715,8 @@ var FORMATTERS = {
     TemplateFormatter: new TemplateFormatter(),
     TranslationFormatter: new TranslationFormatter(),
     TrueFalseFormatter: new TrueFalseFormatter(),
+    ActionButtonFormatter: new ActionButtonFormatter(),
+    ActionSplitButtonFormatter: new ActionSplitButtonFormatter(),
 };
 
 var SimpleHeaderToolsComponent = /** @class */ (function () {
@@ -4370,7 +4523,6 @@ var TablesModule = /** @class */ (function () {
                         AdvancedFormsModule,
                         SharedModule,
                         ModalModule,
-                        BsDropdownModule,
                         ProgressbarModule,
                         NgPipesModule
                     ],
@@ -4445,6 +4597,6 @@ var TablesModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { AddItemsComponent, AdvancedAggregatorComponent, AdvancedAggregatorListComponent, AdvancedListComponent, AdvancedRowActionComponent, AdvancedSearchFormComponent, AdvancedSelectComponent, AdvancedSelectService, AdvancedTableConfigurationResolver, AdvancedSearchConfigurationResolver, AdvancedColumnFormatter, NestedPropertyFormatter, ButtonFormatter, LinkFormatter, ActionLinkFormatter, SelectRowFormatter, TemplateFormatter, TrueFalseFormatter, TranslationFormatter, DateTimeFormatter, NgClassFormatter, LanguageFormatter, COLUMN_FORMATTERS, AdvancedTableConfiguration, AdvancedTableComponent, AdvancedTableSettingsComponent, AdvancedTableSearchBaseComponent, AdvancedTableSearchComponent, FORMATTERS, AdvancedFilterValueProvider, AdvancedTableModalBaseTemplate, AdvancedTableModalBaseComponent, SimpleHeaderToolsComponent, TableSimpleHeaderComponent, AdvancedTableNotNullError, AdvancedTableEditorDirective, BtnExpDirective, AdvancedAggregatorPipe, ParseTitlePipe, AdvancedAggregatorService, TablesModule, ɵ0, ActivatedTableService };
+export { AddItemsComponent, AdvancedAggregatorComponent, AdvancedAggregatorListComponent, AdvancedListComponent, AdvancedRowActionComponent, AdvancedSearchFormComponent, AdvancedSelectComponent, AdvancedSelectService, AdvancedTableConfigurationResolver, AdvancedSearchConfigurationResolver, AdvancedColumnFormatter, NestedPropertyFormatter, ButtonFormatter, LinkFormatter, ActionLinkFormatter, ActionButtonFormatter, ActionSplitButtonFormatter, SelectRowFormatter, TemplateFormatter, TrueFalseFormatter, TranslationFormatter, DateTimeFormatter, NgClassFormatter, LanguageFormatter, COLUMN_FORMATTERS, AdvancedTableConfiguration, AdvancedTableComponent, AdvancedTableSettingsComponent, AdvancedTableSearchBaseComponent, AdvancedTableSearchComponent, FORMATTERS, AdvancedFilterValueProvider, AdvancedTableModalBaseTemplate, AdvancedTableModalBaseComponent, SimpleHeaderToolsComponent, TableSimpleHeaderComponent, AdvancedTableNotNullError, AdvancedTableEditorDirective, BtnExpDirective, AdvancedAggregatorPipe, ParseTitlePipe, AdvancedAggregatorService, TablesModule, ɵ0, ActivatedTableService };
 
 //# sourceMappingURL=universis-ngx-tables.js.map