ng-simplegrid/bundles/ng-simplegrid.umd.js

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("@angular/core"), require("@angular/common"));
	else if(typeof define === 'function' && define.amd)
		define("ng-simplegrid", ["@angular/core", "@angular/common"], factory);
	else if(typeof exports === 'object')
		exports["ng-simplegrid"] = factory(require("@angular/core"), require("@angular/common"));
	else
		root["ng-simplegrid"] = factory(root["@angular/core"], root["@angular/common"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_10__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId])
/******/ 			return installedModules[moduleId].exports;
/******/
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// identity function for calling harmony imports with the correct context
/******/ 	__webpack_require__.i = function(value) { return value; };
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 5);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {

module.exports = __WEBPACK_EXTERNAL_MODULE_0__;

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = __webpack_require__(0);
var GridComponent = (function () {
    function GridComponent() {
        this.rowsPerPage = 10;
        this.dataList = [];
        this.emptyMessage = '검색한 내역이 없습니다';
        this.dataListToShow = [];
        this.totalPageCount = 1;
        this.currentPageIndex = 0;
        this.emptyRows = [];
    }
    GridComponent.prototype.ngOnInit = function () {
        if (!this.columns)
            console.error('ng-simpleGrid: grid.columns is not exists.');
    };
    GridComponent.prototype.setDataList = function (dataList) {
        this.dataList = dataList;
        this.initializeData(dataList);
    };
    GridComponent.prototype.initializeData = function (dataList) {
        this.totalPageCount = this._getTotalPageCount(this.rowsPerPage, dataList);
        this.dataListPerPage = this._getDataListPerPage(this.rowsPerPage, dataList);
        this.dataListToShow = this.dataListPerPage[0];
        this.emptyRows = this._getEmptyRowsToBeFilled(this.rowsPerPage, this.dataListToShow);
    };
    GridComponent.prototype.search = function (key, value) {
        if (!this.dataList)
            return;
        if (value === '') {
            this.initializeData(this.dataList);
            return;
        }
        var filteredList = [];
        for (var _i = 0, _a = this.dataList; _i < _a.length; _i++) {
            var data = _a[_i];
            if (data[key].include(data))
                filteredList.push(data);
        }
        this.initializeData(filteredList);
    };
    GridComponent.prototype.onClickDataItem = function (e, value, datarow, key, index) {
        var column = this._getColumnByProperty(this.columns, key, 'onClick');
        if (column == null)
            return;
        column.onClick(e, value, index, datarow);
    };
    GridComponent.prototype.onMovePage = function (pageIndex) {
        if (!this.dataListPerPage)
            return;
        this.dataListToShow = this.dataListPerPage[pageIndex];
        this.emptyRows = this._getEmptyRowsToBeFilled(this.rowsPerPage, this.dataListToShow);
        this.currentPageIndex = pageIndex;
    };
    GridComponent.prototype.onClickDataRow = function (e, row, index) {
        if (this.event && this.event.onClickRow) {
            this.event.onClickRow(row, index);
        }
    };
    GridComponent.prototype._getColumnByProperty = function (columns, key, property) {
        var selectedColumn = null;
        for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
            var column = columns_1[_i];
            if (column.key == key) {
                if (column.hasOwnProperty(property)) {
                    selectedColumn = column;
                    break;
                }
            }
        }
        return selectedColumn;
    };
    GridComponent.prototype._getTotalPageCount = function (rowsPerPage, dataList) {
        var dataListSize = dataList.length;
        return Math.ceil(dataListSize / rowsPerPage);
    };
    GridComponent.prototype._getDataListPerPage = function (rowsPerPage, dataList) {
        var dataListPerPage = [];
        for (var i = 0; i <= this.totalPageCount; i++) {
            dataListPerPage.push(this.dataList.splice(0, rowsPerPage));
        }
        return dataListPerPage;
    };
    GridComponent.prototype._getEmptyRowsToBeFilled = function (rowsPerPage, dataList) {
        var emptyRowsCount = rowsPerPage - dataList.length;
        return new Array(emptyRowsCount);
    };
    return GridComponent;
}());
__decorate([
    core_1.Input(),
    __metadata("design:type", Array)
], GridComponent.prototype, "columns", void 0);
__decorate([
    core_1.Input(),
    __metadata("design:type", Object)
], GridComponent.prototype, "event", void 0);
__decorate([
    core_1.Input(),
    __metadata("design:type", Number)
], GridComponent.prototype, "rowsPerPage", void 0);
__decorate([
    core_1.Input(),
    __metadata("design:type", Array)
], GridComponent.prototype, "dataList", void 0);
__decorate([
    core_1.Input(),
    __metadata("design:type", String)
], GridComponent.prototype, "emptyMessage", void 0);
__decorate([
    core_1.Input(),
    __metadata("design:type", String)
], GridComponent.prototype, "emptySubMessage", void 0);
GridComponent = __decorate([
    core_1.Component({
        selector: 'ng-simpleGrid',
        styles: [__webpack_require__(6)],
        template: __webpack_require__(8)
    }),
    __metadata("design:paramtypes", [])
], GridComponent);
exports.GridComponent = GridComponent;


