@universis/ngx-tables 0.7.19 → 0.7.23

package/bundles/universis-ngx-tables.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('iso-639-1/build'), require('rxjs'), require('jquery'), require('datatables.net'), require('datatables.net-scroller'), require('rxjs/add/observable/combineLatest'), require('@angular/common/http'), require('@themost/client'), require('@themost/angular'), require('@angular/common'), require('@ngx-translate/core'), require('@angular/forms'), require('@universis/common'), require('@universis/common/routing'), require('@universis/forms'), require('angular-formio'), require('ngx-bootstrap/modal'), require('ngx-bootstrap/progressbar'), require('ngx-pipes'), require('lodash'), require('@angular/core'), require('@angular/router'), require('@ngrx/store'), require('rxjs/operators')) :
-    typeof define === 'function' && define.amd ? define('@universis/ngx-tables', ['exports', 'iso-639-1/build', 'rxjs', 'jquery', 'datatables.net', 'datatables.net-scroller', 'rxjs/add/observable/combineLatest', '@angular/common/http', '@themost/client', '@themost/angular', '@angular/common', '@ngx-translate/core', '@angular/forms', '@universis/common', '@universis/common/routing', '@universis/forms', 'angular-formio', 'ngx-bootstrap/modal', 'ngx-bootstrap/progressbar', 'ngx-pipes', 'lodash', '@angular/core', '@angular/router', '@ngrx/store', 'rxjs/operators'], factory) :
-    (factory((global.universis = global.universis || {}, global.universis['ngx-tables'] = {}),global.ISO6391,global.rxjs,global.jQuery_,null,null,global.rxjs['add/observable/combineLatest'],global.ng.common.http,global.client,global.i1,global.ng.common,global.core,global.ng.forms,global.i2,global.routing,global.forms$1,global.angularFormio,global.modal,global.progressbar,global.ngxPipes,global.lodash,global.ng.core,global.ng.router,global.store,global.rxjs.operators));
-}(this, (function (exports,ISO6391,rxjs,jQuery_,datatables_net,datatables_netScroller,combineLatest,http,client,i1,common,core,forms,i2,routing,forms$1,angularFormio,modal,progressbar,ngxPipes,lodash,i0,i1$1,store,operators) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('iso-639-1/build'), require('rxjs'), require('jquery'), require('datatables.net'), require('datatables.net-scroller'), require('datatables.net-colreorder'), require('rxjs/add/observable/combineLatest'), require('@angular/common/http'), require('@themost/client'), require('@themost/angular'), require('@angular/common'), require('@ngx-translate/core'), require('@angular/forms'), require('@universis/common'), require('@universis/common/routing'), require('@universis/forms'), require('angular-formio'), require('ngx-bootstrap/modal'), require('ngx-bootstrap/progressbar'), require('ngx-pipes'), require('lodash'), require('@angular/core'), require('@angular/router'), require('@ngrx/store'), require('rxjs/operators')) :
+    typeof define === 'function' && define.amd ? define('@universis/ngx-tables', ['exports', 'iso-639-1/build', 'rxjs', 'jquery', 'datatables.net', 'datatables.net-scroller', 'datatables.net-colreorder', 'rxjs/add/observable/combineLatest', '@angular/common/http', '@themost/client', '@themost/angular', '@angular/common', '@ngx-translate/core', '@angular/forms', '@universis/common', '@universis/common/routing', '@universis/forms', 'angular-formio', 'ngx-bootstrap/modal', 'ngx-bootstrap/progressbar', 'ngx-pipes', 'lodash', '@angular/core', '@angular/router', '@ngrx/store', 'rxjs/operators'], factory) :
+    (factory((global.universis = global.universis || {}, global.universis['ngx-tables'] = {}),global.ISO6391,global.rxjs,global.jQuery_,null,null,null,global.rxjs['add/observable/combineLatest'],global.ng.common.http,global.client,global.i1,global.ng.common,global.core,global.ng.forms,global.i2,global.routing,global.forms$1,global.angularFormio,global.modal,global.progressbar,global.ngxPipes,global.lodash,global.ng.core,global.ng.router,global.store,global.rxjs.operators));
+}(this, (function (exports,ISO6391,rxjs,jQuery_,datatables_net,datatables_netScroller,datatables_netColreorder,combineLatest,http,client,i1,common,core,forms,i2,routing,forms$1,angularFormio,modal,progressbar,ngxPipes,lodash,i0,i1$1,store,operators) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -242,7 +242,7 @@
                 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,
@@ -697,6 +697,333 @@
         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 i0.EventEmitter();
+            _this.availableColumnsControl = new forms.FormControl();
+            _this.selectedColumnsControl = new forms.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: i0.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: i0.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: i1$1.Router },
+                { type: i1$1.ActivatedRoute },
+                { type: modal.BsModalRef },
+                { type: i0.ChangeDetectorRef },
+                { type: core.TranslateService }
+            ];
+        };
+        ColumnSelectorComponent.propDecorators = {
+            columns: [{ type: i0.Input }],
+            selectedColumns: [{ type: i0.Input }],
+            moveUpButton: [{ type: i0.ViewChild, args: ['moveUpButton',] }],
+            moveDownButton: [{ type: i0.ViewChild, args: ['moveDownButton',] }]
+        };
+        return ColumnSelectorComponent;
+    }(routing.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: i0.Injectable }
+        ];
+        /** @nocollapse */
+        ColumnSelectorService.ctorParameters = function () {
+            return [
+                { type: i2.ModalService }
+            ];
+        };
+        return ColumnSelectorService;
+    }());
+
     // restore jquery import to avoid Cannot call a namespace ('jquery') error
     var jQuery = jQuery_;
     var DataTablesApi = jQuery.fn.dataTable.Api;
