!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/common"),require("@angular/core"),require("@angular/forms")):"function"==typeof define&&define.amd?define("angular-json-table",["exports","@angular/common","@angular/core","@angular/forms"],e):e(t["angular-json-table"]={},t.ng.common,t.ng.core,t.ng.forms)}(this,function(t,e,a,o){"use strict";var n=function(){function t(){this.deleteRow=new a.EventEmitter,this.updateRow=new a.EventEmitter,this.data={},this.displayed=[],this.perpage=10,this.page=1,this.checked=[],this.checkAll=!1,this.dialogue=!1,this.dialogeData={}}return t.prototype.ngOnInit=function(){this.processData()},t.prototype.selected=function(t,e){t.target.checked&&this.checked.push(e)},t.prototype.deleteSelected=function(){var o=this;0<this.checked.length&&(this.deleteRow.emit(this.checked),this.dataSource=this.dataSource.filter(function(t,e,a){return!o.checked.includes(t.id)}),this.checked=[],this.paginate(this.page))},t.prototype.totalItems=function(){return this.total>this.perpage?Math.ceil(this.total/this.perpage):1},t.prototype.paginate=function(t){var e=this.perpage*t-this.perpage,a=this.perpage*t;this.data.data=this.dataSource.slice(e,a)},t.prototype.pageOnChange=function(t){this.perpage=t,this.page=1,this.paginate(this.page)},t.prototype.previousPage=function(){1<this.page&&this.page--,this.paginate(this.page)},t.prototype.nextPage=function(){this.page+1<=this.totalItems()&&this.page++,this.paginate(this.page)},t.prototype.showUpdate=function(e){var a=this;this.dialogue=!0,this.data.data.forEach(function(t){t.id===e&&(a.dialogeData=t)})},t.prototype.closeDialogue=function(){this.dialogue?this.dialogue=!1:this.dialogue=!0,this.dialogeData={}},t.prototype.submitUpdateRow=function(t){this.updateRow.emit(t)},t.prototype.processData=function(){this.dataSource&&0<this.dataSource.length?(this.total=this.dataSource.length,this.headers.thead&&0<this.headers.thead.length?(this.data.headers=this.headers.thead,this.displayed=this.headers.displayed):console.warn("No headers data for table provided"),this.paginate(this.page)):console.warn("No data for table provided")},t.decorators=[{type:a.Component,args:[{selector:"json-table",template:'<div *ngIf="data" class="data-table">\n  <div *ngIf="false">\n    <input type="text" class="search" placeholder="Search for details">\n  </div>\n  <table>\n    <thead>\n    <tr>\n      <th style="width: 4%">&nbsp;</th>\n      <th style="width: 4%">#</th>\n      <th *ngFor="let header of data.headers"  style="text-align:left">{{header}}</th>\n      <th *ngIf="update">&nbsp;</th>\n    </tr>\n    </thead>\n    <tbody>\n\n    <tr *ngFor="let row of data.data; let i = index">\n      <td><input type="checkbox" [checked]="checkAll" (change)="selected($event,row.id)"></td>\n      <td>{{ i+1 }}</td>\n      <td *ngFor="let attr of displayed" >{{row[attr]}}</td>\n      <td *ngIf="update" style="text-align:center">\n        <span (click)="showUpdate(row.id)">🖉</span>\n      </td>\n    </tr>\n\n    </tbody>\n    <tfoot></tfoot>\n  </table>\n\n  <div class="footer">\n    <div class="delete">\n      <button (click)="deleteSelected()">Delete {{checked.length}} rows</button>\n    </div>\n\n    <div class="spacer">\n\n    </div>\n\n    <div class="data-pagination">\n      <select (change)="pageOnChange(device.value)" #device>\n        <option value="10">10</option>\n        <option value="15">15</option>\n        <option value="20">20</option>\n        <option value="100">100</option>\n      </select>\n      | Showing {{page}} of {{totalItems()}} |\n      <button class="link-button" (click)="previousPage()">Previous</button>\n      -\n      <button class="link-button" (click)="nextPage()">Next</button>\n    </div>\n  </div>\n\n\n  <div *ngIf="update && dialogue" class="update" (click)="closeDialogue()">\n\n    <div class="update-box" (click)="$event.stopPropagation()">\n      <h2>Edit the Row</h2>\n      <form #customForm="ngForm" novalidate (ngSubmit)="submitUpdateRow(dialogeData); closeDialogue()">\n        <div class="f-x">\n          <ng-container *ngFor="let attr of displayed; let i = index">\n            <div *ngIf="attr!=\'id\' " class="f-y">\n              <label>{{data.headers[i]}}</label>\n              <input type="text" [value]="dialogeData[attr]" [placeholder]="attr" [name]="attr"\n                     [(ngModel)]="dialogeData[attr]">\n            </div>\n          </ng-container>\n        </div>\n        <footer>\n          <br>\n          <button type="submit">Update the row</button>\n          <button type="button" (click)="closeDialogue()">Cancel</button>\n        </footer>\n      </form>\n    </div>\n  </div>\n\n</div>\n',styles:[".data-table{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);margin:10px;border-radius:8px;background:#fff;padding-top:8px}.data-table .search{width:100%;height:42px;border:none;outline:0;text-align:left;border-bottom:1px solid rgba(0,0,0,.12)}.data-table table{display:table;border-collapse:separate;border-spacing:2px;border-color:grey;width:100%;background:#fff}.data-table table tbody td:first-of-type,.data-table table tbody th:first-of-type,.data-table table thead td:first-of-type,.data-table table thead th:first-of-type{padding-left:24px!important;padding-right:24px!important}.data-table table thead{display:table-header-group;vertical-align:middle;border-color:inherit}.data-table table thead tr{height:56px}.data-table table tbody{display:table-row-group;vertical-align:middle;border-color:inherit}.data-table table tbody tr{height:48px;color:rgba(0,0,0,.87)}.data-table table th{padding:0;color:rgba(0,0,0,.54);border-bottom:1px solid rgba(0,0,0,.12)}.data-table table tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}.data-table .footer{display:flex;height:40px;border-top:1px solid rgba(0,0,0,.12)}.data-table .footer .spacer{flex-grow:1}.data-table .footer .delete{width:120px;background:0 0}.data-table .footer .delete button{height:80%;background:0 0;border:none;outline:0;cursor:pointer;transition:.25s linear;border-radius:4px;margin-left:5px;margin-top:4px}.data-table .footer .delete button:hover{background-color:#fbab33;color:#fff}.data-table .footer .data-pagination{padding-right:20px;padding-top:4px}.data-table .footer .data-pagination select{outline:0;background:0 0;padding:4px}.data-table .footer .data-pagination .link-button{border:none;outline:0;background:0 0}.data-table .footer .data-pagination .link-button:hover{text-decoration:underline}.data-table .update{transition:.5s linear;position:fixed;height:100vh;width:100vw;background:rgba(212,212,212,.51);top:0;left:0;display:flex;align-items:center;justify-content:center}.data-table .update .update-box{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);background:#fff;padding:8px;border-radius:4px;width:250px}.data-table .update .f-x{display:flex;flex-direction:column}.data-table .update .f-y{display:flex;flex-direction:column;margin-top:6px}.data-table .update input[type=text]{margin-right:4px;padding:4px}"]}]}],t.ctorParameters=function(){return[]},t.propDecorators={dataSource:[{type:a.Input}],headers:[{type:a.Input}],update:[{type:a.Input}],deleteRow:[{type:a.Output}],updateRow:[{type:a.Output}]},t}(),i=function(){function t(){}return t.decorators=[{type:a.NgModule,args:[{imports:[e.CommonModule,o.FormsModule],declarations:[n],exports:[n]}]}],t}();t.JSONTableModule=i,t.ɵa=n,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=angular-json-table.umd.min.js.map