ngx-monitorias-uniandes-lib/lib/monitorias-pagination/monitorias-pagination.component.js

This library is used for Monitorias-Uniandes system.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var monitorias_pagination_model_1 = require("./monitorias-pagination.model");
var MonitoriasPaginationComponent = /** @class */ (function () {
    function MonitoriasPaginationComponent() {
        this.paginatorId = 'default';
        this.pageSizeOptions = [];
        this.pageChanged = new core_1.EventEmitter();
        this.numPagesUpdated = new core_1.EventEmitter();
        this.numPages = 0;
    }
    MonitoriasPaginationComponent.prototype.handlePageSizeChange = function (event) {
        var pageSizeSelected = event.target.value;
        this.pageSize = parseInt(pageSizeSelected);
        var maxPage = Math.ceil(this.collectionSize / this.pageSize);
        if (this.page > maxPage) {
            this.page = maxPage;
        }
        this.pageChanged.emit(new monitorias_pagination_model_1.MonitoriasPaginationModel(this.page, this.pageSize, this.collectionSize));
    };
    MonitoriasPaginationComponent.prototype.onPageChange = function (event) {
        this.pageChanged.emit(new monitorias_pagination_model_1.MonitoriasPaginationModel(event.page, event.itemsPerPage, this.collectionSize));
    };
    MonitoriasPaginationComponent.prototype.onNumPagesChange = function (event) {
        this.numPages = event;
        this.numPagesUpdated.emit(this.numPages);
    };
    MonitoriasPaginationComponent.decorators = [
        { type: core_1.Component, args: [{
                    selector: 'monitorias-pagination',
                    template: "\n    <div class=\"paginator-container\" *ngIf=\"fullPaginator; else compactPaginator\">\n\n        <div class=\"info-pages\">\n            <span class=\"txt-page\">{{'page' | translate}}</span>\n            <span class=\"txt-page cont-page\">{{ page }}</span>\n            <span class=\"txt-page\">{{'of'|translate}} {{numPages}}</span>\n        </div>\n\n        <div class=\"page-size-select\" *ngIf=\"pageSizeOptions.length\">\n            <label [for]=\"'page-size-select-' + paginatorId\">\n                {{ 'rowsPerPage' | translate }}\n            </label>\n            <select \n                [id]=\"'page-size-select-' + paginatorId\"\n                [value]=\"pageSize\"\n                (change)=\"handlePageSizeChange($event)\">\n                <option *ngFor=\"let option of pageSizeOptions\" [value]=\"option\">\n                    {{ option }}\n                </option>\n            </select>\n        </div>\n\n        <div class=\"paginator-component\">\n            <pagination [boundaryLinks]=\"true\" [maxSize]=\"maxSize || 6\" [itemsPerPage]=\"pageSize\" [totalItems]=\"collectionSize\"\n             (pageChanged)=\"onPageChange($event)\" (numPages)=\"onNumPagesChange($event)\" [(ngModel)]=\"page\" previousText=\"&lsaquo;\"\n             nextText=\"&rsaquo;\" firstText=\"&laquo;\" lastText=\"&raquo;\"></pagination>\n        </div>\n\n        <div class=\"info-elements\">\n            <span class=\"txt-page-float\">{{'paginatorView' | translate }} {{ ((page - 1) * pageSize) + 1}} - {{ (((page - 1) *\n                pageSize) + pageSize) > collectionSize ?\n                collectionSize: ((page - 1) * pageSize) + pageSize }} {{'of' | translate }} {{collectionSize}}</span>\n        </div>\n\n    </div>\n\n    <ng-template #compactPaginator>\n        <div class=\"center-pagination\">\n            <pagination [boundaryLinks]=\"true\" [maxSize]=\"maxSize || 6\" [itemsPerPage]=\"pageSize\" [totalItems]=\"collectionSize\"\n             (pageChanged)=\"onPageChange($event)\" (numPages)=\"onNumPagesChange($event)\" [(ngModel)]=\"page\" previousText=\"&lsaquo;\"\n             nextText=\"&rsaquo;\" firstText=\"&laquo;\" lastText=\"&raquo;\">\n            </pagination>\n        </div>\n    </ng-template>\n  ",
                    styles: ["\n    .paginator-container {\n      display: flex;\n      align-items: center;\n      justify-items: center;\n      justify-content: center;\n      flex-direction: column;\n      padding: 10px 10px 0 10px;\n      flex-wrap: wrap;\n    }\n\n    .info-pages {\n      flex: 0 0 33.3%;\n      padding: 0.5rem 0rem;\n    }\n\n    .page-size-select {\n\n      $dark-blue   : #003b9d;\n      $font-weight : 500;\n  \n      label {\n        margin-bottom : 0px;\n        font-weight   : $font-weight;\n        color         : $dark-blue;\n      }\n\n      select {\n        width         : 44px;\n        height        : 38px;\n        color         : $dark-blue;\n        font-weight   : $font-weight;\n        border        : 1px solid #d3d3d3;\n        border-radius : 5px;\n        text-align    : center;\n        outline       : none;\n      }\n\n      option {\n        font-weight : $font-weight;\n      }\n\n    }\n\n    .paginator-component {\n      flex: 0 0 33.3%;\n      padding: 0.5rem 0rem;\n    }\n\n    .info-elements {\n      flex: 0 0 33.3%;\n      padding: 0.5rem 0rem;\n    }\n\n    .txt-page {\n      color: #003b9d;\n      font-size: 1rem;\n      line-height: 0.1rem;\n      padding: 0.5rem 0.2rem;\n      font-weight: 500;\n    }\n\n    .txt-page-float {\n      color: #003b9d;\n      font-size: 1rem;\n      line-height: 0.1rem;\n      padding: 0.5rem 0.2rem;\n      font-weight: 500;\n      float: right;\n    }\n\n    .cont-page {\n      background-color: #e4edff;\n      border: 1px solid #e4edff;\n      border-radius: 5px;\n      padding: 0.5rem 0.8rem;\n    }\n\n    /deep/ .page-link {\n      position: relative;\n      display: block;\n      padding: 0.5rem 0.75rem;\n      margin-left: 2px;\n      line-height: 1.25;\n      color: #223d99;\n      background-color: #fff;\n      border: 1px solid #e4f0ff;\n      border-radius: 5px;\n    }\n\n    /deep/ .page-link:hover {\n      color: #223d99;\n      text-decoration: none;\n      background-color: #e4f0ff;\n      border-color: #e4f0ff;\n    }\n\n    /deep/ .pagination-first a,\n    /deep/ .pagination-prev a,\n    /deep/ .pagination-next a,\n    /deep/ .pagination-last a {\n      background-color: #e4f0ff;\n      font-size: 2rem;\n      padding: 0.8rem 0.8rem 1.38rem 0.8rem;\n      line-height: 0.1rem;\n    }\n\n    /deep/.page-item.active /deep/ .page-link {\n      z-index: 1;\n      color: #fff;\n      background-color: #223d99;\n      border-color: #223d99;\n    }\n\n    /deep/ .pagination {\n      margin: 0;\n    }\n\n    .center-pagination {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    @media (min-width: 730px) {\n\n      .paginator-container {\n        display: flex;\n        align-items: center;\n        justify-items: center;\n        justify-content: center;\n        flex-direction: row;\n        padding: 10px 10px 10px 10px;\n        align-items: center;\n      }\n\n      .info-pages, .page-size-select, .paginator-component {\n        flex: 0 0 30%;\n      }\n\n      .info-elements {\n        flex: 0 0 34%;\n      }\n\n    }\n\n    @media (min-width: 938px) {\n\n      .info-pages, .page-size-select {\n        flex: 0 0 24%;\n      }\n\n    }\n\n    @media (min-width: 1150px) {\n\n      .info-pages, .page-size-select {\n        flex: 0 0 18%;\n      }\n\n      .info-elements {\n        flex: 0 0 22%;\n      }\n\n    }\n  "]
                },] },
    ];
    /** @nocollapse */
    MonitoriasPaginationComponent.propDecorators = {
        "paginatorId": [{ type: core_1.Input },],
        "pageSizeOptions": [{ type: core_1.Input },],
        "fullPaginator": [{ type: core_1.Input },],
        "collectionSize": [{ type: core_1.Input },],
        "pageSize": [{ type: core_1.Input },],
        "page": [{ type: core_1.Input },],
        "maxSize": [{ type: core_1.Input },],
        "pageChanged": [{ type: core_1.Output },],
        "numPagesUpdated": [{ type: core_1.Output },],
    };
    return MonitoriasPaginationComponent;
}());
exports.MonitoriasPaginationComponent = MonitoriasPaginationComponent;
//# sourceMappingURL=monitorias-pagination.component.js.map