ng2-materialize/dist/pagination/pagination.component.js

An Angular 2+ wrap around Materialize library

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var handle_prop_changes_1 = require("../shared/handle-prop-changes");
var MzPaginationComponent = (function (_super) {
    __extends(MzPaginationComponent, _super);
    function MzPaginationComponent() {
        var _this = _super.call(this) || this;
        _this.currentPage = 1;
        _this.enableFirstAndLastPageButtons = false;
        _this.maxPageButtons = 5;
        _this.pageChange = new core_1.EventEmitter();
        return _this;
    }
    Object.defineProperty(MzPaginationComponent.prototype, "totalPages", {
        get: function () {
            return Math.ceil(this.totalItems / this.itemsPerPage);
        },
        enumerable: true,
        configurable: true
    });
    MzPaginationComponent.prototype.ngOnInit = function () {
        this.initHandlers();
        this.renderButtons();
    };
    MzPaginationComponent.prototype.changeCurrentPage = function (pageNumber) {
        this.currentPage = pageNumber;
        this.pageChange.emit(pageNumber);
        this.renderButtons();
    };
    MzPaginationComponent.prototype.firstPage = function () {
        this.changeCurrentPage(1);
    };
    MzPaginationComponent.prototype.initHandlers = function () {
        var _this = this;
        this.handlers = {
            currentPage: function () { return _this.renderButtons(); },
            itemsPerPage: function () { return _this.renderButtons(); },
            maxPageButtons: function () { return _this.renderButtons(); },
            totalItems: function () { return _this.renderButtons(); },
        };
    };
    MzPaginationComponent.prototype.lastPage = function () {
        this.changeCurrentPage(this.totalPages);
    };
    MzPaginationComponent.prototype.nextPage = function () {
        if (this.currentPage < this.totalPages) {
            var nextPage = this.currentPage + 1;
            this.changeCurrentPage(nextPage);
        }
    };
    MzPaginationComponent.prototype.previousPage = function () {
        if (this.currentPage !== 1) {
            var previousPage = this.currentPage - 1;
            this.changeCurrentPage(previousPage);
        }
    };
    MzPaginationComponent.prototype.renderButtons = function () {
        var buttonsCount = Math.min(this.maxPageButtons, this.totalPages);
        var maxPosition = this.totalPages - buttonsCount;
        var halfButtons = Math.floor(buttonsCount / 2);
        var hiddenPagesBefore = (this.currentPage - halfButtons);
        if (hiddenPagesBefore > maxPosition) {
            hiddenPagesBefore = maxPosition + 1;
        }
        var from = Math.max(hiddenPagesBefore, 1);
        var to = Math.min(this.totalPages, from + this.maxPageButtons - 1);
        this.pages = Array(buttonsCount).fill(0).map(function (x, i) { return from + i; });
        if (this.currentPage > this.totalPages) {
            this.currentPage = this.pages[0];
        }
    };
    return MzPaginationComponent;
}(handle_prop_changes_1.HandlePropChanges));
MzPaginationComponent.decorators = [
    { type: core_1.Component, args: [{
                selector: 'mz-pagination',
                template: "<ul class=\"pagination\"><mz-pagination-page-button [disabled]=\"currentPage === 1\" *ngIf=\"enableFirstAndLastPageButtons\"><a (click)=\"firstPage()\"><i mz-icon [icon]=\"'first_page'\"></i></a></mz-pagination-page-button><mz-pagination-page-button [disabled]=\"currentPage === 1\"><a (click)=\"previousPage()\"><i mz-icon [icon]=\"'chevron_left'\"></i></a></mz-pagination-page-button><mz-pagination-page-button *ngFor=\"let page of pages\" [active]=\"page === currentPage\"><a (click)=\"changeCurrentPage(page)\">{{ page }}</a></mz-pagination-page-button><mz-pagination-page-button [disabled]=\"currentPage === totalPages\"><a (click)=\"nextPage()\"><i mz-icon [icon]=\"'chevron_right'\"></i></a></mz-pagination-page-button><mz-pagination-page-button [disabled]=\"currentPage === totalPages\" *ngIf=\"enableFirstAndLastPageButtons\"><a (click)=\"lastPage()\"><i mz-icon [icon]=\"'last_page'\"></i></a></mz-pagination-page-button></ul>",
                styles: [""],
            },] },
];
/** @nocollapse */
MzPaginationComponent.ctorParameters = function () { return []; };
MzPaginationComponent.propDecorators = {
    'currentPage': [{ type: core_1.Input },],
    'enableFirstAndLastPageButtons': [{ type: core_1.Input },],
    'itemsPerPage': [{ type: core_1.Input },],
    'maxPageButtons': [{ type: core_1.Input },],
    'totalItems': [{ type: core_1.Input },],
    'pageChange': [{ type: core_1.Output },],
};
exports.MzPaginationComponent = MzPaginationComponent;