{"__symbolic":"module","version":4,"metadata":{"PaginationIconKeys":{"__symbolic":"interface"},"PaginationIcon":{"__symbolic":"interface"},"PaginationIconSet":{"__symbolic":"interface"},"PaginationConfig":{"__symbolic":"interface"},"Paginate":{"__symbolic":"interface"},"paginationMinimumItemsPerPage":20,"paginationMaximumItemsPerPage":500,"PaginationComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"npa-pagination","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":14,"character":19},"member":"OnPush"},"template":"<div class=\"npa-pagination\" [ngClass]=\"{'npa-pagination--small': small}\" *ngIf=\"totalItems > 20\">\n  <div class=\"npa-pagination__items-per-page\">\n    <ng-container *ngIf=\"showItemsPerPage\">\n      <span class=\"npa-pagination__items-per-page-label\" *ngIf=\"itemsPerPageLabel\">{{itemsPerPageLabel}}</span>\n      <div *ngIf=\"totalItems > 20\">\n        <label class=\"npa-label\" for=\"items-per-page\"></label>\n        <select\n          id=\"items-per-page\"\n          class=\"npa-pagination__items-per-page-control npa-select npa-select--filter\"\n          [ngClass]=\"{'npa-select--small': small}\"\n          [value]=\"page$.value?.itemsPerPage\"\n          [disabled]=\"disabled\"\n          (change)=\"changeItemsPerPage($event)\">\n          <option *ngFor=\"let itemsPerPageOption of itemsPerPageOptions\" [selected]=\"page$.value?.itemsPerPage === itemsPerPageOption.value\" [value]=\"itemsPerPageOption.value\">{{itemsPerPageOption.label}}</option>\n        </select>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"npa-pagination__page-navigator\">\n    <span class=\"npa-pagination__page-navigator-label\" *ngIf=\"showPageNavigatorLabel\">\n      {{(page$.value?.pageFirstItem + 1)}}-{{((page$.value?.pageFirstItem + page$.value?.itemsPerPage) <= totalItems ? (page$.value?.pageFirstItem + page$.value?.itemsPerPage) : totalItems )}} of {{totalItems}}\n    </span>\n    <ng-container>\n      <button\n        class=\"npa-pagination__left-navigation-control npa-button npa-button--borderless npa-button--icon-only\"\n        *ngIf=\"withIcons\"\n        [ngClass]=\"{'npa-button--small': small}\"\n        [disabled]=\"disabled || page$.value?.pageFirstItem === 0\"\n        (click)=\"changeToPreviousPage()\">\n        <i npaIcons [iconsInstance]=\"iconHandler\" [iconKey]=\"'left'\"></i>\n      </button>\n      <a\n        class=\"npa-pagination__left-navigation-control npa-link\"\n        *ngIf=\"!withIcons && page$.value?.pageFirstItem > 0\"\n        (click)=\"changeToPreviousPage()\"><<</a>\n      <span class=\"npa-pagination__left-navigation-control\" *ngIf=\"!withIcons && page$.value?.pageFirstItem <= 0\"><<</span>\n    </ng-container>\n    <ng-container>\n      <button\n        class=\"npa-pagination__right-navigation-control npa-button npa-button--borderless npa-button--icon-only\"\n        *ngIf=\"withIcons\"\n        [ngClass]=\"{'npa-button--small': small}\"\n        [disabled]=\"disabled || (page$.value?.pageFirstItem + page$.value?.itemsPerPage) >= totalItems\"\n        (click)=\"changeToNextPage()\">\n        <i npaIcons [iconsInstance]=\"iconHandler\" [iconKey]=\"'right'\"></i>\n      </button>\n      <a\n        class=\"npa-link npa-pagination__right-navigation-control\"\n        *ngIf=\"!withIcons && (page$.value?.pageFirstItem + page$.value?.itemsPerPage) < totalItems\"\n        (click)=\"changeToNextPage()\">>></a>\n      <span\n        class=\"npa-link npa-pagination__right-navigation-control\"\n        *ngIf=\"!withIcons && (page$.value?.pageFirstItem + page$.value?.itemsPerPage) >= totalItems\">>>\n      </span>\n    </ng-container>\n  </div>\n</div>\n","styles":[":host{--npa-pagination-default-items-per-page-width:375px;--npa-pagination-default-items-per-page-vertical-correction:-1px;--npa-pagination-default-items-per-page-separation:21px;--npa-pagination-default-items-per-page-color:#000;--npa-pagination-default-items-per-page-select-color:blue;--npa-pagination-default-navigator-separation:25px;--npa-pagination-default-navigator-label-separation:22px;--npa-pagination-default-navigator-label-color:#000;--npa-pagination-default-navigator-controls-separation:15px;--npa-pagination-default-navigator-controls--disabled-color:#d3d3d3;--npa-pagination-default-navigator-controls--disabled-cursor:not-allowed}:host .npa-pagination{width:100%;display:flex;justify-content:space-between}:host .npa-pagination .npa-pagination__items-per-page{display:flex;align-items:center}:host .npa-pagination .npa-pagination__items-per-page .npa-pagination__items-per-page-label{position:relative;top:var(--npa-pagination-default-items-per-page-vertical-correction);margin-right:var(--npa-pagination-default-items-per-page-separation);max-width:var(--npa-pagination-default-items-per-page-width);color:var(--npa-pagination-default-items-per-page-color)}:host .npa-pagination .npa-pagination__items-per-page .npa-pagination__items-per-page-control{--npa-component-width:fit-content;color:var(--npa-pagination-default-items-per-page-select-color)}:host .npa-pagination .npa-pagination__page-navigator{display:flex;align-items:center;margin-left:var(--npa-pagination-default-navigator-separation)}:host .npa-pagination .npa-pagination__page-navigator .npa-pagination__page-navigator-label{margin-right:var(--npa-pagination-default-navigator-label-separation);white-space:nowrap;color:var(--npa-pagination-default-navigator-label-color)}:host .npa-pagination .npa-pagination__page-navigator .npa-pagination__right-navigation-control{margin-left:var(--npa-pagination-default-navigator-controls-separation)}:host .npa-pagination .npa-pagination__page-navigator SPAN.npa-pagination__left-navigation-control,:host .npa-pagination .npa-pagination__page-navigator SPAN.npa-pagination__right-navigation-control{color:var(--npa-pagination-default-navigator-controls--disabled-color);cursor:var(--npa-pagination-default-navigator-controls--disabled-cursor)}"]}]}],"members":{"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"totalItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"itemsPerPageLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"hotRender":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"pageChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":33,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":47,"character":27}]}],"_processConfiguration":[{"__symbolic":"method"}],"_buildItemsPerPageOptions":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"changeToPreviousPage":[{"__symbolic":"method"}],"changeToNextPage":[{"__symbolic":"method"}],"changeItemsPerPage":[{"__symbolic":"method"}]}},"PaginationModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"exports":[{"__symbolic":"reference","name":"PaginationComponent"}],"declarations":[{"__symbolic":"reference","name":"PaginationComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":4},{"__symbolic":"reference","module":"@stratiods/form-behavior","name":"FormBehaviorModule","line":11,"character":4},{"__symbolic":"reference","module":"@stratiods/icons","name":"IconsModule","line":12,"character":4}]}]}],"members":{}}},"origins":{"PaginationIconKeys":"./lib/pagination.types","PaginationIcon":"./lib/pagination.types","PaginationIconSet":"./lib/pagination.types","PaginationConfig":"./lib/pagination.types","Paginate":"./lib/pagination.types","paginationMinimumItemsPerPage":"./lib/pagination.types","paginationMaximumItemsPerPage":"./lib/pagination.types","PaginationComponent":"./lib/pagination.component","PaginationModule":"./lib/pagination.module"},"importAs":"@stratiods/pagination"}