/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = __webpack_require__(0);
var PaginationComponent = (function () {
    function PaginationComponent() {
        this.movePage = new core_1.EventEmitter();
    }
    PaginationComponent.prototype.ngOnInit = function () {
        console.log('oninit pagination');
    };
    PaginationComponent.prototype.createRange = function (number) {
        var numberList = [];
        for (var i = 0; i < number; i++) {
            numberList.push(i);
        }
        return numberList;
    };
    PaginationComponent.prototype.onMovePage = function (pageIndex) {
        this.movePage.emit(pageIndex);
    };
    PaginationComponent.prototype.onMoveFirst = function () {
        var FIRST_PAGE_INDEX = 0;
        if (this.currentPageIndex == FIRST_PAGE_INDEX)
            return;
        this.onMovePage(FIRST_PAGE_INDEX);
    };
    PaginationComponent.prototype.onMoveLast = function () {
        var LAST_PAGE_INDEX = this.totalPageCount - 1;
        if (this.currentPageIndex == LAST_PAGE_INDEX)
            return;
        this.onMovePage(LAST_PAGE_INDEX);
    };
    PaginationComponent.prototype.onMoveNext = function () {
        var LAST_PAGE_INDEX = this.totalPageCount - 1;
        if (this.currentPageIndex == LAST_PAGE_INDEX)
            return;
        this.currentPageIndex = this.currentPageIndex + 1;
        this.onMovePage(this.currentPageIndex);
    };
    PaginationComponent.prototype.onMovePrev = function () {
        var FIRST_PAGE_INDEX = 0;
        if (this.currentPageIndex == FIRST_PAGE_INDEX)
            return;
        this.currentPageIndex = this.currentPageIndex - 1;
        this.onMovePage(this.currentPageIndex);
    };
    return PaginationComponent;
}());
__decorate([
    core_1.Input(),
    __metadata("design:type", Number)
], PaginationComponent.prototype, "totalPageCount", void 0);
__decorate([
    core_1.Input(),
    __metadata("design:type", Number)
], PaginationComponent.prototype, "currentPageIndex", void 0);
__decorate([
    core_1.Output(),
    __metadata("design:type", core_1.EventEmitter)
], PaginationComponent.prototype, "movePage", void 0);
PaginationComponent = __decorate([
    core_1.Component({
        selector: 'ng-simplePagination',
        styles: [__webpack_require__(7)],
        template: __webpack_require__(9)
    }),
    __metadata("design:paramtypes", [])
], PaginationComponent);
exports.PaginationComponent = PaginationComponent;


/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

