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

Componente angular dinâmico que ajuda a criar uma tabela utilizando o Angular material, de maneira fácil e rápida.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/material/table"),require("@angular/material/paginator"),require("@angular/material/sort"),require("@angular/material/tooltip"),require("@angular/material/icon"),require("@angular/common"),require("@angular/material/form-field"),require("@angular/material/input")):"function"==typeof define&&define.amd?define("ngx-material-dynamic-table",["exports","@angular/core","@angular/material/table","@angular/material/paginator","@angular/material/sort","@angular/material/tooltip","@angular/material/icon","@angular/common","@angular/material/form-field","@angular/material/input"],e):e((t=t||self)["ngx-material-dynamic-table"]={},t.ng.core,t.ng.material.table,t.ng.material.paginator,t.ng.material.sort,t.ng.material.tooltip,t.ng.material.icon,t.ng.common,t.ng.material.formField,t.ng.material.input)}(this,(function(t,e,o,a,n,i,r,l,d,s){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */function u(t,e,o,a){var n,i=arguments.length,r=i<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,o):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,o,a);else for(var l=t.length-1;l>=0;l--)(n=t[l])&&(r=(i<3?n(r):i>3?n(e,o,r):n(e,o))||r);return i>3&&r&&Object.defineProperty(e,o,r),r}function p(t,e){var o="function"==typeof Symbol&&t[Symbol.iterator];if(!o)return t;var a,n,i=o.call(t),r=[];try{for(;(void 0===e||e-- >0)&&!(a=i.next()).done;)r.push(a.value)}catch(t){n={error:t}}finally{try{a&&!a.done&&(o=i.return)&&o.call(i)}finally{if(n)throw n.error}}return r}var c={read:{icon:"search",name:"read",tooltip:"Visualizar"},update:{icon:"edit",name:"edit",tooltip:"Editar"},delete:{icon:"delete",name:"delete",tooltip:"Excluir"},download:{icon:"arrow_downward",name:"download",tooltip:"Download"}},m=function(){function t(){this.displayedColumns=[],this.filter=!0,this.buttonAddNewItem=!1,this.buttonExport=!1,this.buttonsConfig=c,this.sendClick=new e.EventEmitter,this.loading=!0,this.action=!1,this.displayedColumnsObject=[]}return t.prototype.ngOnChanges=function(){this.displayedColumns&&this.addActionColumn(),this.dataSource&&this.createDatasource()},t.prototype.createDatasource=function(){this.dados=new o.MatTableDataSource(this.dataSource),this.dados.paginator=this.paginator,this.dados.sort=this.sort,this.showTable()},t.prototype.createColumns=function(){this.displayedColumnsObject=this.displayedColumns.map((function(t){return"number"==typeof t.column?t.column.toString():t.column})),this.showTable()},t.prototype.showTable=function(){this.dados&&this.displayedColumns&&this.displayedColumnsObject&&(this.loading=!1)},t.prototype.sendAction=function(t,e,o){var a={action:t,row:e,index:o};this.sendClick.emit(a)},t.prototype.addActionColumn=function(){if(this.actions){this.displayedColumns=function(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(p(arguments[e]));return t}(this.displayedColumns,[{column:"actions",title:"Ações"}])}this.createColumns()},t.prototype.applyFilter=function(t){this.dados.filter=t.trim().toLowerCase()},u([e.Input()],t.prototype,"dataSource",void 0),u([e.Input()],t.prototype,"displayedColumns",void 0),u([e.Input()],t.prototype,"actions",void 0),u([e.Input()],t.prototype,"configEditRow",void 0),u([e.Input()],t.prototype,"filter",void 0),u([e.Input()],t.prototype,"buttonAddNewItem",void 0),u([e.Input()],t.prototype,"buttonExport",void 0),u([e.Input()],t.prototype,"componentName",void 0),u([e.Input()],t.prototype,"buttonsConfig",void 0),u([e.Output()],t.prototype,"sendClick",void 0),u([e.ViewChild(o.MatTable,{static:!0})],t.prototype,"table",void 0),u([e.ViewChild(a.MatPaginator,{static:!0})],t.prototype,"paginator",void 0),u([e.ViewChild(n.MatSort,{static:!0})],t.prototype,"sort",void 0),t=u([e.Component({selector:"ngx-material-dynamic-table",template:'\r\n\r\n <mat-form-field class="pesquisa" *ngIf="filter">\r\n   <span matPrefix>\r\n    <i class="material-icons">search</i>\r\n    <input type="text" matInput (keyup)="applyFilter($event.target.value)" placelholder="Filtrar">\r\n   </span>\r\n </mat-form-field>\r\n <mat-table #table [dataSource]="dados" [hidden]="loading || !dados || !displayedColumns || !displayedColumnsObject">\r\n\r\n    <ng-container *ngFor="let disCol of displayedColumns; let colIndex = index" matColumnDef="{{disCol.column}}">\r\n      <th mat-header-cell *matHeaderCellDef> {{disCol.title}} </th>\r\n      <td mat-cell *matCellDef="let element">\r\n        <span *ngIf="disCol.column !== \'actions\'; else blockActions">\r\n        {{element[disCol.column]}}\r\n        </span>\r\n        <ng-template #blockActions>\r\n          <div class="actionsList">\r\n              <span *ngFor="let action of actions">\r\n                  <a (click)="sendAction(action)" matTooltip="{{buttonsConfig[action.column].tooltip}}">\r\n                    <i class="material-icons">{{buttonsConfig[action.column].icon}}</i>\r\n                  </a>\r\n              </span>\r\n          </div>\r\n        </ng-template>\r\n      </td>\r\n    </ng-container>\r\n\r\n\r\n    <tr mat-header-row *matHeaderRowDef="displayedColumnsObject"></tr>\r\n    <tr mat-row *matRowDef="let row; columns: displayedColumnsObject;"></tr>\r\n  </mat-table>\r\n  <div *ngIf="dados && dados.filteredData && dados.filteredData.length === 0">\r\n    <p>Nenhum registro encontrado</p>\r\n  </div>\r\n  <mat-paginator [hidden]="dados === undefined" [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>\r\n',styles:["[hidden]{display:none}.actionsList{display:flex;align-items:center}.actionsList span+span{margin-left:10px}.mat-table{width:100%;display:table}.mat-table tr.mat-header-row{height:auto}.mat-form-field,.pesquisa{width:100%}"]})],t)}(),f=function(){function t(){}return t=u([e.NgModule({declarations:[m],imports:[l.CommonModule,o.MatTableModule,i.MatTooltipModule,r.MatIconModule,a.MatPaginatorModule,n.MatSortModule,d.MatFormFieldModule,s.MatInputModule],exports:[m,o.MatTableModule,i.MatTooltipModule,r.MatIconModule,a.MatPaginatorModule,n.MatSortModule,d.MatFormFieldModule,s.MatInputModule]})],t)}();t.NgxMaterialDynamicTableComponent=m,t.NgxMaterialDynamicTableModule=f,t.buttonsConfig=c,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-material-dynamic-table.umd.min.js.map