@universis/ngx-tables 6.13.4 → 6.13.5

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 (28) hide show
  1. package/bundles/universis-ngx-tables.umd.js +88 -8
  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-aggregator/advanced-aggregator.component.js +6 -3
  6. package/esm2015/lib/components/advanced-aggregator-list/advanced-aggregator-list.component.js +6 -3
  7. package/esm2015/lib/components/advanced-table/advanced-table.component.js +31 -4
  8. package/esm2015/lib/components/advanced-table/advanced-table.formatters.interface.js +6 -31
  9. package/esm2015/lib/components/advanced-table/custom-button.formatter.js +45 -0
  10. package/esm2015/universis-ngx-tables.js +5 -4
  11. package/esm5/lib/components/advanced-aggregator/advanced-aggregator.component.js +6 -3
  12. package/esm5/lib/components/advanced-aggregator-list/advanced-aggregator-list.component.js +6 -3
  13. package/esm5/lib/components/advanced-table/advanced-table.component.js +31 -4
  14. package/esm5/lib/components/advanced-table/advanced-table.formatters.interface.js +6 -31
  15. package/esm5/lib/components/advanced-table/custom-button.formatter.js +56 -0
  16. package/esm5/universis-ngx-tables.js +5 -4
  17. package/fesm2015/universis-ngx-tables.js +77 -7
  18. package/fesm2015/universis-ngx-tables.js.map +1 -1
  19. package/fesm5/universis-ngx-tables.js +87 -8
  20. package/fesm5/universis-ngx-tables.js.map +1 -1
  21. package/lib/components/advanced-aggregator/advanced-aggregator.component.d.ts +2 -1
  22. package/lib/components/advanced-aggregator-list/advanced-aggregator-list.component.d.ts +2 -1
  23. package/lib/components/advanced-table/advanced-table.component.d.ts +3 -2
  24. package/lib/components/advanced-table/advanced-table.formatters.interface.d.ts +5 -17
  25. package/lib/components/advanced-table/custom-button.formatter.d.ts +11 -0
  26. package/package.json +1 -1
  27. package/universis-ngx-tables.d.ts +5 -4
  28. package/universis-ngx-tables.metadata.json +1 -1
@@ -22,8 +22,8 @@ import { BsModalRef, BsModalService, ModalModule } from 'ngx-bootstrap/modal';
22
22
  import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
23
23
  import { GroupByPipe, NgPipesModule } from 'ngx-pipes';
24
24
  import { template, at, cloneDeep, isEmpty } from 'lodash';