Object.defineProperty(exports, "__esModule", { value: true });
var grid_component_1 = __webpack_require__(1);
exports.GridComponent = grid_component_1.GridComponent;
var pagination_component_1 = __webpack_require__(2);
exports.PaginationComponent = pagination_component_1.PaginationComponent;
var grid_module_1 = __webpack_require__(4);
exports.GridModule = grid_module_1.GridModule;


/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = __webpack_require__(0);
var common_1 = __webpack_require__(10);
var grid_component_1 = __webpack_require__(1);
var pagination_component_1 = __webpack_require__(2);
var GridModule = (function () {
    function GridModule() {
    }
    return GridModule;
}());
GridModule = __decorate([
    core_1.NgModule({
        imports: [common_1.CommonModule],
        declarations: [grid_component_1.GridComponent, pagination_component_1.PaginationComponent],
        exports: [common_1.CommonModule, grid_component_1.GridComponent, pagination_component_1.PaginationComponent]
    })
], GridModule);
exports.GridModule = GridModule;


/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

Object.defineProperty(exports, "__esModule", { value: true });
var index_1 = __webpack_require__(3);
exports.GridModule = index_1.GridModule;
exports.GridComponent = index_1.GridComponent;
exports.PaginationComponent = index_1.PaginationComponent;


