@universis/ngx-tables 6.13.2 → 6.13.4

package/fesm5/universis-ngx-tables.js

@@ -23,7 +23,7 @@ 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, defineInjectable, inject, NgModule, CUSTOM_ELEMENTS_SCHEMA, HostListener, ChangeDetectorRef, InjectionToken, Inject, Injector, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
+import { Injectable, Directive, Optional, Input, Pipe, Component, EventEmitter, Output, ElementRef, ViewChild, ViewEncapsulation, NgModule, CUSTOM_ELEMENTS_SCHEMA, defineInjectable, inject, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, InjectionToken, Inject, Injector, ViewContainerRef } from '@angular/core';
 import { ActivatedRoute, Router, NavigationStart, NavigationEnd, RouterModule } from '@angular/router';
 import { createFeatureSelector, createSelector, select, Store } from '@ngrx/store';
 import { skip, first, filter } from 'rxjs/operators';
@@ -1869,7 +1869,11 @@ var AdvancedTableComponent = /** @class */ (function () {
         this.order = new EventEmitter();
         this.scroll = new EventEmitter();
         this.selectedItems = new EventEmitter();
+        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];
@@ -2678,6 +2682,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
@@ -2902,8 +2964,10 @@ var AdvancedTableComponent = /** @class */ (function () {
                                     }
                                     q.filter(expressions.join(' and '));
                                 }
+                                self.beforeServerData.emit(q);
                                 self.lastQueryParams = q.getParams();
                                 return q.getList().then(function (items) {
+                                    self.afterServerData.emit(items);
                                     /** @type {?} */
                                     var dataSet = {
                                         recordsTotal: items.total,
@@ -2930,8 +2994,10 @@ var AdvancedTableComponent = /** @class */ (function () {
                                 return fnCallback(EMPTY_DATASET);
                             });
                         }
+                        self.beforeServerData.emit(q);
                         self.lastQueryParams = q.getParams();
                         q.getList().then(function (items) {
+                            self.afterServerData.emit(items);
                             /** @type {?} */
                             var dataSet = {
                                 recordsTotal: items.total,
@@ -3675,7 +3741,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 */
@@ -3714,7 +3780,11 @@ var AdvancedTableComponent = /** @class */ (function () {
         order: [{ type: Output, args: ['order',] }],
         scroll: [{ type: Output, args: ['scroll',] }],
         selectedItems: [{ type: Output, args: ['selectedItems',] }],
+        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 }],
@@ -3734,6 +3804,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',] }],
@@ -7308,7 +7379,8 @@ var TABLES_EL = {
         },
         "ExportList": "Εξαγωγή λίστας",
         "ExportLimitExceeded": "Το πλήθος των στοιχείων προς εξαγωγή ({{dataLength}}) ξεπερνάει το μέγιστο επιτρεπτό ({{exportLimit}}). Παρακαλούμε προσαρμόστε τα φίλτρα της αναζήτησης και προσπαθήστε ξανά.",
-        "ExportResults": "Δεδομένα λίστας"
+        "ExportResults": "Δεδομένα λίστας",
+        "RowDetails": "Λεπτομέρειες"
     },
     "TrueFalse": {
         "long": {
@@ -7439,7 +7511,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": {