@angular-generic-table/core - npm Package Compare versions

Comparing version 4.7.1 to 4.7.2

CHANGELOG.md

@@ -5,3 +5,10 @@ Release History
 ## [Unreleased]
+
+# [4.7.2] - 2017-11-18
+### Fixed
+- Placement of dropdown for inline edit (issue #153).
+- Support for BOM (issue #147).
+
 # [4.7.1] - 2017-11-13
+### Fixed
 - Fixed #149 for angular 5 support
@@ -8,0 +15,0 @@

components/generic-table.component.d.ts

@@ -235,4 +235,5 @@ import { OnInit, OnChanges, EventEmitter, Type, SimpleChanges, Renderer2, OnDestroy } from '@angular/core';
      * @param {string} fileName - optional file name (overrides default file name).
+     * @param {boolean} useBOM - use BOM (byte order marker).
      */
-    exportCSV(fileName?: string): void;
+    exportCSV(fileName?: string, useBOM?: boolean): void;
     /** Return property */
@@ -239,0 +240,0 @@ private getProperty;

components/generic-table.component.js

@@ -961,7 +961,10 @@ "use strict";
      * @param {string} fileName - optional file name (overrides default file name).
+     * @param {boolean} useBOM - use BOM (byte order marker).
      */
-    GenericTableComponent.prototype.exportCSV = function (fileName) {
+    GenericTableComponent.prototype.exportCSV = function (fileName, useBOM) {
         var _this = this;
+        if (useBOM === void 0) { useBOM = false; }
         var data = this.data.exportData;
         var csv = '';
+        var BOM = '\uFEFF';
         // csv export headers
@@ -996,7 +999,7 @@ for (var i = 0; i < this._gtSettings.length; i++) {
         });
-        var blob = new Blob([csv], {
-            type: 'text/csv;charset=utf-8;'
+        var blob = new Blob([(useBOM ? BOM : '') + csv], {
+            type: 'text/csv;charset=utf-8'
         });
         if (window.navigator.msSaveOrOpenBlob) {
-            navigator.msSaveOrOpenBlob(blob, fileName ? fileName : this.gtTexts.csvDownload + '.csv');
+            navigator.msSaveOrOpenBlob(blob, fileName ? fileName + '.csv' : this.gtTexts.csvDownload + '.csv');
         }
@@ -1008,4 +1011,4 @@ else {
             if (link.download !== undefined) {
-                link.setAttribute('href', URL.createObjectURL(blob));
-                link.setAttribute('download', fileName ? fileName : this.gtTexts.csvDownload + '.csv');
+                link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent((useBOM ? BOM : '') + csv)); //URL.createObjectURL(blob));
+                link.setAttribute('download', fileName ? fileName + '.csv' : this.gtTexts.csvDownload + '.csv');
                 document.body.appendChild(link);
@@ -1015,4 +1018,4 @@ link.click();
             else {
-                csv = 'data:text/csv;charset=utf-8,' + csv;
-                window.open(encodeURI(csv));
+                csv = 'data:text/csv;charset=utf-8,' + (useBOM ? BOM : '') + csv;
+                window.open(encodeURIComponent(csv));
             }
@@ -1085,3 +1088,3 @@ document.body.removeChild(link);
                 selector: 'generic-table',
-                template: "\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length > 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-sort-label\" *ngIf=\"gtOptions.stack\">{{gtTexts.sortLabel}}</th>\n                <th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\"\n                    ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}} {{ gtFields | gtColumnClass:'th':column }}\"\n                    (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">\n                    {{gtFields | gtProperty:column.objectKey:'name'}}\n                </th>\n            </tr>\n            </thead>\n            <ng-template\n                    [ngIf]=\"gtTotals && (gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length).length > 0\">\n                <thead class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </thead>\n                <tfoot class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition:'footer'\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </tfoot>\n            </ng-template>\n            <tbody *ngIf=\"gtData && gtInfo\">\n            <ng-template class=\"table-rows\" ngFor let-row let-last=\"last\" [ngForTrackBy]=\"trackByFn\"\n                         [ngForOf]=\"gtOptions.lazyLoad && gtInfo ? (gtData[gtInfo.pageCurrent-1] | gtMeta:(gtInfo.pageCurrent-1):gtInfo.recordLength) : (gtData | gtMeta:null:null:gtData.length | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length | gtOrderBy:sortOrder:gtFields:refreshSorting:gtData.length | gtChunk:gtInfo:gtInfo.recordLength:gtInfo.pageCurrent:refreshPageArray:gtData.length:gtEvent:data | gtRowClass:gtFields)\">\n                <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading, 'row-expandable':gtRowComponent}\"\n                    class=\"{{row.$$gtRowClass}}\"\n                    (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n                    <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;trackBy:trackByColumnFn\"\n                        ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}} {{ gtFields | gtColumnClass:row:column }}\">\n                        <span class=\"gt-row-label\"\n                              *ngIf=\"gtOptions.stack\">{{(gtFields | gtProperty:column.objectKey:'stackedHeading') ? (gtFields | gtProperty:column.objectKey:'stackedHeading') : (gtFields | gtProperty:column.objectKey:'name')}}</span>\n                        <gt-custom-component-factory *ngIf=\"column.columnComponent\" class=\"gt-row-content\"\n                                                     [type]=\"column.columnComponent.type\"\n                                                     [injector]=\"column.columnComponent.injector\" [row]=\"row\"\n                                                     [column]=\"column\" (redrawEvent)=\"redraw($event)\"\n                                                     (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row, column.expand):''\"></gt-custom-component-factory>\n                        <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\"\n                              class=\"gt-row-content\" [innerHTML]=\"column.renderValue\"\n                              (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row, column.expand):''\"></span>\n                        <ng-template\n                                [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n                            <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\"\n                                   (keyup)=\"gtUpdateColumn($event,row, column)\">\n                            <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n                        </ng-template>\n                        <gt-dropdown\n                                *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\"\n                                [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\"\n                                [(selected)]=\"column.renderValue\" (selectedChange)=\"gtDropdownSelect(row, column)\">Add\n                            inline editing module\n                        </gt-dropdown>\n                    </td>\n                </tr>\n                <tr class=\"row-expanded\" *ngIf=\"metaInfo[row.$$gtRowId]?.isOpen\">\n                    <td [attr.colspan]=\"(gtFields | gtVisible:gtSettings:refreshPipe).length\">\n                        <gt-expanding-row [row]=\"row\"\n                                          [type]=\"gtRowComponent ? gtRowComponent:expandedRow.component\"\n                                          [columnWidth]=\"columnWidth\"\n                                          [gtFields]=\"gtFields\"\n                                          [gtOptions]=\"gtOptions\"\n                                          [gtInfo]=\"gtInfo\"\n                                          [gtSettings]=\"gtSettings\"\n                                          [data]=\"expandedRow.data\"\n                                          (redrawEvent)=\"redraw($event)\"\n                                          (toggleRowEvent)=\"toggleCollapse($event)\"></gt-expanding-row>\n                    </td>\n                </tr>\n                <tr *ngIf=\"gtOptions.reportColumnWidth && last\">\n                    <td style=\"padding: 0; border:none;\"\n                        *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" gtColumnWidth\n                        [objectKey]=\"column.objectKey\" [widths]=\"columnWidth\"></td>\n                </tr>\n            </ng-template>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && (gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-matching-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">\n                    {{gtTexts.noMatchingData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && !(gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.noData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && loading\">\n                <td class=\"gt-loading-data\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.loading}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length === 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumnsHeading}}</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumns}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"!gtFields || !gtSettings\">\n            <thead>\n            <tr>\n                <th class=\"gt-loading-config\">&nbsp;</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-loading-config\">&nbsp;</td>\n            </tr>\n            </tbody>\n        </table>\n    ",
+                template: "\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length > 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-sort-label\" *ngIf=\"gtOptions.stack\">{{gtTexts.sortLabel}}</th>\n                <th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\"\n                    ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}} {{ gtFields | gtColumnClass:'th':column }}\"\n                    (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">\n                    {{gtFields | gtProperty:column.objectKey:'name'}}\n                </th>\n            </tr>\n            </thead>\n            <ng-template\n                    [ngIf]=\"gtTotals && (gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length).length > 0\">\n                <thead class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </thead>\n                <tfoot class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition:'footer'\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </tfoot>\n            </ng-template>\n            <tbody *ngIf=\"gtData && gtInfo\">\n            <ng-template class=\"table-rows\" ngFor let-row let-last=\"last\" [ngForTrackBy]=\"trackByFn\"\n                         [ngForOf]=\"gtOptions.lazyLoad && gtInfo ? (gtData[gtInfo.pageCurrent-1] | gtMeta:(gtInfo.pageCurrent-1):gtInfo.recordLength) : (gtData | gtMeta:null:null:gtData.length | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length | gtOrderBy:sortOrder:gtFields:refreshSorting:gtData.length | gtChunk:gtInfo:gtInfo.recordLength:gtInfo.pageCurrent:refreshPageArray:gtData.length:gtEvent:data | gtRowClass:gtFields)\">\n                <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading, 'row-expandable':gtRowComponent}\"\n                    class=\"{{row.$$gtRowClass}}\"\n                    (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n                    <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;trackBy:trackByColumnFn\"\n                        ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}} {{ gtFields | gtColumnClass:row:column }}\">\n                        <span class=\"gt-row-label\"\n                              *ngIf=\"gtOptions.stack\">{{(gtFields | gtProperty:column.objectKey:'stackedHeading') ? (gtFields | gtProperty:column.objectKey:'stackedHeading') : (gtFields | gtProperty:column.objectKey:'name')}}</span>\n                        <gt-custom-component-factory *ngIf=\"column.columnComponent\" class=\"gt-row-content\"\n                                                     [type]=\"column.columnComponent.type\"\n                                                     [injector]=\"column.columnComponent.injector\" [row]=\"row\"\n                                                     [column]=\"column\" (redrawEvent)=\"redraw($event)\"\n                                                     (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row, column.expand):''\"></gt-custom-component-factory>\n                        <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\"\n                              class=\"gt-row-content\" [innerHTML]=\"column.renderValue\"\n                              (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row, column.expand):''\"></span>\n                        <ng-template\n                                [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n                            <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\"\n                                   (keyup)=\"gtUpdateColumn($event,row, column)\">\n                            <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n                        </ng-template>\n                        <gt-dropdown\n                                *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\"\n                                [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\"\n                                [id]=\"'_' + row.$$gtRowId + '_' + column.objectKey\"\n                                [(selected)]=\"column.renderValue\" (selectedChange)=\"gtDropdownSelect(row, column)\">Add\n                            inline editing module\n                        </gt-dropdown>\n                    </td>\n                </tr>\n                <tr class=\"row-expanded\" *ngIf=\"metaInfo[row.$$gtRowId]?.isOpen\">\n                    <td [attr.colspan]=\"(gtFields | gtVisible:gtSettings:refreshPipe).length\">\n                        <gt-expanding-row [row]=\"row\"\n                                          [type]=\"gtRowComponent ? gtRowComponent:expandedRow.component\"\n                                          [columnWidth]=\"columnWidth\"\n                                          [gtFields]=\"gtFields\"\n                                          [gtOptions]=\"gtOptions\"\n                                          [gtInfo]=\"gtInfo\"\n                                          [gtSettings]=\"gtSettings\"\n                                          [data]=\"expandedRow.data\"\n                                          (redrawEvent)=\"redraw($event)\"\n                                          (toggleRowEvent)=\"toggleCollapse($event)\"></gt-expanding-row>\n                    </td>\n                </tr>\n                <tr *ngIf=\"gtOptions.reportColumnWidth && last\">\n                    <td style=\"padding: 0; border:none;\"\n                        *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" gtColumnWidth\n                        [objectKey]=\"column.objectKey\" [widths]=\"columnWidth\"></td>\n                </tr>\n            </ng-template>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && (gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-matching-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">\n                    {{gtTexts.noMatchingData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && !(gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.noData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && loading\">\n                <td class=\"gt-loading-data\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.loading}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length === 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumnsHeading}}</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumns}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"!gtFields || !gtSettings\">\n            <thead>\n            <tr>\n                <th class=\"gt-loading-config\">&nbsp;</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-loading-config\">&nbsp;</td>\n            </tr>\n            </tbody>\n        </table>\n    ",
             },] },
@@ -1088,0 +1091,0 @@ ];

components/generic-table.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GenericTableComponent":{"__symbolic":"class","arity":2,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"generic-table","template":"\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length > 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-sort-label\" *ngIf=\"gtOptions.stack\">{{gtTexts.sortLabel}}</th>\n                <th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\"\n                    ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}} {{ gtFields | gtColumnClass:'th':column }}\"\n                    (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">\n                    {{gtFields | gtProperty:column.objectKey:'name'}}\n                </th>\n            </tr>\n            </thead>\n            <ng-template\n                    [ngIf]=\"gtTotals && (gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length).length > 0\">\n                <thead class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </thead>\n                <tfoot class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition:'footer'\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </tfoot>\n            </ng-template>\n            <tbody *ngIf=\"gtData && gtInfo\">\n            <ng-template class=\"table-rows\" ngFor let-row let-last=\"last\" [ngForTrackBy]=\"trackByFn\"\n                         [ngForOf]=\"gtOptions.lazyLoad && gtInfo ? (gtData[gtInfo.pageCurrent-1] | gtMeta:(gtInfo.pageCurrent-1):gtInfo.recordLength) : (gtData | gtMeta:null:null:gtData.length | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length | gtOrderBy:sortOrder:gtFields:refreshSorting:gtData.length | gtChunk:gtInfo:gtInfo.recordLength:gtInfo.pageCurrent:refreshPageArray:gtData.length:gtEvent:data | gtRowClass:gtFields)\">\n                <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading, 'row-expandable':gtRowComponent}\"\n                    class=\"{{row.$$gtRowClass}}\"\n                    (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n                    <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;trackBy:trackByColumnFn\"\n                        ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}} {{ gtFields | gtColumnClass:row:column }}\">\n                        <span class=\"gt-row-label\"\n                              *ngIf=\"gtOptions.stack\">{{(gtFields | gtProperty:column.objectKey:'stackedHeading') ? (gtFields | gtProperty:column.objectKey:'stackedHeading') : (gtFields | gtProperty:column.objectKey:'name')}}</span>\n                        <gt-custom-component-factory *ngIf=\"column.columnComponent\" class=\"gt-row-content\"\n                                                     [type]=\"column.columnComponent.type\"\n                                                     [injector]=\"column.columnComponent.injector\" [row]=\"row\"\n                                                     [column]=\"column\" (redrawEvent)=\"redraw($event)\"\n                                                     (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row, column.expand):''\"></gt-custom-component-factory>\n                        <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\"\n                              class=\"gt-row-content\" [innerHTML]=\"column.renderValue\"\n                              (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row, column.expand):''\"></span>\n                        <ng-template\n                                [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n                            <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\"\n                                   (keyup)=\"gtUpdateColumn($event,row, column)\">\n                            <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n                        </ng-template>\n                        <gt-dropdown\n                                *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\"\n                                [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\"\n                                [(selected)]=\"column.renderValue\" (selectedChange)=\"gtDropdownSelect(row, column)\">Add\n                            inline editing module\n                        </gt-dropdown>\n                    </td>\n                </tr>\n                <tr class=\"row-expanded\" *ngIf=\"metaInfo[row.$$gtRowId]?.isOpen\">\n                    <td [attr.colspan]=\"(gtFields | gtVisible:gtSettings:refreshPipe).length\">\n                        <gt-expanding-row [row]=\"row\"\n                                          [type]=\"gtRowComponent ? gtRowComponent:expandedRow.component\"\n                                          [columnWidth]=\"columnWidth\"\n                                          [gtFields]=\"gtFields\"\n                                          [gtOptions]=\"gtOptions\"\n                                          [gtInfo]=\"gtInfo\"\n                                          [gtSettings]=\"gtSettings\"\n                                          [data]=\"expandedRow.data\"\n                                          (redrawEvent)=\"redraw($event)\"\n                                          (toggleRowEvent)=\"toggleCollapse($event)\"></gt-expanding-row>\n                    </td>\n                </tr>\n                <tr *ngIf=\"gtOptions.reportColumnWidth && last\">\n                    <td style=\"padding: 0; border:none;\"\n                        *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" gtColumnWidth\n                        [objectKey]=\"column.objectKey\" [widths]=\"columnWidth\"></td>\n                </tr>\n            </ng-template>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && (gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-matching-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">\n                    {{gtTexts.noMatchingData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && !(gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.noData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && loading\">\n                <td class=\"gt-loading-data\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.loading}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length === 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumnsHeading}}</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumns}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"!gtFields || !gtSettings\">\n            <thead>\n            <tr>\n                <th class=\"gt-loading-config\">&nbsp;</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-loading-config\">&nbsp;</td>\n            </tr>\n            </tbody>\n        </table>\n    "}]}],"members":{"gtOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtTotals":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtRowComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtTexts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtClasses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"gtInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"updateRecordRange":[{"__symbolic":"method"}],"updateTotals":[{"__symbolic":"method"}],"getRowState":[{"__symbolic":"method"}],"expandAllRows":[{"__symbolic":"method"}],"collapseAllRows":[{"__symbolic":"method"}],"selectAllRows":[{"__symbolic":"method"}],"deselectAllRows":[{"__symbolic":"method"}],"toggleCollapse":[{"__symbolic":"method"}],"toggleSelect":[{"__symbolic":"method"}],"updateRow":[{"__symbolic":"method"}],"removeRow":[{"__symbolic":"method"}],"isRowSelected":[{"__symbolic":"method"}],"_updateMetaInfo":[{"__symbolic":"method"}],"_pushLazyRows":[{"__symbolic":"method"}],"_toggleAllRowProperty":[{"__symbolic":"method"}],"_toggleRowProperty":[{"__symbolic":"method"}],"gtUpdateColumn":[{"__symbolic":"method"}],"gtDropdownSelect":[{"__symbolic":"method"}],"_editRow":[{"__symbolic":"method"}],"_listenForKeydownEvent":[{"__symbolic":"method"}],"inlineEditUpdate":[{"__symbolic":"method"}],"inlineEditCancel":[{"__symbolic":"method"}],"_stopListeningForKeydownEvent":[{"__symbolic":"method"}],"gtApplyFilter":[{"__symbolic":"method"}],"gtClearFilter":[{"__symbolic":"method"}],"gtSearch":[{"__symbolic":"method"}],"createStore":[{"__symbolic":"method"}],"loadingContent":[{"__symbolic":"method"}],"exportCSV":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}],"trackByColumnFn":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GenericTableComponent":{"__symbolic":"class","arity":2,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"generic-table","template":"\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length > 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-sort-label\" *ngIf=\"gtOptions.stack\">{{gtTexts.sortLabel}}</th>\n                <th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\"\n                    ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}} {{ gtFields | gtColumnClass:'th':column }}\"\n                    (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">\n                    {{gtFields | gtProperty:column.objectKey:'name'}}\n                </th>\n            </tr>\n            </thead>\n            <ng-template\n                    [ngIf]=\"gtTotals && (gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length).length > 0\">\n                <thead class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </thead>\n                <tfoot class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition:'footer'\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </tfoot>\n            </ng-template>\n            <tbody *ngIf=\"gtData && gtInfo\">\n            <ng-template class=\"table-rows\" ngFor let-row let-last=\"last\" [ngForTrackBy]=\"trackByFn\"\n                         [ngForOf]=\"gtOptions.lazyLoad && gtInfo ? (gtData[gtInfo.pageCurrent-1] | gtMeta:(gtInfo.pageCurrent-1):gtInfo.recordLength) : (gtData | gtMeta:null:null:gtData.length | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length | gtOrderBy:sortOrder:gtFields:refreshSorting:gtData.length | gtChunk:gtInfo:gtInfo.recordLength:gtInfo.pageCurrent:refreshPageArray:gtData.length:gtEvent:data | gtRowClass:gtFields)\">\n                <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading, 'row-expandable':gtRowComponent}\"\n                    class=\"{{row.$$gtRowClass}}\"\n                    (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n                    <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;trackBy:trackByColumnFn\"\n                        ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}} {{ gtFields | gtColumnClass:row:column }}\">\n                        <span class=\"gt-row-label\"\n                              *ngIf=\"gtOptions.stack\">{{(gtFields | gtProperty:column.objectKey:'stackedHeading') ? (gtFields | gtProperty:column.objectKey:'stackedHeading') : (gtFields | gtProperty:column.objectKey:'name')}}</span>\n                        <gt-custom-component-factory *ngIf=\"column.columnComponent\" class=\"gt-row-content\"\n                                                     [type]=\"column.columnComponent.type\"\n                                                     [injector]=\"column.columnComponent.injector\" [row]=\"row\"\n                                                     [column]=\"column\" (redrawEvent)=\"redraw($event)\"\n                                                     (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row, column.expand):''\"></gt-custom-component-factory>\n                        <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\"\n                              class=\"gt-row-content\" [innerHTML]=\"column.renderValue\"\n                              (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row, column.expand):''\"></span>\n                        <ng-template\n                                [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n                            <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\"\n                                   (keyup)=\"gtUpdateColumn($event,row, column)\">\n                            <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n                        </ng-template>\n                        <gt-dropdown\n                                *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\"\n                                [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\"\n                                [(selected)]=\"column.renderValue\" (selectedChange)=\"gtDropdownSelect(row, column)\">Add\n                            inline editing module\n                        </gt-dropdown>\n                    </td>\n                </tr>\n                <tr class=\"row-expanded\" *ngIf=\"metaInfo[row.$$gtRowId]?.isOpen\">\n                    <td [attr.colspan]=\"(gtFields | gtVisible:gtSettings:refreshPipe).length\">\n                        <gt-expanding-row [row]=\"row\"\n                                          [type]=\"gtRowComponent ? gtRowComponent:expandedRow.component\"\n                                          [columnWidth]=\"columnWidth\"\n                                          [gtFields]=\"gtFields\"\n                                          [gtOptions]=\"gtOptions\"\n                                          [gtInfo]=\"gtInfo\"\n                                          [gtSettings]=\"gtSettings\"\n                                          [data]=\"expandedRow.data\"\n                                          (redrawEvent)=\"redraw($event)\"\n                                          (toggleRowEvent)=\"toggleCollapse($event)\"></gt-expanding-row>\n                    </td>\n                </tr>\n                <tr *ngIf=\"gtOptions.reportColumnWidth && last\">\n                    <td style=\"padding: 0; border:none;\"\n                        *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" gtColumnWidth\n                        [objectKey]=\"column.objectKey\" [widths]=\"columnWidth\"></td>\n                </tr>\n            </ng-template>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && (gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-matching-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">\n                    {{gtTexts.noMatchingData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && !(gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.noData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && loading\">\n                <td class=\"gt-loading-data\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.loading}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length === 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumnsHeading}}</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumns}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"!gtFields || !gtSettings\">\n            <thead>\n            <tr>\n                <th class=\"gt-loading-config\">&nbsp;</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-loading-config\">&nbsp;</td>\n            </tr>\n            </tbody>\n        </table>\n    "}]}],"members":{"gtOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtTotals":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtRowComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtTexts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtClasses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"gtInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"updateRecordRange":[{"__symbolic":"method"}],"updateTotals":[{"__symbolic":"method"}],"getRowState":[{"__symbolic":"method"}],"expandAllRows":[{"__symbolic":"method"}],"collapseAllRows":[{"__symbolic":"method"}],"selectAllRows":[{"__symbolic":"method"}],"deselectAllRows":[{"__symbolic":"method"}],"toggleCollapse":[{"__symbolic":"method"}],"toggleSelect":[{"__symbolic":"method"}],"updateRow":[{"__symbolic":"method"}],"removeRow":[{"__symbolic":"method"}],"isRowSelected":[{"__symbolic":"method"}],"_updateMetaInfo":[{"__symbolic":"method"}],"_pushLazyRows":[{"__symbolic":"method"}],"_toggleAllRowProperty":[{"__symbolic":"method"}],"_toggleRowProperty":[{"__symbolic":"method"}],"gtUpdateColumn":[{"__symbolic":"method"}],"gtDropdownSelect":[{"__symbolic":"method"}],"_editRow":[{"__symbolic":"method"}],"_listenForKeydownEvent":[{"__symbolic":"method"}],"inlineEditUpdate":[{"__symbolic":"method"}],"inlineEditCancel":[{"__symbolic":"method"}],"_stopListeningForKeydownEvent":[{"__symbolic":"method"}],"gtApplyFilter":[{"__symbolic":"method"}],"gtClearFilter":[{"__symbolic":"method"}],"gtSearch":[{"__symbolic":"method"}],"createStore":[{"__symbolic":"method"}],"loadingContent":[{"__symbolic":"method"}],"exportCSV":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}],"trackByColumnFn":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GenericTableComponent":{"__symbolic":"class","arity":2,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"generic-table","template":"\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length > 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-sort-label\" *ngIf=\"gtOptions.stack\">{{gtTexts.sortLabel}}</th>\n                <th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\"\n                    ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}} {{ gtFields | gtColumnClass:'th':column }}\"\n                    (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">\n                    {{gtFields | gtProperty:column.objectKey:'name'}}\n                </th>\n            </tr>\n            </thead>\n            <ng-template\n                    [ngIf]=\"gtTotals && (gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length).length > 0\">\n                <thead class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </thead>\n                <tfoot class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition:'footer'\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </tfoot>\n            </ng-template>\n            <tbody *ngIf=\"gtData && gtInfo\">\n            <ng-template class=\"table-rows\" ngFor let-row let-last=\"last\" [ngForTrackBy]=\"trackByFn\"\n                         [ngForOf]=\"gtOptions.lazyLoad && gtInfo ? (gtData[gtInfo.pageCurrent-1] | gtMeta:(gtInfo.pageCurrent-1):gtInfo.recordLength) : (gtData | gtMeta:null:null:gtData.length | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length | gtOrderBy:sortOrder:gtFields:refreshSorting:gtData.length | gtChunk:gtInfo:gtInfo.recordLength:gtInfo.pageCurrent:refreshPageArray:gtData.length:gtEvent:data | gtRowClass:gtFields)\">\n                <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading, 'row-expandable':gtRowComponent}\"\n                    class=\"{{row.$$gtRowClass}}\"\n                    (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n                    <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;trackBy:trackByColumnFn\"\n                        ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}} {{ gtFields | gtColumnClass:row:column }}\">\n                        <span class=\"gt-row-label\"\n                              *ngIf=\"gtOptions.stack\">{{(gtFields | gtProperty:column.objectKey:'stackedHeading') ? (gtFields | gtProperty:column.objectKey:'stackedHeading') : (gtFields | gtProperty:column.objectKey:'name')}}</span>\n                        <gt-custom-component-factory *ngIf=\"column.columnComponent\" class=\"gt-row-content\"\n                                                     [type]=\"column.columnComponent.type\"\n                                                     [injector]=\"column.columnComponent.injector\" [row]=\"row\"\n                                                     [column]=\"column\" (redrawEvent)=\"redraw($event)\"\n                                                     (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row, column.expand):''\"></gt-custom-component-factory>\n                        <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\"\n                              class=\"gt-row-content\" [innerHTML]=\"column.renderValue\"\n                              (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row, column.expand):''\"></span>\n                        <ng-template\n                                [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n                            <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\"\n                                   (keyup)=\"gtUpdateColumn($event,row, column)\">\n                            <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n                        </ng-template>\n                        <gt-dropdown\n                                *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\"\n                                [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\"\n                                [id]=\"'_' + row.$$gtRowId + '_' + column.objectKey\"\n                                [(selected)]=\"column.renderValue\" (selectedChange)=\"gtDropdownSelect(row, column)\">Add\n                            inline editing module\n                        </gt-dropdown>\n                    </td>\n                </tr>\n                <tr class=\"row-expanded\" *ngIf=\"metaInfo[row.$$gtRowId]?.isOpen\">\n                    <td [attr.colspan]=\"(gtFields | gtVisible:gtSettings:refreshPipe).length\">\n                        <gt-expanding-row [row]=\"row\"\n                                          [type]=\"gtRowComponent ? gtRowComponent:expandedRow.component\"\n                                          [columnWidth]=\"columnWidth\"\n                                          [gtFields]=\"gtFields\"\n                                          [gtOptions]=\"gtOptions\"\n                                          [gtInfo]=\"gtInfo\"\n                                          [gtSettings]=\"gtSettings\"\n                                          [data]=\"expandedRow.data\"\n                                          (redrawEvent)=\"redraw($event)\"\n                                          (toggleRowEvent)=\"toggleCollapse($event)\"></gt-expanding-row>\n                    </td>\n                </tr>\n                <tr *ngIf=\"gtOptions.reportColumnWidth && last\">\n                    <td style=\"padding: 0; border:none;\"\n                        *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" gtColumnWidth\n                        [objectKey]=\"column.objectKey\" [widths]=\"columnWidth\"></td>\n                </tr>\n            </ng-template>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && (gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-matching-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">\n                    {{gtTexts.noMatchingData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && !(gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.noData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && loading\">\n                <td class=\"gt-loading-data\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.loading}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length === 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumnsHeading}}</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumns}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"!gtFields || !gtSettings\">\n            <thead>\n            <tr>\n                <th class=\"gt-loading-config\">&nbsp;</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-loading-config\">&nbsp;</td>\n            </tr>\n            </tbody>\n        </table>\n    "}]}],"members":{"gtOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtTotals":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtRowComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtTexts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtClasses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"gtInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"updateRecordRange":[{"__symbolic":"method"}],"updateTotals":[{"__symbolic":"method"}],"getRowState":[{"__symbolic":"method"}],"expandAllRows":[{"__symbolic":"method"}],"collapseAllRows":[{"__symbolic":"method"}],"selectAllRows":[{"__symbolic":"method"}],"deselectAllRows":[{"__symbolic":"method"}],"toggleCollapse":[{"__symbolic":"method"}],"toggleSelect":[{"__symbolic":"method"}],"updateRow":[{"__symbolic":"method"}],"removeRow":[{"__symbolic":"method"}],"isRowSelected":[{"__symbolic":"method"}],"_updateMetaInfo":[{"__symbolic":"method"}],"_pushLazyRows":[{"__symbolic":"method"}],"_toggleAllRowProperty":[{"__symbolic":"method"}],"_toggleRowProperty":[{"__symbolic":"method"}],"gtUpdateColumn":[{"__symbolic":"method"}],"gtDropdownSelect":[{"__symbolic":"method"}],"_editRow":[{"__symbolic":"method"}],"_listenForKeydownEvent":[{"__symbolic":"method"}],"inlineEditUpdate":[{"__symbolic":"method"}],"inlineEditCancel":[{"__symbolic":"method"}],"_stopListeningForKeydownEvent":[{"__symbolic":"method"}],"gtApplyFilter":[{"__symbolic":"method"}],"gtClearFilter":[{"__symbolic":"method"}],"gtSearch":[{"__symbolic":"method"}],"createStore":[{"__symbolic":"method"}],"loadingContent":[{"__symbolic":"method"}],"exportCSV":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}],"trackByColumnFn":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GenericTableComponent":{"__symbolic":"class","arity":2,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"generic-table","template":"\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length > 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-sort-label\" *ngIf=\"gtOptions.stack\">{{gtTexts.sortLabel}}</th>\n                <th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\"\n                    ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}} {{ gtFields | gtColumnClass:'th':column }}\"\n                    (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">\n                    {{gtFields | gtProperty:column.objectKey:'name'}}\n                </th>\n            </tr>\n            </thead>\n            <ng-template\n                    [ngIf]=\"gtTotals && (gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length).length > 0\">\n                <thead class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </thead>\n                <tfoot class=\"gt-totals\">\n                <tr *ngFor=\"let total of gtTotals | gtTotalsPosition:'footer'\">\n                    <td *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe;let i = index;\"\n                        ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{ gtFields | gtColumnClass:'total':column }}\">\n                        <span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span\n                            [innerHTML]=\"total.fields[column.objectKey] | gtTotals:total.update === false ? gtData:(gtData | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length):column.objectKey:refreshTotals\"></span>\n                    </td>\n                </tr>\n                </tfoot>\n            </ng-template>\n            <tbody *ngIf=\"gtData && gtInfo\">\n            <ng-template class=\"table-rows\" ngFor let-row let-last=\"last\" [ngForTrackBy]=\"trackByFn\"\n                         [ngForOf]=\"gtOptions.lazyLoad && gtInfo ? (gtData[gtInfo.pageCurrent-1] | gtMeta:(gtInfo.pageCurrent-1):gtInfo.recordLength) : (gtData | gtMeta:null:null:gtData.length | gtFilter:gtInfo.filter:gtInfo:refreshFilter:gtData.length | gtSearch:gtInfo.searchTerms:gtInfo:gtSettings:gtFields:gtData.length | gtOrderBy:sortOrder:gtFields:refreshSorting:gtData.length | gtChunk:gtInfo:gtInfo.recordLength:gtInfo.pageCurrent:refreshPageArray:gtData.length:gtEvent:data | gtRowClass:gtFields)\">\n                <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading, 'row-expandable':gtRowComponent}\"\n                    class=\"{{row.$$gtRowClass}}\"\n                    (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n                    <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;trackBy:trackByColumnFn\"\n                        ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}} {{ gtFields | gtColumnClass:row:column }}\">\n                        <span class=\"gt-row-label\"\n                              *ngIf=\"gtOptions.stack\">{{(gtFields | gtProperty:column.objectKey:'stackedHeading') ? (gtFields | gtProperty:column.objectKey:'stackedHeading') : (gtFields | gtProperty:column.objectKey:'name')}}</span>\n                        <gt-custom-component-factory *ngIf=\"column.columnComponent\" class=\"gt-row-content\"\n                                                     [type]=\"column.columnComponent.type\"\n                                                     [injector]=\"column.columnComponent.injector\" [row]=\"row\"\n                                                     [column]=\"column\" (redrawEvent)=\"redraw($event)\"\n                                                     (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row, column.expand):''\"></gt-custom-component-factory>\n                        <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\"\n                              class=\"gt-row-content\" [innerHTML]=\"column.renderValue\"\n                              (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row, column.expand):''\"></span>\n                        <ng-template\n                                [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n                            <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\"\n                                   (keyup)=\"gtUpdateColumn($event,row, column)\">\n                            <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n                        </ng-template>\n                        <gt-dropdown\n                                *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\"\n                                [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\"\n                                [id]=\"'_' + row.$$gtRowId + '_' + column.objectKey\"\n                                [(selected)]=\"column.renderValue\" (selectedChange)=\"gtDropdownSelect(row, column)\">Add\n                            inline editing module\n                        </gt-dropdown>\n                    </td>\n                </tr>\n                <tr class=\"row-expanded\" *ngIf=\"metaInfo[row.$$gtRowId]?.isOpen\">\n                    <td [attr.colspan]=\"(gtFields | gtVisible:gtSettings:refreshPipe).length\">\n                        <gt-expanding-row [row]=\"row\"\n                                          [type]=\"gtRowComponent ? gtRowComponent:expandedRow.component\"\n                                          [columnWidth]=\"columnWidth\"\n                                          [gtFields]=\"gtFields\"\n                                          [gtOptions]=\"gtOptions\"\n                                          [gtInfo]=\"gtInfo\"\n                                          [gtSettings]=\"gtSettings\"\n                                          [data]=\"expandedRow.data\"\n                                          (redrawEvent)=\"redraw($event)\"\n                                          (toggleRowEvent)=\"toggleCollapse($event)\"></gt-expanding-row>\n                    </td>\n                </tr>\n                <tr *ngIf=\"gtOptions.reportColumnWidth && last\">\n                    <td style=\"padding: 0; border:none;\"\n                        *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" gtColumnWidth\n                        [objectKey]=\"column.objectKey\" [widths]=\"columnWidth\"></td>\n                </tr>\n            </ng-template>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && (gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-matching-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">\n                    {{gtTexts.noMatchingData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && !(gtInfo.searchTerms || gtInfo.filter) && !loading\">\n                <td class=\"gt-no-results\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.noData}}\n                </td>\n            </tr>\n            <tr *ngIf=\"gtInfo.pageTotal === 0 && loading\">\n                <td class=\"gt-loading-data\" [attr.colspan]=\"(gtFields | gtVisible:gtSettings).length\">{{gtTexts.loading}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"gtFields && gtSettings && (gtFields | gtVisible:gtSettings:refreshPipe).length === 0\">\n            <thead>\n            <tr>\n                <th class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumnsHeading}}</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-no-visible-columns\">{{gtTexts.noVisibleColumns}}</td>\n            </tr>\n            </tbody>\n        </table>\n        <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\"\n               *ngIf=\"!gtFields || !gtSettings\">\n            <thead>\n            <tr>\n                <th class=\"gt-loading-config\">&nbsp;</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr>\n                <td class=\"gt-loading-config\">&nbsp;</td>\n            </tr>\n            </tbody>\n        </table>\n    "}]}],"members":{"gtOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtTotals":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtRowComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtTexts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtClasses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"gtInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"updateRecordRange":[{"__symbolic":"method"}],"updateTotals":[{"__symbolic":"method"}],"getRowState":[{"__symbolic":"method"}],"expandAllRows":[{"__symbolic":"method"}],"collapseAllRows":[{"__symbolic":"method"}],"selectAllRows":[{"__symbolic":"method"}],"deselectAllRows":[{"__symbolic":"method"}],"toggleCollapse":[{"__symbolic":"method"}],"toggleSelect":[{"__symbolic":"method"}],"updateRow":[{"__symbolic":"method"}],"removeRow":[{"__symbolic":"method"}],"isRowSelected":[{"__symbolic":"method"}],"_updateMetaInfo":[{"__symbolic":"method"}],"_pushLazyRows":[{"__symbolic":"method"}],"_toggleAllRowProperty":[{"__symbolic":"method"}],"_toggleRowProperty":[{"__symbolic":"method"}],"gtUpdateColumn":[{"__symbolic":"method"}],"gtDropdownSelect":[{"__symbolic":"method"}],"_editRow":[{"__symbolic":"method"}],"_listenForKeydownEvent":[{"__symbolic":"method"}],"inlineEditUpdate":[{"__symbolic":"method"}],"inlineEditCancel":[{"__symbolic":"method"}],"_stopListeningForKeydownEvent":[{"__symbolic":"method"}],"gtApplyFilter":[{"__symbolic":"method"}],"gtClearFilter":[{"__symbolic":"method"}],"gtSearch":[{"__symbolic":"method"}],"createStore":[{"__symbolic":"method"}],"loadingContent":[{"__symbolic":"method"}],"exportCSV":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}],"trackByColumnFn":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]

components/gt-dropdown.component.d.ts

@@ -8,2 +8,3 @@ import { EventEmitter, OnDestroy, OnInit, Renderer2 } from '@angular/core';
     options: Array<any>;
+    id: string;
     selectedChange: EventEmitter<any>;
@@ -10,0 +11,0 @@ active: boolean;

components/gt-dropdown.component.js

@@ -40,4 +40,4 @@ "use strict";
                 _this.tether = new Tether({
-                    element: '.dropdown-menu',
-                    target: '.dropdown.gt-dropdown.show',
+                    element: '#' + _this.id + '_menu',
+                    target: '#' + _this.id,
                     attachment: 'top left',
@@ -88,3 +88,3 @@ targetAttachment: 'bottom left',
                 selector: 'gt-dropdown',
-                template: "\n    <div class=\"dropdown gt-dropdown\" [ngClass]=\"{'show':active}\">\n      <div class=\"dropdown-toggle\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"active\">{{selected}}</div>\n      <div class=\"gt-dropdown-menu dropdown-menu\" *ngIf=\"active\" [ngClass]=\"{'show':active}\">\n        <button *ngFor=\"let option of options;\" class=\"dropdown-item\" (click)=\"select(option)\" [ngClass]=\"{'active':option === selected}\">{{option}}</button>\n      </div>\n    </div>\n  ",
+                template: "\n    <div class=\"dropdown gt-dropdown\" [ngClass]=\"{'show':active}\" [attr.id]=\"id\">\n      <div class=\"dropdown-toggle\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"active\">{{selected}}</div>\n      <div class=\"gt-dropdown-menu dropdown-menu\" *ngIf=\"active\" [ngClass]=\"{'show':active}\" [attr.id]=\"id+'_menu'\">\n        <button *ngFor=\"let option of options;\" class=\"dropdown-item\" (click)=\"select(option)\" [ngClass]=\"{'active':option === selected}\">{{option}}</button>\n      </div>\n    </div>\n  ",
                 styles: ["\n    .gt-dropdown .dropdown-toggle {\n      cursor: pointer;\n    }\n    .gt-dropdown .dropdown-toggle::after {\n      transition: opacity 0.4s ease-in-out;\n      opacity: 0;\n    }\n    .gt-dropdown .dropdown-toggle:hover::after {\n      opacity: 1;\n    }\n  "]
@@ -100,2 +100,3 @@ },] },
     'options': [{ type: core_1.Input },],
+    'id': [{ type: core_1.Input },],
     'selectedChange': [{ type: core_1.Output },],
@@ -102,0 +103,0 @@ };

components/gt-dropdown.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GtDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gt-dropdown","template":"\n    <div class=\"dropdown gt-dropdown\" [ngClass]=\"{'show':active}\">\n      <div class=\"dropdown-toggle\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"active\">{{selected}}</div>\n      <div class=\"gt-dropdown-menu dropdown-menu\" *ngIf=\"active\" [ngClass]=\"{'show':active}\">\n        <button *ngFor=\"let option of options;\" class=\"dropdown-item\" (click)=\"select(option)\" [ngClass]=\"{'active':option === selected}\">{{option}}</button>\n      </div>\n    </div>\n  ","styles":["\n    .gt-dropdown .dropdown-toggle {\n      cursor: pointer;\n    }\n    .gt-dropdown .dropdown-toggle::after {\n      transition: opacity 0.4s ease-in-out;\n      opacity: 0;\n    }\n    .gt-dropdown .dropdown-toggle:hover::after {\n      opacity: 1;\n    }\n  "]}]}],"members":{"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"select":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"removeListeners":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GtDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gt-dropdown","template":"\n    <div class=\"dropdown gt-dropdown\" [ngClass]=\"{'show':active}\">\n      <div class=\"dropdown-toggle\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"active\">{{selected}}</div>\n      <div class=\"gt-dropdown-menu dropdown-menu\" *ngIf=\"active\" [ngClass]=\"{'show':active}\">\n        <button *ngFor=\"let option of options;\" class=\"dropdown-item\" (click)=\"select(option)\" [ngClass]=\"{'active':option === selected}\">{{option}}</button>\n      </div>\n    </div>\n  ","styles":["\n    .gt-dropdown .dropdown-toggle {\n      cursor: pointer;\n    }\n    .gt-dropdown .dropdown-toggle::after {\n      transition: opacity 0.4s ease-in-out;\n      opacity: 0;\n    }\n    .gt-dropdown .dropdown-toggle:hover::after {\n      opacity: 1;\n    }\n  "]}]}],"members":{"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"select":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"removeListeners":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GtDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gt-dropdown","template":"\n    <div class=\"dropdown gt-dropdown\" [ngClass]=\"{'show':active}\" [attr.id]=\"id\">\n      <div class=\"dropdown-toggle\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"active\">{{selected}}</div>\n      <div class=\"gt-dropdown-menu dropdown-menu\" *ngIf=\"active\" [ngClass]=\"{'show':active}\" [attr.id]=\"id+'_menu'\">\n        <button *ngFor=\"let option of options;\" class=\"dropdown-item\" (click)=\"select(option)\" [ngClass]=\"{'active':option === selected}\">{{option}}</button>\n      </div>\n    </div>\n  ","styles":["\n    .gt-dropdown .dropdown-toggle {\n      cursor: pointer;\n    }\n    .gt-dropdown .dropdown-toggle::after {\n      transition: opacity 0.4s ease-in-out;\n      opacity: 0;\n    }\n    .gt-dropdown .dropdown-toggle:hover::after {\n      opacity: 1;\n    }\n  "]}]}],"members":{"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"select":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"removeListeners":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GtDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gt-dropdown","template":"\n    <div class=\"dropdown gt-dropdown\" [ngClass]=\"{'show':active}\" [attr.id]=\"id\">\n      <div class=\"dropdown-toggle\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"active\">{{selected}}</div>\n      <div class=\"gt-dropdown-menu dropdown-menu\" *ngIf=\"active\" [ngClass]=\"{'show':active}\" [attr.id]=\"id+'_menu'\">\n        <button *ngFor=\"let option of options;\" class=\"dropdown-item\" (click)=\"select(option)\" [ngClass]=\"{'active':option === selected}\">{{option}}</button>\n      </div>\n    </div>\n  ","styles":["\n    .gt-dropdown .dropdown-toggle {\n      cursor: pointer;\n    }\n    .gt-dropdown .dropdown-toggle::after {\n      transition: opacity 0.4s ease-in-out;\n      opacity: 0;\n    }\n    .gt-dropdown .dropdown-toggle:hover::after {\n      opacity: 1;\n    }\n  "]}]}],"members":{"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"select":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"removeListeners":[{"__symbolic":"method"}]}}}}]

package.json

 {
   "name": "@angular-generic-table/core",
-  "version": "4.7.1",
+  "version": "4.7.2",
   "description": "A generic table component for Angular",
@@ -5,0 +5,0 @@ "main": "index.js",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

327492

increased by0.48%

Lines of code

3179

increased by0.19%

No dependency changes