@universis/ngx-tables 6.13.3 → 6.13.5

package/bundles/universis-ngx-tables.umd.js

@@ -2072,6 +2072,7 @@
             this.height = 800;
             this.showActions = true;
             this.autoLoad = true;
+            this.customEvent = new i0.EventEmitter();
             this.load = new i0.EventEmitter();
             this.init = new i0.EventEmitter();
             this.reload = new i0.EventEmitter();
@@ -2084,6 +2085,8 @@
             this.beforeServerData = new i0.EventEmitter();
             this.afterServerData = new i0.EventEmitter();
             this.loading = new i0.EventEmitter();
+            this.showDetails = new i0.EventEmitter();
+            this.hideDetails = new i0.EventEmitter();
             this.scrollable = true;
             this.serverSide = true;
             this.lengthMenu = [50, 100, 200, 500];
@@ -2719,7 +2722,7 @@
                                      */ 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);
                                             }
@@ -2736,12 +2739,14 @@
                                     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),
                                 });
                             }
                         }
@@ -2879,6 +2884,64 @@
                             }
                         });
                     }
+                    // 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
@@ -3247,6 +3310,9 @@
                         });
                     }
                     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 {?} */
@@ -3292,6 +3358,24 @@
                             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;
@@ -3879,7 +3963,7 @@
                         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: i0.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 */
@@ -3911,6 +3995,7 @@
             height: [{ type: i0.Input }],
             showActions: [{ type: i0.Input }],
             autoLoad: [{ type: i0.Input }],
+            customEvent: [{ type: i0.Output, args: ['customEvent',] }],
             load: [{ type: i0.Output, args: ['load',] }],
             init: [{ type: i0.Output, args: ['init',] }],
             reload: [{ type: i0.Input, args: ['reload',] }],
@@ -3923,6 +4008,8 @@
             beforeServerData: [{ type: i0.Output, args: ['beforeServerData',] }],
             afterServerData: [{ type: i0.Output, args: ['afterServerData',] }],
             loading: [{ type: i0.Output, args: ['loading',] }],
+            showDetails: [{ type: i0.Output, args: ['showDetails',] }],
+            hideDetails: [{ type: i0.Output, args: ['hideDetails',] }],
             scrollable: [{ type: i0.Input }],
             serverSide: [{ type: i0.Input }],
             lengthMenu: [{ type: i0.Input }],
@@ -3942,6 +4029,7 @@
             rowGroup: [{ type: i0.Input }],
             headerTemplate: [{ type: i0.Input }],
             footerTemplate: [{ type: i0.Input }],
+            detailsTemplate: [{ type: i0.Input }],
             header: [{ type: i0.ViewChild, args: ['header',] }],
             footer: [{ type: i0.ViewChild, args: ['footer',] }],
             config: [{ type: i0.Input, args: ['config',] }],
@@ -6298,6 +6386,57 @@
         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(core.TranslateService).instant(formatOptions.buttonText);
+                }
+                else {
+                    buttonText = formatOptions.buttonContent;
+                }
+                if (formatOptions.buttonTitle) {
+                    buttonTitle = this.injector.get(core.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
@@ -6317,6 +6456,7 @@
         TrueFalseFormatter: new TrueFalseFormatter(),
         ActionButtonFormatter: new ActionButtonFormatter(),
         ActionSplitButtonFormatter: new ActionSplitButtonFormatter(),
+        CustomButtonFormatter: new CustomButtonFormatter(),
     };
 
     /**
@@ -7039,7 +7179,7 @@
             { type: i0.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: i0.ChangeDetectionStrategy.OnPush
                     }] }
         ];
@@ -7059,6 +7199,7 @@
             selectedGroups$: [{ type: i0.Input, args: ['selectedGroups',] }],
             filters$: [{ type: i0.Input, args: ['filters',] }],
             searchExpression: [{ type: i0.Input, args: ['searchExpression',] }],
+            detailTemplate: [{ type: i0.Input, args: ['detailTemplate',] }],
             eventHandler: [{ type: i0.Output }]
         };
         return AdvancedAggregatorComponent;
@@ -7128,7 +7269,7 @@
             { type: i0.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 */
@@ -7140,6 +7281,7 @@
         AdvancedAggregatorListComponent.propDecorators = {
             config: [{ type: i0.Input }],
             body: [{ type: i0.Input }],
+            detailTemplate: [{ type: i0.Input, args: ['detailTemplate',] }],
             clickEvent: [{ type: i0.Output }]
         };
         return AdvancedAggregatorListComponent;
@@ -7567,7 +7709,8 @@
             },
             "ExportList": "Εξαγωγή λίστας",
             "ExportLimitExceeded": "Το πλήθος των στοιχείων προς εξαγωγή ({{dataLength}}) ξεπερνάει το μέγιστο επιτρεπτό ({{exportLimit}}). Παρακαλούμε προσαρμόστε τα φίλτρα της αναζήτησης και προσπαθήστε ξανά.",
-            "ExportResults": "Δεδομένα λίστας"
+            "ExportResults": "Δεδομένα λίστας",
+            "RowDetails": "Λεπτομέρειες"
         },
         "TrueFalse": {
             "long": {
@@ -7698,7 +7841,8 @@
             },
             "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": {
@@ -8313,9 +8457,10 @@
     exports.featureName = featureName;
     exports.getTablesState = getTablesState;
     exports.selectTable = selectTable;
-    exports.ɵa = AdvancedSearchState;
-    exports.ɵc = AdvancedTableState;
-    exports.ɵd = AdvancedSearchRouterState;
+    exports.ɵa = CustomButtonFormatter;
+    exports.ɵb = AdvancedSearchState;
+    exports.ɵd = AdvancedTableState;
+    exports.ɵe = AdvancedSearchRouterState;
 
     Object.defineProperty(exports, '__esModule', { value: true });