carbon-components-angular
Version:
Next generation components
116 lines (112 loc) • 3.8 kB
TypeScript
/**
*
* carbon-angular v0.0.0 | pagination-nav.component.d.ts
*
* Copyright 2014, 2025 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-model.class";
import { EventEmitter } from "@angular/core";
import { I18n, Overridable } from "carbon-components-angular/i18n";
import { ExperimentalService } from "carbon-components-angular/experimental";
import * as i0 from "@angular/core";
export interface PaginationNavTranslations {
NEXT: string;
PREVIOUS: string;
}
/**
* Use pagination when you have multiple pages of data to handle. Get started with importing the module:
*
* ```typescript
* import { PaginationModule } from 'carbon-components-angular';
* ```
*
* ```html
* <cds-pagination-nav [model]="model" (selectPage)="selectPage($event)"></cds-pagination-nav>
* ```
*
* In your `selectPage()` method set the `model.currentPage` to selected page, _after_
* you load the page.
*
* ```typescript
* selectPage(page) {
* // ... your code to load the page goes here
*
* this.model.currentPage = page;
*
* // ... anything you want to do after page selection changes goes here
* }
* ```
*
* [See demo](../../?path=/story/components-pagination-nav--basic)
*/
export declare class PaginationNav {
protected i18n: I18n;
protected experimental: ExperimentalService;
static paginationCounter: number;
/**
* `PaginationNavModel` with the information about pages you're controlling.
*/
model: PaginationModel;
/**
* Set to `true` to disable the backward/forward buttons.
*/
disabled: boolean;
/**
* Number of items to show in pagination. Minimum is 4.
*/
numOfItemsToShow: number;
/**
* Expects an object that contains some or all of:
* ```
* {
* "NEXT": "Next",
* "PREVIOUS": "Previous",
* }
* ```
*/
set translations(value: PaginationNavTranslations);
/**
* Sets the pagination nav size
*/
size: "sm" | "md" | "lg";
get smallLayoutSize(): boolean;
get mediumLayoutSize(): boolean;
get largeLayoutSize(): boolean;
/**
* Emits the new page number.
*
* You should tie into this and update `model.currentPage` once the fresh
* data is finally loaded.
*/
selectPage: EventEmitter<number>;
get totalNumbersArray(): number[];
get currentPage(): number;
set currentPage(value: number);
get totalDataLength(): number;
get startOffset(): 1 | 0;
get frontCuts(): number;
get backCuts(): number;
get leftArrowDisabled(): boolean;
get rightArrowDisabled(): boolean;
nextItemText: Overridable;
previousItemText: Overridable;
constructor(i18n: I18n, experimental: ExperimentalService);
handleOverflowSelection(page: any): void;
jumpToNext(): void;
jumpToPrevious(): void;
getPages(): number[];
private getCuts;
static ɵfac: i0.ɵɵFactoryDeclaration<PaginationNav, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<PaginationNav, "cds-pagination-nav, ibm-pagination-navm", never, { "model": "model"; "disabled": "disabled"; "numOfItemsToShow": "numOfItemsToShow"; "translations": "translations"; "size": "size"; }, { "selectPage": "selectPage"; }, never, never, false>;
}