@universis/ngx-tables 0.7.21 → 0.7.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/bundles/universis-ngx-tables.umd.js +432 -11
  2. package/bundles/universis-ngx-tables.umd.js.map +1 -1
  3. package/bundles/universis-ngx-tables.umd.min.js +1 -1
  4. package/bundles/universis-ngx-tables.umd.min.js.map +1 -1
  5. package/esm2015/lib/components/advanced-table/advanced-table.component.js +72 -3
  6. package/esm2015/lib/components/advanced-table/advanced-table.interfaces.js +1 -1
  7. package/esm2015/lib/components/column-selector/column-selector.component.js +190 -0
  8. package/esm2015/lib/components/column-selector/column-selector.service.js +47 -0
  9. package/esm2015/lib/directives/advance-table-state.directive.js +1 -1
  10. package/esm2015/lib/i18n/tables.el.js +12 -2
  11. package/esm2015/lib/i18n/tables.en.js +12 -2
  12. package/esm2015/lib/tables.module.js +10 -4
  13. package/esm2015/public_api.js +3 -1
  14. package/esm5/lib/components/advanced-table/advanced-table.component.js +73 -3
  15. package/esm5/lib/components/advanced-table/advanced-table.interfaces.js +1 -1
  16. package/esm5/lib/components/column-selector/column-selector.component.js +257 -0
  17. package/esm5/lib/components/column-selector/column-selector.service.js +50 -0
  18. package/esm5/lib/directives/advance-table-state.directive.js +1 -1
  19. package/esm5/lib/i18n/tables.el.js +12 -2
  20. package/esm5/lib/i18n/tables.en.js +12 -2
  21. package/esm5/lib/tables.module.js +10 -4
  22. package/esm5/public_api.js +3 -1
  23. package/fesm2015/universis-ngx-tables.js +328 -10
  24. package/fesm2015/universis-ngx-tables.js.map +1 -1
  25. package/fesm5/universis-ngx-tables.js +396 -10
  26. package/fesm5/universis-ngx-tables.js.map +1 -1
  27. package/lib/components/advanced-table/advanced-table.component.d.ts +6 -1
  28. package/lib/components/advanced-table/advanced-table.interfaces.d.ts +2 -0
  29. package/lib/components/column-selector/column-selector.component.d.ts +37 -0
  30. package/lib/components/column-selector/column-selector.service.d.ts +19 -0
  31. package/lib/i18n/tables.el.d.ts +10 -0
  32. package/lib/i18n/tables.en.d.ts +10 -0
  33. package/package.json +3 -2
  34. package/public_api.d.ts +2 -0
  35. package/universis-ngx-tables.metadata.json +1 -1
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- 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')) :
3
- 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) :
4
- (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));
5
- }(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';
2
+ 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')) :
3
+ 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) :
4
+ (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));
5
+ }(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';
6
6
 
7
7
  /*! *****************************************************************************
8
8
  Copyright (c) Microsoft Corporation.
@@ -697,6 +697,333 @@
697
697
  return AdvancedFilterValueProvider;
698
698
  }());
699
699
 
700
+ var ColumnSelectorComponent = /** @class */ (function (_super) {
701
+ __extends(ColumnSelectorComponent, _super);
702
+ function ColumnSelectorComponent(router, activatedRoute, _modalRef, ref, _translateService) {
703
+ var _this = _super.call(this, router, activatedRoute) || this;
704
+ _this._modalRef = _modalRef;
705
+ _this.ref = ref;
706
+ _this._translateService = _translateService;
707
+ _this.dismiss = new i0.EventEmitter();
708
+ _this.availableColumnsControl = new forms.FormControl();
709
+ _this.selectedColumnsControl = new forms.FormControl();
710
+ return _this;
711
+ }
712
+ ColumnSelectorComponent.prototype.ok = function () {
713
+ this._modalRef.hide();
714
+ this.applyChanges();
715
+ this.dismiss.emit('ok');
716
+ return Promise.resolve('ok');
717
+ };
718
+ ColumnSelectorComponent.prototype.cancel = function () {
719
+ this._modalRef.hide();
720
+ this.dismiss.emit('cancel');
721
+ return Promise.resolve('cancel');
722
+ };
723
+ ColumnSelectorComponent.prototype.ngOnChanges = function (changes) {
724
+ //
725
+ };
726
+ ColumnSelectorComponent.prototype.ngOnDestroy = function () {
727
+ //
728
+ };
729
+ ColumnSelectorComponent.prototype.ngOnInit = function () {
730
+ if (Array.isArray(this.columns)) {
731
+ this.selectedColumns = this.columns.filter(function (item) {
732
+ return item.visible;
733
+ }).sort(function (a, b) {
734
+ if (a.index < b.index) {
735
+ return -1;
736
+ }
737
+ if (a.index > b.index) {
738
+ return 1;
739
+ }
740
+ return 0;
741
+ }).map(function (item) {
742
+ return {
743
+ key: item.key,
744
+ title: item.title
745
+ };
746
+ });
747
+ }
748
+ };
749
+ ColumnSelectorComponent.prototype.applyChanges = function () {
750
+ var e_1, _a;
751
+ var moveIndex = this.selectedColumns.length - 1;
752
+ var _loop_1 = function (column) {
753
+ var findIndex = this_1.selectedColumns.findIndex(function (item) {
754
+ return item.key === column.key;
755
+ });
756
+ if (findIndex < 0) {
757
+ column.visible = false;
758
+ moveIndex += 1;
759
+ column.index = moveIndex;
760
+ }
761
+ else {
762
+ column.visible = true;
763
+ column.index = findIndex;
764
+ }
765
+ };
766
+ var this_1 = this;
767
+ try {
768
+ for (var _b = __values(this.columns), _c = _b.next(); !_c.done; _c = _b.next()) {
769
+ var column = _c.value;
770
+ _loop_1(column);
771
+ }
772
+ }
773
+ catch (e_1_1) {
774
+ e_1 = { error: e_1_1 };
775
+ }
776
+ finally {
777
+ try {
778
+ if (_c && !_c.done && (_a = _b.return))
779
+ _a.call(_b);
780
+ }
781
+ finally {
782
+ if (e_1)
783
+ throw e_1.error;
784
+ }
785
+ }
786
+ };
787
+ ColumnSelectorComponent.prototype.removeColumns = function () {
788
+ var e_2, _a;
789
+ var selected = this.selectedColumnsControl.value;
790
+ if (selected.length > 0) {
791
+ var _loop_2 = function (value) {
792
+ var findIndex = this_2.selectedColumns.findIndex(function (item) {
793
+ return item.key === value;
794
+ });
795
+ if (findIndex >= 0) {
796
+ this_2.selectedColumns.splice(findIndex, 1);
797
+ }
798
+ };
799
+ var this_2 = this;
800
+ try {
801
+ for (var selected_1 = __values(selected), selected_1_1 = selected_1.next(); !selected_1_1.done; selected_1_1 = selected_1.next()) {
802
+ var value = selected_1_1.value;
803
+ _loop_2(value);
804
+ }
805
+ }
806
+ catch (e_2_1) {
807
+ e_2 = { error: e_2_1 };
808
+ }
809
+ finally {
810
+ try {
811
+ if (selected_1_1 && !selected_1_1.done && (_a = selected_1.return))
812
+ _a.call(selected_1);
813
+ }
814
+ finally {
815
+ if (e_2)
816
+ throw e_2.error;
817
+ }
818
+ }
819
+ // reset column
820
+ this.selectedColumnsControl.reset();
821
+ }
822
+ };
823
+ ColumnSelectorComponent.prototype.addColumns = function () {
824
+ var e_3, _a;
825
+ var selected = this.availableColumnsControl.value;
826
+ if (selected.length > 0) {
827
+ var _loop_3 = function (value) {
828
+ var findColumn = this_3.columns.find(function (item) {
829
+ return item.key === value;
830
+ });
831
+ if (findColumn) {
832
+ var findIndex = this_3.selectedColumns.findIndex(function (item) {
833
+ return item.key === value;
834
+ });
835
+ if (findIndex < 0) {
836
+ this_3.selectedColumns.push({
837
+ key: findColumn.key,
838
+ title: findColumn.title
839
+ });
840
+ }
841
+ }
842
+ };
843
+ var this_3 = this;
844
+ try {
845
+ for (var selected_2 = __values(selected), selected_2_1 = selected_2.next(); !selected_2_1.done; selected_2_1 = selected_2.next()) {
846
+ var value = selected_2_1.value;
847
+ _loop_3(value);
848
+ }
849
+ }
850
+ catch (e_3_1) {
851
+ e_3 = { error: e_3_1 };
852
+ }
853
+ finally {
854
+ try {
855
+ if (selected_2_1 && !selected_2_1.done && (_a = selected_2.return))
856
+ _a.call(selected_2);
857
+ }
858
+ finally {
859
+ if (e_3)
860
+ throw e_3.error;
861
+ }
862
+ }
863
+ // find the last index of the selected items
864
+ var lastSelectedIndex = this.columns.findIndex(function (item) {
865
+ return item.key === selected[selected.length - 1];
866
+ });
867
+ // reset control
868
+ this.availableColumnsControl.reset();
869
+ if (lastSelectedIndex > -1 && lastSelectedIndex < this.columns.length - 1) {
870
+ this.availableColumnsControl.patchValue([
871
+ this.columns[lastSelectedIndex + 1].key
872
+ ]);
873
+ }
874
+ }
875
+ };
876
+ ColumnSelectorComponent.prototype.moveUp = function () {
877
+ var e_4, _a;
878
+ this.moveUpButton.nativeElement.disabled = true;
879
+ var selected = this.selectedColumnsControl.value;
880
+ if (selected.length > 0) {
881
+ var _loop_4 = function (value) {
882
+ var findIndex = this_4.selectedColumns.findIndex(function (item) {
883
+ return item.key === value;
884
+ });
885
+ if (findIndex > 0) {
886
+ var column = this_4.selectedColumns[findIndex];
887
+ this_4.selectedColumns.splice(findIndex, 1);
888
+ this_4.selectedColumns.splice(findIndex - 1, 0, column);
889
+ }
890
+ };
891
+ var this_4 = this;
892
+ try {
893
+ for (var selected_3 = __values(selected), selected_3_1 = selected_3.next(); !selected_3_1.done; selected_3_1 = selected_3.next()) {
894
+ var value = selected_3_1.value;
895
+ _loop_4(value);
896
+ }
897
+ }
898
+ catch (e_4_1) {
899
+ e_4 = { error: e_4_1 };
900
+ }
901
+ finally {
902
+ try {
903
+ if (selected_3_1 && !selected_3_1.done && (_a = selected_3.return))
904
+ _a.call(selected_3);
905
+ }
906
+ finally {
907
+ if (e_4)
908
+ throw e_4.error;
909
+ }
910
+ }
911
+ }
912
+ this.moveUpButton.nativeElement.disabled = false;
913
+ };
914
+ ColumnSelectorComponent.prototype.moveDown = function () {
915
+ var e_5, _a;
916
+ this.moveDownButton.nativeElement.disabled = true;
917
+ var selected = this.selectedColumnsControl.value;
918
+ if (selected.length > 0) {
919
+ var _loop_5 = function (value) {
920
+ var findIndex = this_5.selectedColumns.findIndex(function (item) {
921
+ return item.key === value;
922
+ });
923
+ var length_1 = this_5.columns.length;
924
+ if (findIndex >= 0 && findIndex < length_1) {
925
+ var column = this_5.selectedColumns[findIndex];
926
+ this_5.selectedColumns.splice(findIndex, 1);
927
+ this_5.selectedColumns.splice(findIndex + 1, 0, column);
928
+ }
929
+ };
930
+ var this_5 = this;
931
+ try {
932
+ for (var selected_4 = __values(selected), selected_4_1 = selected_4.next(); !selected_4_1.done; selected_4_1 = selected_4.next()) {
933
+ var value = selected_4_1.value;
934
+ _loop_5(value);
935
+ }
936
+ }
937
+ catch (e_5_1) {
938
+ e_5 = { error: e_5_1 };
939
+ }
940
+ finally {
941
+ try {
942
+ if (selected_4_1 && !selected_4_1.done && (_a = selected_4.return))
943
+ _a.call(selected_4);
944
+ }
945
+ finally {
946
+ if (e_5)
947
+ throw e_5.error;
948
+ }
949
+ }
950
+ }
951
+ this.moveDownButton.nativeElement.disabled = false;
952
+ };
953
+ ColumnSelectorComponent.decorators = [
954
+ { type: i0.Component, args: [{
955
+ selector: 'app-column-selector',
956
+ 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 ",
957
+ encapsulation: i0.ViewEncapsulation.None,
958
+ 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 "]
959
+ }] }
960
+ ];
961
+ /** @nocollapse */
962
+ ColumnSelectorComponent.ctorParameters = function () {
963
+ return [
964
+ { type: i1$1.Router },
965
+ { type: i1$1.ActivatedRoute },
966
+ { type: modal.BsModalRef },
967
+ { type: i0.ChangeDetectorRef },
968
+ { type: core.TranslateService }
969
+ ];
970
+ };
971
+ ColumnSelectorComponent.propDecorators = {
972
+ columns: [{ type: i0.Input }],
973
+ selectedColumns: [{ type: i0.Input }],
974
+ moveUpButton: [{ type: i0.ViewChild, args: ['moveUpButton',] }],
975
+ moveDownButton: [{ type: i0.ViewChild, args: ['moveDownButton',] }]
976
+ };
977
+ return ColumnSelectorComponent;
978
+ }(routing.RouterModalOkCancel));
979
+
980
+ var ColumnSelectorService = /** @class */ (function () {
981
+ function ColumnSelectorService(_modal) {
982
+ this._modal = _modal;
983
+ //
984
+ }
985
+ ColumnSelectorService.prototype.selectColumns = function (columns) {
986
+ var _this = this;
987
+ return new Promise(function (resolve, reject) {
988
+ try {
989
+ var modalRef = _this._modal.openModalComponent(ColumnSelectorComponent, {
990
+ class: 'modal-lg modal-table',
991
+ ignoreBackdropClick: true,
992
+ animated: true,
993
+ initialState: {
994
+ columns: columns,
995
+ }
996
+ });
997
+ var componentRef_1 = modalRef.content;
998
+ componentRef_1.dismiss.subscribe(function (result) {
999
+ if (result === 'ok') {
1000
+ return resolve({
1001
+ result: result,
1002
+ columns: componentRef_1.columns
1003
+ });
1004
+ }
1005
+ return resolve({
1006
+ result: result
1007
+ });
1008
+ });
1009
+ }
1010
+ catch (err) {
1011
+ return reject(err);
1012
+ }
1013
+ });
1014
+ };
1015
+ ColumnSelectorService.decorators = [
1016
+ { type: i0.Injectable }
1017
+ ];
1018
+ /** @nocollapse */
1019
+ ColumnSelectorService.ctorParameters = function () {
1020
+ return [
1021
+ { type: i2.ModalService }
1022
+ ];
1023
+ };
1024
+ return ColumnSelectorService;
1025
+ }());
1026
+
700
1027
  // restore jquery import to avoid Cannot call a namespace ('jquery') error
701
1028
  var jQuery = jQuery_;
702
1029
  var DataTablesApi = jQuery.fn.dataTable.Api;
@@ -753,7 +1080,7 @@
753
1080
  return (Number(String(Math.random()).slice(2))).toString(36);
754
1081
  }
