ngx-monitorias-uniandes-lib/lib/monitorias-pagination/monitorias-pagination.component.metadata.json

This library is used for Monitorias-Uniandes system.

[{"__symbolic":"module","version":4,"metadata":{"MonitoriasPaginationComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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  "]}]}],"members":{"fullPaginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"collectionSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"pageSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"maxSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"pageChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":3}}]}],"numPagesUpdated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onPageChange":[{"__symbolic":"method"}],"onNumPagesChange":[{"__symbolic":"method"}]}}}}]