igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
439 lines (431 loc) • 24 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, TemplateRef, Directive, HostBinding, ElementRef, ChangeDetectorRef, EventEmitter, Input, Output, ContentChild, forwardRef, Component, NgModule } from '@angular/core';
import { getCurrentResourceStrings, PaginatorResourceStringsEN } from 'igniteui-angular/core';
import * as i1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { IgxIconComponent } from 'igniteui-angular/icon';
import { IgxRippleDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select';
class IgxPaginatorDirective {
constructor() {
this.template = inject(TemplateRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxPaginatorDirective, isStandalone: true, selector: "[igxPaginator]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxPaginator]',
standalone: true
}]
}] });
/** @hidden @internal */
class IgxPaginatorToken {
}
class IgxPaginatorContentDirective {
constructor() {
/**
* @internal
* @hidden
*/
this.cssClass = 'igx-paginator-content';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxPaginatorContentDirective, isStandalone: true, selector: "[igxPaginatorContent],igx-paginator-content", host: { properties: { "class.igx-paginator-content": "this.cssClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorContentDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxPaginatorContent],igx-paginator-content',
standalone: true
}]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.igx-paginator-content']
}] } });
/* blazorElement */
/* mustUseNGParentAnchor */
/* wcElementTag: igc-paginator */
/* blazorIndirectRender */
/* singleInstanceIdentifier */
/* contentParent: GridBaseDirective */
/* contentParent: RowIsland */
/* contentParent: HierarchicalGrid */
/* jsonAPIManageCollectionInMarkup */
/**
* Paginator component description
* @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent, *
*/
// switch IgxPaginatorToken to extends once density is dropped
class IgxPaginatorComponent {
constructor() {
this.elementRef = inject(ElementRef);
this.cdr = inject(ChangeDetectorRef);
/**
* Emitted when `perPage` property value of the paginator is changed.
*
* @example
* ```html
* <igx-paginator (perPageChange)="onPerPageChange($event)"></igx-paginator>
* ```
* ```typescript
* public onPerPageChange(perPage: number) {
* this.perPage = perPage;
* }
* ```
*/
this.perPageChange = new EventEmitter();
/**
* Emitted after the current page is changed.
*
* @example
* ```html
* <igx-paginator (pageChange)="onPageChange($event)"></igx-paginator>
* ```
* ```typescript
* public onPageChange(page: number) {
* this.currentPage = page;
* }
* ```
*/
this.pageChange = new EventEmitter();
/**
* Emitted before paging is performed.
*
* @remarks
* Returns an object consisting of the current and next pages.
* @example
* ```html
* <igx-paginator (paging)="pagingHandler($event)"></igx-paginator>
* ```
*/
this.paging = new EventEmitter();
/**
* Emitted after paging is performed.
*
* @remarks
* Returns an object consisting of the previous and current pages.
* @example
* ```html
* <igx-paginator (pagingDone)="pagingDone($event)"></igx-paginator>
* ```
*/
this.pagingDone = new EventEmitter();
this._page = 0;
this._selectOptions = [5, 10, 15, 25, 50, 100, 500];
this._perPage = 15;
this._resourceStrings = getCurrentResourceStrings(PaginatorResourceStringsEN);
this._overlaySettings = {};
this.defaultSelectValues = [5, 10, 15, 25, 50, 100, 500];
/** @hidden @internal */
this.cssClass = 'igx-paginator';
}
/**
* Gets/Sets the current page of the paginator.
* The default is 0.
* ```typescript
* let page = this.paginator.page;
* ```
*
* @memberof IgxPaginatorComponent
*/
get page() {
return this._page;
}
set page(value) {
if (this._page === value || value < 0 || value > this.totalPages) {
return;
}
const cancelEventArgs = { current: this._page, next: value, cancel: false };
const eventArgs = { previous: this._page, current: value };
this.paging.emit(cancelEventArgs);
if (cancelEventArgs.cancel) {
return;
}
this._page = value;
this.pageChange.emit(this._page);
this.pagingDone.emit(eventArgs);
}
/**
* Gets/Sets the number of visible items per page in the paginator.
* The default is 15.
* ```typescript
* let itemsPerPage = this.paginator.perPage;
* ```
*
* @memberof IgxPaginatorComponent
*/
get perPage() {
return this._perPage;
}
set perPage(value) {
if (value < 0 || this.perPage === value) {
return;
}
this._perPage = Number(value);
this.perPageChange.emit(this._perPage);
this._selectOptions = this.sortUniqueOptions(this.defaultSelectValues, this._perPage);
this.totalPages = Math.ceil(this.totalRecords / this._perPage);
if (this.totalPages !== 0 && this.page >= this.totalPages) {
this.page = this.totalPages - 1;
}
}
/**
* Sets the total records.
* ```typescript
* let totalRecords = this.paginator.totalRecords;
* ```
*
* @memberof IgxPaginatorComponent
*/
get totalRecords() {
return this._totalRecords;
}
set totalRecords(value) {
this._totalRecords = value;
this.totalPages = Math.ceil(this.totalRecords / this.perPage);
if (this.page > this.totalPages) {
this.page = 0;
}
this.cdr.detectChanges();
}
/**
* Sets custom options in the select of the paginator
* ```typescript
* let options = this.paginator.selectOptions;
* ```
*
* @memberof IgxPaginatorComponent
*/
get selectOptions() {
return this._selectOptions;
}
set selectOptions(value) {
this._selectOptions = this.sortUniqueOptions(value, this._perPage);
this.defaultSelectValues = [...value];
}
/**
* Sets custom OverlaySettings.
* ```html
* <igx-paginator [overlaySettings] = "customOverlaySettings"></igx-paginator>
* ```
*/
get overlaySettings() {
return this._overlaySettings;
}
set overlaySettings(value) {
this._overlaySettings = Object.assign({}, this._overlaySettings, value);
}
/* mustSetInCodePlatforms: WebComponents;Blazor;React */
/**
* An accessor that sets the resource strings.
* By default it uses EN resources.
*/
set resourceStrings(value) {
this._resourceStrings = Object.assign({}, this._resourceStrings, value);
}
/**
* An accessor that returns the resource strings.
*/
get resourceStrings() {
return this._resourceStrings;
}
/**
* Returns if the current page is the last page.
* ```typescript
* const lastPage = this.paginator.isLastPage;
* ```
*/
get isLastPage() {
return this.page + 1 >= this.totalPages;
}
/**
* Returns if the current page is the first page.
* ```typescript
* const lastPage = this.paginator.isFirstPage;
* ```
*/
get isFirstPage() {
return this.page === 0;
}
/**
* Returns if the first pager buttons should be disabled
* @hidden
* @deprecated in version 18.1.0. Use the `isFirstPage` property instead.
*/
get isFirstPageDisabled() {
return this.isFirstPage;
}
/**
* Returns if the last pager buttons should be disabled
* @hidden
* @deprecated in version 18.1.0. Use the `isLastPage` property instead.
*/
get isLastPageDisabled() {
return this.isLastPage;
}
get nativeElement() {
return this.elementRef.nativeElement;
}
/**
* Goes to the next page of the `IgxPaginatorComponent`, if the paginator is not already at the last page.
* ```typescript
* this.paginator.nextPage();
* ```
*
* @memberof IgxPaginatorComponent
*/
nextPage() {
if (!this.isLastPage) {
this.page += 1;
}
}
/**
* Goes to the previous page of the `IgxPaginatorComponent`, if the paginator is not already at the first page.
* ```typescript
* this.paginator.previousPage();
* ```
*
* @memberof IgxPaginatorComponent
*/
previousPage() {
if (!this.isFirstPage) {
this.page -= 1;
}
}
/**
* Goes to the desired page index.
* ```typescript
* this.paginator.paginate(1);
* ```
*
* @param val
* @memberof IgxPaginatorComponent
*/
paginate(val) {
if (val < 0 || val > this.totalPages - 1) {
return;
}
this.page = val;
}
sortUniqueOptions(values, newOption) {
return Array.from(new Set([...values, newOption])).sort((a, b) => a - b);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxPaginatorComponent, isStandalone: true, selector: "igx-paginator", inputs: { page: "page", perPage: "perPage", totalRecords: "totalRecords", selectOptions: "selectOptions", overlaySettings: "overlaySettings", resourceStrings: "resourceStrings" }, outputs: { perPageChange: "perPageChange", pageChange: "pageChange", paging: "paging", pagingDone: "pagingDone" }, host: { properties: { "class.igx-paginator": "this.cssClass" } }, providers: [
{ provide: IgxPaginatorToken, useExisting: IgxPaginatorComponent }
], queries: [{ propertyName: "customContent", first: true, predicate: IgxPaginatorContentDirective, descendants: true }], ngImport: i0, template: "<ng-content select=\"[igxPaginatorContent],igx-paginator-content\"></ng-content>\n\n@if (!customContent) {\n <igx-page-size></igx-page-size>\n}\n@if (!customContent) {\n <igx-page-nav></igx-page-nav>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => IgxPageSizeSelectorComponent), selector: "igx-page-size" }, { kind: "component", type: i0.forwardRef(() => IgxPageNavigationComponent), selector: "igx-page-nav", inputs: ["role"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-paginator', imports: [forwardRef(() => IgxPageSizeSelectorComponent), forwardRef(() => IgxPageNavigationComponent)], providers: [
{ provide: IgxPaginatorToken, useExisting: IgxPaginatorComponent }
], template: "<ng-content select=\"[igxPaginatorContent],igx-paginator-content\"></ng-content>\n\n@if (!customContent) {\n <igx-page-size></igx-page-size>\n}\n@if (!customContent) {\n <igx-page-nav></igx-page-nav>\n}\n" }]
}], propDecorators: { customContent: [{
type: ContentChild,
args: [IgxPaginatorContentDirective]
}], perPageChange: [{
type: Output
}], pageChange: [{
type: Output
}], paging: [{
type: Output
}], pagingDone: [{
type: Output
}], cssClass: [{
type: HostBinding,
args: ['class.igx-paginator']
}], page: [{
type: Input
}], perPage: [{
type: Input
}], totalRecords: [{
type: Input
}], selectOptions: [{
type: Input
}], overlaySettings: [{
type: Input
}], resourceStrings: [{
type: Input
}] } });
class IgxPageSizeSelectorComponent {
constructor() {
this.paginator = inject(IgxPaginatorComponent, { host: true });
/**
* @internal
* @hidden
*/
this.cssClass = 'igx-page-size';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPageSizeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxPageSizeSelectorComponent, isStandalone: true, selector: "igx-page-size", host: { properties: { "class.igx-page-size": "this.cssClass" } }, ngImport: i0, template: "<label class=\"igx-page-size__label\">{{ paginator.resourceStrings.igx_paginator_label }}</label>\n<div class=\"igx-page-size__select\">\n <igx-select [overlaySettings]=\"paginator.overlaySettings\" [(ngModel)]=\"paginator.perPage\" type=\"border\">\n @for (val of paginator.selectOptions; track val) {\n <igx-select-item [value]=\"val\">\n {{ val }}\n </igx-select-item>\n }\n </igx-select>\n</div>\n", dependencies: [{ kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPageSizeSelectorComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-page-size', imports: [IgxSelectComponent, FormsModule, IgxSelectItemComponent], template: "<label class=\"igx-page-size__label\">{{ paginator.resourceStrings.igx_paginator_label }}</label>\n<div class=\"igx-page-size__select\">\n <igx-select [overlaySettings]=\"paginator.overlaySettings\" [(ngModel)]=\"paginator.perPage\" type=\"border\">\n @for (val of paginator.selectOptions; track val) {\n <igx-select-item [value]=\"val\">\n {{ val }}\n </igx-select-item>\n }\n </igx-select>\n</div>\n" }]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.igx-page-size']
}] } });
class IgxPageNavigationComponent {
constructor() {
this.paginator = inject(IgxPaginatorComponent, { host: true });
/**
* @internal
* @hidden
*/
this.cssClass = 'igx-page-nav';
/**
* Sets the `role` attribute of the element.
*/
this.role = 'navigation';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPageNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: IgxPageNavigationComponent, isStandalone: true, selector: "igx-page-nav", inputs: { role: "role" }, host: { properties: { "class.igx-page-nav": "this.cssClass", "attr.role": "this.role" } }, ngImport: i0, template: "<button\n [title]=\"paginator.resourceStrings.igx_paginator_first_page_button_text\"\n [disabled]=\"paginator.isFirstPage\"\n [attr.aria-disabled]=\"paginator.isFirstPage\"\n (click)=\"paginator.paginate(0)\"\n igxIconButton=\"flat\"\n igxRipple\n [igxRippleCentered]=\"true\"\n type=\"button\"\n>\n <igx-icon family=\"default\" name=\"first_page\"></igx-icon>\n</button>\n<button\n [title]=\"paginator.resourceStrings.igx_paginator_previous_page_button_text\"\n [disabled]=\"paginator.isFirstPage\"\n [attr.aria-disabled]=\"paginator.isFirstPage\"\n (click)=\"paginator.previousPage()\"\n igxIconButton=\"flat\"\n igxRipple\n [igxRippleCentered]=\"true\"\n type=\"button\"\n>\n <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n</button>\n<div class=\"igx-page-nav__text\" aria-current=\"page\">\n <span>{{ paginator.page + 1 }}</span>\n <span\n > {{\n paginator.resourceStrings.igx_paginator_pager_text\n }} </span\n >\n <span>{{ paginator.totalPages || 1 }}</span>\n</div>\n<button\n [title]=\"paginator.resourceStrings.igx_paginator_next_page_button_text\"\n [disabled]=\"paginator.isLastPage\"\n [attr.aria-disabled]=\"paginator.isLastPage\"\n (click)=\"paginator.nextPage()\"\n igxRipple\n [igxRippleCentered]=\"true\"\n igxIconButton=\"flat\"\n type=\"button\"\n>\n <igx-icon family=\"default\" name=\"next\"></igx-icon>\n</button>\n<button\n [title]=\"paginator.resourceStrings.igx_paginator_last_page_button_text\"\n [disabled]=\"paginator.isLastPage\"\n [attr.aria-disabled]=\"paginator.isLastPage\"\n (click)=\"paginator.paginate(paginator.totalPages - 1)\"\n igxIconButton=\"flat\"\n igxRipple\n [igxRippleCentered]=\"true\"\n type=\"button\"\n>\n <igx-icon family=\"default\" name=\"last_page\"></igx-icon>\n</button>\n\n", dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPageNavigationComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-page-nav', imports: [IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective], template: "<button\n [title]=\"paginator.resourceStrings.igx_paginator_first_page_button_text\"\n [disabled]=\"paginator.isFirstPage\"\n [attr.aria-disabled]=\"paginator.isFirstPage\"\n (click)=\"paginator.paginate(0)\"\n igxIconButton=\"flat\"\n igxRipple\n [igxRippleCentered]=\"true\"\n type=\"button\"\n>\n <igx-icon family=\"default\" name=\"first_page\"></igx-icon>\n</button>\n<button\n [title]=\"paginator.resourceStrings.igx_paginator_previous_page_button_text\"\n [disabled]=\"paginator.isFirstPage\"\n [attr.aria-disabled]=\"paginator.isFirstPage\"\n (click)=\"paginator.previousPage()\"\n igxIconButton=\"flat\"\n igxRipple\n [igxRippleCentered]=\"true\"\n type=\"button\"\n>\n <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n</button>\n<div class=\"igx-page-nav__text\" aria-current=\"page\">\n <span>{{ paginator.page + 1 }}</span>\n <span\n > {{\n paginator.resourceStrings.igx_paginator_pager_text\n }} </span\n >\n <span>{{ paginator.totalPages || 1 }}</span>\n</div>\n<button\n [title]=\"paginator.resourceStrings.igx_paginator_next_page_button_text\"\n [disabled]=\"paginator.isLastPage\"\n [attr.aria-disabled]=\"paginator.isLastPage\"\n (click)=\"paginator.nextPage()\"\n igxRipple\n [igxRippleCentered]=\"true\"\n igxIconButton=\"flat\"\n type=\"button\"\n>\n <igx-icon family=\"default\" name=\"next\"></igx-icon>\n</button>\n<button\n [title]=\"paginator.resourceStrings.igx_paginator_last_page_button_text\"\n [disabled]=\"paginator.isLastPage\"\n [attr.aria-disabled]=\"paginator.isLastPage\"\n (click)=\"paginator.paginate(paginator.totalPages - 1)\"\n igxIconButton=\"flat\"\n igxRipple\n [igxRippleCentered]=\"true\"\n type=\"button\"\n>\n <igx-icon family=\"default\" name=\"last_page\"></igx-icon>\n</button>\n\n" }]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.igx-page-nav']
}], role: [{
type: HostBinding,
args: ['attr.role']
}, {
type: Input
}] } });
/* NOTE: Paginator directives collection for ease-of-use import in standalone components scenario */
const IGX_PAGINATOR_DIRECTIVES = [
IgxPaginatorComponent,
IgxPageNavigationComponent,
IgxPageSizeSelectorComponent,
IgxPaginatorContentDirective,
IgxPaginatorDirective
];
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
class IgxPaginatorModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorModule, imports: [IgxPaginatorComponent, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective], exports: [IgxPaginatorComponent, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorModule, imports: [IgxPaginatorComponent, IgxPageNavigationComponent, IgxPageSizeSelectorComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorModule, decorators: [{
type: NgModule,
args: [{
imports: [
...IGX_PAGINATOR_DIRECTIVES
],
exports: [
...IGX_PAGINATOR_DIRECTIVES
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IGX_PAGINATOR_DIRECTIVES, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective, IgxPaginatorModule, IgxPaginatorToken };
//# sourceMappingURL=igniteui-angular-paginator.mjs.map