@@ -753,7 +1080,7 @@
         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;
@@ -765,6 +1092,7 @@
             this._template = _template;
             this._loading = _loading;
             this._http = _http;
+            this._columnSelector = _columnSelector;
             this._firstLoad = true;
             this._showFooter = true;
             this._showHeader = true;
@@ -789,6 +1117,7 @@
             this.lengthMenu = [50, 100, 200, 500];
             this.paging = true;
             this.pageLength = 25;
+            this.columnOrdering = false;
             this.stateSave = false;
             this.scrollY = 800;
             this.scrollX = true;
@@ -1423,6 +1752,7 @@
                     serverSide: this.serverSide,
                     // enumerate table columns
                     columns: tableColumns_1,
+                    colReorder: this.columnOrdering,
                     order: [],
                     // set scroll x
                     scrollX: this.scrollX,
@@ -1857,6 +2187,69 @@
             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: i0.Component, args: [{
                         // tslint:disable-next-line: component-selector
@@ -1878,7 +2271,8 @@
                 { type: i0.ElementRef },
                 { type: i2.TemplatePipe },
                 { type: i2.LoadingService },
-                { type: http.HttpClient }
+                { type: http.HttpClient },
+                { type: ColumnSelectorService }
             ];
         };
         AdvancedTableComponent.propDecorators = {
@@ -1902,6 +2296,7 @@
             lengthMenu: [{ type: i0.Input }],
             paging: [{ type: i0.Input }],
             pageLength: [{ type: i0.Input }],
+            columnOrdering: [{ type: i0.Input }],
             stateSave: [{ type: i0.Input }],
             stateLoadCallback: [{ type: i0.Input }],
             stateSaveCallback: [{ type: i0.Input }],
@@ -4594,7 +4989,7 @@
         AddItemsComponent.decorators = [
             { type: i0.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 */
@@ -4776,7 +5171,16 @@
                 "CompletedWithSuccess": {
                     "Title": "Η διαδικασία ολοκληρώθηκε με επιτυχία."
                 }
-            }
+            },
+            "SelectColumns": "Επιλογή στηλών",
+            "MoveUp": "Επάνω",
+            "MoveDown": "Κάτω",
+            "AddColumn": "Επιλογή",
+            "RemoveColumn": "Αφαίρεση",
+            "SelectColumnHelp": "Επιλέξτε μία ή περισσότερες από τις διαθέσιμες στήλες και πατήστε το πλήκτρο 'Επιλογή' για να τις εμφανίσετε. Χρησιμοποιήστε το πλήκτρο 'Αφαίρεση' για να αφαιρέσετε τις επιλεγμένες στήλες.",
+            "MoveColumnHelp": "Χρησιμοποιήστε τα πλήκτρα 'Επάνω' και 'Κάτω' για να αλλάξετε την σειρά εμφάνισης των στηλών του πίνακα.",
+            "UnknownColumn": "Άγνωστο",
+            "SelectColumn": "Επιλογή"
         },
         "TrueFalse": {
             "long": {
@@ -4811,6 +5215,9 @@
                 "Decline": "Απόρριψη",
                 "Close": "Κλείσιμο"
             }
+        },
+        "AddItems": {
+            "SelectItems": "Επιλέξτε στοιχεία",
         }
     };
 
@@ -4882,7 +5289,16 @@
                 "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": {
@@ -4917,6 +5333,9 @@
                 "Decline": "Decline",
                 "Close": "Close"
             }
+        },
+        "AddItems": {
+            "SelectItems": "Select items",
         }
     };
 
@@ -5245,6 +5664,7 @@
                             AdvancedSearchConfigurationResolver,
                             AdvancedSelectService,
                             AdvancedAggregatorService,
+                            ColumnSelectorService,
                             ngxPipes.GroupByPipe
                         ],
                         declarations: [
@@ -5268,7 +5688,8 @@
                             AddItemsComponent,
                             AdvancedSearchState,
                             AdvancedTableState,
-                            AdvancedSearchRouterState
+                            AdvancedSearchRouterState,
+                            ColumnSelectorComponent
                         ],
                         exports: [
                             AdvancedTableComponent,
@@ -5287,14 +5708,16 @@
                             AddItemsComponent,
                             AdvancedSearchState,
                             AdvancedTableState,
-                            AdvancedSearchRouterState
+                            AdvancedSearchRouterState,
+                            ColumnSelectorComponent
                         ],
                         entryComponents: [
                             AdvancedTableModalBaseComponent,
                             AdvancedTableSettingsComponent,
                             AdvancedRowActionComponent,
                             AdvancedSelectComponent,
-                            AddItemsComponent
+                            AddItemsComponent,
+                            ColumnSelectorComponent
                         ],
                         schemas: [i0.CUSTOM_ELEMENTS_SCHEMA]
                     },] }
@@ -5364,6 +5787,8 @@
     exports.TablesModule = TablesModule;
     exports.ɵ0 = ɵ0;
     exports.ActivatedTableService = ActivatedTableService;
+    exports.ColumnSelectorService = ColumnSelectorService;
+    exports.ColumnSelectorComponent = ColumnSelectorComponent;
     exports.initialState = initialState;
     exports.tableInitialState = tableInitialState;
     exports.tableReducer = tableReducer;