@universis/ngx-tables 6.13.2 → 6.13.4

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

@@ -2081,7 +2081,11 @@
             this.order = new i0.EventEmitter();
             this.scroll = new i0.EventEmitter();
             this.selectedItems = new i0.EventEmitter();
+            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];
@@ -2877,6 +2881,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
@@ -3100,8 +3162,10 @@
                                             }
                                             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,
@@ -3128,8 +3192,10 @@
                                         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,
@@ -3873,7 +3939,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 */
@@ -3914,7 +3980,11 @@
             order: [{ type: i0.Output, args: ['order',] }],
             scroll: [{ type: i0.Output, args: ['scroll',] }],
             selectedItems: [{ type: i0.Output, args: ['selectedItems',] }],
+            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 }],
@@ -3934,6 +4004,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',] }],
@@ -7559,7 +7630,8 @@
             },
             "ExportList": "Εξαγωγή λίστας",
             "ExportLimitExceeded": "Το πλήθος των στοιχείων προς εξαγωγή ({{dataLength}}) ξεπερνάει το μέγιστο επιτρεπτό ({{exportLimit}}). Παρακαλούμε προσαρμόστε τα φίλτρα της αναζήτησης και προσπαθήστε ξανά.",
-            "ExportResults": "Δεδομένα λίστας"
+            "ExportResults": "Δεδομένα λίστας",
+            "RowDetails": "Λεπτομέρειες"
         },
         "TrueFalse": {
             "long": {
@@ -7690,7 +7762,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": {