25
- import { __extends, __awaiter, __generator, __values, __assign, __spread } from 'tslib';
26
- import { Injectable, Directive, Optional, Input, Pipe, Component, EventEmitter, Output, ElementRef, ViewChild, ViewEncapsulation, NgModule, CUSTOM_ELEMENTS_SCHEMA, defineInjectable, inject, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, InjectionToken, Inject, Injector, ViewContainerRef } from '@angular/core';
25
+ import { __extends, __awaiter, __generator, __values, __spread, __assign } from 'tslib';
26
+ import { Injectable, Directive, Optional, Input, Component, ElementRef, ViewChild, ViewEncapsulation, EventEmitter, Output, Pipe, NgModule, CUSTOM_ELEMENTS_SCHEMA, defineInjectable, inject, HostListener, ChangeDetectorRef, InjectionToken, Inject, Injector, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
27
27
  import { ActivatedRoute, Router, NavigationStart, NavigationEnd, RouterModule } from '@angular/router';
28
28
  import { createFeatureSelector, createSelector, select, Store } from '@ngrx/store';
29
29
  import { skip, first, filter } from 'rxjs/operators';
@@ -1860,6 +1860,7 @@ var AdvancedTableComponent = /** @class */ (function () {
1860
1860
  this.height = 800;
1861
1861
  this.showActions = true;
1862
1862
  this.autoLoad = true;
1863
+ this.customEvent = new EventEmitter();
1863
1864
  this.load = new EventEmitter();
1864
1865
  this.init = new EventEmitter();
1865
1866
  this.reload = new EventEmitter();
@@ -2522,7 +2523,7 @@ var AdvancedTableComponent = /** @class */ (function () {
2522
2523
  function (cell, cellData, rowData, rowIndex, colIndex) {
2523
2524
  items_1.forEach(function (columnFormatter) {
2524
2525
  /** @type {?} */
2525
- var formatter = self._columnFormatters[columnFormatter.formatter];
2526
+ var formatter = /** @type {?} */ ((self._columnFormatters[columnFormatter.formatter]));
2526
2527
  if (formatter && typeof formatter.afterRender === 'function') {
2527
2528
  formatter.afterRender.bind(column)(cell, cellData, rowData, rowIndex, colIndex);
2528
2529
  }
@@ -2539,12 +2540,14 @@ var AdvancedTableComponent = /** @class */ (function () {
2539
2540
  render: formatter.render.bind(column),
2540
2541
  });
2541
2542
  }
2542
- if (formatter && typeof formatter.afterRender === 'function') {
2543
+ /** @type {?} */
2544
+ var afterRenderFormatter = /** @type {?} */ ((formatter));
2545
+ if (afterRenderFormatter && typeof afterRenderFormatter.afterRender === 'function') {
2543
2546
  Object.assign(columnDefinition, {
2544
2547
  render: formatter.render.bind(column),
2545
2548
  });
2546
2549
  Object.assign(columnDefinition, {
2547
- createdCell: formatter.afterRender.bind(column),
2550
+ createdCell: afterRenderFormatter.afterRender.bind(column),
2548
2551
  });
2549
2552
  }
2550
2553
  }
@@ -3109,6 +3112,9 @@ var AdvancedTableComponent = /** @class */ (function () {
3109
3112
  });
3110
3113
  }
3111
3114
  if (this.selectable) ;
3115
+ if (this.dataTable) {
3116
+ this.dataTable.destroy();
3117
+ }
3112
3118
  // handle init.dt event and emit local event
3113
3119
  this.dataTable = tableElement_1.on('init.dt', function (event) {
3114
3120
  /** @type {?} */
@@ -3154,6 +3160,24 @@ var AdvancedTableComponent = /** @class */ (function () {
3154
3160
  infoSelector.classList.add('d-none');
3155
3161
  }
3156
3162
  }
3163
+ /** @type {?} */
3164
+ var onCustomEvent = function (event) {
3165
+ /** @type {?} */
3166
+ var target = /** @type {?} */ (event.currentTarget);
3167
+ /** @type {?} */
3168
+ var customEvent = target.dataset["event"] || 'event';
3169
+ /** @type {?} */
3170
+ var row = _this.dataTable.row(target.closest('tr'));
3171
+ /** @type {?} */
3172
+ var data = row.data();
3173
+ _this.customEvent.emit({
3174
+ name: customEvent,
3175
+ data: data,
3176
+ row: row.index()
3177
+ });
3178
+ };
3179
+ this.dataTable.off('click', '.dt-custom');
3180
+ this.dataTable.on('click', '.dt-custom', onCustomEvent);
3157
3181
  // show or hide pager
3158
3182
  if (this.showPaging) {
3159
3183
  this.showPaging = true;
@@ -3771,6 +3795,7 @@ var AdvancedTableComponent = /** @class */ (function () {
3771
3795
  height: [{ type: Input }],
3772
3796
  showActions: [{ type: Input }],
3773
3797
  autoLoad: [{ type: Input }],
3798
+ customEvent: [{ type: Output, args: ['customEvent',] }],
3774
3799
  load: [{ type: Output, args: ['load',] }],
3775
3800
  init: [{ type: Output, args: ['init',] }],
3776
3801
  reload: [{ type: Input, args: ['reload',] }],
@@ -6139,6 +6164,57 @@ var AdvancedTableSearchComponent = /** @class */ (function (_super) {
6139
6164
  return AdvancedTableSearchComponent;
6140
6165
  }(AdvancedTableSearchBaseComponent));
6141
6166
 
6167
+ /**
6168
+ * @fileoverview added by tsickle
6169
+ * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
6170
+ */
6171
+ var CustomButtonFormatter = /** @class */ (function (_super) {
6172
+ __extends(CustomButtonFormatter, _super);
6173
+ function CustomButtonFormatter() {
6174
+ return _super.call(this) || this;
6175
+ }
6176
+ /**
6177
+ * @param {?} data
6178
+ * @param {?} type
6179
+ * @param {?} row
6180
+ * @param {?} meta
6181
+ * @return {?}
6182
+ */
6183
+ CustomButtonFormatter.prototype.render = /**
6184
+ * @param {?} data
6185
+ * @param {?} type
6186
+ * @param {?} row
6187
+ * @param {?} meta
6188
+ * @return {?}
6189
+ */
6190
+ function (data, type, row, meta) {
6191
+ if (data == null || this.injector == null) {
6192
+ return '';
6193
+ }
6194
+ /** @type {?} */
6195
+ var formatOptions = Object.assign({
6196
+ buttonClass: 'btn btn-default',
6197
+ }, this.formatOptions);
6198
+ /** @type {?} */
6199
+ var buttonText;
6200
+ /** @type {?} */
6201
+ var buttonTitle = '';
6202
+ if (formatOptions.buttonText) {
6203
+ buttonText = this.injector.get(TranslateService).instant(formatOptions.buttonText);
6204
+ }
6205
+ else {
6206
+ buttonText = formatOptions.buttonContent;
6207
+ }
6208
+ if (formatOptions.buttonTitle) {
6209
+ buttonTitle = this.injector.get(TranslateService).instant(formatOptions.buttonTitle);
6210
+ }
6211
+ /** @type {?} */
6212
+ var customEvent = formatOptions.event || 'event';
6213
+ return "<button style=\"cursor:pointer\" data-event=\"" + customEvent + "\" class=\"dt-custom " + formatOptions.buttonClass + "\" title=\"" + buttonTitle + "\">" + buttonText + "</button>";
6214
+ };
6215
+ return CustomButtonFormatter;
6216
+ }(ButtonFormatter));
6217
+
6142
6218
  /**
6143
6219
  * @fileoverview added by tsickle
6144
6220
  * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
@@ -6158,6 +6234,7 @@ var FORMATTERS = {
6158
6234
  TrueFalseFormatter: new TrueFalseFormatter(),
6159
6235
  ActionButtonFormatter: new ActionButtonFormatter(),
6160
6236
  ActionSplitButtonFormatter: new ActionSplitButtonFormatter(),
6237
+ CustomButtonFormatter: new CustomButtonFormatter(),
6161
6238
  };
6162
6239
 
6163
6240
  /**
@@ -6858,7 +6935,7 @@ var AdvancedAggregatorComponent = /** @class */ (function () {
6858
6935
  { type: Component, args: [{
6859
6936
  // tslint:disable-next-line:component-selector
6860
6937
  selector: 'app-advanced-aggregator',
6861
- template: "<ng-container *ngIf=\"config && body\">\n <div class=\"w-100 text-center\" *ngIf=\"body && body.length === 0\">\n <div>\n <div class=\"mt-4\">\n <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n </div>\n <div class=\"mt-4\">\n <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"groups.length === 0\">\n <div class=\"row mt-4\">\n <app-advanced-aggregator-list [body]=\"body\" [config]=\"config\" (clickEvent)=\"onActionEvent($event)\" class=\"col-12\">\n </app-advanced-aggregator-list>\n <div *ngIf=\"config.aggregators && config.aggregators.length > 0\"\n class=\"footer-text text-dark font-weight-normal text-right font-sm mt-3 mr-2 w-100\">\n <div *ngFor=\"let aggregator of config.aggregators\">\n <span *ngIf=\"aggregator.label\"> {{ aggregator.label | translate }} </span>:\n <span class=\"font-weight-bold\"> {{ body | callAggregator: aggregators: aggregator.name }}\n </span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"groups.length === 1\">\n <ng-container *ngFor=\"let group of body | groupBy: groups[0].name | keyvalue\">\n <div class=\"row mt-4\">\n <h4 class=\"col text-secondary\"> {{ groups[0].title | aggregatorListTitle: group.key }} </h4>\n <app-advanced-aggregator-list [body]=\"group.value\" [config]=\"config\" (clickEvent)=\"onActionEvent($event)\"\n class=\"col-12\">\n </app-advanced-aggregator-list>\n </div>\n\n <!-- Footer for the group -->\n <div *ngIf=\"config.aggregators && config.aggregators.length > 0\"\n class=\"footer-text text-dark font-weight-normal text-right font-sm mt-3 mr-2 w-100\">\n <div *ngFor=\"let aggregator of config.aggregators\">\n <span *ngIf=\"aggregator.label\"> {{ aggregator.label | translate }} </span>:\n <span class=\"font-weight-bold\"> {{ group.value | callAggregator: aggregators: aggregator.name }} </span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"groups.length > 1\">\n <ng-container *ngFor=\"let group of body | groupBy: groups[0].name | keyvalue\">\n <div class=\"row mt-4\">\n <h4 class=\"col text-secondary\"> {{ groups[0].title | aggregatorListTitle: group.key }} </h4>\n <div *ngFor=\"let subgroup of group.value | groupBy: groups[1].name | keyvalue\" class=\"col-12 ml-4 pl-4\">\n <div class=\"row mt-4\">\n <h6 class=\"col-12 text-secondary\"> {{ groups[1].title | aggregatorListTitle: subgroup.key }} </h6>\n <app-advanced-aggregator-list [body]=\"subgroup.value\" [config]=\"config\" (clickEvent)=\"onActionEvent($event)\"\n class=\"col-12\">\n </app-advanced-aggregator-list>\n </div>\n\n <!-- Footer for each subgroup -->\n <div *ngIf=\"config.aggregators && config.aggregators.length > 0\"\n class=\"footer-text text-dark font-weight-normal text-right font-sm mt-3 mr-2 w-100\">\n <div *ngFor=\"let aggregator of config.aggregators\">\n <span *ngIf=\"aggregator.label\"> {{ aggregator.label | translate }} </span>:\n <span class=\"font-weight-bold\"> {{ subgroup.value | callAggregator: aggregators: aggregator.name }}\n </span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n</ng-container>",
6938
+ template: "<ng-container *ngIf=\"config && body\">\n <div class=\"w-100 text-center\" *ngIf=\"body && body.length === 0\">\n <div>\n <div class=\"mt-4\">\n <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n </div>\n <div class=\"mt-4\">\n <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"groups.length === 0\">\n <div class=\"row mt-4\">\n <app-advanced-aggregator-list [detailTemplate]=\"detailTemplate\" [body]=\"body\" [config]=\"config\" (clickEvent)=\"onActionEvent($event)\" class=\"col-12\">\n </app-advanced-aggregator-list>\n <div *ngIf=\"config.aggregators && config.aggregators.length > 0\"\n class=\"footer-text text-dark font-weight-normal text-right font-sm mt-3 mr-2 w-100\">\n <div *ngFor=\"let aggregator of config.aggregators\">\n <span *ngIf=\"aggregator.label\"> {{ aggregator.label | translate }} </span>:\n <span class=\"font-weight-bold\"> {{ body | callAggregator: aggregators: aggregator.name }}\n </span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"groups.length === 1\">\n <ng-container *ngFor=\"let group of body | groupBy: groups[0].name | keyvalue\">\n <div class=\"row mt-4\">\n <h4 class=\"col text-secondary\"> {{ groups[0].title | aggregatorListTitle: group.key }} </h4>\n <app-advanced-aggregator-list [detailTemplate]=\"detailTemplate\" [body]=\"group.value\" [config]=\"config\" (clickEvent)=\"onActionEvent($event)\"\n class=\"col-12\">\n </app-advanced-aggregator-list>\n </div>\n\n <!-- Footer for the group -->\n <div *ngIf=\"config.aggregators && config.aggregators.length > 0\"\n class=\"footer-text text-dark font-weight-normal text-right font-sm mt-3 mr-2 w-100\">\n <div *ngFor=\"let aggregator of config.aggregators\">\n <span *ngIf=\"aggregator.label\"> {{ aggregator.label | translate }} </span>:\n <span class=\"font-weight-bold\"> {{ group.value | callAggregator: aggregators: aggregator.name }} </span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"groups.length > 1\">\n <ng-container *ngFor=\"let group of body | groupBy: groups[0].name | keyvalue\">\n <div class=\"row mt-4\">\n <h4 class=\"col text-secondary\"> {{ groups[0].title | aggregatorListTitle: group.key }} </h4>\n <div *ngFor=\"let subgroup of group.value | groupBy: groups[1].name | keyvalue\" class=\"col-12 ml-4 pl-4\">\n <div class=\"row mt-4\">\n <h6 class=\"col-12 text-secondary\"> {{ groups[1].title | aggregatorListTitle: subgroup.key }} </h6>\n <app-advanced-aggregator-list [detailTemplate]=\"detailTemplate\" [body]=\"subgroup.value\" [config]=\"config\" (clickEvent)=\"onActionEvent($event)\"\n class=\"col-12\">\n </app-advanced-aggregator-list>\n </div>\n\n <!-- Footer for each subgroup -->\n <div *ngIf=\"config.aggregators && config.aggregators.length > 0\"\n class=\"footer-text text-dark font-weight-normal text-right font-sm mt-3 mr-2 w-100\">\n <div *ngFor=\"let aggregator of config.aggregators\">\n <span *ngIf=\"aggregator.label\"> {{ aggregator.label | translate }} </span>:\n <span class=\"font-weight-bold\"> {{ subgroup.value | callAggregator: aggregators: aggregator.name }}\n </span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n</ng-container>",
6862
6939
  changeDetection: ChangeDetectionStrategy.OnPush
6863
6940
  }] }
6864
6941
  ];
@@ -6876,6 +6953,7 @@ var AdvancedAggregatorComponent = /** @class */ (function () {
6876
6953
  selectedGroups$: [{ type: Input, args: ['selectedGroups',] }],
6877
6954
  filters$: [{ type: Input, args: ['filters',] }],
6878
6955
  searchExpression: [{ type: Input, args: ['searchExpression',] }],
6956
+ detailTemplate: [{ type: Input, args: ['detailTemplate',] }],
6879
6957
  eventHandler: [{ type: Output }]
6880
6958
  };
6881
6959
  return AdvancedAggregatorComponent;
@@ -6945,7 +7023,7 @@ var AdvancedAggregatorListComponent = /** @class */ (function () {
6945
7023
  { type: Component, args: [{
6946
7024
  // tslint:disable-next-line:component-selector
6947
7025
  selector: 'app-advanced-aggregator-list',
6948
- template: "<div id=\"group-list\" class=\"flex-column\" *ngIf=\"config && config.columns\">\n <ul class=\"sis--list-group sis--list-group-header\">\n <li class=\"sis--list-group-item text-wrap\">\n <div class=\"d-flex justify-content-center align-items-center\" *ngIf=\"body && body.length > 0\">\n <div *ngIf=\"config.actions && config.actions.length > 0\" class=\"sis--list-group-item_sm_column\"></div>\n <div *ngFor=\"let column of config.columns; let i = index\" class=\"text-left\" [class]=\"config.columns[i].length\"\n [translate]=\"config.columns[i].type === 'action' ? '' : column.title\" [ngClass]=\"{\n 'd-none': config.columns[i].hidden\n }\"></div>\n </div>\n </li>\n </ul>\n\n <!-- The list of entries -->\n <ul class=\"sis--list-group sis--list-group-body\" *ngIf=\"body && body.length > 0\">\n <li class=\"sis--list-group-item text-wrap\" *ngFor=\"let entry of body | orderBy: config.orderBy\">\n <div class=\"d-flex justify-content-center align-items-center list-color\">\n <!-- The list of actions -->\n <div *ngIf=\"config.actions && config.actions.length > 0\" class=\"sis--list-group-item_sm_column text-left pr-0\">\n <button *ngFor=\"let action of config.actions\" (click)=\"callCallback(action.identifier, entry)\"\n [title]=\"(action.title ? action.title : '') | translate \" class=\"btn btn-default px-0\">\n <i class=\"\" [class]=\"'fas text-indigo ml-2 ' + 'fa-' + action.icon\"></i>\n </button>\n <span class=\"px-0\">\n <i class=\"fa fa-fw\">&nbsp;</i>\n </span>\n\n </div>\n <!-- The list of data -->\n <div *ngFor=\"let column of config.columns; let i=index\" [class]=\"config.columns[i].length\" class=\"text-left\"\n [ngClass]=\"{\n 'text-truncate': config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate,\n 'd-none': config.columns[i].hidden,\n 'd-md-block': !config.columns[i].hidden\n }\"\n [title]=\"config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate ? entry[column.name] : ''\">\n <span class=\"text-secondary\"\n *ngIf=\"!config.columns[i].hasOwnProperty('type') || (config.columns[i].hasOwnProperty('type') && config.columns[i].type === 'text')\"\n [ngClass]=\"{\n 'font-xs': config.columns[i].variant !== 'primary',\n 'text-body': config.columns[i].variant === 'primary',\n 'text-success': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && entry[config.columns[i].condition],\n 'text-danger': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && !entry[config.columns[i].condition],\n 'font-lg': config.columns[i].variant === 'redGreen' && entry[column.name] && entry[column.name].length > 3,\n 'font-2xl': config.columns[i].variant === 'redGreen' && entry[column.name] && entry[column.name].length <= 3\n }\">\n {{entry[column.name] || '-'}}\n </span>\n\n <span *ngIf=\"config.columns[i].type === 'boolean'\">\n <i class=\"fa font-lg\" [ngClass]=\"{\n 'fa-check text-success': !!entry[column.name],\n 'fa-times text-danger': !!entry[column.name] === false && config.columns[i].variant !== 'checkOrDash'\n }\"></i>\n <span\n *ngIf=\"entry[column.name].toString() !== config.columns[i].trueValue && config.columns[i].variant === 'checkOrDash'\"\n class=\"text-secondary font-xs\">-</span>\n </span>\n </div>\n </div>\n <div *ngIf=\"entry && entry.subitems\">\n <div *ngFor=\"let subitem of entry.subitems\" class=\"d-flex justify-content-center align-items-center list-color\">\n <div *ngIf=\"config.actions && config.actions.length > 0\"\n class=\"sis--list-group-item_sm_column text-left pr-0\">\n <span class=\"px-0\">\n <i class=\"fa fa-fw\">&nbsp;</i>\n </span>\n <button *ngFor=\"let action of config.actions\" (click)=\"callCallback(action.identifier, subitem)\"\n [title]=\"(action.title ? action.title : '') | translate \" class=\"btn btn-default px-0\">\n <i *ngIf=\"action.type === 'edit'\" class=\"fas fa-edit text-indigo\"></i>\n </button>\n </div>\n <div class=\"text-left\"></div>\n <div *ngFor=\"let column of config.columns; let i=index\" [class]=\"config.columns[i].length\" class=\"text-left\"\n [ngClass]=\"{\n 'text-truncate': config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate,\n 'd-none': config.columns[i].hidden,\n 'd-md-block': !config.columns[i].hidden\n }\"\n [title]=\"config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate ? entry[column.name] : ''\">\n <span class=\"text-secondary\"\n *ngIf=\"!config.columns[i].hasOwnProperty('type') || (config.columns[i].hasOwnProperty('type') && config.columns[i].type === 'text')\"\n [ngClass]=\"{\n 'font-xs': config.columns[i].variant !== 'primary',\n 'text-body': config.columns[i].variant === 'primary',\n 'text-success': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && subitem[config.columns[i].condition],\n 'text-danger': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && !subitem[config.columns[i].condition],\n 'font-lg': config.columns[i].variant === 'redGreen' && subitem[column.name] && subitem[column.name].length > 3,\n 'font-2xl': config.columns[i].variant === 'redGreen' && subitem[column.name] && subitem[column.name].length <= 3\n }\">\n {{subitem[column.name] || '-'}}\n </span>\n <span *ngIf=\"config.columns[i].type === 'boolean'\">\n <i class=\"fa font-lg\" [ngClass]=\"{\n 'fa-check text-success': !!subitem[column.name],\n 'fa-times text-danger': !!subitem[column.name] === false && config.columns[i].variant !== 'checkOrDash'\n }\"></i>\n <span\n *ngIf=\"subitem[column.name].toString() !== config.columns[i].trueValue && config.columns[i].variant === 'checkOrDash'\"\n class=\"text-secondary font-xs\">-</span>\n </span>\n </div>\n </div>\n </div>\n </li>\n </ul>\n</div>"
7026
+ template: "<div id=\"group-list\" class=\"flex-column\" *ngIf=\"config && config.columns\">\n <ul class=\"sis--list-group sis--list-group-header\">\n <li class=\"sis--list-group-item text-wrap\">\n <div class=\"d-flex justify-content-center align-items-center\" *ngIf=\"body && body.length > 0\">\n <div *ngIf=\"config.actions && config.actions.length > 0\" class=\"sis--list-group-item_sm_column\"></div>\n <div *ngFor=\"let column of config.columns; let i = index\" class=\"text-left\" [class]=\"config.columns[i].length\"\n [translate]=\"config.columns[i].type === 'action' ? '' : column.title\" [ngClass]=\"{\n 'd-none': config.columns[i].hidden\n }\"></div>\n </div>\n </li>\n </ul>\n\n <!-- The list of entries -->\n <ul class=\"sis--list-group sis--list-group-body\" *ngIf=\"body && body.length > 0\">\n <li class=\"sis--list-group-item text-wrap\" *ngFor=\"let entry of body | orderBy: config.orderBy\">\n <div class=\"d-flex justify-content-center align-items-center list-color\">\n <!-- The list of actions -->\n <div *ngIf=\"config.actions && config.actions.length > 0\" class=\"sis--list-group-item_sm_column text-left pr-0\">\n <button *ngFor=\"let action of config.actions\" (click)=\"callCallback(action.identifier, entry)\"\n [title]=\"(action.title ? action.title : '') | translate \" class=\"btn btn-default px-0\">\n <i class=\"\" [class]=\"'fas text-indigo ml-2 ' + 'fa-' + action.icon\"></i>\n </button>\n <span class=\"px-0\">\n <i class=\"fa fa-fw\">&nbsp;</i>\n </span>\n\n </div>\n <!-- The list of data -->\n <div *ngFor=\"let column of config.columns; let i=index\" [class]=\"config.columns[i].length\" class=\"text-left\"\n [ngClass]=\"{\n 'text-truncate': config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate,\n 'd-none': config.columns[i].hidden,\n 'd-md-block': !config.columns[i].hidden\n }\"\n [title]=\"config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate ? entry[column.name] : ''\">\n <span class=\"text-secondary\"\n *ngIf=\"!config.columns[i].hasOwnProperty('type') || (config.columns[i].hasOwnProperty('type') && config.columns[i].type === 'text')\"\n [ngClass]=\"{\n 'font-xs': config.columns[i].variant !== 'primary',\n 'text-body': config.columns[i].variant === 'primary',\n 'text-success': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && entry[config.columns[i].condition],\n 'text-danger': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && !entry[config.columns[i].condition],\n 'font-lg': config.columns[i].variant === 'redGreen' && entry[column.name] && entry[column.name].length > 3,\n 'font-2xl': config.columns[i].variant === 'redGreen' && entry[column.name] && entry[column.name].length <= 3\n }\">\n {{entry[column.name] || '-'}}\n </span>\n\n <span *ngIf=\"config.columns[i].type === 'boolean'\">\n <i class=\"fa font-lg\" [ngClass]=\"{\n 'fa-check text-success': !!entry[column.name],\n 'fa-times text-danger': !!entry[column.name] === false && config.columns[i].variant !== 'checkOrDash'\n }\"></i>\n <span\n *ngIf=\"entry[column.name].toString() !== config.columns[i].trueValue && config.columns[i].variant === 'checkOrDash'\"\n class=\"text-secondary font-xs\">-</span>\n </span>\n </div>\n </div>\n <ng-container *ngIf=\"detailTemplate\">\n <ng-container *ngTemplateOutlet=\"detailTemplate; context: { row: entry }\"></ng-container>\n </ng-container>\n <div *ngIf=\"entry && entry.subitems\">\n <ng-container *ngFor=\"let subitem of entry.subitems\">\n <div class=\"d-flex d-debug justify-content-center align-items-center list-color\">\n <div *ngIf=\"config.actions && config.actions.length > 0\" class=\"sis--list-group-item_sm_column text-left pr-0\">\n <span class=\"px-0\">\n <i class=\"fa fa-fw\">&nbsp;</i>\n </span>\n <button *ngFor=\"let action of config.actions\" (click)=\"callCallback(action.identifier, subitem)\"\n [title]=\"(action.title ? action.title : '') | translate \" class=\"btn btn-default px-0\">\n <i *ngIf=\"action.type === 'edit'\" class=\"fas fa-edit text-indigo\"></i>\n </button>\n </div>\n <div class=\"text-left\"></div>\n <div *ngFor=\"let column of config.columns; let i=index\" [class]=\"config.columns[i].length\" class=\"text-left\"\n [ngClass]=\"{\n 'text-truncate': config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate,\n 'd-none': config.columns[i].hidden,\n 'd-md-block': !config.columns[i].hidden\n }\"\n [title]=\"config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate ? entry[column.name] : ''\">\n <span class=\"text-secondary\"\n *ngIf=\"!config.columns[i].hasOwnProperty('type') || (config.columns[i].hasOwnProperty('type') && config.columns[i].type === 'text')\"\n [ngClass]=\"{\n 'font-xs': config.columns[i].variant !== 'primary',\n 'text-body': config.columns[i].variant === 'primary',\n 'text-success': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && subitem[config.columns[i].condition],\n 'text-danger': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && !subitem[config.columns[i].condition],\n 'font-lg': config.columns[i].variant === 'redGreen' && subitem[column.name] && subitem[column.name].length > 3,\n 'font-2xl': config.columns[i].variant === 'redGreen' && subitem[column.name] && subitem[column.name].length <= 3\n }\">\n {{subitem[column.name] || '-'}}\n </span>\n <span *ngIf=\"config.columns[i].type === 'boolean'\">\n <i class=\"fa font-lg\" [ngClass]=\"{\n 'fa-check text-success': !!subitem[column.name],\n 'fa-times text-danger': !!subitem[column.name] === false && config.columns[i].variant !== 'checkOrDash'\n }\"></i>\n <span\n *ngIf=\"subitem[column.name].toString() !== config.columns[i].trueValue && config.columns[i].variant === 'checkOrDash'\"\n class=\"text-secondary font-xs\">-</span>\n </span>\n </div>\n </div>\n </ng-container>\n </div>\n </li>\n </ul>\n</div>"
6949
7027
  }] }
6950
7028
  ];
6951
7029
  /** @nocollapse */
@@ -6955,6 +7033,7 @@ var AdvancedAggregatorListComponent = /** @class */ (function () {
6955
7033
  AdvancedAggregatorListComponent.propDecorators = {
6956
7034
  config: [{ type: Input }],
6957
7035
  body: [{ type: Input }],
7036
+ detailTemplate: [{ type: Input, args: ['detailTemplate',] }],
6958
7037
  clickEvent: [{ type: Output }]
6959
7038
  };
6960
7039
  return AdvancedAggregatorListComponent;
@@ -8062,6 +8141,6 @@ var TablesModule = /** @class */ (function () {
8062
8141
  * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
8063
8142
  */
8064
8143
 
8065
- export { AdvancedListComponent, AdvancedRowActionComponent, AdvancedSearchFormComponent, AdvancedSelectComponent, AdvancedSelectService, AdvancedTableConfigurationResolver, AdvancedSearchConfigurationResolver, AdvancedColumnFormatter, NestedPropertyFormatter, ButtonFormatter, LinkFormatter, ActionLinkFormatter, ActionButtonFormatter, ActionSplitButtonFormatter, SelectRowFormatter, TemplateFormatter, TrueFalseFormatter, TranslationFormatter, DateTimeFormatter, NgClassFormatter, LanguageFormatter, COLUMN_FORMATTERS, ExportLimitExceededError, AdvancedTableConfiguration, AdvancedTableComponent, AdvancedTableSettingsComponent, AdvancedTableSearchBaseComponent, AdvancedTableSearchComponent, FORMATTERS, AdvancedFilterValueProvider, AdvancedTableModalBaseTemplate, AdvancedTableModalBaseComponent, SimpleHeaderToolsComponent, TableSimpleHeaderComponent, AdvancedTableNotNullError, AdvancedTableEditorDirective, MAX_EXPORT_ITEMS, BtnExpDirective, AdvancedAggregatorComponent, AdvancedAggregatorListComponent, AddItemsComponent, AdvancedAggregatorPipe, ParseTitlePipe, AdvancedAggregatorService, TablesModule, ActivatedTableService, ColumnSelectorService, ColumnSelectorComponent, tableReducer, initialState, tableInitialState, tableReducers, featureName, getTablesState, selectTable, AdvancedSearchState as ɵa, AdvancedTableState as ɵc, AdvancedSearchRouterState as ɵd };
8144
+ export { AdvancedListComponent, AdvancedRowActionComponent, AdvancedSearchFormComponent, AdvancedSelectComponent, AdvancedSelectService, AdvancedTableConfigurationResolver, AdvancedSearchConfigurationResolver, AdvancedColumnFormatter, NestedPropertyFormatter, ButtonFormatter, LinkFormatter, ActionLinkFormatter, ActionButtonFormatter, ActionSplitButtonFormatter, SelectRowFormatter, TemplateFormatter, TrueFalseFormatter, TranslationFormatter, DateTimeFormatter, NgClassFormatter, LanguageFormatter, COLUMN_FORMATTERS, ExportLimitExceededError, AdvancedTableConfiguration, AdvancedTableComponent, AdvancedTableSettingsComponent, AdvancedTableSearchBaseComponent, AdvancedTableSearchComponent, FORMATTERS, AdvancedFilterValueProvider, AdvancedTableModalBaseTemplate, AdvancedTableModalBaseComponent, SimpleHeaderToolsComponent, TableSimpleHeaderComponent, AdvancedTableNotNullError, AdvancedTableEditorDirective, MAX_EXPORT_ITEMS, BtnExpDirective, AdvancedAggregatorComponent, AdvancedAggregatorListComponent, AddItemsComponent, AdvancedAggregatorPipe, ParseTitlePipe, AdvancedAggregatorService, TablesModule, ActivatedTableService, ColumnSelectorService, ColumnSelectorComponent, tableReducer, initialState, tableInitialState, tableReducers, featureName, getTablesState, selectTable, CustomButtonFormatter as ɵa, AdvancedSearchState as ɵb, AdvancedTableState as ɵd, AdvancedSearchRouterState as ɵe };
8066
8145
 
8067
8146
  //# sourceMappingURL=universis-ngx-tables.js.map