@universis/ngx-tables 6.13.3 → 6.13.5

package/fesm2015/universis-ngx-tables.js

@@ -23,7 +23,7 @@ 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 { Injectable, Directive, Optional, Input, Output, EventEmitter, Pipe, Component, ViewChild, ViewEncapsulation, ElementRef, ChangeDetectorRef, NgModule, CUSTOM_ELEMENTS_SCHEMA, defineInjectable, inject, HostListener, ChangeDetectionStrategy, InjectionToken, Inject, Injector, ViewContainerRef } from '@angular/core';
+import { Injectable, Directive, Optional, Input, Output, EventEmitter, Component, ElementRef, ViewChild, ViewEncapsulation, Pipe, ChangeDetectorRef, NgModule, CUSTOM_ELEMENTS_SCHEMA, defineInjectable, inject, HostListener, 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';
@@ -1449,6 +1449,7 @@ class AdvancedTableComponent {
         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();
@@ -1461,6 +1462,8 @@ class AdvancedTableComponent {
         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];
@@ -2024,7 +2027,7 @@ class AdvancedTableComponent {
                             createdCell(cell, cellData, rowData, rowIndex, colIndex) {
                                 items.forEach((columnFormatter) => {
                                     /** @type {?} */
-                                    const formatter = self._columnFormatters[columnFormatter.formatter];
+                                    const formatter = /** @type {?} */ ((self._columnFormatters[columnFormatter.formatter]));
                                     if (formatter && typeof formatter.afterRender === 'function') {
                                         formatter.afterRender.bind(column)(cell, cellData, rowData, rowIndex, colIndex);
                                     }
@@ -2041,12 +2044,14 @@ class AdvancedTableComponent {
                             render: formatter.render.bind(column),
                         });
                     }
-                    if (formatter && typeof formatter.afterRender === 'function') {
+                    /** @type {?} */
+                    const 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),
                         });
                     }
                 }
@@ -2174,6 +2179,59 @@ class AdvancedTableComponent {
                     }
                 });
             }
+            // display row details
+            if (this.detailsTemplate) {
+                /** @type {?} */
+                const detailsString = this._translateService.instant('Tables.RowDetails');
+                /** @type {?} */
+                const firstColumn = this.config.columns[0];
+                /** @type {?} */
+                const showDetailsColumnDefinition = {
+                    className: 'details-control pl-4 pr-0',
+                    data: firstColumn.property || firstColumn.name,
+                    defaultContent: '',
+                    title: '',
+                    sortable: false,
+                    visible: !this.customSelect,
+                    name: firstColumn.name,
+                    render: () => {
+                        return `<button role="button" title="${detailsString}" arial-label="${detailsString}"></button>`;
+                    },
+                };
+                // and finally add column
+                tableColumns.unshift(showDetailsColumnDefinition);
+                // user interface additions
+                // Add event listener for opening and closing details
+                tableElement.on('click', 'td.details-control', (e) => {
+                    /** @type {?} */
+                    const tr = e.target.closest('tr');
+                    /** @type {?} */
+                    const row = self.dataTable.row(tr);
+                    /** @type {?} */
+                    const container = document.createElement('div');
+                    /** @type {?} */
+                    const 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.hideDetails.emit();
+                        row.child.hide();
+                        detailsViewRef.destroy();
+                    }
+                    else {
+                        // Open this row
+                        this.showDetails.emit({ row });
+                        row.child(container).show();
+                        row.child().addClass('dt-child');
+                    }
+                });
+            }
             /** @type {?} */
             const settings = {
                 // set length menu
@@ -2542,6 +2600,9 @@ class AdvancedTableComponent {
                 });
             }
             if (this.selectable) ;
