@universis/ngx-tables 0.6.7 → 0.6.11

package/fesm2015/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';
 
@@ -34,50 +32,13 @@ class AdvancedColumnFormatter {
         AdvancedColumnFormatter.templateCache.set(expr, result);
         return result;
     }
-}
-AdvancedColumnFormatter.templateCache = new Map();
-class NestedPropertyFormatter extends AdvancedColumnFormatter {
-    render(data, type, row, meta) {
-        // get column
-        const column = meta.settings.aoColumns[meta.col];
-        if (column && column.data) {
-            return at(row, column.data.replace(/\//g, '.'));
-        }
-        return data;
-    }
-    constructor() {
-        super();
-    }
-}
-class ButtonFormatter extends AdvancedColumnFormatter {
-    render(data, type, row, meta) {
-        if (data == null) {
-            return '';
-        }
-        // get column
-        const column = meta.settings.aoColumns[meta.col];
-        // get format options
-        const formatOptions = Object.assign({
-            buttonClass: 'btn btn-default',
-        }, this.formatOptions);
-        // get text content
-        let buttonText;
-        let buttonTitle = '';
-        if (formatOptions.buttonText) {
-            buttonText = this.injector.get(TranslateService).instant(formatOptions.buttonText);
-        }
-        else {
-            buttonText = formatOptions.buttonContent;
-        }
-        if (formatOptions.buttonTitle) {
-            buttonTitle = this.injector.get(TranslateService).instant(formatOptions.buttonTitle);
-        }
-        if (Array.isArray(this.formatOptions.commands)) {
+    createUrlTree(data, options) {
+        if (Array.isArray(options.commands)) {
             const activatedRoute = this.injector.get(ActivatedRoute);
             const router = this.injector.get(Router);
-            const commands = this.formatOptions.commands.map((command) => {
+            const commands = options.commands.map((command) => {
                 if (typeof command === 'string') {
-                    return AdvancedColumnFormatter.template(command)(row);
+                    return AdvancedColumnFormatter.template(command)(data);
                 }
                 if (command.outlets) {
                     const commandOutlets = {};
@@ -90,7 +51,7 @@ class ButtonFormatter extends AdvancedColumnFormatter {
                                     configurable: true,
                                     writable: true,
                                     value: outlet.map((x) => {
-                                        return AdvancedColumnFormatter.template(x)(row);
+                                        return AdvancedColumnFormatter.template(x)(data);
                                     }),
                                 });
                             }
@@ -112,24 +73,67 @@ class ButtonFormatter extends AdvancedColumnFormatter {
             });
             const queryParams = {};
             let replaceUrl = true;
-            if (this.formatOptions.navigationExtras && this.formatOptions.navigationExtras.queryParams) {
-                Object.keys(this.formatOptions.navigationExtras.queryParams).map((key) => {
-                    queryParams[key] = AdvancedColumnFormatter.template(this.formatOptions.navigationExtras.queryParams[key])(row);
+            if (options.navigationExtras && options.navigationExtras.queryParams) {
+                Object.keys(options.navigationExtras.queryParams).map((key) => {
+                    const text = options.navigationExtras.queryParams[key];
+                    queryParams[key] = AdvancedColumnFormatter.template(text)(data);
                 });
             }
-            if (this.formatOptions.navigationExtras && typeof this.formatOptions.navigationExtras.replaceUrl !== 'undefined') {
-                replaceUrl = this.formatOptions.navigationExtras.replaceUrl;
+            if (options.navigationExtras && typeof options.navigationExtras.replaceUrl !== 'undefined') {
+                replaceUrl = options.navigationExtras.replaceUrl;
             }
             let skipLocationChange = false;
-            if (this.formatOptions.navigationExtras && typeof this.formatOptions.navigationExtras.skipLocationChange !== 'undefined') {
-                skipLocationChange = this.formatOptions.navigationExtras.skipLocationChange;
+            if (options.navigationExtras && typeof options.navigationExtras.skipLocationChange !== 'undefined') {
+                skipLocationChange = options.navigationExtras.skipLocationChange;
             }
-            const routerLink = router.createUrlTree(commands, {
+            return router.createUrlTree(commands, {
                 relativeTo: activatedRoute,
                 queryParams,
                 replaceUrl,
                 skipLocationChange,
-            }).toString();
+            });
+        }
+    }
+}
+AdvancedColumnFormatter.templateCache = new Map();
+class NestedPropertyFormatter extends AdvancedColumnFormatter {
+    render(data, type, row, meta) {
+        // get column
+        const column = meta.settings.aoColumns[meta.col];
+        if (column && column.data) {
+            return at(row, column.data.replace(/\//g, '.'));
+        }
+        return data;
+    }
+    constructor() {
+        super();
+    }
+}
+class ButtonFormatter extends AdvancedColumnFormatter {
+    render(data, type, row, meta) {
+        if (data == null) {
+            return '';
+        }
+        // get column
+        const column = meta.settings.aoColumns[meta.col];
+        // get format options
+        const formatOptions = Object.assign({
+            buttonClass: 'btn btn-default',
+        }, this.formatOptions);
+        // get text content
+        let buttonText;
+        let buttonTitle = '';
+        if (formatOptions.buttonText) {
+            buttonText = this.injector.get(TranslateService).instant(formatOptions.buttonText);
+        }
+        else {
+            buttonText = formatOptions.buttonContent;
+        }
+        if (formatOptions.buttonTitle) {
+            buttonTitle = this.injector.get(TranslateService).instant(formatOptions.buttonTitle);
+        }
+        if (Array.isArray(this.formatOptions.commands)) {
+            const routerLink = this.createUrlTree(row, this.formatOptions);
             return `<a class="${formatOptions.buttonClass}" title="${buttonTitle}" href="#${routerLink}">${buttonText}</a>`;
         }
         // and return button
@@ -168,13 +172,21 @@ class ActionLinkFormatter extends AdvancedColumnFormatter {
             }
             // return the dropdown menu with 3 dots
             return `<div class='dropdown details-control' data-id='${data}' data-type='student' >
-                  <a id="dropdownMenuButton-${data}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    <span class="fa-2x text-dots"></span></a>
+                    <a id="dropdownMenuButton-${data}"
+                      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                      <span class="fa-2x text-dots"></span>
+                    </a>
                     <div class="dropdown-menu" aria-labelledby="dropdownMenuButton-${data}">
                      ${actions.map((x) => {
                 if (x.type === 'divider') {
                     return `<div class="dropdown-divider"></div>`;
                 }
+                if (x.formatOptions && x.formatOptions.commands) {
+                    const urlTree = this.createUrlTree(row, x.formatOptions);
+                    return `<a data-name='${x.name}' class="dropdown-item" href="${urlTree.toString()}">
+                            ${this.injector.get(TranslateService).instant(x.title)}
+                          </a>`;
+                }
                 return `<a data-name='${x.name}' class="dropdown-item" href="${AdvancedColumnFormatter.template(x.href)(row)}">
                           ${this.injector.get(TranslateService).instant(x.title)}
                         </a>`;
@@ -189,9 +201,133 @@ class ActionLinkFormatter extends AdvancedColumnFormatter {
         super();
     }
     afterRender(cell, cellData, rowData, rowIndex, colIndex) {
-        // assign bootstrap dropdown
-        // tslint:disable-next-line: no-unused-expression
-        new Dropdown(cell);
+        // assign bootstrap dropdown (?)
+    }
+}
+class ActionButtonFormatter extends AdvancedColumnFormatter {
+    render(data, type, row, meta) {
+        // get column
+        const column = meta.settings.aoColumns[meta.col];
+        if (column && column.data) {
+            const actions = this.actions || [];
+            let index = 1;
+            for (const action of actions) {
+                Object.assign(action, {
+                    name: action.name || `action${index}`,
+                });
+                index += 1;
+            }
+            let buttonText;
+            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);
+                }
+            }
+            let buttonTitle;
+            if (this.formatOptions && this.formatOptions.buttonTitle) {
+                buttonTitle = this.injector.get(TranslateService).instant(this.formatOptions.buttonTbuttonTitleext);
+            }
+            const 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}'>
+                    <a class="${buttonClass} dropdown-toggle" href="#" role="button" title="${buttonTitle}"
+                      id="dropdownMenuButton-${data}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                      ${buttonText}
+                    </a>
+                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton-${data}">
+                     ${actions.map((x) => {
+                if (x.type === 'divider') {
+                    return `<div class="dropdown-divider"></div>`;
+                }
+                if (x.commands) {
+                    const urlTree = this.createUrlTree(row, x);
+                    return `<a class="dropdown-item" href="${urlTree.toString()}">
+                            ${this.injector.get(TranslateService).instant(x.title)}
+                          </a>`;
+                }
+                return `<a class="dropdown-item" href="${AdvancedColumnFormatter.template(x.href)(row)}">
+                          ${this.injector.get(TranslateService).instant(x.title)}
+                        </a>`;
+            })
+                .join('')}
+                    </div>
+                </div>`;
+        }
+        return data;
+    }
+    constructor() {
+        super();
+    }
+    afterRender(cell, cellData, rowData, rowIndex, colIndex) {
+        // assign bootstrap dropdown (?)
+    }
+}
+class ActionSplitButtonFormatter extends AdvancedColumnFormatter {
+    render(data, type, row, meta) {
+        // get column
+        const column = meta.settings.aoColumns[meta.col];
+        if (column && column.data) {
+            const actions = this.actions || [];
+            let index = 1;
+            for (const action of actions) {
+                Object.assign(action, {
+                    name: action.name || `action${index}`,
+                });
+                index += 1;
+            }
+            if (actions.length === 0) {
+                return;
+            }
+            const buttonClass = (this.formatOptions && this.formatOptions.buttonClass) || 'btn btn-light';
+            // return the dropdown menu with 3 dots
+            const defaultAction = actions[0];
+            let defaultActionHref;
+            if (defaultAction && defaultAction.commands) {
+                defaultActionHref = this.createUrlTree(row, defaultAction).toString();
+            }
+            else {
+                defaultActionHref = AdvancedColumnFormatter.template(defaultAction.href)(row);
+            }
+            return `<div class="btn-group">
+                    <a type="button" class="${buttonClass}" href="${defaultActionHref}">
+                      ${this.injector.get(TranslateService).instant(defaultAction.title)}
+                    </a>
+                    <button type="button" class="${buttonClass} dropdown-toggle dropdown-toggle-split"
+                      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                      <span class="sr-only">${this.injector.get(TranslateService).instant('Toggle Dropdown')}</span>
+                    </button>
+                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton-${data}">
+                     ${actions.map((x) => {
+                if (x.title === '-') {
+                    return `<div class="dropdown-divider"></div>`;
+                }
+                if (x.commands) {
+                    const urlTree = this.createUrlTree(row, x);
+                    return `<a class="dropdown-item" href="${urlTree.toString()}">
+                            ${this.injector.get(TranslateService).instant(x.title)}
+                          </a>`;
+                }
+                return `<a class="dropdown-item" href="${AdvancedColumnFormatter.template(x.href)(row)}">
+                          ${this.injector.get(TranslateService).instant(x.title)}
+                        </a>`;
+            })
+                .join('')}
+                    </div>
+                </div>`;
+        }
+        return data;
+    }
+    constructor() {
+        super();
+    }
+    afterRender(cell, cellData, rowData, rowIndex, colIndex) {
+        // assign bootstrap dropdown (?)
     }
 }
 class SelectRowFormatter extends AdvancedColumnFormatter {
@@ -399,7 +535,7 @@ class AdvancedTableComponent {
         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();
@@ -837,7 +973,7 @@ class AdvancedTableComponent {
                     });
                     if (items.length > 0) {
                         Object.assign(columnDefinition, {
-                            afterRender(cell, cellData, rowData, rowIndex, colIndex) {
+                            createdCell(cell, cellData, rowData, rowIndex, colIndex) {
                                 items.forEach((columnFormatter) => {
                                     const formatter = self._columnFormatters[columnFormatter.formatter];
                                     if (formatter && typeof formatter.afterRender === 'function') {
@@ -855,6 +991,14 @@ class AdvancedTableComponent {
                             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;
             });
@@ -914,7 +1058,8 @@ class AdvancedTableComponent {
                             self.select.emit(row);
                         });
                     }
-                    tableElement.find('input.s-row').on('click', this.onSelectionChange.bind(this));
+                    const elements = tableElement.find('input.s-row');
+                    elements.off('click').on('click', this.onSelectionChange.bind(this));
                     // make selection on current page
                     const key = this.config.columns[0].property;
                     if (this.selected.length > 0) {
@@ -1126,6 +1271,7 @@ class AdvancedTableComponent {
             }
             else {
                 Object.assign(settings, {
+                    scrollY: this.scrollY,
                     paging: this.paging,
                     pageLength: this.pageLength,
                 });
@@ -1231,7 +1377,7 @@ class AdvancedTableComponent {
                     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);
@@ -1269,6 +1415,7 @@ class AdvancedTableComponent {
                 if (findItemIndex < 0) {
                     // add row to selected rows
                     this.selected.push(row);
+                    this.selectedItems.emit(this.selected);
                 }
             }
             else {
@@ -1282,6 +1429,7 @@ class AdvancedTableComponent {
                         });
                         if (findItemIndex < 0) {
                             this.unselected.push(row);
+                            this.selectedItems.emit(this.selected);
                         }
                     }
                 }
@@ -1363,7 +1511,7 @@ AdvancedTableComponent.decorators = [
     </div>
   `,
                 encapsulation: ViewEncapsulation.None,
-                styles: ["table.dataTable thead .sorting{background-image:none}table.dataTable thead .sorting_asc{background-position:95% 60%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsSAAALEgHS3X78AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAEtJREFUKJFjYBgywAOKMQALFjE/BgaGTCibjYGBYRM+kz0ZGBh2MTAw8DAwMHAxMDBsY2BgCCBGMQzg1IRNMV5NuVAJXIALqmYwAgBBkAlPRCLcLwAAAABJRU5ErkJggg==)}table.dataTable thead .sorting_desc{background-position:95% 60%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAArzAAAK8wHvFRX1AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAFNJREFUKJHVzTEKgDAQRNGHZfBg2sSTeDMLKwXPYuVJbBKQQEyrH6bZ+cPyWWaElz4kR5cOJ1b0FXnBVRYjjmIUsGGqvX6OmnImYk+JLTkzpPyBGwrtCvfBe56nAAAAAElFTkSuQmCC)}table.dataTable thead th{color:#73818e;font-size:.75rem;font-weight:600;padding-top:16px;padding-bottom:4px;border-bottom:none;padding-left:8px}table.dataTable tbody tr:first-child td:first-child{border-radius:6px 0}table.dataTable tbody tr:first-child td:last-child{border-radius:0 6px}table.dataTable tbody tr{border-radius:6px}table.dataTable tbody tr td:first-child{border-left:1px solid #c2cfd6}table.dataTable tbody tr td:last-child{border-right:1px solid #c2cfd6}table.dataTable tbody tr td{padding-top:16px;padding-bottom:16px;border-top:1px solid #c2cfd6}table.dataTable tbody tr:last-child td:first-child{border-radius:0 0 0 6px}table.dataTable tbody tr:last-child td:last-child{border-radius:0 0 6px}table.dataTable tbody tr:last-child td{border-bottom:1px solid #c2cfd6}table.dataTable td.dataTables_empty{border:none!important}table.dataTable.no-footer{border-bottom:none}.dataTables_paginate .btn.previous{margin-right:8px}.dataTables_paginate .btn.next{margin-left:8px}.dataTables_info,.dataTables_paginate{margin-top:1rem}.dataTables_paginate span .btn{border-radius:1.5rem}.dataTables_filter{display:none}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:0;overflow:auto}.dataTables_paginate{display:none}.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 */
@@ -1446,16 +1594,16 @@ const AdvancedTableModalBaseTemplate = `
           <button class="btn btn-gray-100">
             <i class="fa fa-sliders-h pr-2 text-secondary" aria-hidden="true"></i>{{'Tables.Filters' | translate}}
           </button>
-          <div #dropdownFilter class="dropdown ml-3" dropdown>
+          <div #dropdownFilter class="dropdown ml-3">
             <button class="btn btn-gray-100 dropdown-toggle"
                     type="button" id="dropdownDefaultFilters"
                     data-toggle="dropdown" dropdownToggle>
               {{ this.defaultFilter.name | translate }}
             </button>
-            <div class="dropdown-menu" aria-labelledby="dropdownDefaultFilters" *dropdownMenu>
-              <a class="dropdown-item" *ngFor="let filter of defaultFilters" (click)="advancedSearch(filter.filter ? filter : '')">
+            <div class="dropdown-menu" aria-labelledby="dropdownDefaultFilters">
+              <button type="button" class="dropdown-item" *ngFor="let filter of defaultFilters" (click)="onFilterSelect(filter)">
                 {{ filter.name | translate }}
-              </a>
+              </button>
             </div>
           </div>
         </div>
@@ -1482,13 +1630,13 @@ const AdvancedTableModalBaseTemplate = `
     <div class="row mt-3 table-custom-pager">
       <div class="col-12 d-flex" *ngIf="recordsTotal">
         <div class="mt-2 ml-auto mr-3 text-secondary" [translate]="'Tables.RecordsPerPage'"></div>
-        <div #dropdownLength class="dropdown mr-3" dropdown>
+        <div #dropdownLength class="dropdown mr-3">
           <button class="btn btn-gray-100 dropdown-toggle"
                   type="button" id="dropdownPageSize" data-toggle="dropdown"
                   dropdownToggle>
             {{pageLength}}
           </button>
-          <div class="dropdown-menu" aria-labelledby="dropdownPageSize" *dropdownMenu>
+          <div class="dropdown-menu" aria-labelledby="dropdownPageSize">
             <button (click)="setLength(item)"
                     class="dropdown-item dropdown-item-theme"
                     type="button" *ngFor="let item of lengthMenu">{{item}}</button>
@@ -1675,13 +1823,16 @@ class AdvancedTableModalBaseComponent extends RouterModalOkCancel {
     getFilters(tableConfig, defaultFilterValues = {}, searchItem) {
         // Do nothing in absence of configuration.
         if (!tableConfig || !Array.isArray(tableConfig.criteria)) {
-            console.warn('No table configuration available', this.tableConfig);
+            return [];
+        }
+        if (searchItem.filter == null) {
             return [];
         }
         const matchedCriterion = tableConfig.criteria.find(criterion => Object.prototype.hasOwnProperty.call(searchItem.filter, criterion.name));
-        if (!matchedCriterion) {
+        if (matchedCriterion == null) {
             return [];
         }
+        const value = searchItem.filter[matchedCriterion.name];
         const criterionSafeName = matchedCriterion.name !== null
             ? matchedCriterion.name.toString()
             : '';
@@ -1695,7 +1846,7 @@ class AdvancedTableModalBaseComponent extends RouterModalOkCancel {
         }
         else if (criterionSafeName !== 'undefined') {
             applicableFilter = (this._template.transform(matchedCriterion.filter, Object.assign({
-                value: matchedCriterion.filter
+                value: value
             }, defaultFilterValues)));
         }
         else {
@@ -1703,6 +1854,9 @@ class AdvancedTableModalBaseComponent extends RouterModalOkCancel {
         }
         return [applicableFilter];
     }
+    onFilterSelect(value) {
+        this.advancedSearch(value);
+    }
     /**
      *
      * Runs a filter against the modal table
@@ -1750,6 +1904,7 @@ AdvancedTableModalBaseComponent.DEFAULT_ALL_FILTER = {
 };
 AdvancedTableModalBaseComponent.decorators = [
     { type: Component, args: [{
+                // tslint:disable-next-line: component-selector
                 selector: 'app-advanced-table-modal',
                 template: AdvancedTableModalBaseTemplate,
                 styles: [`
@@ -2677,7 +2832,7 @@ AdvancedSelectComponent.decorators = [
     { type: Component, args: [{
                 // tslint:disable-next-line: component-selector
                 selector: 'app-advanced-select',
-                template: "<div class=\"modal-header\" *ngIf=\"modalTitle\">\n  <h5 class=\"modal-title\">{{modalTitle | translate}}</h5>\n  <button [disabled]=\"cancelButtonDisabled\" (click)=\"cancel()\" type=\"button\" class=\"close\" data-dismiss=\"modal\"\n    aria-label=\"Cancel\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n    <div>\n      <!-- search -->\n      <div class=\"row mt-3\">\n        <div class=\"col-12 col-lg-3\">\n          <div class=\"input-group mb-3\">\n            <input spellcheck=\"false\" type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"searchText\"\n              class=\"form-control bg-gray-100 border-0\" placeholder=\"{{'Tables.SearchPlaceholder' | translate}}\"\n              aria-label=\"Search\" aria-describedby=\"basic-addon2\">\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-default bg-gray-100 border-0\" type=\"button\">\n                <i class=\"fa fa-search text-secondary\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n        <div #emptyTable class=\"d-none\">\n          <div>\n            <div class=\"mt-4\">\n              <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n            </div>\n            <div class=\"mt-4\">\n              <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n              <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n            </div>\n\n          </div>\n        </div>\n        <div class=\"col-12 col-lg-5\">\n          <div class=\"btn-toolbar\">\n            <button class=\"btn btn-gray-100\">\n              <i class=\"fa fa-sliders-h pr-2 text-secondary\" aria-hidden=\"true\"></i>{{'Tables.Filters' | translate}}\n            </button>\n            <div class=\"dropdown ml-3\" 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: [`
     .modal-table .dataTables_wrapper {
@@ -2921,7 +3076,7 @@ class AdvancedTableSearchComponent extends AdvancedTableSearchBaseComponent {
         this.collapsed = true;
         this.allowSave = true;
         this.showMore = true;
-        this.mergeQueryParams = true;
+        this.mergeQueryParams = false;
         this.viewChange = new EventEmitter();
         this.userSearchList = [];
         this.selectedList = null;
@@ -3384,7 +3539,7 @@ AdvancedTableSearchComponent.decorators = [
     { 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
             }] }
 ];
@@ -3423,6 +3578,8 @@ const FORMATTERS = {
     TemplateFormatter: new TemplateFormatter(),
     TranslationFormatter: new TranslationFormatter(),
     TrueFalseFormatter: new TrueFalseFormatter(),
+    ActionButtonFormatter: new ActionButtonFormatter(),
+    ActionSplitButtonFormatter: new ActionSplitButtonFormatter(),
 };
 
 class SimpleHeaderToolsComponent {
@@ -4150,7 +4307,6 @@ TablesModule.decorators = [
                     AdvancedFormsModule,
                     SharedModule,
                     ModalModule,
-                    BsDropdownModule,
                     ProgressbarModule,
                     NgPipesModule
                 ],
@@ -4223,6 +4379,6 @@ TablesModule.ctorParameters = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { AddItemsComponent, AdvancedAggregatorComponent, AdvancedAggregatorListComponent, AdvancedListComponent, AdvancedRowActionComponent, AdvancedSearchFormComponent, AdvancedSelectComponent, AdvancedSelectService, AdvancedTableConfigurationResolver, AdvancedSearchConfigurationResolver, AdvancedColumnFormatter, NestedPropertyFormatter, ButtonFormatter, LinkFormatter, ActionLinkFormatter, 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