@universis/ngx-tables 6.13.4 → 6.13.6

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 +2 -2
  27. package/universis-ngx-tables.d.ts +5 -4
  28. package/universis-ngx-tables.metadata.json +1 -1
@@ -2072,6 +2072,7 @@
2072
2072
  this.height = 800;
2073
2073
  this.showActions = true;
2074
2074
  this.autoLoad = true;
2075
+ this.customEvent = new i0.EventEmitter();
2075
2076
  this.load = new i0.EventEmitter();
2076
2077
  this.init = new i0.EventEmitter();
2077
2078
  this.reload = new i0.EventEmitter();
@@ -2721,7 +2722,7 @@
2721
2722
  */ function (cell, cellData, rowData, rowIndex, colIndex) {
2722
2723
  items_1.forEach(function (columnFormatter) {
2723
2724
  /** @type {?} */
2724
- var formatter = self._columnFormatters[columnFormatter.formatter];
2725
+ var formatter = /** @type {?} */ ((self._columnFormatters[columnFormatter.formatter]));
2725
2726
  if (formatter && typeof formatter.afterRender === 'function') {
2726
2727
  formatter.afterRender.bind(column)(cell, cellData, rowData, rowIndex, colIndex);
2727
2728
  }
@@ -2738,12 +2739,14 @@
2738
2739
  render: formatter.render.bind(column),
2739
2740
  });
2740
2741
  }
2741
- if (formatter && typeof formatter.afterRender === 'function') {
2742
+ /** @type {?} */
2743
+ var afterRenderFormatter = /** @type {?} */ ((formatter));
2744
+ if (afterRenderFormatter && typeof afterRenderFormatter.afterRender === 'function') {
2742
2745
  Object.assign(columnDefinition, {
2743
2746
  render: formatter.render.bind(column),
2744
2747
  });
2745
2748
  Object.assign(columnDefinition, {
2746
- createdCell: formatter.afterRender.bind(column),
2749
+ createdCell: afterRenderFormatter.afterRender.bind(column),
2747
2750
  });
2748
2751
  }
2749
2752
  }
@@ -3307,6 +3310,9 @@
3307
3310
  });
3308
3311
  }
3309
3312
  if (this.selectable) ;
3313
+ if (this.dataTable) {
3314
+ this.dataTable.destroy();
3315
+ }
3310
3316
  // handle init.dt event and emit local event
3311
3317
  this.dataTable = tableElement_1.on('init.dt', function (event) {
3312
3318
  /** @type {?} */
@@ -3352,6 +3358,24 @@
3352
3358
  infoSelector.classList.add('d-none');
3353
3359
  }
3354
3360
  }
3361
+ /** @type {?} */
3362
+ var onCustomEvent = function (event) {
3363
+ /** @type {?} */
3364
+ var target = /** @type {?} */ (event.currentTarget);
3365
+ /** @type {?} */
3366
+ var customEvent = target.dataset["event"] || 'event';
3367
+ /** @type {?} */
3368
+ var row = _this.dataTable.row(target.closest('tr'));
3369
+ /** @type {?} */
3370
+ var data = row.data();
3371
+ _this.customEvent.emit({
3372
+ name: customEvent,
3373
+ data: data,
3374
+ row: row.index()
3375
+ });
3376
+ };
3377
+ this.dataTable.off('click', '.dt-custom');
3378
+ this.dataTable.on('click', '.dt-custom', onCustomEvent);
3355
3379
  // show or hide pager
3356
3380
  if (this.showPaging) {
3357
3381
  this.showPaging = true;
@@ -3971,6 +3995,7 @@
3971
3995
  height: [{ type: i0.Input }],
3972
3996
  showActions: [{ type: i0.Input }],
3973
3997
  autoLoad: [{ type: i0.Input }],
3998
+ customEvent: [{ type: i0.Output, args: ['customEvent',] }],
3974
3999
  load: [{ type: i0.Output, args: ['load',] }],
3975
4000
  init: [{ type: i0.Output, args: ['init',] }],
3976
4001
  reload: [{ type: i0.Input, args: ['reload',] }],
@@ -6361,6 +6386,57 @@
6361
6386
  return AdvancedTableSearchComponent;
6362
6387
  }(AdvancedTableSearchBaseComponent));
6363
6388
 