/***/ }),
/* 6 */
/***/ (function(module, exports) {

module.exports = ".tbl-search-result {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  vertical-align: middle;\n  background: transparent;\n  border-spacing: 0;\n  width: 100%;\n  border: 1px solid #dee1e6;\n  border-width: 1px 1px 0 1px;\n  table-layout: fixed; }\n  .tbl-search-result thead th {\n    border-top: 1px;\n    height: 40px;\n    text-align: center;\n    color: #6d6e73;\n    background: #f2f5fa;\n    font-size: 14px;\n    padding: 0 5px; }\n  .tbl-search-result tbody tr:hover {\n    background-color: beige; }\n  .tbl-search-result tbody td {\n    cursor: pointer;\n    text-align: center;\n    font-size: 14px;\n    color: #6d6e73;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    height: 40px;\n    border-bottom: 1px solid #dee1e6;\n    padding: 0 5px; }\n    .tbl-search-result tbody td.no-data {\n      padding: 0;\n      height: 200px;\n      color: #4d5662;\n      font-size: 16px;\n      font-weight: bold; }\n      .tbl-search-result tbody td.no-data .sub {\n        font-size: 14px;\n        color: #6d6e73;\n        line-height: 150%;\n        margin-top: 20px;\n        font-weight: 400; }\n    .tbl-search-result tbody td button {\n      background-color: #555555;\n      /* Green */\n      cursor: pointer;\n      border: none;\n      color: white;\n      padding: 5px 10px;\n      margin: 5px;\n      text-align: center;\n      text-decoration: none;\n      display: inline-block;\n      font-size: 16px; }\n"

/***/ }),
/* 7 */
/***/ (function(module, exports) {

module.exports = ".paginate {\n  text-align: center;\n  padding: 10px 0;\n  font: 0/0 \"Noto Sans KR\"; }\n  .paginate a {\n    display: inline-block;\n    width: 30px;\n    height: 30px;\n    text-align: center;\n    font-size: 15px;\n    line-height: 30px;\n    cursor: pointer;\n    vertical-align: middle; }\n  .paginate strong {\n    display: inline-block;\n    width: 30px;\n    height: 30px;\n    text-align: center;\n    font-size: 15px;\n    line-height: 30px;\n    cursor: pointer;\n    vertical-align: middle;\n    border: 1px solid #fcd20c;\n    font-size: 15px;\n    line-height: 26px; }\n  .paginate .button-prev {\n    font: 0/0 \"Noto Sans KR\";\n    background: url(\"/assets/images/icon/ico-paginate-prev.png\") 50% 50% no-repeat; }\n  .paginate .button-next {\n    font: 0/0 \"Noto Sans KR\";\n    background: url(\"/assets/images/icon/ico-paginate-next.png\") 50% 50% no-repeat; }\n"

/***/ }),
/* 8 */
/***/ (function(module, exports) {

module.exports = "<table class=\"tbl-search-result\">\n  <thead>\n    <tr>\n      <ng-template ngFor let-column [ngForOf]=\"columns\">\n        <th [width]=\"column.width || '10%'\">{{ column.name }}</th>\n      </ng-template>\n    </tr>\n  </thead>\n  <tbody>\n    <ng-template ngFor let-datarow [ngForOf]=\"dataListToShow\" let-i=\"index\">\n      <tr (click)=\"onClickDataRow($event, datarow, i)\">\n        <ng-template ngFor let-column [ngForOf]=\"columns\" let-i=\"index\">\n        \n          <ng-template [ngIf]=\"column.type == 'text'\">\n            <td (click)=\"onClickDataItem($event, column.value ? column.value : datarow[column.key], datarow, column.key, i)\">\n                {{ column.value ? column.value : datarow[column.key] }}\n            </td>\n          </ng-template>\n\n          <ng-template [ngIf]=\"column.type == 'button'\">\n            <td>\n                <button\n                  (click)=\"onClickDataItem($event, column.value ? column.value : datarow[column.key], datarow, column.key, i)\">\n                  {{ column.value ? column.value : datarow[column.key] }}\n                </button>\n            </td>\n          </ng-template>\n\n        </ng-template>\n      </tr>\n    </ng-template>\n    <ng-template ngFor let-emptyRow [ngForOf]=\"emptyRows\">\n      <tr>\n        <ng-template ngFor let-column [ngForOf]=\"columns\" let-i=\"index\">\n          <td>\n          </td>\n        </ng-template>\n      </tr>\n    </ng-template>\n    <ng-template [ngIf]=\"dataListToShow.length === 0\">\n      <tr>\n        <td class=\"no-data\"\n            [style.height.px]=\"rowsPerPage * 30\"\n            [attr.colspan]=\"columns.length\">\n          <p>{{ emptyMessage }}</p>\n          <p class=\"sub\" [innerHTML]=\"emptySubMessage\">\n          </p>\n        </td>\n      </tr>\n    </ng-template>\n  </tbody>\n</table>\n<ng-simplePagination\n  [totalPageCount]=\"totalPageCount\"\n  [currentPageIndex]=\"currentPageIndex\"\n  (movePage)=\"onMovePage($event)\">\n</ng-simplePagination>"

/***/ }),
/* 9 */
/***/ (function(module, exports) {

module.exports = "<div class=\"paginate\">\n  <a class=\"item\" (click)=\"onMoveFirst()\">First</a>\n  <a class=\"button-prev\" (click)=\"onMovePrev()\">처음</a>\n  \n  <ng-template ngFor let-pageIndex [ngForOf]=\"createRange(totalPageCount)\">\n    <ng-template [ngIf]=\"currentPageIndex === pageIndex\">\n      <strong (click)=\"onMovePage(pageIndex)\">\n        {{ pageIndex + 1 }} \n      </strong>  \n    </ng-template>\n\n    <ng-template [ngIf]=\"currentPageIndex !== pageIndex\">\n      <a (click)=\"onMovePage(pageIndex)\">\n        {{ pageIndex + 1 }} \n      </a>\n    </ng-template>\n  </ng-template>\n  \n  <a class=\"button-next\" (click)=\"onMoveNext()\">끝</a>\n  <a class=\"item\" (click)=\"onMoveLast()\">Last</a>\n</div>"

/***/ }),
/* 10 */
/***/ (function(module, exports) {

module.exports = __WEBPACK_EXTERNAL_MODULE_10__;

/***/ })
/******/ ]);
});
//# sourceMappingURL=ng-simplegrid.umd.js.map