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

Comparing version 4.3.1 to 4.4.0

CHANGELOG.md

@@ -6,9 +6,22 @@ Release History
 
+# [4.4.0] - 2017-07-20
+### Added
+- Support for column totals (see issue #100).
+- Mouse event added to column click handler (see issue #105).
+
+### Fixed
+- Position of dropdown when using inline editing with arrays, tether added as a dependency (see issue #104).
+- Error with column settings causing visible columns to need an extra click when toggling column visibility (see issue #101).
+- Small style improvement for inline editing
+
+# [4.3.1] - 2017-06-26
+### Fixed
+- Typings reference for published npm package
+
 # [4.3.0] - 2017-06-26
-
 ### Added
-- Style for vertically aligning buttons inside table cell, apply with field setting `classNames:'gt-button'`
+- Style for vertically aligning buttons inside table cell, apply with field setting `classNames:'gt-button'`.
 
 ### Fixed
-- Loading message displayed instead of no data (see issue #95)
+- Loading message displayed instead of no data (see issue #95).
 - `redraw()` now checks sorting and updates table if sorting has changed since last redraw (see issue #98 for example).
@@ -18,7 +31,7 @@
 ### Added
-- Support for simple inline editing (see issue #52)
+- Support for simple inline editing (see issue #52).
 
 ### Fixed
-- CSV escaping (see issue #89)
-- Confusing paging behaviour (see issue #87)
+- CSV escaping (see issue #89).
+- Confusing paging behaviour (see issue #87).
 
@@ -25,0 +38,0 @@ # [4.1.1] - 2017-04-21

components/generic-table.component.d.ts

@@ -14,2 +14,3 @@ import { OnInit, OnChanges, EventEmitter, Type, SimpleChanges } from '@angular/core';
 export declare class GenericTableComponent<R extends GtRow, C extends GtExpandedRow<R>> implements OnInit, OnChanges {
+    gtTotals: any;
     gtFields: GtConfigField<R, any>[];
@@ -29,2 +30,3 @@ gtSettings: GtConfigSetting[];
     private _gtData;
+    private _gtTotals;
     gtDefaultTexts: GtTexts;
@@ -42,2 +44,3 @@ gtTexts: GtTexts;
     refreshPipe: boolean;
+    refreshTotals: boolean;
     refreshSorting: boolean;
@@ -64,3 +67,5 @@ constructor();
     /** Update record range. */
-    private updateRecordRange;
+    private updateRecordRange();
+    /** Update totals. */
+    private updateTotals();
     /** Go to next page. */
@@ -67,0 +72,0 @@ nextPage: () => void;

components/generic-table.component.js

@@ -65,2 +65,3 @@ "use strict";
         this.refreshPipe = false;
+        this.refreshTotals = false;
         this.refreshSorting = false;
@@ -222,8 +223,2 @@ /**
         };
-        /** Update record range. */
-        this.updateRecordRange = function () {
-            this.gtInfo.recordFrom = this.gtInfo.recordsAfterSearch === 0 ? 0 : (this.gtInfo.pageCurrent - 1) * this.gtInfo.recordLength + 1;
-            this.gtInfo.recordTo = this.gtInfo.recordsAfterSearch < this.gtInfo.pageCurrent * this.gtInfo.recordLength ? this.gtInfo.recordsAfterSearch : this.gtInfo.pageCurrent * this.gtInfo.recordLength;
-            //this._changeDetectionRef.detectChanges();
-        };
         /** Go to next page. */
@@ -328,4 +323,17 @@ this.nextPage = function () {
             }
+            if ($event.name === 'gt-row-updated') {
+                _this.updateTotals();
+            }
         });
     }
+    Object.defineProperty(GenericTableComponent.prototype, "gtTotals", {
+        get: function () {
+            return this._gtTotals;
+        },
+        set: function (value) {
+            this._gtTotals = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(GenericTableComponent.prototype, "gtFields", {
@@ -361,2 +369,13 @@ get: function () {
     });
+    /** Update record range. */
+    GenericTableComponent.prototype.updateRecordRange = function () {
+        this.gtInfo.recordFrom = this.gtInfo.recordsAfterSearch === 0 ? 0 : (this.gtInfo.pageCurrent - 1) * this.gtInfo.recordLength + 1;
+        this.gtInfo.recordTo = this.gtInfo.recordsAfterSearch < this.gtInfo.pageCurrent * this.gtInfo.recordLength ? this.gtInfo.recordsAfterSearch : this.gtInfo.pageCurrent * this.gtInfo.recordLength;
+        //this._changeDetectionRef.detectChanges();
+    };
+    ;
+    /** Update totals. */
+    GenericTableComponent.prototype.updateTotals = function () {
+        this.refreshTotals = !this.refreshTotals;
+    };
     /**
@@ -649,2 +668,3 @@ * Get meta data for row.
         this.goToPage(1);
+        this.updateTotals();
     };
@@ -655,2 +675,3 @@ ;
         this.gtInfo.filter = false;
+        this.updateTotals();
         //this.updateRecordRange();
@@ -667,2 +688,3 @@ };
         this.goToPage(1);
+        this.updateTotals();
     };
@@ -905,3 +927,3 @@ ;
                 selector: 'generic-table',
-                template: "\n    <table class=\"table\" ngClass=\"{{gtClasses}} {{gtOptions.stack ? 'table-stacked':''}}\" *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><th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}}\" (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">{{gtFields | gtProperty:column.objectKey:'name'}}</th>\n      </tr>\n      </thead>\n      <tbody *ngIf=\"gtData && gtInfo\">\n      <ng-template class=\"table-rows\" ngFor let-row [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)\">\n        <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading}\" (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n          <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}}\">\n            <span class=\"gt-row-label\" *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\" [type]=\"column.columnComponent.type\" [injector]=\"column.columnComponent.injector\" [row]=\"row\" [column]=\"column\" (redrawEvent)=\"redraw($event)\" (click)=\"column.click ? column.click(row,column):'';column.expand ? toggleCollapse(row):''\"></gt-custom-component-factory>\n            <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\" class=\"gt-row-content\" [innerHTML]=\"column.renderValue\" (click)=\"column.click ? column.click(row,column):'';column.expand ? toggleCollapse(row):''\"></span>\n            <ng-template [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n              <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\" (keyup)=\"gtUpdateColumn($event,row, column)\">\n              <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n            </ng-template>\n            <gt-dropdown *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\" [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\" [(selected)]=\"column.renderValue\" (selectedChange)=\"gtSelect(row, column)\">Add inline editing module</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\" [type]=\"gtRowComponent\" (redrawEvent)=\"redraw($event)\" (toggleRowEvent)=\"toggleCollapse($event)\"></gt-expanding-row>\n          </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\">{{gtTexts.noMatchingData}}</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}}</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':''}}\"  *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':''}}\"  *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':''}}\" *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><th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}}\" (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">{{gtFields | gtProperty:column.objectKey:'name'}}</th>\n      </tr>\n      </thead>\n      <ng-template [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;\" ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}}\">{{test}}<span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span [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></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;\" ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}}\"><span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span [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></td>\n        </tr>\n        </tfoot>\n      </ng-template>\n      <tbody *ngIf=\"gtData && gtInfo\">\n      <ng-template class=\"table-rows\" ngFor let-row [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)\">\n        <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading}\" (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n          <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}}\">\n            <span class=\"gt-row-label\" *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\" [type]=\"column.columnComponent.type\" [injector]=\"column.columnComponent.injector\" [row]=\"row\" [column]=\"column\" (redrawEvent)=\"redraw($event)\" (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row):''\"></gt-custom-component-factory>\n            <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\" class=\"gt-row-content\" [innerHTML]=\"column.renderValue\" (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row):''\"></span>\n            <ng-template [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n              <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\" (keyup)=\"gtUpdateColumn($event,row, column)\">\n              <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n            </ng-template>\n            <gt-dropdown *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\" [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\" [(selected)]=\"column.renderValue\" (selectedChange)=\"gtSelect(row, column)\">Add inline editing module</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\" [type]=\"gtRowComponent\" (redrawEvent)=\"redraw($event)\" (toggleRowEvent)=\"toggleCollapse($event)\"></gt-expanding-row>\n          </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\">{{gtTexts.noMatchingData}}</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}}</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':''}}\"  *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':''}}\"  *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  ",
             },] },
@@ -912,2 +934,3 @@ ];
 GenericTableComponent.propDecorators = {
+    'gtTotals': [{ type: core_1.Input },],
     'gtFields': [{ type: core_1.Input },],
@@ -914,0 +937,0 @@ 'gtSettings': [{ type: core_1.Input },],

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':''}}\" *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><th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}}\" (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">{{gtFields | gtProperty:column.objectKey:'name'}}</th>\n      </tr>\n      </thead>\n      <tbody *ngIf=\"gtData && gtInfo\">\n      <ng-template class=\"table-rows\" ngFor let-row [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)\">\n        <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading}\" (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n          <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}}\">\n            <span class=\"gt-row-label\" *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\" [type]=\"column.columnComponent.type\" [injector]=\"column.columnComponent.injector\" [row]=\"row\" [column]=\"column\" (redrawEvent)=\"redraw($event)\" (click)=\"column.click ? column.click(row,column):'';column.expand ? toggleCollapse(row):''\"></gt-custom-component-factory>\n            <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\" class=\"gt-row-content\" [innerHTML]=\"column.renderValue\" (click)=\"column.click ? column.click(row,column):'';column.expand ? toggleCollapse(row):''\"></span>\n            <ng-template [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n              <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\" (keyup)=\"gtUpdateColumn($event,row, column)\">\n              <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n            </ng-template>\n            <gt-dropdown *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\" [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\" [(selected)]=\"column.renderValue\" (selectedChange)=\"gtSelect(row, column)\">Add inline editing module</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\" [type]=\"gtRowComponent\" (redrawEvent)=\"redraw($event)\" (toggleRowEvent)=\"toggleCollapse($event)\"></gt-expanding-row>\n          </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\">{{gtTexts.noMatchingData}}</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}}</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':''}}\"  *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':''}}\"  *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":{"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"}}]}],"gtOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"getRowState":[{"__symbolic":"method"}],"expandAllRows":[{"__symbolic":"method"}],"collapseAllRows":[{"__symbolic":"method"}],"selectAllRows":[{"__symbolic":"method"}],"deselectAllRows":[{"__symbolic":"method"}],"toggleCollapse":[{"__symbolic":"method"}],"toggleSelect":[{"__symbolic":"method"}],"editRow":[{"__symbolic":"method"}],"_updateMetaInfo":[{"__symbolic":"method"}],"_pushLazyRows":[{"__symbolic":"method"}],"_toggleAllRowProperty":[{"__symbolic":"method"}],"_toggleRowProperty":[{"__symbolic":"method"}],"gtUpdateColumn":[{"__symbolic":"method"}],"gtSelect":[{"__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"}]}}}},{"__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':''}}\" *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><th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}}\" (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">{{gtFields | gtProperty:column.objectKey:'name'}}</th>\n      </tr>\n      </thead>\n      <tbody *ngIf=\"gtData && gtInfo\">\n      <ng-template class=\"table-rows\" ngFor let-row [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)\">\n        <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading}\" (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n          <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}}\">\n            <span class=\"gt-row-label\" *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\" [type]=\"column.columnComponent.type\" [injector]=\"column.columnComponent.injector\" [row]=\"row\" [column]=\"column\" (redrawEvent)=\"redraw($event)\" (click)=\"column.click ? column.click(row,column):'';column.expand ? toggleCollapse(row):''\"></gt-custom-component-factory>\n            <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\" class=\"gt-row-content\" [innerHTML]=\"column.renderValue\" (click)=\"column.click ? column.click(row,column):'';column.expand ? toggleCollapse(row):''\"></span>\n            <ng-template [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n              <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\" (keyup)=\"gtUpdateColumn($event,row, column)\">\n              <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n            </ng-template>\n            <gt-dropdown *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\" [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\" [(selected)]=\"column.renderValue\" (selectedChange)=\"gtSelect(row, column)\">Add inline editing module</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\" [type]=\"gtRowComponent\" (redrawEvent)=\"redraw($event)\" (toggleRowEvent)=\"toggleCollapse($event)\"></gt-expanding-row>\n          </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\">{{gtTexts.noMatchingData}}</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}}</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':''}}\"  *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':''}}\"  *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":{"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"}}]}],"gtOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"getRowState":[{"__symbolic":"method"}],"expandAllRows":[{"__symbolic":"method"}],"collapseAllRows":[{"__symbolic":"method"}],"selectAllRows":[{"__symbolic":"method"}],"deselectAllRows":[{"__symbolic":"method"}],"toggleCollapse":[{"__symbolic":"method"}],"toggleSelect":[{"__symbolic":"method"}],"editRow":[{"__symbolic":"method"}],"_updateMetaInfo":[{"__symbolic":"method"}],"_pushLazyRows":[{"__symbolic":"method"}],"_toggleAllRowProperty":[{"__symbolic":"method"}],"_toggleRowProperty":[{"__symbolic":"method"}],"gtUpdateColumn":[{"__symbolic":"method"}],"gtSelect":[{"__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"}]}}}}]
+[{"__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':''}}\" *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><th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}}\" (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">{{gtFields | gtProperty:column.objectKey:'name'}}</th>\n      </tr>\n      </thead>\n      <ng-template [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;\" ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}}\">{{test}}<span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span [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></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;\" ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}}\"><span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span [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></td>\n        </tr>\n        </tfoot>\n      </ng-template>\n      <tbody *ngIf=\"gtData && gtInfo\">\n      <ng-template class=\"table-rows\" ngFor let-row [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)\">\n        <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading}\" (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n          <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}}\">\n            <span class=\"gt-row-label\" *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\" [type]=\"column.columnComponent.type\" [injector]=\"column.columnComponent.injector\" [row]=\"row\" [column]=\"column\" (redrawEvent)=\"redraw($event)\" (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row):''\"></gt-custom-component-factory>\n            <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\" class=\"gt-row-content\" [innerHTML]=\"column.renderValue\" (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row):''\"></span>\n            <ng-template [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n              <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\" (keyup)=\"gtUpdateColumn($event,row, column)\">\n              <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n            </ng-template>\n            <gt-dropdown *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\" [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\" [(selected)]=\"column.renderValue\" (selectedChange)=\"gtSelect(row, column)\">Add inline editing module</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\" [type]=\"gtRowComponent\" (redrawEvent)=\"redraw($event)\" (toggleRowEvent)=\"toggleCollapse($event)\"></gt-expanding-row>\n          </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\">{{gtTexts.noMatchingData}}</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}}</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':''}}\"  *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':''}}\"  *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":{"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"}}]}],"gtOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"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"}],"editRow":[{"__symbolic":"method"}],"_updateMetaInfo":[{"__symbolic":"method"}],"_pushLazyRows":[{"__symbolic":"method"}],"_toggleAllRowProperty":[{"__symbolic":"method"}],"_toggleRowProperty":[{"__symbolic":"method"}],"gtUpdateColumn":[{"__symbolic":"method"}],"gtSelect":[{"__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"}]}}}},{"__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':''}}\" *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><th *ngFor=\"let column of gtSettings | gtVisible:gtSettings:refreshPipe\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{column.sortEnabled ? 'sort-'+column.sort:''}} {{column.sortEnabled && column.sortOrder >= 0  ? 'sort-order-'+column.sortOrder:''}}\" (click)=\"column.sortEnabled ? gtSort(column.objectKey,$event):'';\">{{gtFields | gtProperty:column.objectKey:'name'}}</th>\n      </tr>\n      </thead>\n      <ng-template [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;\" ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}}\">{{test}}<span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span [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></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;\" ngClass=\"{{column.objectKey +'-totals-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}}\"><span *ngIf=\"i === 0\" class=\"float-left\">{{total.name}}</span><span [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></td>\n        </tr>\n        </tfoot>\n      </ng-template>\n      <tbody *ngIf=\"gtData && gtInfo\">\n      <ng-template class=\"table-rows\" ngFor let-row [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)\">\n        <tr [ngClass]=\"{'row-selected':metaInfo[row.$$gtRowId]?.isSelected, 'row-open':metaInfo[row.$$gtRowId]?.isOpen, 'row-loading':loading}\" (click)=\"gtOptions.rowSelection ? toggleSelect(row):null\">\n          <td *ngFor=\"let column of row | gtRender:gtSettings:gtFields:refreshPipe:loading:gtOptions.highlightSearch:gtInfo.searchTerms;\" ngClass=\"{{column.objectKey +'-column' | dashCase}} {{gtFields | gtProperty:column.objectKey:'classNames'}} {{(gtFields | gtProperty:column.objectKey:'inlineEdit') ? 'gt-inline-edit':''}} {{column.edited ? 'gt-edited':''}}\">\n            <span class=\"gt-row-label\" *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\" [type]=\"column.columnComponent.type\" [injector]=\"column.columnComponent.injector\" [row]=\"row\" [column]=\"column\" (redrawEvent)=\"redraw($event)\" (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row):''\"></gt-custom-component-factory>\n            <span *ngIf=\"!column.columnComponent && !(gtFields | gtProperty:column.objectKey:'inlineEdit')\" class=\"gt-row-content\" [innerHTML]=\"column.renderValue\" (click)=\"column.click ? column.click(row,column,$event):'';column.expand ? toggleCollapse(row):''\"></span>\n            <ng-template [ngIf]=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') === true\">\n              <input class=\"inline-edit\" type=\"text\" [(ngModel)]=\"column.renderValue\" (keyup)=\"gtUpdateColumn($event,row, column)\">\n              <span class=\"gt-inline-edit-notice\">{{gtTexts.inlineEditEdited}}</span>\n            </ng-template>\n            <gt-dropdown *ngIf=\"!column.columnComponent && (gtFields | gtProperty:column.objectKey:'inlineEdit') && (gtFields | gtProperty:column.objectKey:'inlineEdit').length > 0\" [options]=\"gtFields | gtProperty:column.objectKey:'inlineEdit'\" [(selected)]=\"column.renderValue\" (selectedChange)=\"gtSelect(row, column)\">Add inline editing module</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\" [type]=\"gtRowComponent\" (redrawEvent)=\"redraw($event)\" (toggleRowEvent)=\"toggleCollapse($event)\"></gt-expanding-row>\n          </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\">{{gtTexts.noMatchingData}}</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}}</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':''}}\"  *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':''}}\"  *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":{"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"}}]}],"gtOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gtInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"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"}],"editRow":[{"__symbolic":"method"}],"_updateMetaInfo":[{"__symbolic":"method"}],"_pushLazyRows":[{"__symbolic":"method"}],"_toggleAllRowProperty":[{"__symbolic":"method"}],"_toggleRowProperty":[{"__symbolic":"method"}],"gtUpdateColumn":[{"__symbolic":"method"}],"gtSelect":[{"__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"}]}}}}]

components/gt-dropdown.component.d.ts

@@ -11,2 +11,3 @@ import { EventEmitter, OnDestroy, OnInit, Renderer2 } from '@angular/core';
     state: Subject<boolean>;
+    tether: any;
     constructor(renderer: Renderer2);
@@ -13,0 +14,0 @@ select(option: any): void;

components/gt-dropdown.component.js

@@ -5,2 +5,3 @@ "use strict";
 var Subject_1 = require("rxjs/Subject");
+var Tether = require("tether");
 var GtDropdownComponent = (function () {
@@ -39,2 +40,13 @@ function GtDropdownComponent(renderer) {
             if (state) {
+                _this.tether = new Tether({
+                    element: '.dropdown-menu',
+                    target: '.dropdown.gt-dropdown.show',
+                    attachment: 'top left',
+                    targetAttachment: 'bottom left',
+                    constraints: [{
+                            to: 'window',
+                            attachment: 'together'
+                        }]
+                });
+                _this.tether.position();
                 // set up click listener and listen for click outside dropdown
@@ -56,2 +68,3 @@ _this.clickListener = _this.renderer.listen('document', 'click', function (event) {
             else {
+                _this.tether.destroy();
                 _this.removeListeners();
@@ -77,4 +90,4 @@ }
                 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=\"dropdown-menu\" *ngIf=\"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    .gt-dropdown .dropdown-menu {\n      max-height: 320px;\n      overflow: auto;\n    }"]
+                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\">\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  "]
             },] },
@@ -81,0 +94,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=\"dropdown-menu\" *ngIf=\"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    .gt-dropdown .dropdown-menu {\n      max-height: 320px;\n      overflow: auto;\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=\"dropdown-menu\" *ngIf=\"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    .gt-dropdown .dropdown-menu {\n      max-height: 320px;\n      overflow: auto;\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}\">\n      <div class=\"dropdown-toggle\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"active\">{{selected}}</div>\n      <div class=\"gt-dropdown-menu dropdown-menu\" *ngIf=\"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\">\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"}]}}}}]

core.module.js

@@ -22,2 +22,4 @@ "use strict";
 var gt_dropdown_component_1 = require("./components/gt-dropdown.component");
+var gt_totals_pipe_1 = require("./pipes/gt-totals.pipe");
+var gt_totals_position_pipe_1 = require("./pipes/gt-totals-position.pipe");
 var GenericTableModule = (function () {
@@ -48,2 +50,4 @@ function GenericTableModule() {
                     gt_meta_pipe_1.GtMetaPipe,
+                    gt_totals_pipe_1.GtTotalsPipe,
+                    gt_totals_position_pipe_1.GtTotalsPositionPipe,
                     gt_dropdown_component_1.GtDropdownComponent
@@ -50,0 +54,0 @@ ],

core.module.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GenericTableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./directives/component-anchor.directive","name":"ComponentAnchorDirective"},{"__symbolic":"reference","module":"./components/generic-table.component","name":"GenericTableComponent"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"GtPaginationComponent"},{"__symbolic":"reference","module":"./pipes/gt-visible.pipe","name":"GtVisiblePipe"},{"__symbolic":"reference","module":"./pipes/gt-render.pipe","name":"GtRenderPipe"},{"__symbolic":"reference","module":"./pipes/dash-case.pipe","name":"DashCasePipe"},{"__symbolic":"reference","module":"./pipes/gt-property.pipe","name":"GtPropertyPipe"},{"__symbolic":"reference","module":"./pipes/gt-chunk.pipe","name":"GtChunkPipe"},{"__symbolic":"reference","module":"./pipes/gt-filter.pipe","name":"GtFilterPipe"},{"__symbolic":"reference","module":"./pipes/gt-order-by.pipe","name":"GtOrderByPipe"},{"__symbolic":"reference","module":"./components/gt-expanding-row.component","name":"GtExpandingRowComponent"},{"__symbolic":"reference","module":"./components/gt-custom-component-factory","name":"GtCustomComponentFactory"},{"__symbolic":"reference","module":"./pipes/gt-search.pipe","name":"GtSearchPipe"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"PaginationPipe"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"GtTableInfoComponent"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"TableInfoPipe"},{"__symbolic":"reference","module":"./pipes/gt-meta.pipe","name":"GtMetaPipe"},{"__symbolic":"reference","module":"./components/gt-dropdown.component","name":"GtDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","module":"./components/generic-table.component","name":"GenericTableComponent"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"GtPaginationComponent"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"GtTableInfoComponent"},{"__symbolic":"reference","module":"./pipes/gt-property.pipe","name":"GtPropertyPipe"},{"__symbolic":"reference","module":"./components/gt-expanding-row.component","name":"GtExpandingRowComponent"},{"__symbolic":"reference","module":"./components/gt-dropdown.component","name":"GtDropdownComponent"}],"entryComponents":[],"providers":[],"bootstrap":[]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"GenericTableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./directives/component-anchor.directive","name":"ComponentAnchorDirective"},{"__symbolic":"reference","module":"./components/generic-table.component","name":"GenericTableComponent"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"GtPaginationComponent"},{"__symbolic":"reference","module":"./pipes/gt-visible.pipe","name":"GtVisiblePipe"},{"__symbolic":"reference","module":"./pipes/gt-render.pipe","name":"GtRenderPipe"},{"__symbolic":"reference","module":"./pipes/dash-case.pipe","name":"DashCasePipe"},{"__symbolic":"reference","module":"./pipes/gt-property.pipe","name":"GtPropertyPipe"},{"__symbolic":"reference","module":"./pipes/gt-chunk.pipe","name":"GtChunkPipe"},{"__symbolic":"reference","module":"./pipes/gt-filter.pipe","name":"GtFilterPipe"},{"__symbolic":"reference","module":"./pipes/gt-order-by.pipe","name":"GtOrderByPipe"},{"__symbolic":"reference","module":"./components/gt-expanding-row.component","name":"GtExpandingRowComponent"},{"__symbolic":"reference","module":"./components/gt-custom-component-factory","name":"GtCustomComponentFactory"},{"__symbolic":"reference","module":"./pipes/gt-search.pipe","name":"GtSearchPipe"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"PaginationPipe"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"GtTableInfoComponent"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"TableInfoPipe"},{"__symbolic":"reference","module":"./pipes/gt-meta.pipe","name":"GtMetaPipe"},{"__symbolic":"reference","module":"./components/gt-dropdown.component","name":"GtDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","module":"./components/generic-table.component","name":"GenericTableComponent"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"GtPaginationComponent"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"GtTableInfoComponent"},{"__symbolic":"reference","module":"./pipes/gt-property.pipe","name":"GtPropertyPipe"},{"__symbolic":"reference","module":"./components/gt-expanding-row.component","name":"GtExpandingRowComponent"},{"__symbolic":"reference","module":"./components/gt-dropdown.component","name":"GtDropdownComponent"}],"entryComponents":[],"providers":[],"bootstrap":[]}]}]}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GenericTableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./directives/component-anchor.directive","name":"ComponentAnchorDirective"},{"__symbolic":"reference","module":"./components/generic-table.component","name":"GenericTableComponent"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"GtPaginationComponent"},{"__symbolic":"reference","module":"./pipes/gt-visible.pipe","name":"GtVisiblePipe"},{"__symbolic":"reference","module":"./pipes/gt-render.pipe","name":"GtRenderPipe"},{"__symbolic":"reference","module":"./pipes/dash-case.pipe","name":"DashCasePipe"},{"__symbolic":"reference","module":"./pipes/gt-property.pipe","name":"GtPropertyPipe"},{"__symbolic":"reference","module":"./pipes/gt-chunk.pipe","name":"GtChunkPipe"},{"__symbolic":"reference","module":"./pipes/gt-filter.pipe","name":"GtFilterPipe"},{"__symbolic":"reference","module":"./pipes/gt-order-by.pipe","name":"GtOrderByPipe"},{"__symbolic":"reference","module":"./components/gt-expanding-row.component","name":"GtExpandingRowComponent"},{"__symbolic":"reference","module":"./components/gt-custom-component-factory","name":"GtCustomComponentFactory"},{"__symbolic":"reference","module":"./pipes/gt-search.pipe","name":"GtSearchPipe"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"PaginationPipe"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"GtTableInfoComponent"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"TableInfoPipe"},{"__symbolic":"reference","module":"./pipes/gt-meta.pipe","name":"GtMetaPipe"},{"__symbolic":"reference","module":"./pipes/gt-totals.pipe","name":"GtTotalsPipe"},{"__symbolic":"reference","module":"./pipes/gt-totals-position.pipe","name":"GtTotalsPositionPipe"},{"__symbolic":"reference","module":"./components/gt-dropdown.component","name":"GtDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","module":"./components/generic-table.component","name":"GenericTableComponent"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"GtPaginationComponent"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"GtTableInfoComponent"},{"__symbolic":"reference","module":"./pipes/gt-property.pipe","name":"GtPropertyPipe"},{"__symbolic":"reference","module":"./components/gt-expanding-row.component","name":"GtExpandingRowComponent"},{"__symbolic":"reference","module":"./components/gt-dropdown.component","name":"GtDropdownComponent"}],"entryComponents":[],"providers":[],"bootstrap":[]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"GenericTableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./directives/component-anchor.directive","name":"ComponentAnchorDirective"},{"__symbolic":"reference","module":"./components/generic-table.component","name":"GenericTableComponent"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"GtPaginationComponent"},{"__symbolic":"reference","module":"./pipes/gt-visible.pipe","name":"GtVisiblePipe"},{"__symbolic":"reference","module":"./pipes/gt-render.pipe","name":"GtRenderPipe"},{"__symbolic":"reference","module":"./pipes/dash-case.pipe","name":"DashCasePipe"},{"__symbolic":"reference","module":"./pipes/gt-property.pipe","name":"GtPropertyPipe"},{"__symbolic":"reference","module":"./pipes/gt-chunk.pipe","name":"GtChunkPipe"},{"__symbolic":"reference","module":"./pipes/gt-filter.pipe","name":"GtFilterPipe"},{"__symbolic":"reference","module":"./pipes/gt-order-by.pipe","name":"GtOrderByPipe"},{"__symbolic":"reference","module":"./components/gt-expanding-row.component","name":"GtExpandingRowComponent"},{"__symbolic":"reference","module":"./components/gt-custom-component-factory","name":"GtCustomComponentFactory"},{"__symbolic":"reference","module":"./pipes/gt-search.pipe","name":"GtSearchPipe"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"PaginationPipe"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"GtTableInfoComponent"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"TableInfoPipe"},{"__symbolic":"reference","module":"./pipes/gt-meta.pipe","name":"GtMetaPipe"},{"__symbolic":"reference","module":"./pipes/gt-totals.pipe","name":"GtTotalsPipe"},{"__symbolic":"reference","module":"./pipes/gt-totals-position.pipe","name":"GtTotalsPositionPipe"},{"__symbolic":"reference","module":"./components/gt-dropdown.component","name":"GtDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","module":"./components/generic-table.component","name":"GenericTableComponent"},{"__symbolic":"reference","module":"./components/gt-pagination.component","name":"GtPaginationComponent"},{"__symbolic":"reference","module":"./components/gt-table-info.component","name":"GtTableInfoComponent"},{"__symbolic":"reference","module":"./pipes/gt-property.pipe","name":"GtPropertyPipe"},{"__symbolic":"reference","module":"./components/gt-expanding-row.component","name":"GtExpandingRowComponent"},{"__symbolic":"reference","module":"./components/gt-dropdown.component","name":"GtDropdownComponent"}],"entryComponents":[],"providers":[],"bootstrap":[]}]}]}}}]

interfaces/gt-config-field.d.ts

@@ -11,3 +11,3 @@ import { GtRow } from './gt-row';
 export interface GtClickFunc<R extends GtRow> {
-    (row: R, col: any): void;
+    (row: R, col: any, event: MouseEvent): void;
 }
@@ -14,0 +14,0 @@ export interface GtConfigField<R extends GtRow, C extends GtCustomComponent<any>> {

interfaces/gt-config.d.ts

@@ -5,7 +5,9 @@ import { GtConfigField } from './gt-config-field';
 import { GtInformation } from './gt-information';
+import { GtConfigTotal } from "./gt-config-total";
 export interface GtConfig<R extends GtRow> {
-    settings: GtConfigSetting[];
-    fields: GtConfigField<R, any>[];
-    data?: R[];
+    settings: Array<GtConfigSetting>;
+    fields: Array<GtConfigField<R, any>>;
+    totals?: Array<GtConfigTotal>;
+    data?: Array<R>;
     info?: GtInformation;
 }

package.json

 {
   "name": "@angular-generic-table/core",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "description": "A generic table component for Angular",
@@ -34,4 +34,9 @@ "main": "index.js",
     "@angular/core": "^4.0.0",
-    "@angular/common": "^4.0.0"
+    "@angular/common": "^4.0.0",
+    "tether": "^1.4.0"
   },
+  "dependencies": {
+    "@types/tether": "^1.4.2",
+    "tether": "^1.4.0"
+  },
   "devDependencies": {
@@ -38,0 +43,0 @@ "@angular/compiler-cli": "^4.0.2",

README.md

@@ -0,0 +0,0 @@ # angular-generic-table

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

263773

increased by6.48%

Number of package files

125

increased by10.62%

Lines of code

2667

increased by5.21%

Worsened metrics

Dependency count

5

increased by150%

Dependency changes

• + Added@types/tether@^1.4.2

• + Addedtether@^1.4.0

• + Added@types/tether@1.4.9(transitive)

• + Addedtether@1.4.7(transitive)