(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms')) :
    typeof define === 'function' && define.amd ? define('angular-json-table', ['exports', '@angular/common', '@angular/core', '@angular/forms'], factory) :
    (factory((global['angular-json-table'] = {}),global.ng.common,global.ng.core,global.ng.forms));
}(this, (function (exports,common,core,forms) { 'use strict';

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
     */
    var DataTableComponent = /** @class */ (function () {
        function DataTableComponent() {
            this.deleteRow = new core.EventEmitter();
            this.updateRow = new core.EventEmitter();
            this.data = {};
            this.displayed = [];
            this.perpage = 10;
            this.page = 1;
            this.checked = [];
            this.checkAll = false;
            this.dialogue = false;
            this.dialogeData = {};
        }
        /**
         * @return {?}
         */
        DataTableComponent.prototype.ngOnInit = /**
         * @return {?}
         */
            function () {
                this.processData();
            };
        /**
         * @param {?} e
         * @param {?} id
         * @return {?}
         */
        DataTableComponent.prototype.selected = /**
         * @param {?} e
         * @param {?} id
         * @return {?}
         */
            function (e, id) {
                if (e.target.checked) {
                    this.checked.push(id);
                }
            };
        /**
         * @return {?}
         */
        DataTableComponent.prototype.deleteSelected = /**
         * @return {?}
         */
            function () {
                var _this = this;
                if (this.checked.length > 0) {
                    this.deleteRow.emit(this.checked);
                    this.dataSource = this.dataSource.filter(function (value, index, array) {
                        return !_this.checked.includes(value.id);
                    });
                    this.checked = [];
                    this.paginate(this.page);
                }
            };
        /**
         * @return {?}
         */
        DataTableComponent.prototype.totalItems = /**
         * @return {?}
         */
            function () {
                if (this.total > this.perpage) {
                    return Math.ceil(this.total / this.perpage);
                }
                else {
                    return 1;
                }
            };
        /**
         * @param {?} page
         * @return {?}
         */
        DataTableComponent.prototype.paginate = /**
         * @param {?} page
         * @return {?}
         */
            function (page) {
                /** @type {?} */
                var start = (this.perpage * page) - this.perpage;
                /** @type {?} */
                var end = (this.perpage * page);
                // console.log(start, end);
                this.data['data'] = this.dataSource.slice(start, end);
                // console.log(this.data);
            };
        /**
         * @param {?} perPage
         * @return {?}
         */
        DataTableComponent.prototype.pageOnChange = /**
         * @param {?} perPage
         * @return {?}
         */
            function (perPage) {
                this.perpage = perPage;
                this.page = 1;
                //console.log(perPage);
                this.paginate(this.page);
            };
        /**
         * @return {?}
         */
        DataTableComponent.prototype.previousPage = /**
         * @return {?}
         */
            function () {
                if (this.page > 1) {
                    this.page--;
                }
                this.paginate(this.page);
            };
        /**
         * @return {?}
         */
        DataTableComponent.prototype.nextPage = /**
         * @return {?}
         */
            function () {
                if (this.page + 1 <= this.totalItems()) {
                    this.page++;
                }
                this.paginate(this.page);
            };
        /**
         * @param {?} id
         * @return {?}
         */
        DataTableComponent.prototype.showUpdate = /**
         * @param {?} id
         * @return {?}
         */
            function (id) {
                var _this = this;
                this.dialogue = true;
                // console.log('Showing the updates');
                this.data.data.forEach(function (value) {
                    if (value.id === id) {
                        _this.dialogeData = value;
                    }
                });
            };
        /**
         * @return {?}
         */
        DataTableComponent.prototype.closeDialogue = /**
         * @return {?}
         */
            function () {
                this.dialogue ? this.dialogue = false : this.dialogue = true;
                this.dialogeData = {};
            };
        /**
         * @param {?} dialogeData
         * @return {?}
         */
        DataTableComponent.prototype.submitUpdateRow = /**
         * @param {?} dialogeData
         * @return {?}
         */
            function (dialogeData) {
                this.updateRow.emit(dialogeData);
            };
        /**
         * @return {?}
         */
        DataTableComponent.prototype.processData = /**
         * @return {?}
         */
            function () {
                if (this.dataSource && this.dataSource.length > 0) {
                    this.total = this.dataSource.length;
                    if (this.headers.thead && this.headers.thead.length > 0) {
                        this.data['headers'] = this.headers.thead;
                        this.displayed = this.headers.displayed;
                    }
                    else {
                        console.warn('No headers data for table provided');
                    }
                    this.paginate(this.page);
                }
                else {
                    console.warn('No data for table provided');
                }
            };
        DataTableComponent.decorators = [
            { type: core.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)\">\uD83D\uDD89</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}"]
                    }] }
        ];
        /** @nocollapse */
        DataTableComponent.ctorParameters = function () { return []; };
        DataTableComponent.propDecorators = {
            dataSource: [{ type: core.Input }],
            headers: [{ type: core.Input }],
            update: [{ type: core.Input }],
            deleteRow: [{ type: core.Output }],
            updateRow: [{ type: core.Output }]
        };
        return DataTableComponent;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
     */
    var JSONTableModule = /** @class */ (function () {
        function JSONTableModule() {
        }
        JSONTableModule.decorators = [
            { type: core.NgModule, args: [{
                        imports: [
                            common.CommonModule,
                            forms.FormsModule
                        ],
                        declarations: [DataTableComponent],
                        exports: [DataTableComponent]
                    },] }
        ];
        return JSONTableModule;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
     */

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
     */

    exports.JSONTableModule = JSONTableModule;
    exports.ɵa = DataTableComponent;

    Object.defineProperty(exports, '__esModule', { value: true });

})));

//# sourceMappingURL=angular-json-table.umd.js.map