@universis/ngx-tables 6.13.3 → 6.13.5

package/fesm5/universis-ngx-tables.js

@@ -22,8 +22,8 @@ import { BsModalRef, BsModalService, ModalModule } from 'ngx-bootstrap/modal';
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 import { GroupByPipe, NgPipesModule } from 'ngx-pipes';
 import { template, at, cloneDeep, isEmpty } from 'lodash';
-import { __extends, __awaiter, __generator, __values, __assign, __spread } from 'tslib';
-import { Injectable, Directive, Optional, Input, Pipe, Component, EventEmitter, Output, ElementRef, ViewChild, ViewEncapsulation, NgModule, CUSTOM_ELEMENTS_SCHEMA, defineInjectable, inject, HostListener, ChangeDetectorRef, InjectionToken, Inject, Injector, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
+import { __extends, __awaiter, __generator, __values, __spread, __assign } from 'tslib';
+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';
 import { ActivatedRoute, Router, NavigationStart, NavigationEnd, RouterModule } from '@angular/router';
 import { createFeatureSelector, createSelector, select, Store } from '@ngrx/store';
 import { skip, first, filter } from 'rxjs/operators';
@@ -1860,6 +1860,7 @@ var AdvancedTableComponent = /** @class */ (function () {
         this.height = 800;
         this.showActions = true;
         this.autoLoad = true;
+        this.customEvent = new EventEmitter();
         this.load = new EventEmitter();
         this.init = new EventEmitter();
         this.reload = new EventEmitter();
@@ -1872,6 +1873,8 @@ var AdvancedTableComponent = /** @class */ (function () {
         this.beforeServerData = new EventEmitter();
         this.afterServerData = new EventEmitter();
         this.loading = new EventEmitter();
+        this.showDetails = new EventEmitter();
+        this.hideDetails = new EventEmitter();
         this.scrollable = true;
         this.serverSide = true;
         this.lengthMenu = [50, 100, 200, 500];
@@ -2520,7 +2523,7 @@ var AdvancedTableComponent = /** @class */ (function () {
                             function (cell, cellData, rowData, rowIndex, colIndex) {
                                 items_1.forEach(function (columnFormatter) {
                                     /** @type {?} */
-                                    var formatter = self._columnFormatters[columnFormatter.formatter];
+                                    var formatter = /** @type {?} */ ((self._columnFormatters[columnFormatter.formatter]));
                                     if (formatter && typeof formatter.afterRender === 'function') {
                                         formatter.afterRender.bind(column)(cell, cellData, rowData, rowIndex, colIndex);
                                     }
@@ -2537,12 +2540,14 @@ var AdvancedTableComponent = /** @class */ (function () {
                             render: formatter.render.bind(column),
                         });
                     }
-                    if (formatter && typeof formatter.afterRender === 'function') {
+                    /** @type {?} */
+                    var afterRenderFormatter = /** @type {?} */ ((formatter));
+                    if (afterRenderFormatter && typeof afterRenderFormatter.afterRender === 'function') {
                         Object.assign(columnDefinition, {
                             render: formatter.render.bind(column),
                         });
                         Object.assign(columnDefinition, {
-                            createdCell: formatter.afterRender.bind(column),
+                            createdCell: afterRenderFormatter.afterRender.bind(column),
                         });
                     }
                 }
@@ -2680,6 +2685,64 @@ var AdvancedTableComponent = /** @class */ (function () {
                     }
                 });
             }
+            // display row details
+            if (this.detailsTemplate) {
+                /** @type {?} */
+                var detailsString_1 = this._translateService.instant('Tables.RowDetails');
+                /** @type {?} */
+                var firstColumn = this.config.columns[0];
+                /** @type {?} */
+                var showDetailsColumnDefinition = {
+                    className: 'details-control pl-4 pr-0',
+                    data: firstColumn.property || firstColumn.name,
+                    defaultContent: '',
+                    title: '',
+                    sortable: false,
+                    visible: !this.customSelect,
+                    name: firstColumn.name,
+                    render: function () {
+                        return "<button role=\"button\" title=\"" + detailsString_1 + "\" arial-label=\"" + detailsString_1 + "\"></button>";
+                    },
+                };
+                // and finally add column
+                // and finally add column
+                tableColumns_1.unshift(showDetailsColumnDefinition);
+                // user interface additions
+                // Add event listener for opening and closing details
+                // user interface additions
+                // Add event listener for opening and closing details
+                tableElement_1.on('click', 'td.details-control', function (e) {
+                    /** @type {?} */
+                    var tr = e.target.closest('tr');
+                    /** @type {?} */
+                    var row = self.dataTable.row(tr);
+                    /** @type {?} */
+                    var container = document.createElement('div');
+                    /** @type {?} */
+                    var detailsViewRef = _this._viewContainerRef.createEmbeddedView(_this.detailsTemplate, {
+                        rowData: row.data(),
+                    });
+                    detailsViewRef.detectChanges();
+                    if (detailsViewRef.rootNodes.length !== 1) {
+                        throw new Error('DetailsTemplate must have exactly one root node.');
+                    }
+                    container.appendChild(detailsViewRef.rootNodes[0]);
+                    if (row.child.isShown()) {
+                        // This row is already open - close it
+                        // This row is already open - close it
+                        _this.hideDetails.emit();
+                        row.child.hide();
+                        detailsViewRef.destroy();
+                    }
+                    else {
+                        // Open this row
+                        // Open this row
+                        _this.showDetails.emit({ row: row });
+                        row.child(container).show();
+                        row.child().addClass('dt-child');
+                    }
+                });
+            }
             /** @type {?} */
             var settings = {
                 // set length menu
@@ -3049,6 +3112,9 @@ var AdvancedTableComponent = /** @class */ (function () {
                 });
             }
             if (this.selectable) ;
+            if (this.dataTable) {
+                this.dataTable.destroy();
+            }
             // handle init.dt event and emit local event
             this.dataTable = tableElement_1.on('init.dt', function (event) {
                 /** @type {?} */
@@ -3094,6 +3160,24 @@ var AdvancedTableComponent = /** @class */ (function () {
                     infoSelector.classList.add('d-none');
                 }
             }
+            /** @type {?} */
+            var onCustomEvent = function (event) {
+                /** @type {?} */
+                var target = /** @type {?} */ (event.currentTarget);
+                /** @type {?} */
+                var customEvent = target.dataset["event"] || 'event';
+                /** @type {?} */
+                var row = _this.dataTable.row(target.closest('tr'));
+                /** @type {?} */
+                var data = row.data();
+                _this.customEvent.emit({
+                    name: customEvent,
+                    data: data,
+                    row: row.index()
+                });
+            };
+            this.dataTable.off('click', '.dt-custom');
+            this.dataTable.on('click', '.dt-custom', onCustomEvent);
             // show or hide pager
             if (this.showPaging) {
                 this.showPaging = true;
@@ -3681,7 +3765,7 @@ var AdvancedTableComponent = /** @class */ (function () {
                     selector: 'app-advanced-table',
                     template: "\n    <table #table class=\"dataTable\">\n    </table>\n    <div #emptyTable class=\"d-none\">\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    <div #errorTemplate class=\"d-none error-message\">\n      <div class=\"text-center\">\n        <div class=\"mt-4\">\n          <div class=\"icon-circle bg-danger border-gray-100\"></div>\n        </div>\n        <div class=\"mt-4\">\n          <h4 class=\"font-3xl text-secondary\" [translate]=\"'Tables.DataError.Title'\"></h4>\n          <p class=\"font-lg text-secondary mb-1\" [translate]=\"'Tables.DataError.Message'\"></p>\n          <p class=\"font-lg text-secondary error-inner-message\">\n            <small></small>\n          </p>\n        </div>\n      </div>\n    </div>\n  ",
                     encapsulation: ViewEncapsulation.None,
-                    styles: ["div.dataTables_processing>div:last-child>div{background-color:var(--secondary)}table.dataTable thead .sorting{background-image:none}table.dataTable thead tr th{border-bottom:none;font-weight:500;font-size:.75rem}table.dataTable thead th{color:#73818e;font-size:.75rem;font-weight:600;padding-top:16px;padding-bottom:4px;border-bottom:none;padding-left:8px}table.dataTable tbody tr:first-child td:first-child{border-radius:6px 0}table.dataTable tbody tr:first-child td:last-child{border-radius:0 6px}table.dataTable tbody tr{border-radius:6px}table.dataTable tbody tr td:first-child{border-left:1px solid #c2cfd6}table.dataTable tbody tr td:last-child{border-right:1px solid #c2cfd6}table.dataTable tbody tr td{padding-top:8px;padding-bottom:8px;border-top:1px solid #c2cfd6}table.dataTable tbody tr:last-child td:first-child{border-radius:0 0 0 6px}table.dataTable tbody tr:last-child td:last-child{border-radius:0 0 6px}table.dataTable tbody tr:last-child td{border-bottom:1px solid #c2cfd6}table.dataTable tbody tr.dtrg-group.dtrg-start th{border:2px solid #c2cfd6;border-bottom:1px solid #c2cfd6;color:#3e515b;background-color:#f0f3f5}table.dataTable tbody tr.dtrg-group.dtrg-end th{border-top:2px solid #c2cfd6;border-right:2px solid #c2cfd6;border-left:2px solid #c2cfd6;color:#3e515b;background-color:#f0f3f5}table.dataTable tbody tr:nth-last-child(1) th{border-bottom:2px solid #c2cfd6}table.dataTable td.dataTables_empty{border:none!important}table.dataTable .error-inner-message>small{overflow-wrap:break-word}table.dataTable.no-footer{border-bottom:none}.dataTables_paginate .btn.previous{margin-right:8px}.dataTables_paginate .btn.next{margin-left:8px}.dataTables_info,.dataTables_paginate{margin-top:1rem}.dataTables_paginate span .btn{border-radius:1.5rem}.dataTables_filter{display:none}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:0;overflow:auto}.dataTables_paginate{display:none}.dataTable.processing{opacity:15%}.dataTables_wrapper .dataTables_processing{background:0 0;position:absolute;display:inline-block;top:25%;z-index:5;color:#73818e}.text-decoration-line-through{text-decoration:line-through!important}tr.removed .checkbox+label{visibility:hidden}"]
+                    styles: ["div.dataTables_processing>div:last-child>div{background-color:var(--secondary)}table.dataTable thead .sorting{background-image:none}table.dataTable thead tr th{border-bottom:none;font-weight:500;font-size:.75rem}table.dataTable thead th{color:#73818e;font-size:.75rem;font-weight:600;padding-top:16px;padding-bottom:4px;border-bottom:none;padding-left:8px}table.dataTable tbody tr:first-child td:first-child{border-radius:6px 0}table.dataTable tbody tr:first-child td:last-child{border-radius:0 6px}table.dataTable tbody tr{border-radius:6px}table.dataTable tbody tr td:first-child{border-left:1px solid #c2cfd6}table.dataTable tbody tr td:last-child{border-right:1px solid #c2cfd6}table.dataTable tbody tr td{padding-top:8px;padding-bottom:8px;border-top:1px solid #c2cfd6}table.dataTable tbody tr:last-child td:first-child{border-radius:0 0 0 6px}table.dataTable tbody tr:last-child td:last-child{border-radius:0 0 6px}table.dataTable tbody tr:last-child td{border-bottom:1px solid #c2cfd6}table.dataTable tbody tr.dtrg-group.dtrg-start th{border:2px solid #c2cfd6;border-bottom:1px solid #c2cfd6;color:#3e515b;background-color:#f0f3f5}table.dataTable tbody tr.dtrg-group.dtrg-end th{border-top:2px solid #c2cfd6;border-right:2px solid #c2cfd6;border-left:2px solid #c2cfd6;color:#3e515b;background-color:#f0f3f5}table.dataTable tbody tr:nth-last-child(1) th{border-bottom:2px solid #c2cfd6}table.dataTable td.dataTables_empty{border:none!important}table.dataTable .error-inner-message>small{overflow-wrap:break-word}table.dataTable.no-footer{border-bottom:none}.dataTables_paginate .btn.previous{margin-right:8px}.dataTables_paginate .btn.next{margin-left:8px}.dataTables_info,.dataTables_paginate{margin-top:1rem}.dataTables_paginate span .btn{border-radius:1.5rem}.dataTables_filter{display:none}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:0;overflow:auto}.dataTables_paginate{display:none}.dataTable.processing{opacity:15%}.dataTables_wrapper .dataTables_processing{background:0 0;position:absolute;display:inline-block;top:25%;z-index:5;color:#73818e}.text-decoration-line-through{text-decoration:line-through!important}tr.removed .checkbox+label{visibility:hidden}table.dataTable td.details-control{cursor:pointer}table.dataTable td.details-control button{border:none;background-color:inherit;outline:0}table.dataTable td.details-control button::after{content:'\\25B7'}table.dataTable tr.dt-hasChild td.details-control button::after{content:'\\25BD'}"]
                 }] }
     ];
     /** @nocollapse */
@@ -3711,6 +3795,7 @@ var AdvancedTableComponent = /** @class */ (function () {
         height: [{ type: Input }],
         showActions: [{ type: Input }],
         autoLoad: [{ type: Input }],
+        customEvent: [{ type: Output, args: ['customEvent',] }],
         load: [{ type: Output, args: ['load',] }],
         init: [{ type: Output, args: ['init',] }],
         reload: [{ type: Input, args: ['reload',] }],
@@ -3723,6 +3808,8 @@ var AdvancedTableComponent = /** @class */ (function () {
         beforeServerData: [{ type: Output, args: ['beforeServerData',] }],
         afterServerData: [{ type: Output, args: ['afterServerData',] }],
         loading: [{ type: Output, args: ['loading',] }],
+        showDetails: [{ type: Output, args: ['showDetails',] }],
+        hideDetails: [{ type: Output, args: ['hideDetails',] }],
         scrollable: [{ type: Input }],
         serverSide: [{ type: Input }],
         lengthMenu: [{ type: Input }],
@@ -3742,6 +3829,7 @@ var AdvancedTableComponent = /** @class */ (function () {
         rowGroup: [{ type: Input }],
         headerTemplate: [{ type: Input }],
         footerTemplate: [{ type: Input }],
+        detailsTemplate: [{ type: Input }],
         header: [{ type: ViewChild, args: ['header',] }],
         footer: [{ type: ViewChild, args: ['footer',] }],
         config: [{ type: Input, args: ['config',] }],
@@ -6076,6 +6164,57 @@ var AdvancedTableSearchComponent = /** @class */ (function (_super) {
     return AdvancedTableSearchComponent;
 }(AdvancedTableSearchBaseComponent));
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ */
+var CustomButtonFormatter = /** @class */ (function (_super) {
+    __extends(CustomButtonFormatter, _super);
+    function CustomButtonFormatter() {
+        return _super.call(this) || this;
+    }
+    /**
+     * @param {?} data
+     * @param {?} type
+     * @param {?} row
+     * @param {?} meta
+     * @return {?}
+     */
+    CustomButtonFormatter.prototype.render = /**
+     * @param {?} data
+     * @param {?} type
+     * @param {?} row
+     * @param {?} meta
+     * @return {?}
+     */
+    function (data, type, row, meta) {
+        if (data == null || this.injector == null) {
+            return '';
+        }
+        /** @type {?} */
+        var formatOptions = Object.assign({
+            buttonClass: 'btn btn-default',
+        }, this.formatOptions);
+        /** @type {?} */
+        var buttonText;
+        /** @type {?} */
+        var buttonTitle = '';
+        if (formatOptions.buttonText) {
+            buttonText = this.injector.get(TranslateService).instant(formatOptions.buttonText);
+        }
+        else {
+            buttonText = formatOptions.buttonContent;
+        }
+        if (formatOptions.buttonTitle) {
+            buttonTitle = this.injector.get(TranslateService).instant(formatOptions.buttonTitle);
+        }
+        /** @type {?} */
+        var customEvent = formatOptions.event || 'event';
+        return "<button style=\"cursor:pointer\" data-event=\"" + customEvent + "\" class=\"dt-custom " + formatOptions.buttonClass + "\" title=\"" + buttonTitle + "\">" + buttonText + "</button>";
+    };
+    return CustomButtonFormatter;
+}(ButtonFormatter));
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
@@ -6095,6 +6234,7 @@ var FORMATTERS = {
     TrueFalseFormatter: new TrueFalseFormatter(),
     ActionButtonFormatter: new ActionButtonFormatter(),
     ActionSplitButtonFormatter: new ActionSplitButtonFormatter(),
+    CustomButtonFormatter: new CustomButtonFormatter(),
 };
 
 /**
@@ -6795,7 +6935,7 @@ var AdvancedAggregatorComponent = /** @class */ (function () {
         { type: Component, args: [{
                     // tslint:disable-next-line:component-selector
                     selector: 'app-advanced-aggregator',
-                    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>",
+                    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>",
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }] }
     ];
@@ -6813,6 +6953,7 @@ var AdvancedAggregatorComponent = /** @class */ (function () {
         selectedGroups$: [{ type: Input, args: ['selectedGroups',] }],
         filters$: [{ type: Input, args: ['filters',] }],
         searchExpression: [{ type: Input, args: ['searchExpression',] }],
+        detailTemplate: [{ type: Input, args: ['detailTemplate',] }],
         eventHandler: [{ type: Output }]
     };
     return AdvancedAggregatorComponent;
@@ -6882,7 +7023,7 @@ var AdvancedAggregatorListComponent = /** @class */ (function () {
         { type: Component, args: [{
                     // tslint:disable-next-line:component-selector
                     selector: 'app-advanced-aggregator-list',
-                    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>"
+                    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>"
                 }] }
     ];
     /** @nocollapse */
@@ -6892,6 +7033,7 @@ var AdvancedAggregatorListComponent = /** @class */ (function () {
     AdvancedAggregatorListComponent.propDecorators = {
         config: [{ type: Input }],
         body: [{ type: Input }],
+        detailTemplate: [{ type: Input, args: ['detailTemplate',] }],
         clickEvent: [{ type: Output }]
     };
     return AdvancedAggregatorListComponent;
@@ -7316,7 +7458,8 @@ var TABLES_EL = {
         },
         "ExportList": "Εξαγωγή λίστας",
         "ExportLimitExceeded": "Το πλήθος των στοιχείων προς εξαγωγή ({{dataLength}}) ξεπερνάει το μέγιστο επιτρεπτό ({{exportLimit}}). Παρακαλούμε προσαρμόστε τα φίλτρα της αναζήτησης και προσπαθήστε ξανά.",
-        "ExportResults": "Δεδομένα λίστας"
+        "ExportResults": "Δεδομένα λίστας",
+        "RowDetails": "Λεπτομέρειες"
     },
     "TrueFalse": {
         "long": {
@@ -7447,7 +7590,8 @@ var TABLES_EN = {
         },
         "ExportList": "Export list",
         "ExportLimitExceeded": "The number of items that are to be exported ({{dataLength}}) exceeds the export limit ({{exportLimit}}). Please apply more specific filters to the search.",
-        "ExportResults": "Exported list"
+        "ExportResults": "Exported list",
+        "RowDetails": "Details"
     },
     "TrueFalse": {
         "long": {
@@ -7997,6 +8141,6 @@ var TablesModule = /** @class */ (function () {
  * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
  */
 
-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 };
+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 };
 
 //# sourceMappingURL=universis-ngx-tables.js.map