@universis/ngx-tables 0.7.19 → 0.7.23

package/fesm5/universis-ngx-tables.js

@@ -2,6 +2,7 @@ import { getNativeName } from 'iso-639-1/build';
 import * as jQuery_ from 'jquery';
 import 'datatables.net';
 import 'datatables.net-scroller';
+import 'datatables.net-colreorder';
 import 'rxjs/add/observable/combineLatest';
 import { HttpClient } from '@angular/common/http';
 import { ClientDataQueryable, ResponseError, TextUtils } from '@themost/client';
@@ -9,8 +10,8 @@ import { BehaviorSubject } from 'rxjs';
 import { AngularDataContext } from '@themost/angular';
 import { DatePipe, CommonModule } from '@angular/common';
 import { TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
-import { FormArray, FormBuilder, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { TemplatePipe, LoadingService, ErrorService, DIALOG_BUTTONS, ModalService, UserActivityService, ToastService, AppEventService, UserStorageService, ConfigurationService, SharedModule } from '@universis/common';
+import { FormControl, FormArray, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TemplatePipe, ModalService, LoadingService, ErrorService, DIALOG_BUTTONS, UserActivityService, ToastService, AppEventService, UserStorageService, ConfigurationService, SharedModule } from '@universis/common';
 import { RouterModalOkCancel, RouterModalModule } from '@universis/common/routing';
 import { ServiceUrlPreProcessor, TranslatePreProcessor, AdvancedFormsModule } from '@universis/forms';
 import { FormioModule } from 'angular-formio';
@@ -90,7 +91,7 @@ var AdvancedColumnFormatter = /** @class */ (function () {
             if (options.navigationExtras && typeof options.navigationExtras.skipLocationChange !== 'undefined') {
                 skipLocationChange = options.navigationExtras.skipLocationChange;
             }
-            return router.createUrlTree(commands, options.navigationExtras = {
+            return router.createUrlTree(commands, {
                 relativeTo: activatedRoute,
                 queryParams: queryParams_1,
                 replaceUrl: replaceUrl,
@@ -520,6 +521,299 @@ var AdvancedFilterValueProvider = /** @class */ (function () {
     return AdvancedFilterValueProvider;
 }());
 
+var ColumnSelectorComponent = /** @class */ (function (_super) {
+    __extends(ColumnSelectorComponent, _super);
+    function ColumnSelectorComponent(router, activatedRoute, _modalRef, ref, _translateService) {
+        var _this = _super.call(this, router, activatedRoute) || this;
+        _this._modalRef = _modalRef;
+        _this.ref = ref;
+        _this._translateService = _translateService;
+        _this.dismiss = new EventEmitter();
+        _this.availableColumnsControl = new FormControl();
+        _this.selectedColumnsControl = new FormControl();
+        return _this;
+    }
+    ColumnSelectorComponent.prototype.ok = function () {
+        this._modalRef.hide();
+        this.applyChanges();
+        this.dismiss.emit('ok');
+        return Promise.resolve('ok');
+    };
+    ColumnSelectorComponent.prototype.cancel = function () {
+        this._modalRef.hide();
+        this.dismiss.emit('cancel');
+        return Promise.resolve('cancel');
+    };
+    ColumnSelectorComponent.prototype.ngOnChanges = function (changes) {
+        //
+    };
+    ColumnSelectorComponent.prototype.ngOnDestroy = function () {
+        //
+    };
+    ColumnSelectorComponent.prototype.ngOnInit = function () {
+        if (Array.isArray(this.columns)) {
+            this.selectedColumns = this.columns.filter(function (item) {
+                return item.visible;
+            }).sort(function (a, b) {
+                if (a.index < b.index) {
+                    return -1;
+                }
+                if (a.index > b.index) {
+                    return 1;
+                }
+                return 0;
+            }).map(function (item) {
+                return {
+                    key: item.key,
+                    title: item.title
+                };
+            });
+        }
+    };
+    ColumnSelectorComponent.prototype.applyChanges = function () {
+        var e_1, _a;
+        var moveIndex = this.selectedColumns.length - 1;
+        var _loop_1 = function (column) {
+            var findIndex = this_1.selectedColumns.findIndex(function (item) {
+                return item.key === column.key;
+            });
+            if (findIndex < 0) {
+                column.visible = false;
+                moveIndex += 1;
+                column.index = moveIndex;
+            }
+            else {
+                column.visible = true;
+                column.index = findIndex;
+            }
+        };
+        var this_1 = this;
+        try {
+            for (var _b = __values(this.columns), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var column = _c.value;
+                _loop_1(column);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    };
+    ColumnSelectorComponent.prototype.removeColumns = function () {
+        var e_2, _a;
+        var selected = this.selectedColumnsControl.value;
+        if (selected.length > 0) {
+            var _loop_2 = function (value) {
+                var findIndex = this_2.selectedColumns.findIndex(function (item) {
+                    return item.key === value;
+                });
+                if (findIndex >= 0) {
+                    this_2.selectedColumns.splice(findIndex, 1);
+                }
+            };
+            var this_2 = this;
+            try {
+                for (var selected_1 = __values(selected), selected_1_1 = selected_1.next(); !selected_1_1.done; selected_1_1 = selected_1.next()) {
+                    var value = selected_1_1.value;
+                    _loop_2(value);
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (selected_1_1 && !selected_1_1.done && (_a = selected_1.return)) _a.call(selected_1);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            // reset column
+            this.selectedColumnsControl.reset();
+        }
+    };
+    ColumnSelectorComponent.prototype.addColumns = function () {
+        var e_3, _a;
+        var selected = this.availableColumnsControl.value;
+        if (selected.length > 0) {
+            var _loop_3 = function (value) {
+                var findColumn = this_3.columns.find(function (item) {
+                    return item.key === value;
+                });
+                if (findColumn) {
+                    var findIndex = this_3.selectedColumns.findIndex(function (item) {
+                        return item.key === value;
+                    });
+                    if (findIndex < 0) {
+                        this_3.selectedColumns.push({
+                            key: findColumn.key,
+                            title: findColumn.title
+                        });
+                    }
+                }
+            };
+            var this_3 = this;
+            try {
+                for (var selected_2 = __values(selected), selected_2_1 = selected_2.next(); !selected_2_1.done; selected_2_1 = selected_2.next()) {
+                    var value = selected_2_1.value;
+                    _loop_3(value);
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (selected_2_1 && !selected_2_1.done && (_a = selected_2.return)) _a.call(selected_2);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+            // find the last index of the selected items
+            var lastSelectedIndex = this.columns.findIndex(function (item) {
+                return item.key === selected[selected.length - 1];
+            });
+            // reset control
+            this.availableColumnsControl.reset();
+            if (lastSelectedIndex > -1 && lastSelectedIndex < this.columns.length - 1) {
+                this.availableColumnsControl.patchValue([
+                    this.columns[lastSelectedIndex + 1].key
+                ]);
+            }
+        }
+    };
+    ColumnSelectorComponent.prototype.moveUp = function () {
+        var e_4, _a;
+        this.moveUpButton.nativeElement.disabled = true;
+        var selected = this.selectedColumnsControl.value;
+        if (selected.length > 0) {
+            var _loop_4 = function (value) {
+                var findIndex = this_4.selectedColumns.findIndex(function (item) {
+                    return item.key === value;
+                });
+                if (findIndex > 0) {
+                    var column = this_4.selectedColumns[findIndex];
+                    this_4.selectedColumns.splice(findIndex, 1);
+                    this_4.selectedColumns.splice(findIndex - 1, 0, column);
+                }
+            };
+            var this_4 = this;
+            try {
+                for (var selected_3 = __values(selected), selected_3_1 = selected_3.next(); !selected_3_1.done; selected_3_1 = selected_3.next()) {
+                    var value = selected_3_1.value;
+                    _loop_4(value);
+                }
+            }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (selected_3_1 && !selected_3_1.done && (_a = selected_3.return)) _a.call(selected_3);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+        }
+        this.moveUpButton.nativeElement.disabled = false;
+    };
+    ColumnSelectorComponent.prototype.moveDown = function () {
+        var e_5, _a;
+        this.moveDownButton.nativeElement.disabled = true;
+        var selected = this.selectedColumnsControl.value;
+        if (selected.length > 0) {
+            var _loop_5 = function (value) {
+                var findIndex = this_5.selectedColumns.findIndex(function (item) {
+                    return item.key === value;
+                });
+                var length_1 = this_5.columns.length;
+                if (findIndex >= 0 && findIndex < length_1) {
+                    var column = this_5.selectedColumns[findIndex];
+                    this_5.selectedColumns.splice(findIndex, 1);
+                    this_5.selectedColumns.splice(findIndex + 1, 0, column);
+                }
+            };
+            var this_5 = this;
+            try {
+                for (var selected_4 = __values(selected), selected_4_1 = selected_4.next(); !selected_4_1.done; selected_4_1 = selected_4.next()) {
+                    var value = selected_4_1.value;
+                    _loop_5(value);
+                }
+            }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            finally {
+                try {
+                    if (selected_4_1 && !selected_4_1.done && (_a = selected_4.return)) _a.call(selected_4);
+                }
+                finally { if (e_5) throw e_5.error; }
+            }
+        }
+        this.moveDownButton.nativeElement.disabled = false;
+    };
+    ColumnSelectorComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'app-column-selector',
+                    template: "<div>\n    <div class=\"modal-header\">\n      <h5 class=\"modal-title\">{{'Tables.SelectColumns' | translate}}</h5>\n      <button (click)=\"cancel()\"\n              type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Cancel\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    </div>\n    <div class=\"modal-body pt-0\">\n      <div class=\"row\">\n        <div class=\"col-12\">\n          <p [translate]=\"'Tables.SelectColumnHelp'\"></p>\n          <p [translate]=\"'Tables.MoveColumnHelp'\"></p>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-4\">\n            <select [formControl]=\"availableColumnsControl\" size=\"10\" class=\"form-select form-control\" multiple aria-label=\"multiple select example\">\n                <ng-container *ngIf=\"columns\">\n                  <ng-container *ngFor=\"let column of columns | orderBy: ['title']\">\n                    <option [value]=\"column.key\">{{column.title}}</option>\n                  </ng-container>\n                </ng-container>\n            </select>\n        </div>\n        <div class=\"col-4 d-flex justify-content-center align-items-center\">\n          <div class=\"col-9\">\n            <div>\n              <button [disabled]=\"!(availableColumnsControl.value && availableColumnsControl.value.length)\" (click)=\"addColumns()\" type=\"button\" class=\"btn btn-primary btn-block\">\n                <i class=\"fas fa-plus mr-2\"></i><span [translate]=\"'Tables.AddColumn'\"></span>\n              </button>\n            </div>\n            <div class=\"mt-3\">\n              <button [disabled]=\"!(selectedColumnsControl.value && selectedColumnsControl.value.length)\" (click)=\"removeColumns()\" type=\"button\" class=\"btn btn-secondary btn-block\">\n                <i class=\"fas fa-minus mr-2\"></i><span [translate]=\"'Tables.RemoveColumn'\"></span>\n              </button>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-4\">\n            <select [formControl]=\"selectedColumnsControl\" size=\"10\" class=\"form-select form-control\" multiple aria-label=\"multiple select example\">\n              <ng-container *ngIf=\"selectedColumns\">\n                <ng-container *ngFor=\"let column of selectedColumns\">\n                  <option [value]=\"column.key\">{{column.title}}</option>\n                </ng-container>\n              </ng-container>\n          </select>\n          <div class=\"d-flex justify-content-center align-items-center\">\n            <div class=\"btn-group mt-4\">\n              <button #moveUpButton (click)=\"moveUp()\" type=\"button\" class=\"btn btn-primary\">\n                <i class=\"fas fa-chevron-up mr-2\"></i><span [translate]=\"'Tables.MoveUp'\"></span>\n              </button>\n              <button #moveDownButton (click)=\"moveDown()\" type=\"button\" class=\"btn btn-primary ml-2\">\n                <i class=\"fas fa-chevron-down mr-2\"></i><span [translate]=\"'Tables.MoveDown'\"></span>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n        \n    </div>\n    <div class=\"modal-footer justify-content-end\">\n      <button [disabled]=\"okButtonDisabled\" (click)=\"ok()\"\n              type=\"button\" class=\"btn btn-primary\">\n        {{'OK' | translate}}\n      </button>\n      <button [disabled]=\"cancelButtonDisabled\"\n              (click)=\"cancel()\" type=\"button\" [ngClass]=\"cancelButtonClass\" data-dismiss=\"modal\">\n        {{'Cancel' | translate}}\n      </button>\n    </div>\n  </div>\n  ",
+                    encapsulation: ViewEncapsulation.None,
+                    styles: ["\n    .form-select {\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        appearance: none;\n        padding: 5px;\n    }\n    .form-select * {\n        padding: 5px 5px;\n    }\n    .btn.disabled, .btn:disabled {\n        border-color: transparent !important;\n    }\n    "]
+                }] }
+    ];
+    /** @nocollapse */
+    ColumnSelectorComponent.ctorParameters = function () { return [
+        { type: Router },
+        { type: ActivatedRoute },
+        { type: BsModalRef },
+        { type: ChangeDetectorRef },
+        { type: TranslateService }
+    ]; };
+    ColumnSelectorComponent.propDecorators = {
+        columns: [{ type: Input }],
+        selectedColumns: [{ type: Input }],
+        moveUpButton: [{ type: ViewChild, args: ['moveUpButton',] }],
+        moveDownButton: [{ type: ViewChild, args: ['moveDownButton',] }]
+    };
+    return ColumnSelectorComponent;
+}(RouterModalOkCancel));
+
+var ColumnSelectorService = /** @class */ (function () {
+    function ColumnSelectorService(_modal) {
+        this._modal = _modal;
+        //
+    }
+    ColumnSelectorService.prototype.selectColumns = function (columns) {
+        var _this = this;
+        return new Promise(function (resolve, reject) {
+            try {
+                var modalRef = _this._modal.openModalComponent(ColumnSelectorComponent, {
+                    class: 'modal-lg modal-table',
+                    ignoreBackdropClick: true,
+                    animated: true,
+                    initialState: {
+                        columns: columns,
+                    }
+                });
+                var componentRef_1 = modalRef.content;
+                componentRef_1.dismiss.subscribe(function (result) {
+                    if (result === 'ok') {
+                        return resolve({
+                            result: result,
+                            columns: componentRef_1.columns
+                        });
+                    }
+                    return resolve({
+                        result: result
+                    });
+                });
+            }
+            catch (err) {
+                return reject(err);
+            }
+        });
+    };
+    ColumnSelectorService.decorators = [
+        { type: Injectable }
+    ];
+    /** @nocollapse */
+    ColumnSelectorService.ctorParameters = function () { return [
+        { type: ModalService }
+    ]; };
+    return ColumnSelectorService;
+}());
+
 // restore jquery import to avoid Cannot call a namespace ('jquery') error
 var jQuery = jQuery_;
 var DataTablesApi = jQuery.fn.dataTable.Api;
@@ -576,7 +870,7 @@ function getRandomIdentifier() {
     return (Number(String(Math.random()).slice(2))).toString(36);
 }
 var AdvancedTableComponent = /** @class */ (function () {
-    function AdvancedTableComponent(_context, _columnFormatters, _activatedRoute, _translateService, _injector, _advancedFilterValueProvider, _element, _template, _loading, _http) {
+    function AdvancedTableComponent(_context, _columnFormatters, _activatedRoute, _translateService, _injector, _advancedFilterValueProvider, _element, _template, _loading, _http, _columnSelector) {
         var _this = this;
         this._context = _context;
         this._columnFormatters = _columnFormatters;
@@ -588,6 +882,7 @@ var AdvancedTableComponent = /** @class */ (function () {
         this._template = _template;
         this._loading = _loading;
         this._http = _http;
+        this._columnSelector = _columnSelector;
         this._firstLoad = true;
         this._showFooter = true;
         this._showHeader = true;
@@ -612,6 +907,7 @@ var AdvancedTableComponent = /** @class */ (function () {
         this.lengthMenu = [50, 100, 200, 500];
         this.paging = true;
         this.pageLength = 25;
+        this.columnOrdering = false;
         this.stateSave = false;
         this.scrollY = 800;
         this.scrollX = true;
@@ -1246,6 +1542,7 @@ var AdvancedTableComponent = /** @class */ (function () {
                 serverSide: this.serverSide,
                 // enumerate table columns
                 columns: tableColumns_1,
+                colReorder: this.columnOrdering,
                 order: [],
                 // set scroll x
                 scrollX: this.scrollX,
@@ -1680,6 +1977,69 @@ var AdvancedTableComponent = /** @class */ (function () {
         this.autoLoad = !!load;
         this.ngOnInit();
     };
+    AdvancedTableComponent.prototype.selectColumns = function () {
+        var _this = this;
+        // get column order e.g. [0, 4, 1, 2, 3]
+        var columnOrder = this.dataTable.colReorder.order();
+        // get column definitions
+        var columnDefs = this.dataTable.settings().init().columns;
+        var columns = columnDefs.map(function (columnDef, i) {
+            var key = "column-" + i;
+            var title = columnDef.title;
+            // get column index
+            var index = columnOrder.indexOf(i);
+            var visible = _this.dataTable.column(index).visible();
+            // set title for select column
+            if (i == 0 && _this.selectable) {
+                title = '<' + _this._translateService.instant('Tables.SelectColumn') + '>';
+            }
+            // get column title
+            if (title != null && title.length === 0) {
+                title = null;
+            }
+            if (title == null) {
+                // try to find column placeholder
+                var placeholder = null;
+                if (_this.selectable) {
+                    if (i > 0) {
+                        placeholder = _this.config.columns[i - 1].placeholder;
+                    }
+                }
+                else {
+                    placeholder = _this.config.columns[i].placeholder;
+                }
+                if (placeholder != null) {
+                    title = '<' + _this._translateService.instant(placeholder) + '>';
+                }
+            }
+            if (title == null) {
+                title = '<' + _this._translateService.instant('Tables.UnknownColumn') + '>';
+            }
+            return {
+                key: key,
+                title: title,
+                visible: visible,
+                index: index
+            };
+        });
+        this._columnSelector.selectColumns(columns).then(function (event) {
+            if (event.result === 'ok') {
+                // get column order e.g. [3, 1, 2, 0, 4]
+                var indexes = event.columns.map(function (item) {
+                    return item.index;
+                });
+                // reset column visibilty
+                for (var index = 0; index < event.columns.length; index++) {
+                    var element = event.columns[index];
+                    var colIndex = columnOrder.indexOf(index);
+                    // set visibilty with redraw (=true)
+                    _this.dataTable.column(colIndex).visible(element.visible, true);
+                }
+                // finally apply column order
+                _this.dataTable.colReorder.order(indexes, true);
+            }
+        });
+    };
     AdvancedTableComponent.decorators = [
         { type: Component, args: [{
                     // tslint:disable-next-line: component-selector
@@ -1700,7 +2060,8 @@ var AdvancedTableComponent = /** @class */ (function () {
         { type: ElementRef },
         { type: TemplatePipe },
         { type: LoadingService },
-        { type: HttpClient }
+        { type: HttpClient },
+        { type: ColumnSelectorService }
     ]; };
     AdvancedTableComponent.propDecorators = {
         table: [{ type: ViewChild, args: ['table',] }],
@@ -1723,6 +2084,7 @@ var AdvancedTableComponent = /** @class */ (function () {
         lengthMenu: [{ type: Input }],
         paging: [{ type: Input }],
         pageLength: [{ type: Input }],
+        columnOrdering: [{ type: Input }],
         stateSave: [{ type: Input }],
         stateLoadCallback: [{ type: Input }],
         stateSaveCallback: [{ type: Input }],
@@ -4339,7 +4701,7 @@ var AddItemsComponent = /** @class */ (function (_super) {
     AddItemsComponent.decorators = [
         { type: Component, args: [{
                     selector: 'app-add-items',
-                    template: "<div>\n  <div class=\"modal-header\" *ngIf=\"modalTitle\">\n    <h5 class=\"modal-title\">{{modalTitle | translate}}</h5>\n    <button (click)=\"cancel()\" [disabled]=\"loading\"\n            type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Cancel\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n  <div class=\"modal-body pt-0\">\n    <div class=\"row\" *ngIf=\"lastError\">\n      <div class=\"alert alert-danger col-12\" role=\"alert\">\n        <span [translate]=\"'E' + (lastError.statusCode || 500) + '.title'\"></span><br>\n        <small *ngIf=\"lastError.statusCode >= 0\" [translate]=\"'E' + (lastError.statusCode || 500) + '.message'\"></small>\n        <small *ngIf=\"lastError.statusCode == null\">{{lastError.message}}</small>\n      </div>\n    </div>\n    <div class=\"row d-none\" *ngIf=\"items\">\n      <div class=\"col-12\">\n        <p [translate]=\"'StudyPrograms.AddCoursesHelp'\" [translateParams]=\"items\" ></p>\n      </div>\n    </div>\n    <div class=\"row mt-3\">\n      <div class=\"col-12\">\n        <ng-container>\n          <ul style=\"margin-left: -24px\" class=\"nav nav-tabs mb-1\" id=\"myTab\" role=\"tablist\">\n            <li class=\"nav-item\" *ngIf=\"tableConfiguration\">\n              <a class=\"nav-link active\" id=\"courses-tab\" data-toggle=\"tab\" href=\"#courses\" role=\"tab\" aria-controls=\"home\" aria-selected=\"true\" [translate]=\"'AddItems.SelectCourses'\" ></a>\n            </li>\n            <li class=\"nav-item\" *ngIf=\"formName\">\n              <a class=\"nav-link\" [ngClass]=\"{ 'disabled': !(selectComponent.advancedTable.selected && selectComponent.advancedTable.selected.length) }\" id=\"attributes-tab\" data-toggle=\"tab\" href=\"#attributes\" role=\"tab\" aria-controls=\"profile\" aria-selected=\"false\" [translate]=\"'AddItems.EditAttributes'\"></a>\n            </li>\n            <li class=\"nav-item\" *ngIf=\"messages && messages.length > 0\">\n              <a class=\"nav-link\"  id=\"messages-tab\" data-toggle=\"tab\" href=\"#messages\" role=\"tab\" aria-controls=\"profile\" aria-selected=\"false\" [translate]=\"'AddItems.Messages'\"></a>\n            </li>\n          </ul>\n          <div class=\"tab-content border-0\" id=\"myTabContent\">\n            <div class=\"tab-pane fade show active\" id=\"courses\" role=\"tabpanel\" aria-labelledby=\"home-tab\">\n              <app-advanced-table-modal #selectComponent (filter)=\"onFilterChange($event)\" [tableConfig]=\"tableConfiguration\"></app-advanced-table-modal>\n            </div>\n            <div class=\"tab-pane fade\" id=\"attributes\" role=\"tabpanel\" aria-labelledby=\"profile-tab\"\n                 [ngClass]=\"{'invisible':(formName == null)}\">\n<!--              <advanced-form-edit #formComponent [formName]=\"formName\" ></advanced-form-edit>-->\n            </div>\n            <div class=\"tab-pane fade\" id=\"messages\" role=\"tabpanel\" aria-labelledby=\"profile-tab\"\n                 [ngClass]=\"{'invisible':(messages == null)}\">\n              <ul *ngIf=\"messages && messages.length>0\" class=\"sis--list-group sis--list-group-header\">\n                <li class=\"sis--list-group-item\">\n                  <div class=\"d-flex justify-content-center align-items-center\">\n                    <div class=\"sis--list-group-item_lg_column\" [translate]=\"'AddItems.Messages'\"></div>\n                  </div>\n                </li>\n              </ul>\n              <ul class=\"sis--list-group sis--list-group-body\">\n                <li *ngFor=\"let message of messages\" class=\"sis--list-group-item\">\n                  <div class=\"d-flex justify-content-center align-items-center list-color\">\n                    <div class=\"sis--list-group-item_lg_column\">{{ message?.message }}</div>\n                  </div>\n                </li>\n              </ul>\n              <div *ngIf=\"messages && messages.length>0\">\n                <button [disabled]=\"loading\" (click)=\"clearMessages()\" type=\"button\" class=\"btn btn-indigo mt-3\">\n                  {{'Clear' | translate}}\n                </button>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"modal-footer justify-content-end\">\n    <button [disabled]=\"okButtonDisabled || loading || !(selectComponent.advancedTable.selected && selectComponent.advancedTable.selected.length) \" (click)=\"ok()\"\n            type=\"button\" [ngClass]=\"okButtonClass\">\n      {{'OK' | translate}}\n    </button>\n    <button [disabled]=\"cancelButtonDisabled || loading\"\n            (click)=\"cancel()\" type=\"button\" [ngClass]=\"cancelButtonClass\" data-dismiss=\"modal\">\n      {{'Cancel' | translate}}\n    </button>\n  </div>\n</div>\n"
+                    template: "<div>\n  <div class=\"modal-header\" *ngIf=\"modalTitle\">\n    <h5 class=\"modal-title\">{{modalTitle | translate}}</h5>\n    <button (click)=\"cancel()\" [disabled]=\"loading\"\n            type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Cancel\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n  <div class=\"modal-body pt-0\">\n    <div class=\"row\" *ngIf=\"lastError\">\n      <div class=\"alert alert-danger col-12\" role=\"alert\">\n        <span [translate]=\"'E' + (lastError.statusCode || 500) + '.title'\"></span><br>\n        <small *ngIf=\"lastError.statusCode >= 0\" [translate]=\"'E' + (lastError.statusCode || 500) + '.message'\"></small>\n        <small *ngIf=\"lastError.statusCode == null\">{{lastError.message}}</small>\n      </div>\n    </div>\n    <div class=\"row d-none\" *ngIf=\"items\">\n      <div class=\"col-12\">\n        <p [translate]=\"'StudyPrograms.AddCoursesHelp'\" [translateParams]=\"items\" ></p>\n      </div>\n    </div>\n    <div class=\"row mt-3\">\n      <div class=\"col-12\">\n        <ng-container>\n          <ul style=\"margin-left: -24px\" class=\"nav nav-tabs mb-1\" id=\"myTab\" role=\"tablist\">\n            <li class=\"nav-item\" *ngIf=\"tableConfiguration\">\n              <a class=\"nav-link active\" id=\"courses-tab\" data-toggle=\"tab\" href=\"#courses\" role=\"tab\" aria-controls=\"home\" aria-selected=\"true\" [translate]=\"'AddItems.SelectItems'\" ></a>\n            </li>\n            <li class=\"nav-item\" *ngIf=\"formName\">\n              <a class=\"nav-link\" [ngClass]=\"{ 'disabled': !(selectComponent.advancedTable.selected && selectComponent.advancedTable.selected.length) }\" id=\"attributes-tab\" data-toggle=\"tab\" href=\"#attributes\" role=\"tab\" aria-controls=\"profile\" aria-selected=\"false\" [translate]=\"'AddItems.EditAttributes'\"></a>\n            </li>\n            <li class=\"nav-item\" *ngIf=\"messages && messages.length > 0\">\n              <a class=\"nav-link\"  id=\"messages-tab\" data-toggle=\"tab\" href=\"#messages\" role=\"tab\" aria-controls=\"profile\" aria-selected=\"false\" [translate]=\"'AddItems.Messages'\"></a>\n            </li>\n          </ul>\n          <div class=\"tab-content border-0\" id=\"myTabContent\">\n            <div class=\"tab-pane fade show active\" id=\"courses\" role=\"tabpanel\" aria-labelledby=\"home-tab\">\n              <app-advanced-table-modal #selectComponent (filter)=\"onFilterChange($event)\" [tableConfig]=\"tableConfiguration\"></app-advanced-table-modal>\n            </div>\n            <div class=\"tab-pane fade\" id=\"attributes\" role=\"tabpanel\" aria-labelledby=\"profile-tab\"\n                 [ngClass]=\"{'invisible':(formName == null)}\">\n<!--              <advanced-form-edit #formComponent [formName]=\"formName\" ></advanced-form-edit>-->\n            </div>\n            <div class=\"tab-pane fade\" id=\"messages\" role=\"tabpanel\" aria-labelledby=\"profile-tab\"\n                 [ngClass]=\"{'invisible':(messages == null)}\">\n              <ul *ngIf=\"messages && messages.length>0\" class=\"sis--list-group sis--list-group-header\">\n                <li class=\"sis--list-group-item\">\n                  <div class=\"d-flex justify-content-center align-items-center\">\n                    <div class=\"sis--list-group-item_lg_column\" [translate]=\"'AddItems.Messages'\"></div>\n                  </div>\n                </li>\n              </ul>\n              <ul class=\"sis--list-group sis--list-group-body\">\n                <li *ngFor=\"let message of messages\" class=\"sis--list-group-item\">\n                  <div class=\"d-flex justify-content-center align-items-center list-color\">\n                    <div class=\"sis--list-group-item_lg_column\">{{ message?.message }}</div>\n                  </div>\n                </li>\n              </ul>\n              <div *ngIf=\"messages && messages.length>0\">\n                <button [disabled]=\"loading\" (click)=\"clearMessages()\" type=\"button\" class=\"btn btn-indigo mt-3\">\n                  {{'Clear' | translate}}\n                </button>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"modal-footer justify-content-end\">\n    <button [disabled]=\"okButtonDisabled || loading || !(selectComponent.advancedTable.selected && selectComponent.advancedTable.selected.length) \" (click)=\"ok()\"\n            type=\"button\" [ngClass]=\"okButtonClass\">\n      {{'OK' | translate}}\n    </button>\n    <button [disabled]=\"cancelButtonDisabled || loading\"\n            (click)=\"cancel()\" type=\"button\" [ngClass]=\"cancelButtonClass\" data-dismiss=\"modal\">\n      {{'Cancel' | translate}}\n    </button>\n  </div>\n</div>\n"
                 }] }
     ];
     /** @nocollapse */
@@ -4517,7 +4879,16 @@ var TABLES_EL = {
             "CompletedWithSuccess": {
                 "Title": "Η διαδικασία ολοκληρώθηκε με επιτυχία."
             }
-        }
+        },
+        "SelectColumns": "Επιλογή στηλών",
+        "MoveUp": "Επάνω",
+        "MoveDown": "Κάτω",
+        "AddColumn": "Επιλογή",
+        "RemoveColumn": "Αφαίρεση",
+        "SelectColumnHelp": "Επιλέξτε μία ή περισσότερες από τις διαθέσιμες στήλες και πατήστε το πλήκτρο 'Επιλογή' για να τις εμφανίσετε. Χρησιμοποιήστε το πλήκτρο 'Αφαίρεση' για να αφαιρέσετε τις επιλεγμένες στήλες.",
+        "MoveColumnHelp": "Χρησιμοποιήστε τα πλήκτρα 'Επάνω' και 'Κάτω' για να αλλάξετε την σειρά εμφάνισης των στηλών του πίνακα.",
+        "UnknownColumn": "Άγνωστο",
+        "SelectColumn": "Επιλογή"
     },
     "TrueFalse": {
         "long": {
@@ -4552,6 +4923,9 @@ var TABLES_EL = {
             "Decline": "Απόρριψη",
             "Close": "Κλείσιμο"
         }
+    },
+    "AddItems": {
+        "SelectItems": "Επιλέξτε στοιχεία",
     }
 };
 
@@ -4623,7 +4997,16 @@ var TABLES_EN = {
             "CompletedWithSuccess": {
                 "Title": "The operation was completed successfully."
             }
-        }
+        },
+        "SelectColumns": "Select columns",
+        "MoveUp": "Move up",
+        "MoveDown": "Move down",
+        "AddColumn": "Add",
+        "RemoveColumn": "Remove",
+        "SelectColumnHelp": "Select one or more columns and press 'Add' button to include them in table. Use 'Remove' button to exclude one or more columns from view.",
+        "MoveColumnHelp": "Use 'Move up' and 'Move down' buttons to change column order.",
+        "UnknownColumn": "Unknown",
+        "SelectColumn": "Select"
     },
     "TrueFalse": {
         "long": {
@@ -4658,6 +5041,9 @@ var TABLES_EN = {
             "Decline": "Decline",
             "Close": "Close"
         }
+    },
+    "AddItems": {
+        "SelectItems": "Select items",
     }
 };
 
@@ -4978,6 +5364,7 @@ var TablesModule = /** @class */ (function () {
                         AdvancedSearchConfigurationResolver,
                         AdvancedSelectService,
                         AdvancedAggregatorService,
+                        ColumnSelectorService,
                         GroupByPipe
                     ],
                     declarations: [
@@ -5001,7 +5388,8 @@ var TablesModule = /** @class */ (function () {
                         AddItemsComponent,
                         AdvancedSearchState,
                         AdvancedTableState,
-                        AdvancedSearchRouterState
+                        AdvancedSearchRouterState,
+                        ColumnSelectorComponent
                     ],
                     exports: [
                         AdvancedTableComponent,
@@ -5020,14 +5408,16 @@ var TablesModule = /** @class */ (function () {
                         AddItemsComponent,
                         AdvancedSearchState,
                         AdvancedTableState,
-                        AdvancedSearchRouterState
+                        AdvancedSearchRouterState,
+                        ColumnSelectorComponent
                     ],
                     entryComponents: [
                         AdvancedTableModalBaseComponent,
                         AdvancedTableSettingsComponent,
                         AdvancedRowActionComponent,
                         AdvancedSelectComponent,
-                        AddItemsComponent
+                        AddItemsComponent,
+                        ColumnSelectorComponent
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA]
                 },] }
@@ -5047,6 +5437,6 @@ var TablesModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { AdvancedSearchState as ɵa, AdvancedTableState as ɵc, AdvancedSearchRouterState as ɵd, AdvancedListComponent, AdvancedRowActionComponent, AdvancedSearchFormComponent, AdvancedSelectComponent, AdvancedSelectService, AdvancedTableConfigurationResolver, AdvancedSearchConfigurationResolver, AdvancedColumnFormatter, NestedPropertyFormatter, ButtonFormatter, LinkFormatter, ActionLinkFormatter, ActionButtonFormatter, ActionSplitButtonFormatter, SelectRowFormatter, TemplateFormatter, TrueFalseFormatter, TranslationFormatter, DateTimeFormatter, NgClassFormatter, LanguageFormatter, COLUMN_FORMATTERS, AdvancedTableConfiguration, AdvancedTableComponent, AdvancedTableSettingsComponent, AdvancedTableSearchBaseComponent, AdvancedTableSearchComponent, FORMATTERS, AdvancedFilterValueProvider, AdvancedTableModalBaseTemplate, AdvancedTableModalBaseComponent, SimpleHeaderToolsComponent, TableSimpleHeaderComponent, AdvancedTableNotNullError, AdvancedTableEditorDirective, BtnExpDirective, AdvancedAggregatorComponent, AdvancedAggregatorListComponent, AddItemsComponent, AdvancedAggregatorPipe, ParseTitlePipe, AdvancedAggregatorService, TablesModule, ɵ0, ActivatedTableService, initialState, tableInitialState, tableReducer, tableReducers, featureName, getTablesState, selectTable };
+export { AdvancedSearchState as ɵa, AdvancedTableState as ɵc, AdvancedSearchRouterState as ɵd, AdvancedListComponent, AdvancedRowActionComponent, AdvancedSearchFormComponent, AdvancedSelectComponent, AdvancedSelectService, AdvancedTableConfigurationResolver, AdvancedSearchConfigurationResolver, AdvancedColumnFormatter, NestedPropertyFormatter, ButtonFormatter, LinkFormatter, ActionLinkFormatter, ActionButtonFormatter, ActionSplitButtonFormatter, SelectRowFormatter, TemplateFormatter, TrueFalseFormatter, TranslationFormatter, DateTimeFormatter, NgClassFormatter, LanguageFormatter, COLUMN_FORMATTERS, AdvancedTableConfiguration, AdvancedTableComponent, AdvancedTableSettingsComponent, AdvancedTableSearchBaseComponent, AdvancedTableSearchComponent, FORMATTERS, AdvancedFilterValueProvider, AdvancedTableModalBaseTemplate, AdvancedTableModalBaseComponent, SimpleHeaderToolsComponent, TableSimpleHeaderComponent, AdvancedTableNotNullError, AdvancedTableEditorDirective, BtnExpDirective, AdvancedAggregatorComponent, AdvancedAggregatorListComponent, AddItemsComponent, AdvancedAggregatorPipe, ParseTitlePipe, AdvancedAggregatorService, TablesModule, ɵ0, ActivatedTableService, ColumnSelectorService, ColumnSelectorComponent, initialState, tableInitialState, tableReducer, tableReducers, featureName, getTablesState, selectTable };
 
 //# sourceMappingURL=universis-ngx-tables.js.map