+            if (this.dataTable) {
+                this.dataTable.destroy();
+            }
             // handle init.dt event and emit local event
             this.dataTable = tableElement.on('init.dt', (event) => {
                 /** @type {?} */
@@ -2587,6 +2648,24 @@ class AdvancedTableComponent {
                     infoSelector.classList.add('d-none');
                 }
             }
+            /** @type {?} */
+            const onCustomEvent = (event) => {
+                /** @type {?} */
+                const target = /** @type {?} */ (event.currentTarget);
+                /** @type {?} */
+                const customEvent = target.dataset["event"] || 'event';
+                /** @type {?} */
+                const row = this.dataTable.row(target.closest('tr'));
+                /** @type {?} */
+                const data = row.data();
+                this.customEvent.emit({
+                    name: customEvent,
+                    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;
@@ -3119,7 +3198,7 @@ AdvancedTableComponent.decorators = [
     </div>
   `,
                 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 */
@@ -3149,6 +3228,7 @@ AdvancedTableComponent.propDecorators = {
     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',] }],
@@ -3161,6 +3241,8 @@ AdvancedTableComponent.propDecorators = {
     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 }],
@@ -3180,6 +3262,7 @@ AdvancedTableComponent.propDecorators = {
     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',] }],
@@ -5290,6 +5373,48 @@ AdvancedTableSearchComponent.propDecorators = {
     listChange: [{ type: Output, args: ['listChange',] }]
 };
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ */
+class CustomButtonFormatter extends ButtonFormatter {
+    constructor() {
+        super();
+    }
+    /**
+     * @param {?} data
+     * @param {?} type
+     * @param {?} row
+     * @param {?} meta
+     * @return {?}
+     */
+    render(data, type, row, meta) {
+        if (data == null || this.injector == null) {
+            return '';
+        }
+        /** @type {?} */
+        const formatOptions = Object.assign({
+            buttonClass: 'btn btn-default',
+        }, this.formatOptions);
+        /** @type {?} */
+        let buttonText;
+        /** @type {?} */
+        let 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 {?} */
+        const customEvent = formatOptions.event || 'event';
+        return `<button style="cursor:pointer" data-event="${customEvent}" class="dt-custom ${formatOptions.buttonClass}" title="${buttonTitle}">${buttonText}</button>`;
+    }
+}
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
@@ -5309,6 +5434,7 @@ const FORMATTERS = {
     TrueFalseFormatter: new TrueFalseFormatter(),
     ActionButtonFormatter: new ActionButtonFormatter(),
     ActionSplitButtonFormatter: new ActionSplitButtonFormatter(),
+    CustomButtonFormatter: new CustomButtonFormatter(),
 };
 
 /**
@@ -5815,7 +5941,7 @@ AdvancedAggregatorComponent.decorators = [
     { 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
             }] }
 ];
@@ -5833,6 +5959,7 @@ AdvancedAggregatorComponent.propDecorators = {
     selectedGroups$: [{ type: Input, args: ['selectedGroups',] }],
     filters$: [{ type: Input, args: ['filters',] }],
     searchExpression: [{ type: Input, args: ['searchExpression',] }],
+    detailTemplate: [{ type: Input, args: ['detailTemplate',] }],
     eventHandler: [{ type: Output }]
 };
 
@@ -5884,7 +6011,7 @@ AdvancedAggregatorListComponent.decorators = [
     { 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 */
@@ -5894,6 +6021,7 @@ AdvancedAggregatorListComponent.ctorParameters = () => [
 AdvancedAggregatorListComponent.propDecorators = {
     config: [{ type: Input }],
     body: [{ type: Input }],
+    detailTemplate: [{ type: Input, args: ['detailTemplate',] }],
     clickEvent: [{ type: Output }]
 };
 
@@ -6243,7 +6371,8 @@ const TABLES_EL = {
         },
         "ExportList": "Εξαγωγή λίστας",
         "ExportLimitExceeded": "Το πλήθος των στοιχείων προς εξαγωγή ({{dataLength}}) ξεπερνάει το μέγιστο επιτρεπτό ({{exportLimit}}). Παρακαλούμε προσαρμόστε τα φίλτρα της αναζήτησης και προσπαθήστε ξανά.",
-        "ExportResults": "Δεδομένα λίστας"
+        "ExportResults": "Δεδομένα λίστας",
+        "RowDetails": "Λεπτομέρειες"
     },
     "TrueFalse": {
         "long": {
@@ -6374,7 +6503,8 @@ const 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": {
@@ -6898,6 +7028,6 @@ TablesModule.ctorParameters = () => [
  * @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