carbon-components-angular
Version:
Next generation components
177 lines (174 loc) • 9.93 kB
JavaScript
/*!
*
* Neutrino v0.0.0 | pagination.component.js
*
* Copyright 2014, 2018 IBM
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { PaginationModel } from "./pagination.module";
import { Component, Input, Output, EventEmitter } from "@angular/core";
import { range } from "../common/utils";
import { I18n } from "./../i18n/i18n.module";
/**
* Use pagination when you have multiple pages of data to handle.
*
* ```html
* <ibm-pagination [model]="model" (selectPage)="selectPage($event)"></ibm-pagination>
* ```
*
* In your `selectPage()` method set the `model.currentPage` to selected page, _after_
* you load the page.
*
* ```typescript
* selectPage(page) {
* // ... your code to laod the page goes here
*
* this.model.currentPage = page;
*
* // ... anything you want to do after page selection changes goes here
* }
* ```
*
* @export
* @class Pagination
*/
var Pagination = /** @class */ (function () {
function Pagination(i18n) {
this.i18n = i18n;
this.translations = this.i18n.get().PAGINATION;
/**
* Emits the new page number.
*
* You should tie into this and update `model.currentPage` once the fresh
* data is finally loaded.
*
* @memberof Pagination
*/
this.selectPage = new EventEmitter();
this.itemsPerPageSelectId = "pagination-select-items-per-page-" + Pagination.paginationCounter;
this.currentPageSelectId = "pagination-select-current-page-" + Pagination.paginationCounter;
Pagination.paginationCounter++;
}
Object.defineProperty(Pagination.prototype, "itemsPerPage", {
get: function () {
return this.model.pageLength;
},
set: function (value) {
this.model.pageLength = value;
this.currentPage = 1; // reset page
},
enumerable: true,
configurable: true
});
Object.defineProperty(Pagination.prototype, "currentPage", {
get: function () {
return this.model.currentPage;
},
set: function (value) {
// emits the value to allow the user to update current page
// in the model once the page is loaded
this.selectPage.emit(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(Pagination.prototype, "lastPage", {
/**
* The last page number to display in the pagination view.
*
* @returns {number}
* @memberof Pagination
*/
get: function () {
return Math.ceil(this.model.totalDataLength / this.model.pageLength);
},
enumerable: true,
configurable: true
});
Object.defineProperty(Pagination.prototype, "startItemIndex", {
get: function () {
return (this.currentPage - 1) * this.model.pageLength + 1;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Pagination.prototype, "endItemIndex", {
get: function () {
var projectedEndItemIndex = this.currentPage * this.model.pageLength;
return projectedEndItemIndex < this.model.totalDataLength ? projectedEndItemIndex : this.model.totalDataLength;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Pagination.prototype, "previousPage", {
/**
* The previous page number to navigate to, from the current page.
*
* @returns {number}
* @memberof Pagination
*/
get: function () {
return this.currentPage <= 1 ? 1 : this.currentPage - 1;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Pagination.prototype, "nextPage", {
/**
* The next page number to navigate to, from the current page.
*
* @returns {number}
* @memberof Pagination
*/
get: function () {
var lastPage = this.lastPage;
return this.currentPage >= lastPage ? lastPage : this.currentPage + 1;
},
enumerable: true,
configurable: true
});
/**
* Generates a list of numbers. (Python function)
* Used to display the correct pagination controls.
*
* @param {number} stop
* @param {number} [start=0]
* @param {number} [step=1]
* @returns {array}
* @memberof Pagination
*/
Pagination.prototype.range = function (stop, start, step) {
if (start === void 0) { start = 0; }
if (step === void 0) { step = 1; }
return range(stop, start, step);
};
Pagination.paginationCounter = 0;
Pagination.decorators = [
{ type: Component, args: [{
selector: "ibm-pagination",
template: "\n\t<div class=\"bx--pagination\">\n\t\t<div class=\"bx--pagination__left\">\n\t\t\t<span class=\"bx--pagination__text\">{{translations.ITEMS_PER_PAGE}}</span>\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\">\n\t\t\t\t\t<label\n\t\t\t\t\t\t[for]=\"itemsPerPageSelectId\"\n\t\t\t\t\t\tclass=\"bx--label bx--visually-hidden\">\n\t\t\t\t\t\t{{translations.ITEMS_PER_PAGE}}\n\t\t\t\t\t</label>\n\t\t\t\t\t<select\n\t\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\t\tclass=\"bx--select-input\"\n\t\t\t\t\t\taria-describedby=\"false\">\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"10\">10</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"20\">20</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"30\">30</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"40\">40</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"50\">50</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"bx--select__arrow\"\n\t\t\t\t\t\tfill-rule=\"evenodd\"\n\t\t\t\t\t\theight=\"5\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\tviewBox=\"0 0 10 5\"\n\t\t\t\t\t\twidth=\"10\"\n\t\t\t\t\t\t[attr.aria-label]=\"translations.OPEN_LIST_OF_OPTIONS\"\n\t\t\t\t\t\t[attr.alt]=\"translations.OPEN_LIST_OF_OPTIONS\">\n\t\t\t\t\t\t<title>{{translations.OPEN_LIST_OF_OPTIONS}}</title>\n\t\t\t\t\t\t<path d=\"M0 0l5 4.998L10 0z\"></path>\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<span class=\"bx--pagination__text\">\n\t\t\t\t<span>| </span>\n\t\t\t\t{{startItemIndex}}-{{endItemIndex}} of {{model.totalDataLength}} items\n\t\t\t</span>\n\t\t</div>\n\t\t<div class=\"bx--pagination__right bx--pagination--inline\">\n\t\t\t<span class=\"bx--pagination__text\">{{currentPage}} of {{lastPage}} pages</span>\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--backward\"\n\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t[disabled]=\"(currentPage <= 1 ? true : null)\">\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"bx--pagination__button-icon\"\n\t\t\t\t\tfill-rule=\"evenodd\"\n\t\t\t\t\theight=\"12\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\tviewBox=\"0 0 7 12\"\n\t\t\t\t\twidth=\"7\"\n\t\t\t\t\t[attr.aria-label]=\"translations.BACKWARD\"\n\t\t\t\t\t[attr.alt]=\"translations.BACKWARD\">\n\t\t\t\t\t<title>{{translations.BACKWARD}}</title>\n\t\t\t\t\t<path d=\"M1.45 6.002L7 11.27l-.685.726L0 6.003 6.315 0 7 .726z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\">\n\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"bx--label bx--visually-hidden\">{{translations.ITEMS_PER_PAGE}}</label>\n\t\t\t\t<select [id]=\"currentPageSelectId\" class=\"bx--select-input\" aria-describedby=\"false\" [(ngModel)]=\"currentPage\">\n\t\t\t\t\t<option *ngFor=\"let i of range(lastPage + 1, 1)\" class=\"bx--select-option\" [value]=\"i\">{{i}}</option>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"bx--select__arrow\"\n\t\t\t\t\tfill-rule=\"evenodd\"\n\t\t\t\t\theight=\"5\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\tviewBox=\"0 0 10 5\"\n\t\t\t\t\twidth=\"10\"\n\t\t\t\t\t[attr.aria-label]=\"translations.OPEN_LIST_OF_OPTIONS\"\n\t\t\t\t\t[attr.alt]=\"translations.OPEN_LIST_OF_OPTIONS\">\n\t\t\t\t\t<title>{{translations.OPEN_LIST_OF_OPTIONS}}</title>\n\t\t\t\t\t<path d=\"M0 0l5 4.998L10 0z\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</div>\n\t\t<button\n\t\t\tclass=\"bx--pagination__button bx--pagination__button--forward\"\n\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t[disabled]=\"(currentPage >= lastPage ? true : null)\">\n\t\t\t<svg\n\t\t\t\tclass=\"bx--pagination__button-icon\"\n\t\t\t\tfill-rule=\"evenodd\"\n\t\t\t\theight=\"12\"\n\t\t\t\trole=\"img\"\n\t\t\t\tviewBox=\"0 0 7 12\"\n\t\t\t\twidth=\"7\"\n\t\t\t\t[attr.aria-label]=\"translations.FORWARD\"\n\t\t\t\t[attr.alt]=\"translations.FORWARD\">\n\t\t\t\t<title>{{translations.FORWARD}}</title>\n\t\t\t\t<path d=\"M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z\"></path>\n\t\t\t</svg>\n\t\t</button>\n\t\t</div>\n\t</div>\n\t"
},] },
];
/** @nocollapse */
Pagination.ctorParameters = function () { return [
{ type: I18n }
]; };
Pagination.propDecorators = {
model: [{ type: Input }],
translations: [{ type: Input }],
selectPage: [{ type: Output }]
};
return Pagination;
}());
export { Pagination };
//# sourceMappingURL=pagination.component.js.map