[{"__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\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  "]}]}],"members":{"paginatorId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"pageSizeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"fullPaginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"collectionSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"pageSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"maxSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"pageChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"numPagesUpdated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"handlePageSizeChange":[{"__symbolic":"method"}],"onPageChange":[{"__symbolic":"method"}],"onNumPagesChange":[{"__symbolic":"method"}]}}}}]