@universis/ngx-tables 0.7.19 → 0.7.23

package/fesm2015/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';
@@ -10,8 +11,8 @@ import { AngularDataContext } from '@themost/angular';
 import { __awaiter } from 'tslib';
 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';
@@ -88,7 +89,7 @@ class AdvancedColumnFormatter {
             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,
                 replaceUrl,
@@ -135,7 +136,7 @@ class ButtonFormatter extends AdvancedColumnFormatter {
             buttonTitle = this.injector.get(TranslateService).instant(formatOptions.buttonTitle);
         }
         if (Array.isArray(this.formatOptions.commands)) {
-            const routerLink = this.createUrlTree(row, this.formatOptions);
+            let routerLink = this.createUrlTree(row, this.formatOptions);
             return `<a class="${formatOptions.buttonClass}" title="${buttonTitle}" href="#${routerLink}">${buttonText}</a>`;
         }
         // and return button
@@ -472,6 +473,232 @@ AdvancedFilterValueProvider.decorators = [
 AdvancedFilterValueProvider.ctorParameters = () => [];
 AdvancedFilterValueProvider.ngInjectableDef = defineInjectable({ factory: function AdvancedFilterValueProvider_Factory() { return new AdvancedFilterValueProvider(); }, token: AdvancedFilterValueProvider, providedIn: "root" });
 
+class ColumnSelectorComponent extends RouterModalOkCancel {
+    constructor(router, activatedRoute, _modalRef, ref, _translateService) {
+        super(router, activatedRoute);
+        this._modalRef = _modalRef;
+        this.ref = ref;
+        this._translateService = _translateService;
+        this.dismiss = new EventEmitter();
+        this.availableColumnsControl = new FormControl();
+        this.selectedColumnsControl = new FormControl();
+    }
+    ok() {
+        this._modalRef.hide();
+        this.applyChanges();
+        this.dismiss.emit('ok');
+        return Promise.resolve('ok');
+    }
+    cancel() {
+        this._modalRef.hide();
+        this.dismiss.emit('cancel');
+        return Promise.resolve('cancel');
+    }
+    ngOnChanges(changes) {
+        //
+    }
+    ngOnDestroy() {
+        //
+    }
+    ngOnInit() {
+        if (Array.isArray(this.columns)) {
+            this.selectedColumns = this.columns.filter((item) => {
+                return item.visible;
+            }).sort((a, b) => {
+                if (a.index < b.index) {
+                    return -1;
+                }
+                if (a.index > b.index) {
+                    return 1;
+                }
+                return 0;
+            }).map((item) => {
+                return {
+                    key: item.key,
+                    title: item.title
+                };
+            });
+        }
+    }
+    applyChanges() {
+        let moveIndex = this.selectedColumns.length - 1;
+        for (const column of this.columns) {
+            const findIndex = this.selectedColumns.findIndex((item) => {
+                return item.key === column.key;
+            });
+            if (findIndex < 0) {
+                column.visible = false;
+                moveIndex += 1;
+                column.index = moveIndex;
+            }
+            else {
+                column.visible = true;
+                column.index = findIndex;
+            }
+        }
+    }
+    removeColumns() {
+        const selected = this.selectedColumnsControl.value;
+        if (selected.length > 0) {
+            for (const value of selected) {
+                let findIndex = this.selectedColumns.findIndex((item) => {
+                    return item.key === value;
+                });
+                if (findIndex >= 0) {
+                    this.selectedColumns.splice(findIndex, 1);
+                }
+            }
+            // reset column
+            this.selectedColumnsControl.reset();
+        }
+    }
+    addColumns() {
+        const selected = this.availableColumnsControl.value;
+        if (selected.length > 0) {
+            for (const value of selected) {
+                let findColumn = this.columns.find((item) => {
+                    return item.key === value;
+                });
+                if (findColumn) {
+                    const findIndex = this.selectedColumns.findIndex((item) => {
+                        return item.key === value;
+                    });
+                    if (findIndex < 0) {
+                        this.selectedColumns.push({
+                            key: findColumn.key,
+                            title: findColumn.title
+                        });
+                    }
+                }
+            }
+            // find the last index of the selected items
+            const lastSelectedIndex = this.columns.findIndex((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
+                ]);
+            }
+        }
+    }
+    moveUp() {
+        this.moveUpButton.nativeElement.disabled = true;
+        const selected = this.selectedColumnsControl.value;
+        if (selected.length > 0) {
+            for (const value of selected) {
+                const findIndex = this.selectedColumns.findIndex((item) => {
+                    return item.key === value;
+                });
+                if (findIndex > 0) {
+                    const column = this.selectedColumns[findIndex];
+                    this.selectedColumns.splice(findIndex, 1);
+                    this.selectedColumns.splice(findIndex - 1, 0, column);
+                }
+            }
+        }
+        this.moveUpButton.nativeElement.disabled = false;
+    }
+    moveDown() {
+        this.moveDownButton.nativeElement.disabled = true;
+        const selected = this.selectedColumnsControl.value;
+        if (selected.length > 0) {
+            for (const value of selected) {
+                let findIndex = this.selectedColumns.findIndex((item) => {
+                    return item.key === value;
+                });
+                const length = this.columns.length;
+                if (findIndex >= 0 && findIndex < length) {
+                    const column = this.selectedColumns[findIndex];
+                    this.selectedColumns.splice(findIndex, 1);
+                    this.selectedColumns.splice(findIndex + 1, 0, column);
+                }
+            }
+        }
+        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: [`
+    .form-select {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        padding: 5px;
+    }
+    .form-select * {
+        padding: 5px 5px;
+    }
+    .btn.disabled, .btn:disabled {
+        border-color: transparent !important;
+    }
+    `]
+            }] }
+];
+/** @nocollapse */
+ColumnSelectorComponent.ctorParameters = () => [
+    { 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',] }]
+};
+
+class ColumnSelectorService {
+    constructor(_modal) {
+        this._modal = _modal;
+        //
+    }
+    selectColumns(columns) {
+        return new Promise((resolve, reject) => {
+            try {
+                const modalRef = this._modal.openModalComponent(ColumnSelectorComponent, {
+                    class: 'modal-lg modal-table',
+                    ignoreBackdropClick: true,
+                    animated: true,
+                    initialState: {
+                        columns: columns,
+                    }
+                });
+                const componentRef = modalRef.content;
+                componentRef.dismiss.subscribe((result) => {
+                    if (result === 'ok') {
+                        return resolve({
+                            result: result,
+                            columns: componentRef.columns
+                        });
+                    }
+                    return resolve({
+                        result: result
+                    });
+                });
+            }
+            catch (err) {
+                return reject(err);
+            }
+        });
+    }
+}
+ColumnSelectorService.decorators = [
+    { type: Injectable }
+];
+/** @nocollapse */
+ColumnSelectorService.ctorParameters = () => [
+    { type: ModalService }
+];
+
 // restore jquery import to avoid Cannot call a namespace ('jquery') error
 const jQuery = jQuery_;
 const DataTablesApi = jQuery.fn.dataTable.Api;
@@ -517,7 +744,7 @@ function getRandomIdentifier() {
     return (Number(String(Math.random()).slice(2))).toString(36);
 }
 class AdvancedTableComponent {
-    constructor(_context, _columnFormatters, _activatedRoute, _translateService, _injector, _advancedFilterValueProvider, _element, _template, _loading, _http) {
+    constructor(_context, _columnFormatters, _activatedRoute, _translateService, _injector, _advancedFilterValueProvider, _element, _template, _loading, _http, _columnSelector) {
         this._context = _context;
         this._columnFormatters = _columnFormatters;
         this._activatedRoute = _activatedRoute;
@@ -528,6 +755,7 @@ class AdvancedTableComponent {
         this._template = _template;
         this._loading = _loading;
         this._http = _http;
+        this._columnSelector = _columnSelector;
         this._firstLoad = true;
         this._showFooter = true;
         this._showHeader = true;
@@ -552,6 +780,7 @@ class AdvancedTableComponent {
         this.lengthMenu = [50, 100, 200, 500];
         this.paging = true;
         this.pageLength = 25;
+        this.columnOrdering = false;
         this.stateSave = false;
         this.scrollY = 800;
         this.scrollX = true;
@@ -1164,6 +1393,7 @@ class AdvancedTableComponent {
                 serverSide: this.serverSide,
                 // enumerate table columns
                 columns: tableColumns,
+                colReorder: this.columnOrdering,
                 order: [],
                 // set scroll x
                 scrollX: this.scrollX,
@@ -1591,6 +1821,68 @@ class AdvancedTableComponent {
         this.autoLoad = !!load;
         this.ngOnInit();
     }
+    selectColumns() {
+        // get column order e.g. [0, 4, 1, 2, 3]
+        const columnOrder = this.dataTable.colReorder.order();
+        // get column definitions
+        const columnDefs = this.dataTable.settings().init().columns;
+        const columns = columnDefs.map((columnDef, i) => {
+            let key = `column-${i}`;
+            let title = columnDef.title;
+            // get column index
+            const index = columnOrder.indexOf(i);
+            const 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
+                let 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,
+                title,
+                visible,
+                index
+            };
+        });
+        this._columnSelector.selectColumns(columns).then((event) => {
+            if (event.result === 'ok') {
+                // get column order e.g. [3, 1, 2, 0, 4]
+                let indexes = event.columns.map((item) => {
+                    return item.index;
+                });
+                // reset column visibilty
+                for (let index = 0; index < event.columns.length; index++) {
+                    const element = event.columns[index];
+                    const 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: [{
@@ -1626,7 +1918,8 @@ AdvancedTableComponent.ctorParameters = () => [
     { type: ElementRef },
     { type: TemplatePipe },
     { type: LoadingService },
-    { type: HttpClient }
+    { type: HttpClient },
+    { type: ColumnSelectorService }
 ];
 AdvancedTableComponent.propDecorators = {
     table: [{ type: ViewChild, args: ['table',] }],
@@ -1649,6 +1942,7 @@ AdvancedTableComponent.propDecorators = {
     lengthMenu: [{ type: Input }],
     paging: [{ type: Input }],
     pageLength: [{ type: Input }],
+    columnOrdering: [{ type: Input }],
     stateSave: [{ type: Input }],
     stateLoadCallback: [{ type: Input }],
     stateSaveCallback: [{ type: Input }],
@@ -4135,7 +4429,7 @@ class AddItemsComponent extends RouterModalOkCancel {
 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 */
@@ -4306,7 +4600,16 @@ const TABLES_EL = {
             "CompletedWithSuccess": {
                 "Title": "Η διαδικασία ολοκληρώθηκε με επιτυχία."
             }
-        }
+        },
+        "SelectColumns": "Επιλογή στηλών",
+        "MoveUp": "Επάνω",
+        "MoveDown": "Κάτω",
+        "AddColumn": "Επιλογή",
+        "RemoveColumn": "Αφαίρεση",
+        "SelectColumnHelp": "Επιλέξτε μία ή περισσότερες από τις διαθέσιμες στήλες και πατήστε το πλήκτρο 'Επιλογή' για να τις εμφανίσετε. Χρησιμοποιήστε το πλήκτρο 'Αφαίρεση' για να αφαιρέσετε τις επιλεγμένες στήλες.",
+        "MoveColumnHelp": "Χρησιμοποιήστε τα πλήκτρα 'Επάνω' και 'Κάτω' για να αλλάξετε την σειρά εμφάνισης των στηλών του πίνακα.",
+        "UnknownColumn": "Άγνωστο",
+        "SelectColumn": "Επιλογή"
     },
     "TrueFalse": {
         "long": {
@@ -4341,6 +4644,9 @@ const TABLES_EL = {
             "Decline": "Απόρριψη",
             "Close": "Κλείσιμο"
         }
+    },
+    "AddItems": {
+        "SelectItems": "Επιλέξτε στοιχεία",
     }
 };
 
@@ -4412,7 +4718,16 @@ const 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": {
@@ -4447,6 +4762,9 @@ const TABLES_EN = {
             "Decline": "Decline",
             "Close": "Close"
         }
+    },
+    "AddItems": {
+        "SelectItems": "Select items",
     }
 };
 
@@ -4749,6 +5067,7 @@ TablesModule.decorators = [
                     AdvancedSearchConfigurationResolver,
                     AdvancedSelectService,
                     AdvancedAggregatorService,
+                    ColumnSelectorService,
                     GroupByPipe
                 ],
                 declarations: [
@@ -4772,7 +5091,8 @@ TablesModule.decorators = [
                     AddItemsComponent,
                     AdvancedSearchState,
                     AdvancedTableState,
-                    AdvancedSearchRouterState
+                    AdvancedSearchRouterState,
+                    ColumnSelectorComponent
                 ],
                 exports: [
                     AdvancedTableComponent,
@@ -4791,14 +5111,16 @@ TablesModule.decorators = [
                     AddItemsComponent,
                     AdvancedSearchState,
                     AdvancedTableState,
-                    AdvancedSearchRouterState
+                    AdvancedSearchRouterState,
+                    ColumnSelectorComponent
                 ],
                 entryComponents: [
                     AdvancedTableModalBaseComponent,
                     AdvancedTableSettingsComponent,
                     AdvancedRowActionComponent,
                     AdvancedSelectComponent,
-                    AddItemsComponent
+                    AddItemsComponent,
+                    ColumnSelectorComponent
                 ],
                 schemas: [CUSTOM_ELEMENTS_SCHEMA]
             },] }
@@ -4816,6 +5138,6 @@ TablesModule.ctorParameters = () => [
  * 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