ngx-mat-dynamic-table/bundles/ngx-mat-dynamic-table.umd.min.js

Dynamic material table table.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/material/table"),require("@angular/material/sort"),require("@angular/material/paginator"),require("@angular/cdk/collections"),require("@angular/common"),require("@angular/forms"),require("file-saver"),require("xlsx"),require("lodash"),require("rxjs"),require("rxjs/operators"),require("@angular/flex-layout"),require("@angular/material/snack-bar"),require("@angular/material/button"),require("@angular/material/form-field"),require("@angular/material/icon"),require("@angular/material/checkbox"),require("@angular/material/progress-bar"),require("@angular/material/tooltip"),require("@angular/material/select"),require("@angular/material/input"),require("@angular/material/menu"),require("@angular/material/progress-spinner"),require("@angular/cdk/keycodes"),require("@angular/cdk/drag-drop"),require("@angular/material/chips"),require("@angular/material/button-toggle")):"function"==typeof define&&define.amd?define("ngx-mat-dynamic-table",["exports","@angular/core","@angular/material/table","@angular/material/sort","@angular/material/paginator","@angular/cdk/collections","@angular/common","@angular/forms","file-saver","xlsx","lodash","rxjs","rxjs/operators","@angular/flex-layout","@angular/material/snack-bar","@angular/material/button","@angular/material/form-field","@angular/material/icon","@angular/material/checkbox","@angular/material/progress-bar","@angular/material/tooltip","@angular/material/select","@angular/material/input","@angular/material/menu","@angular/material/progress-spinner","@angular/cdk/keycodes","@angular/cdk/drag-drop","@angular/material/chips","@angular/material/button-toggle"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self)["ngx-mat-dynamic-table"]={},t.ng.core,t.ng.material.table,t.ng.material.sort,t.ng.material.paginator,t.ng.cdk.collections,t.ng.common,t.ng.forms,t["file-saver"],t.xlsx,t.lodash,t.rxjs,t.rxjs.operators,t.ng.flexLayout,t.ng.material.snackBar,t.ng.material.button,t.ng.material.formField,t.ng.material.icon,t.ng.material.checkbox,t.ng.material.progressBar,t.ng.material.tooltip,t.ng.material.select,t.ng.material.input,t.ng.material.menu,t.ng.material.progressSpinner,t.ng.cdk.keycodes,t.ng.cdk.dragDrop,t.ng.material.chips,t.ng.material.buttonToggle)}(this,(function(t,e,n,a,r,o,l,i,c,s,u,m,p,d,h,g,f,y,b,x,v,C,w,S,D,I,k,T,M){"use strict";var E=function(){};E.ɵprov=e.ɵɵdefineInjectable({factory:function(){return new E},token:E,providedIn:"root"}),E.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}],E.ctorParameters=function(){return[]};var F=function(){function t(){}return t.prototype.ngOnInit=function(){},t}();F.decorators=[{type:e.Component,args:[{selector:"ngx-mat-ngx-mat-dynamic-table",template:"\n    <p>\n      ngx-mat-dynamic-table works!\n    </p>\n  "}]}],F.ctorParameters=function(){return[]};Object.create;function O(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var a,r,o=n.call(t),l=[];try{for(;(void 0===e||e-- >0)&&!(a=o.next()).done;)l.push(a.value)}catch(t){r={error:t}}finally{try{a&&!a.done&&(n=o.return)&&n.call(o)}finally{if(r)throw r.error}}return l}Object.create;var L=function(){function t(){this.fileType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",this.fileExtension=".xlsx"}return t.prototype.exportExcel=function(t,e,n){var a=u.values(e),r={Sheets:{data:s.utils.json_to_sheet(u.map(this.renameKeys(t,e),u.partialRight(u.pick,a)),{header:a})},SheetNames:["data"]},o=s.write(r,{bookType:"xlsx",type:"array"});this.saveExcelFile(o,n)},t.prototype.saveExcelFile=function(t,e){var n=new Blob([t],{type:this.fileType});c.saveAs(n,e+this.fileExtension)},t.prototype.renameKeys=function(t,e){return t.map((function(t){var n={};return Object.keys(e).forEach((function(a){n[e[a]]=u.get(t,a)})),n}))},t}();L.decorators=[{type:e.Injectable}],L.ctorParameters=function(){return[]};var N=function(){function t(){var t=this;this.dbName="ngx-mat-dynamic-table",this.storeName="columns",this.version=1;var e=indexedDB.open(this.dbName,this.version);e.onerror=function(t){console.warn("IndexedDB not enabled.")},e.onupgradeneeded=function(n){t.db=e.result,t.objectStore=t.db.createObjectStore(t.storeName,{keyPath:"tableId"}),console.debug("ngx-mat-dynamic-table: create object store 👍")},e.onsuccess=function(n){t.db=e.result,console.debug("ngx-mat-dynamic-table: db opened 👍"+t.db)}}return t.prototype.isDbOpen=function(){return!!this.db},t.prototype.save=function(t){this.db&&(this.db.transaction([this.storeName],"readwrite").objectStore(this.storeName).put(t).onsuccess=function(t){})},t.prototype.read=function(t){var e=this;return new m.Observable((function(n){var a=e.db.transaction([e.storeName]);if(!a)return n.next(null),void n.complete();var r=a.objectStore(e.storeName).get(t);r.onerror=function(t){n.error(new Error),n.complete()},r.onsuccess=function(t){r.result?(n.next(r.result),n.complete()):(n.next(null),n.complete())}}))},t}();N.ɵprov=e.ɵɵdefineInjectable({factory:function(){return new N},token:N,providedIn:"root"}),N.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}],N.ctorParameters=function(){return[]};var R=function(){function t(t,a,r){this.locale=t,this.xlsxExportService=a,this.columnStorageService=r,this.export=!1,this.filter=!1,this.multiple=!1,this.optionalColumns=!1,this.emitFilteredData=!1,this.rowClicked=new e.EventEmitter,this.cellClicked=new e.EventEmitter,this.selectedRows=new e.EventEmitter,this.filterResult=new e.EventEmitter,this.selection=new o.SelectionModel(!0,[]),this.displayedColumns=[],this.dataSource=new n.MatTableDataSource,this.totalsRowVisible=!1,this.columnsToShow=new i.FormControl,this.filterKeyUp=new m.BehaviorSubject(""),this.columnSearch$=new m.Subject}return t.prototype.ngOnChanges=function(t){t.columns&&t.columns.currentValue&&this.setColumns(),t.tableData.currentValue&&(this.selection.clear(),this.dataSource.data=this.tableData,this.updateColumnTotals())},t.prototype.ngAfterViewInit=function(){var t=this;this.filterKeyUp.pipe(p.debounce((function(){return m.interval(2e3)}))).subscribe((function(e){t.searchLoading=!1,t.dataSource.filter=e,t.dataSource.paginator&&t.dataSource.paginator.firstPage(),t.updateColumnTotals(),t.emitFilteredData&&t.getFilteredData()})),this.dataSource.sort=this.sort,this.dataSource.paginator=this.paginator},t.prototype.ngOnInit=function(){var t=this;this.dataSource.sortingDataAccessor=function(t,e){return u.get(t,e)},this.dataSource.sortData=function(e,n){var a=n.active,r=n.direction;return a&&""!=r?e.sort((function(e,n){var o=t.dataSource.sortingDataAccessor(e,a),l=t.dataSource.sortingDataAccessor(n,a),i=typeof o,c=typeof l;i!==c&&("number"===i&&(o+=""),"number"===c&&(l+=""));var s=0;return null!=o&&null!=l?"string"===i&&"string"===c?s=o.localeCompare(l,"en",{numeric:!0}):o>l?s=1:o<l&&(s=-1):null!=o?s=1:null!=l&&(s=-1),s*("asc"==r?1:-1)})):e},this.dataSource.filterPredicate=function(e,n){var a=!0;return n?(n.split(",").some((function(n){var r,o,l=O(n.split("|"),2),i=l[0],c=l[1],s="";if("global"===i){if(t.columns.filter((function(t){return t.search})).map((function(t){return t.columnDef})).forEach((function(t){var n=u.get(e,t);n&&(s+=n)})),!s||-1===s.toString().toLowerCase().indexOf(c.toLowerCase()))return a=!1,!0}else{var m,p=O(c.split(":"),2),d=p[0];if(m=(r=O(p[1].split("#"),2))[0],o=r[1],c=d,s=u.get(e,m),"!="===o){if(!s||-1!==s.toString().toLowerCase().indexOf(c.toLowerCase()))return a=!1,!0}else if("empty"===o){if(s)return a=!1,!0}else if(!s||-1===s.toString().toLowerCase().indexOf(c.toLowerCase()))return a=!1,!0}})),a):a}},t.prototype.updateXLSXHeaders=function(){var t=this;this.xlsxHeaders={},this.columnsToShow.value.forEach((function(e){t.xlsxHeaders[e.columnDef]=e.columnTitle}))},t.prototype.updateColumnTotals=function(){var t=this;this.dataSource&&this.columns.map((function(e){return(e.total||e.average)&&(t.totalsRowVisible=!0,t.dataSource.filteredData.length>0?(e.totalValue=t.dataSource.filteredData.map((function(t){return u.get(t,e.columnDef)})).reduce((function(t,e){return t+(e||0)}),0),isNaN(e.totalValue)?(e.totalValue=0,e.averageValue=0):e.averageValue=e.totalValue/t.dataSource.filteredData.length):(e.totalValue=0,e.averageValue=0)),e}))},t.prototype.applyFilter=function(t){var e;this.searchLoading=!0,t.forEach((function(t){var n=t.type+"|"+t.search+("column"===t.type?":"+t.column+"#"+t.searchType:"");e?e+=","+n:e=n})),this.filterKeyUp.next(e)},t.prototype.applyColumnFilter=function(t,e,n,a){a&&"empty"!==a&&!t.value||(this.searchLoading=!0,this.columnSearch$.next({type:"column",column:e,columnTitle:n,inputReference:t,search:t.value,searchType:a}))},t.prototype._rowClicked=function(t){this.rowClick&&this.rowClicked.emit(t)},t.prototype.onMatCellClick=function(t,e){this.cellClick&&this.cellClicked.emit({row:t,column:e.columnDef,data:u.get(t,e.columnDef)})},t.prototype.isAllSelected=function(){return this.selection.selected.length===this.dataSource.data.length},t.prototype.masterToggle=function(){var t=this;this.isAllSelected()?this.selection.clear():this.dataSource.filteredData.forEach((function(e){return t.selection.select(e)})),this.emitSelected()},t.prototype.toggle=function(t,e){t&&this.selection.toggle(e),this.emitSelected()},t.prototype.emitSelected=function(){this.selectedRows.emit(this.selection.selected)},t.prototype.setColumns=function(){var t=this;this.setDefaultSorting(),this.tableId?(this.savedColumnsLoading=!0,this.columnStorageService.isDbOpen()?this.columnStorageService.read(this.tableId).subscribe((function(e){t.setSavedColumnSelection(e)})):setTimeout((function(){t.columnStorageService.read(t.tableId).subscribe((function(e){t.setSavedColumnSelection(e)}))}),500)):this.setStaticColumns()},t.prototype.setStaticColumns=function(){this.displayedColumns=[],this.totalsRowVisible=!1,this.displayedColumns=this.columns.filter((function(t){return!t.hidden})).map((function(t){return t.columnDef})),this.multiple&&this.displayedColumns.unshift("select"),this.columnsToShow.setValue(this.columns.filter((function(t){return!t.hidden}))),this.updateColumnTotals()},t.prototype.displayColumnsChanged=function(t){this.displayedColumns=t.value.map((function(t){return t.columnDef})),this.multiple&&this.displayedColumns.unshift("select"),this.saveCurrentColumnSelection(this.displayedColumns)},t.prototype.eportToExcell=function(){this.updateXLSXHeaders(),this.formatExportData(),this.xlsxExportService.exportExcel(this.exportData,this.xlsxHeaders,this.fileName?this.fileName:"Export")},t.prototype.getFilteredData=function(){this.cloneData(),this.filterResult.emit(this.exportData)},t.prototype.cloneData=function(){this.selection.hasValue()?this.exportData=this.selection.selected.map((function(t){return u.cloneDeep(t)})):this.exportData=this.dataSource.sortData(this.dataSource.filteredData,this.dataSource.sort).map((function(t){return u.cloneDeep(t)}))},t.prototype.formatExportData=function(){var t=this;this.cloneData();var e=this.columnsToShow.value.filter((function(t){return"date"===t.type}));e&&e.length>0&&(this.exportData=this.exportData.map((function(n){return e.forEach((function(e){u.get(n,e.columnDef)&&u.set(n,e.columnDef,l.formatDate(u.get(n,e.columnDef),e.dateFormat?e.dateFormat:"dd/MM/yyyy, HH:mm",t.locale))})),n})))},t.prototype.nestedFilterCheck=function(t,e,n){if("object"==typeof e[n])for(var a in e[n])null!==e[n][a]&&(t=this.nestedFilterCheck(t,e[n],a));else t+=e[n];return t},t.prototype.setDefaultSorting=function(){var t=this;this.columns.some((function(e){if(e.sort)return t.sortActive=e.columnDef,t.sortDirection=e.sort,!0}))},t.prototype.setSavedColumnSelection=function(t){this.savedColumnsLoading=!1,t&&0!==t.visibleColumns.length?(this.columnsToShow.setValue(this.columns.filter((function(e){return t.visibleColumns.some((function(t){return t===e.columnDef}))}))),this.multiple&&"select"!==t.visibleColumns[0]&&t.visibleColumns.unshift("select"),this.displayedColumns=t.visibleColumns):this.setStaticColumns()},t.prototype.saveCurrentColumnSelection=function(t){if(this.tableId){var e=this.displayedColumns.slice();this.multiple&&"select"===e[0]&&e.shift(),this.columnStorageService.save({tableId:this.tableId,visibleColumns:e})}},t}();R.decorators=[{type:e.Component,args:[{selector:"ngx-mat-dynamic-table",template:'<div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="10px">\r\n    \x3c!-- Search input with chips --\x3e\r\n    <ngx-mat-table-search-input [columnSearch$]="columnSearch$" (searchChange)="applyFilter($event)">\r\n    </ngx-mat-table-search-input>\r\n    <mat-spinner *ngIf="searchLoading" [diameter]="20"></mat-spinner>\r\n    <span fxFlex.gt-xs></span>\r\n    \x3c!-- Select enabled columns --\x3e\r\n    <mat-spinner *ngIf="savedColumnsLoading" [diameter]="20"></mat-spinner>\r\n    <mat-form-field *ngIf="optionalColumns" appearance="outline">\r\n        <mat-label>Columns</mat-label>\r\n        <mat-select [formControl]="columnsToShow" multiple (selectionChange)="displayColumnsChanged($event)">\r\n            <mat-option *ngFor="let column of columns" [value]="column">{{column.columnTitle}}</mat-option>\r\n        </mat-select>\r\n    </mat-form-field>\r\n    \x3c!-- Export selected or filtered data to excel --\x3e\r\n    <button *ngIf="export" mat-stroked-button color="primary" (click)="eportToExcell()">\r\n        <mat-icon>import_export</mat-icon> Export\r\n    </button>\r\n    \x3c!-- Indicate number of selected items --\x3e\r\n    <span *ngIf="selection.selected.length > 0" class="mat-caption">{{selection.selected.length}} values selected</span>\r\n</div>\r\n\x3c!-- Table wrapping container --\x3e\r\n<div class="table-container">\r\n    <table mat-table #table [dataSource]="dataSource" matSort [matSortActive]="sortActive"\r\n        [matSortDirection]="sortDirection" style="width: 100%;">\r\n        \x3c!-- Checkbox Column --\x3e\r\n        <ng-container *ngIf="multiple" matColumnDef="select">\r\n            <th mat-header-cell *matHeaderCellDef>\r\n                <mat-checkbox (change)="$event ? masterToggle() : null"\r\n                    [checked]="selection.hasValue() && isAllSelected()"\r\n                    [indeterminate]="selection.hasValue() && !isAllSelected()">\r\n                </mat-checkbox>\r\n            </th>\r\n            <td mat-cell *matCellDef="let row">\r\n                <mat-checkbox (click)="$event.stopPropagation()" (change)="toggle($event, row)"\r\n                    [checked]="selection.isSelected(row)">\r\n                </mat-checkbox>\r\n            </td>\r\n            <ng-container *ngIf="totalsRowVisible">\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n        </ng-container>\r\n        \x3c!-- Table columns --\x3e\r\n        <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef" [sticky]="column.sticky"\r\n            [stickyEnd]="column.stickyEnd">\r\n            \x3c!-- Table header --\x3e\r\n            <th mat-header-cell *matHeaderCellDef>\r\n                \x3c!-- Header and search icon --\x3e\r\n                <div fxLayout="row" fxLayoutAlign="start center">\r\n                    <span mat-sort-header>\r\n                        {{ column.columnTitle }}\r\n                    </span>\r\n                    <button *ngIf="column.search" class="search-button" mat-icon-button [matMenuTriggerFor]="menu"\r\n                        (menuOpened)="searchInput.focus()">\r\n                        <mat-icon [ngClass]="{\'search-active\': searchInput.value}">search</mat-icon>\r\n                    </button>\r\n                </div>\r\n                \x3c!-- Search Menu --\x3e\r\n                <mat-menu #menu="matMenu">\r\n                    <div (click)="$event.stopPropagation()" fxLayout="column"\r\n                        style="padding-right: 8px; padding-left: 8px;">\r\n                        \x3c!-- Search input --\x3e\r\n                        <mat-form-field>\r\n                            <input matInput #searchInput\r\n                                (keyup)="applyColumnFilter($event.target, column.columnDef, column.columnTitle, searchType.value);"\r\n                                [placeholder]="column.columnTitle" [disabled]="searchType.value === \'empty\'">\r\n                            <mat-hint>Search</mat-hint>\r\n                            <button mat-button *ngIf="searchInput.value" matSuffix mat-icon-button aria-label="Clear"\r\n                                (click)="searchInput.value=\'\'; applyColumnFilter(searchInput, column.columnDef, column.columnTitle, searchType.value)">\r\n                                <mat-icon>close</mat-icon>\r\n                            </button>\r\n                        </mat-form-field>\r\n                        \x3c!-- Search options --\x3e\r\n                        <div fxLayout="row" fxLayoutAlign="end end">\r\n                            <mat-button-toggle-group name="search type" aria-label="Search Type"\r\n                                #searchType="matButtonToggleGroup" value="="\r\n                                (change)="applyColumnFilter(searchInput, column.columnDef, column.columnTitle, searchType.value)">\r\n                                <mat-button-toggle value="=" matTooltip="Equals">=</mat-button-toggle>\r\n                                <mat-button-toggle value="!=" matTooltip="Not Equals">≠</mat-button-toggle>\r\n                                \x3c!-- <mat-button-toggle value=">=">&#62;=</mat-button-toggle>\r\n                            <mat-button-toggle value="<=">&#60;=</mat-button-toggle> --\x3e\r\n                                <mat-button-toggle value="empty" matTooltip="Empty Cell">" "</mat-button-toggle>\r\n                            </mat-button-toggle-group>\r\n                        </div>\r\n                    </div>\r\n                </mat-menu>\r\n            </th>\r\n            \x3c!-- Table Cell --\x3e\r\n            <td mat-cell *matCellDef="let row" [class]="row[column.cellClassKey]"\r\n                [attr.data-label]="column.columnTitle" (click)="onMatCellClick(row, column);">\r\n                <ng-container [ngSwitch]="column.type">\r\n                    \x3c!-- Number type columns --\x3e\r\n                    <span *ngSwitchCase="\'number\'"\r\n                        [ngClass]="column.unit?.position === \'before\' ? \'unit-before\' : \'unit-after\'"\r\n                        [attr.data-unit]="row | lodashGet: column.unit?.key">\r\n                        {{ row | lodashGet: column.columnDef | number }}\r\n                    </span>\r\n                    \x3c!-- Date Type columns --\x3e\r\n                    <span *ngSwitchCase="\'date\'">\r\n                        {{ row | lodashGet: column.columnDef | date: column.dateFormat ? column.dateFormat :\r\n                        \'dd/MM/yyyy, HH:mm\' }}\r\n                    </span>\r\n                    \x3c!-- Icon Columns --\x3e\r\n                    <span *ngSwitchCase="\'icon\'">\r\n                        <ng-container *ngFor="let icon of column.icons">\r\n                            <mat-icon *ngIf="icon.value === (row | lodashGet: column.columnDef)"\r\n                                [style.color]="icon.color" [matTooltip]="icon.matTooltip">{{icon.matIcon}}\r\n                            </mat-icon>\r\n                        </ng-container>\r\n                    </span>\r\n                    \x3c!-- Text Columns --\x3e\r\n                    <span *ngSwitchDefault>\r\n                        {{ row | lodashGet: column.columnDef }}\r\n                    </span>\r\n                </ng-container>\r\n            </td>\r\n\r\n            <ng-container *ngIf="totalsRowVisible">\r\n                <td mat-footer-cell *matFooterCellDef [attr.data-label]="column.columnTitle">\r\n                    <ng-container *ngIf="column.total">\r\n                        {{column.totalValue | number}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf="column.total && column.average">\r\n                        &nbsp;|&nbsp;\r\n                    </ng-container>\r\n                    <ng-container *ngIf="column.average">\r\n                        &mu;&nbsp;{{column.averageValue | number}}\r\n                    </ng-container>\r\n                </td>\r\n            </ng-container>\r\n\r\n        </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>\r\n        <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="_rowClicked(row)"\r\n            [ngClass]="{\'row-click\': rowClick}"></tr>\r\n\r\n        <tr class="mat-row" *matNoDataRow>\r\n            <td class="mat-cell" [attr.colspan]="displayedColumns.length">No data</td>\r\n        </tr>\r\n\r\n        <ng-container *ngIf="totalsRowVisible">\r\n            <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true;"></tr>\r\n        </ng-container>\r\n\r\n    </table>\r\n</div>\r\n<mat-paginator class="mat-paginator-sticky" [pageSizeOptions]="pageSizeOptions ? pageSizeOptions: [50, 100, 200]">\r\n</mat-paginator>',changeDetection:e.ChangeDetectionStrategy.OnPush,styles:[".row-click{cursor:pointer}.search-button{height:24px!important;line-height:24px!important;width:24px!important}.search-button .mat-icon{height:18px!important;line-height:18px!important;width:18px!important}.search-button .material-icons{font-size:18px!important}.search-active{color:#00f}.unit-after:after,.unit-before:before{content:attr(data-unit)}.mat-cell{padding-left:5px;padding-right:5px}.mat-cell,.mat-header-row{text-overflow:ellipsis;white-space:nowrap}@media screen and (min-width:550px){.table-container{max-height:calc(100vh - 150px);overflow:auto}}@media screen and (max-width:550px){.mat-table .mat-row{border-bottom:5px solid #ddd;padding-bottom:5px}.mat-table .mat-header-row{display:flex;flex-wrap:wrap;height:auto;margin-bottom:4%;position:-webkit-sticky;position:sticky;top:0;z-index:2}.mat-table .mat-header-row th.mat-header-cell{align-items:center;display:flex;flex:1;justify-content:space-around;padding:1rem .5rem}.mat-table .mat-header-row th.mat-header-cell>.mat-sort-header-container{padding-left:15px}.mat-table .mat-cell{display:block;font-size:1em;font-weight:700;height:30px;margin-bottom:4%;padding-left:8px;padding-right:8px;text-align:right}.mat-table .mat-cell:before{content:attr(data-label);float:left;font-size:.85em;font-weight:400;text-transform:uppercase}.mat-table .mat-footer-cell{display:block;font-size:1em;font-weight:700;height:30px;margin-bottom:4%;padding-left:8px;padding-right:8px;text-align:right}.mat-table .mat-footer-cell:before{content:attr(data-label);float:left;font-size:.85em;font-weight:400;text-transform:uppercase}.mat-table .mat-cell:last-child{border-bottom:5px solid #ddd}}.mat-button-toggle-label-content{line-height:32px!important}"]}]}],R.ctorParameters=function(){return[{type:String,decorators:[{type:e.Inject,args:[e.LOCALE_ID]}]},{type:L},{type:N}]},R.propDecorators={tableId:[{type:e.Input}],tableData:[{type:e.Input}],rowClick:[{type:e.Input}],cellClick:[{type:e.Input}],fileName:[{type:e.Input}],columns:[{type:e.Input}],pageSizeOptions:[{type:e.Input}],export:[{type:e.Input}],filter:[{type:e.Input}],multiple:[{type:e.Input}],optionalColumns:[{type:e.Input}],emitFilteredData:[{type:e.Input}],rowClicked:[{type:e.Output}],cellClicked:[{type:e.Output}],selectedRows:[{type:e.Output}],filterResult:[{type:e.Output}],sort:[{type:e.ViewChild,args:[a.MatSort]}],paginator:[{type:e.ViewChild,args:[r.MatPaginator]}]};var q=function(){function t(){this.export=!1,this.filter=!1,this.multiple=!1,this.optionalColumns=!1,this.emitFilteredData=!1,this.rowClicked=new e.EventEmitter,this.cellClicked=new e.EventEmitter,this.selectedRows=new e.EventEmitter,this.filterResult=new e.EventEmitter}return t.prototype.ngOnInit=function(){},t}();q.decorators=[{type:e.Component,args:[{selector:"ngx-mat-dynamic-table-container",template:'<ng-container *ngIf="tableData$">\n    <div *ngIf="(tableData$ | async) as tableData; else loading">\n        <ngx-mat-dynamic-table [tableId]="tableId" [columns]="columns" [tableData]="tableData" [rowClick]="rowClick"\n            (rowClicked)="rowClicked.emit($event)" [cellClick]="cellClick" (cellClicked)="cellClicked.emit($event)"\n            [fileName]="fileName" [export]="export" [filter]="filter" [multiple]="multiple"\n            (selectedRows)="selectedRows.emit($event)" [optionalColumns]="optionalColumns"\n            [pageSizeOptions]="pageSizeOptions" [emitFilteredData]="emitFilteredData"\n            (filterResult)="filterResult.emit($event)">\n        </ngx-mat-dynamic-table>\n    </div>\n    <ng-template #loading>\n        <mat-progress-bar mode="indeterminate"></mat-progress-bar>\n    </ng-template>\n</ng-container>',changeDetection:e.ChangeDetectionStrategy.OnPush,styles:[""]}]}],q.ctorParameters=function(){return[]},q.propDecorators={tableId:[{type:e.Input}],tableData$:[{type:e.Input}],columns:[{type:e.Input}],rowClick:[{type:e.Input}],cellClick:[{type:e.Input}],fileName:[{type:e.Input}],export:[{type:e.Input}],filter:[{type:e.Input}],multiple:[{type:e.Input}],optionalColumns:[{type:e.Input}],pageSizeOptions:[{type:e.Input}],emitFilteredData:[{type:e.Input}],rowClicked:[{type:e.Output}],cellClicked:[{type:e.Output}],selectedRows:[{type:e.Output}],filterResult:[{type:e.Output}]};var j=function(){function t(t,e){this.xlsxExportService=t,this.matSnackBar=e}return t.prototype.ngOnInit=function(){},t.prototype.eportToExcell=function(){this.data&&this.headers?this.xlsxExportService.exportExcel(this.data,this.headers,this.fileName?this.fileName:"Export"):this.matSnackBar.open("Provide data and headers.","Ok",{duration:4e3})},t}();j.decorators=[{type:e.Component,args:[{selector:"ngx-mat-xlsx-table-export",template:'<button mat-stroked-button color="primary" (click)="eportToExcell()"><mat-icon>import_export</mat-icon> Export</button>',styles:[""]}]}],j.ctorParameters=function(){return[{type:L},{type:h.MatSnackBar}]},j.propDecorators={data:[{type:e.Input}],fileName:[{type:e.Input}],headers:[{type:e.Input}]};var V=function(){function t(){}return t.prototype.transform=function(t,e){return e?u.get(t,e):""},t}();V.decorators=[{type:e.Pipe,args:[{name:"lodashGet"}]}];var P=function(){function t(){this.visible=!0,this.selectable=!0,this.separatorKeysCodes=[I.ENTER,I.COMMA],this.searchCtrl=new i.FormControl,this.searchTerms=[],this.searchChange=new e.EventEmitter}return t.prototype.ngOnInit=function(){var t=this;this.columnSearchSubscription=this.columnSearch$.subscribe((function(e){if((e.search||"").trim()||"empty"===e.searchType){var n=t.searchTerms.find((function(t){return t.column===e.column}));n?(n.search=e.search.trim(),n.searchType=e.searchType):t.searchTerms.push(e),t.emitNewSearch()}else t.remove(e)}))},t.prototype.add=function(t){var e=t.target.value,n=this.searchTerms.find((function(t){return"global"===t.type}));(e||"").trim()?(n?n.search=e.trim():this.searchTerms.push({type:"global",search:e.trim()}),this.emitNewSearch()):this.remove(n)},t.prototype.remove=function(t){var e;"column"===t.type?e=this.searchTerms.findIndex((function(e){return e.column===t.column})):(e=this.searchTerms.findIndex((function(e){return e.search===t.search&&e.type===t.type})))>=0&&(this.searchInput.nativeElement.value=null),t.inputReference&&(t.inputReference.value=""),e>=0&&(this.searchTerms.splice(e,1),this.emitNewSearch())},t.prototype.orderChanged=function(t){k.moveItemInArray(this.searchTerms,t.previousIndex,t.currentIndex),this.emitNewSearch()},t.prototype.emitNewSearch=function(){this.searchChange.emit(this.searchTerms)},t.prototype.ngOnDestroy=function(){this.columnSearchSubscription.unsubscribe()},t}();P.decorators=[{type:e.Component,args:[{selector:"ngx-mat-table-search-input",template:'<div fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign="start start" fxLayoutGap.gt-xs="15px">\n    <mat-form-field appearance="outline">\n        <mat-label>Search</mat-label>\n        <input matInput placeholder="All Columns" #searchInput (keyup)="add($event)">\n    </mat-form-field>\n    <div fxLayout="column">\n        <span *ngIf="searchTerms.length > 0" class="mat-caption">Filters</span>\n        <mat-chip-list cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="orderChanged($event)">\n            <mat-chip class="example-box" cdkDrag *ngFor="let term of searchTerms"\n                [color]="term.type === \'global\' ? \'primary\' : \'accent\'" selected\n                [matTooltip]="term.type === \'global\' ? \'All\':term.columnTitle">\n                <span *ngIf="term.searchType === \'empty\'; else not_empty">\n                    {{term.columnTitle}} (empty)\n                </span>\n                <ng-template #not_empty>\n                    {{term.search}} {{term.searchType && term.searchType === \'!=\' ?\n                    \'(≠)\' : \'\'}}\n                </ng-template>\n                <mat-icon (click)="remove(term)" matChipRemove>cancel</mat-icon>\n            </mat-chip>\n        </mat-chip-list>\n    </div>\n</div>',styles:[""]}]}],P.ctorParameters=function(){return[]},P.propDecorators={columnSearch$:[{type:e.Input}],searchInput:[{type:e.ViewChild,args:["searchInput"]}],searchChange:[{type:e.Output}]};var $=function(){};$.decorators=[{type:e.NgModule,args:[{declarations:[F,R,q,j,V,P],imports:[l.CommonModule,i.FormsModule,i.ReactiveFormsModule,d.FlexLayoutModule,n.MatTableModule,g.MatButtonModule,f.MatFormFieldModule,w.MatInputModule,y.MatIconModule,b.MatCheckboxModule,r.MatPaginatorModule,a.MatSortModule,x.MatProgressBarModule,v.MatTooltipModule,C.MatSelectModule,S.MatMenuModule,D.MatProgressSpinnerModule,T.MatChipsModule,k.DragDropModule,M.MatButtonToggleModule],providers:[L],exports:[R,q,j]}]}],t.DynamicTableComponent=R,t.DynamicTableContainerComponent=q,t.NgxMatDynamicTableComponent=F,t.NgxMatDynamicTableModule=$,t.NgxMatDynamicTableService=E,t.XlsxTableExportComponent=j,t.ɵa=L,t.ɵb=N,t.ɵc=V,t.ɵd=P,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-mat-dynamic-table.umd.min.js.map