6389
+ /**
6390
+ * @fileoverview added by tsickle
6391
+ * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
6392
+ */
6393
+ var CustomButtonFormatter = /** @class */ (function (_super) {
6394
+ __extends(CustomButtonFormatter, _super);
6395
+ function CustomButtonFormatter() {
6396
+ return _super.call(this) || this;
6397
+ }
6398
+ /**
6399
+ * @param {?} data
6400
+ * @param {?} type
6401
+ * @param {?} row
6402
+ * @param {?} meta
6403
+ * @return {?}
6404
+ */
6405
+ CustomButtonFormatter.prototype.render = /**
6406
+ * @param {?} data
6407
+ * @param {?} type
6408
+ * @param {?} row
6409
+ * @param {?} meta
6410
+ * @return {?}
6411
+ */
6412
+ function (data, type, row, meta) {
6413
+ if (data == null || this.injector == null) {
6414
+ return '';
6415
+ }
6416
+ /** @type {?} */
6417
+ var formatOptions = Object.assign({
6418
+ buttonClass: 'btn btn-default',
6419
+ }, this.formatOptions);
6420
+ /** @type {?} */
6421
+ var buttonText;
6422
+ /** @type {?} */
6423
+ var buttonTitle = '';
6424
+ if (formatOptions.buttonText) {
6425
+ buttonText = this.injector.get(core.TranslateService).instant(formatOptions.buttonText);
6426
+ }
6427
+ else {
6428
+ buttonText = formatOptions.buttonContent;
6429
+ }
6430
+ if (formatOptions.buttonTitle) {
6431
+ buttonTitle = this.injector.get(core.TranslateService).instant(formatOptions.buttonTitle);
6432
+ }
6433
+ /** @type {?} */
6434
+ var customEvent = formatOptions.event || 'event';
6435
+ return "<button style=\"cursor:pointer\" data-event=\"" + customEvent + "\" class=\"dt-custom " + formatOptions.buttonClass + "\" title=\"" + buttonTitle + "\">" + buttonText + "</button>";
6436
+ };
6437
+ return CustomButtonFormatter;
6438
+ }(ButtonFormatter));
6439
+
6364
6440
  /**
6365
6441
  * @fileoverview added by tsickle
6366
6442
  * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
@@ -6380,6 +6456,7 @@
6380
6456
  TrueFalseFormatter: new TrueFalseFormatter(),
6381
6457
  ActionButtonFormatter: new ActionButtonFormatter(),
6382
6458
  ActionSplitButtonFormatter: new ActionSplitButtonFormatter(),
6459
+ CustomButtonFormatter: new CustomButtonFormatter(),
6383
6460
  };
6384
6461
 
6385
6462
  /**
@@ -7102,7 +7179,7 @@
7102
7179
  { type: i0.Component, args: [{
7103
7180
  // tslint:disable-next-line:component-selector
7104
7181
  selector: 'app-advanced-aggregator',
7105
- 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>",
7182
+ 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>",
7106
7183
  changeDetection: i0.ChangeDetectionStrategy.OnPush
7107
7184
  }] }
7108
7185
  ];
@@ -7122,6 +7199,7 @@
7122
7199
  selectedGroups$: [{ type: i0.Input, args: ['selectedGroups',] }],
7123
7200
  filters$: [{ type: i0.Input, args: ['filters',] }],
7124
7201
  searchExpression: [{ type: i0.Input, args: ['searchExpression',] }],
7202
+ detailTemplate: [{ type: i0.Input, args: ['detailTemplate',] }],
7125
7203
  eventHandler: [{ type: i0.Output }]
7126
7204
  };
7127
7205
  return AdvancedAggregatorComponent;
@@ -7191,7 +7269,7 @@
7191
7269
  { type: i0.Component, args: [{
7192
7270
  // tslint:disable-next-line:component-selector
7193
7271
  selector: 'app-advanced-aggregator-list',
7194
- 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>"
7272
+ 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>"
7195
7273
  }] }
7196
7274
  ];
7197
7275
  /** @nocollapse */
@@ -7203,6 +7281,7 @@
7203
7281
  AdvancedAggregatorListComponent.propDecorators = {
7204
7282
  config: [{ type: i0.Input }],
7205
7283
  body: [{ type: i0.Input }],
7284
+ detailTemplate: [{ type: i0.Input, args: ['detailTemplate',] }],
7206
7285
  clickEvent: [{ type: i0.Output }]
7207
7286
  };
7208
7287
  return AdvancedAggregatorListComponent;
@@ -8378,9 +8457,10 @@
8378
8457
  exports.featureName = featureName;
8379
8458
  exports.getTablesState = getTablesState;
8380
8459
  exports.selectTable = selectTable;
8381
- exports.ɵa = AdvancedSearchState;
8382
- exports.ɵc = AdvancedTableState;
8383
- exports.ɵd = AdvancedSearchRouterState;
8460
+ exports.ɵa = CustomButtonFormatter;
8461
+ exports.ɵb = AdvancedSearchState;
8462
+ exports.ɵd = AdvancedTableState;
8463
+ exports.ɵe = AdvancedSearchRouterState;
8384
8464
 
8385
8465
  Object.defineProperty(exports, '__esModule', { value: true });
8386
8466