755
1082
  var AdvancedTableComponent = /** @class */ (function () {
756
- function AdvancedTableComponent(_context, _columnFormatters, _activatedRoute, _translateService, _injector, _advancedFilterValueProvider, _element, _template, _loading, _http) {
1083
+ function AdvancedTableComponent(_context, _columnFormatters, _activatedRoute, _translateService, _injector, _advancedFilterValueProvider, _element, _template, _loading, _http, _columnSelector) {
757
1084
  var _this = this;
758
1085
  this._context = _context;
759
1086
  this._columnFormatters = _columnFormatters;
@@ -765,6 +1092,7 @@
765
1092
  this._template = _template;
766
1093
  this._loading = _loading;
767
1094
  this._http = _http;
1095
+ this._columnSelector = _columnSelector;
768
1096
  this._firstLoad = true;
769
1097
  this._showFooter = true;
770
1098
  this._showHeader = true;
@@ -789,6 +1117,7 @@
789
1117
  this.lengthMenu = [50, 100, 200, 500];
790
1118
  this.paging = true;
791
1119
  this.pageLength = 25;
1120
+ this.columnOrdering = false;
792
1121
  this.stateSave = false;
793
1122
  this.scrollY = 800;
794
1123
  this.scrollX = true;
@@ -1423,6 +1752,7 @@
1423
1752
  serverSide: this.serverSide,
1424
1753
  // enumerate table columns
1425
1754
  columns: tableColumns_1,
1755
+ colReorder: this.columnOrdering,
1426
1756
  order: [],
1427
1757
  // set scroll x
1428
1758
  scrollX: this.scrollX,
@@ -1857,6 +2187,69 @@
1857
2187
  this.autoLoad = !!load;
1858
2188
  this.ngOnInit();
1859
2189
  };
2190
+ AdvancedTableComponent.prototype.selectColumns = function () {
2191
+ var _this = this;
2192
+ // get column order e.g. [0, 4, 1, 2, 3]
2193
+ var columnOrder = this.dataTable.colReorder.order();
2194
+ // get column definitions
2195
+ var columnDefs = this.dataTable.settings().init().columns;
2196
+ var columns = columnDefs.map(function (columnDef, i) {
2197
+ var key = "column-" + i;
2198
+ var title = columnDef.title;
2199
+ // get column index
2200
+ var index = columnOrder.indexOf(i);
2201
+ var visible = _this.dataTable.column(index).visible();
2202
+ // set title for select column
2203
+ if (i == 0 && _this.selectable) {
2204
+ title = '<' + _this._translateService.instant('Tables.SelectColumn') + '>';
2205
+ }
2206
+ // get column title
2207
+ if (title != null && title.length === 0) {
2208
+ title = null;
2209
+ }
2210
+ if (title == null) {
2211
+ // try to find column placeholder
2212
+ var placeholder = null;
2213
+ if (_this.selectable) {
2214
+ if (i > 0) {
2215
+ placeholder = _this.config.columns[i - 1].placeholder;
2216
+ }
2217
+ }
2218
+ else {
2219
+ placeholder = _this.config.columns[i].placeholder;
2220
+ }
2221
+ if (placeholder != null) {
2222
+ title = '<' + _this._translateService.instant(placeholder) + '>';
2223
+ }
2224
+ }
2225
+ if (title == null) {
2226
+ title = '<' + _this._translateService.instant('Tables.UnknownColumn') + '>';
2227
+ }
2228
+ return {
2229
+ key: key,
2230
+ title: title,
2231
+ visible: visible,
2232
+ index: index
2233
+ };
2234
+ });
2235
+ this._columnSelector.selectColumns(columns).then(function (event) {
2236
+ if (event.result === 'ok') {
2237
+ // get column order e.g. [3, 1, 2, 0, 4]
2238
+ var indexes = event.columns.map(function (item) {
2239
+ return item.index;
2240
+ });
2241
+ // reset column visibilty
2242
+ for (var index = 0; index < event.columns.length; index++) {
2243
+ var element = event.columns[index];
2244
+ var colIndex = columnOrder.indexOf(index);
2245
+ // set visibilty with redraw (=true)
2246
+ _this.dataTable.column(colIndex).visible(element.visible, true);
2247
+ }
2248
+ // finally apply column order
2249
+ _this.dataTable.colReorder.order(indexes, true);
2250
+ }
2251
+ });
2252
+ };
1860
2253
  AdvancedTableComponent.decorators = [
1861
2254
  { type: i0.Component, args: [{
1862
2255
  // tslint:disable-next-line: component-selector
@@ -1878,7 +2271,8 @@
1878
2271
  { type: i0.ElementRef },
1879
2272
  { type: i2.TemplatePipe },
1880
2273
  { type: i2.LoadingService },
1881
- { type: http.HttpClient }
2274
+ { type: http.HttpClient },
2275
+ { type: ColumnSelectorService }
1882
2276
  ];
1883
2277
  };
1884
2278
  AdvancedTableComponent.propDecorators = {
@@ -1902,6 +2296,7 @@
1902
2296
  lengthMenu: [{ type: i0.Input }],
1903
2297
  paging: [{ type: i0.Input }],
1904
2298
  pageLength: [{ type: i0.Input }],
2299
+ columnOrdering: [{ type: i0.Input }],
1905
2300
  stateSave: [{ type: i0.Input }],
1906
2301
  stateLoadCallback: [{ type: i0.Input }],
1907
2302
  stateSaveCallback: [{ type: i0.Input }],
@@ -4776,7 +5171,17 @@
4776
5171
  "CompletedWithSuccess": {
4777
5172
  "Title": "Η διαδικασία ολοκληρώθηκε με επιτυχία."
4778
5173
  }
4779
- }
5174
+ },
5175
+ "SelectColumns": "Επιλογή στηλών",
5176
+ "MoveUp": "Επάνω",
5177
+ "MoveDown": "Κάτω",
5178
+ "AddColumn": "Επιλογή",
5179
+ "RemoveColumn": "Αφαίρεση",
5180
+ "SelectColumnHelp": "Επιλέξτε μία ή περισσότερες από τις διαθέσιμες στήλες και πατήστε το πλήκτρο 'Επιλογή' για να τις εμφανίσετε. Χρησιμοποιήστε το πλήκτρο 'Αφαίρεση' για να αφαιρέσετε τις επιλεγμένες στήλες.",
5181
+ "MoveColumnHelp": "Χρησιμοποιήστε τα πλήκτρα 'Επάνω' και 'Κάτω' για να αλλάξετε την σειρά εμφάνισης των στηλών του πίνακα.",
5182
+ "UnknownColumn": "Άγνωστο",
5183
+ "SelectColumn": "Επιλογή",
5184
+ "ActionLinkColumn": "Ενέργειες"
4780
5185
  },
4781
5186
  "TrueFalse": {
4782
5187
  "long": {
@@ -4885,7 +5290,17 @@
4885
5290
  "CompletedWithSuccess": {
4886
5291
  "Title": "The operation was completed successfully."
4887
5292
  }
4888
- }
5293
+ },
5294
+ "SelectColumns": "Select columns",
5295
+ "MoveUp": "Move up",
5296
+ "MoveDown": "Move down",
5297
+ "AddColumn": "Add",
5298
+ "RemoveColumn": "Remove",
5299
+ "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.",
5300
+ "MoveColumnHelp": "Use 'Move up' and 'Move down' buttons to change column order.",
5301
+ "UnknownColumn": "Unknown",
5302
+ "SelectColumn": "Select",
5303
+ "ActionLinkColumn": "Actions"
4889
5304
  },
4890
5305
  "TrueFalse": {
4891
5306
  "long": {
@@ -5251,6 +5666,7 @@
5251
5666
  AdvancedSearchConfigurationResolver,
5252
5667
  AdvancedSelectService,
5253
5668
  AdvancedAggregatorService,
5669
+ ColumnSelectorService,
5254
5670
  ngxPipes.GroupByPipe
5255
5671
  ],
5256
5672
  declarations: [
@@ -5274,7 +5690,8 @@
5274
5690
  AddItemsComponent,
5275
5691
  AdvancedSearchState,
5276
5692
  AdvancedTableState,
5277
- AdvancedSearchRouterState
5693
+ AdvancedSearchRouterState,
5694
+ ColumnSelectorComponent
5278
5695
  ],
5279
5696
  exports: [
5280
5697
  AdvancedTableComponent,
@@ -5293,14 +5710,16 @@
5293
5710
  AddItemsComponent,
5294
5711
  AdvancedSearchState,
5295
5712
  AdvancedTableState,
5296
- AdvancedSearchRouterState
5713
+ AdvancedSearchRouterState,
5714
+ ColumnSelectorComponent
5297
5715
  ],
5298
5716
  entryComponents: [
5299
5717
  AdvancedTableModalBaseComponent,
5300
5718
  AdvancedTableSettingsComponent,
5301
5719
  AdvancedRowActionComponent,
5302
5720
  AdvancedSelectComponent,
5303
- AddItemsComponent
5721
+ AddItemsComponent,
5722
+ ColumnSelectorComponent
5304
5723
  ],
5305
5724
  schemas: [i0.CUSTOM_ELEMENTS_SCHEMA]
5306
5725
  },] }
@@ -5370,6 +5789,8 @@
5370
5789
  exports.TablesModule = TablesModule;
5371
5790
  exports.ɵ0 = ɵ0;
5372
5791
  exports.ActivatedTableService = ActivatedTableService;
5792
+ exports.ColumnSelectorService = ColumnSelectorService;
5793
+ exports.ColumnSelectorComponent = ColumnSelectorComponent;
5373
5794
  exports.initialState = initialState;
5374
5795
  exports.tableInitialState = tableInitialState;
5375
5796
  exports.tableReducer = tableReducer;