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.pageChanged = new core_1.EventEmitter();
        this.numPagesUpdated = new core_1.EventEmitter();
        this.numPages = 0;
    }
    MonitoriasPaginationComponent.prototype.ngOnInit = function () {
    };
    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        <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        <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        <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    </div>\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    .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      .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 {\n        flex: 0 0 25%;\n      }\n\n      .paginator-component {\n        flex: 0 0 30%;\n      }\n\n      .info-elements {\n        flex: 0 0 30%;\n      }\n    }\n  "]
                },] },
    ];
    /** @nocollapse */
    MonitoriasPaginationComponent.ctorParameters = function () { return []; };
    MonitoriasPaginationComponent.propDecorators = {
        "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