@progress/kendo-angular-pager 19.1.1 → 19.1.2-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/pager/focusable.directive.mjs +10 -1
- package/esm2022/pager/localization/custom-messages.component.mjs +12 -1
- package/esm2022/pager/pager-info.component.mjs +10 -1
- package/esm2022/pager/pager-input.component.mjs +14 -9
- package/esm2022/pager/pager-next-buttons.component.mjs +12 -7
- package/esm2022/pager/pager-numeric-buttons.component.mjs +12 -7
- package/esm2022/pager/pager-page-sizes.component.mjs +20 -121
- package/esm2022/pager/pager-prev-buttons.component.mjs +12 -7
- package/esm2022/pager/pager-template.directive.mjs +10 -30
- package/esm2022/pager/pager.component.mjs +52 -22
- package/esm2022/pager/pagesizechange-event.mjs +3 -3
- package/esm2022/pager/spacer.component.mjs +25 -4
- package/fesm2022/progress-kendo-angular-pager.mjs +194 -215
- package/package.json +8 -8
- package/pager/common/pager-type.d.ts +5 -7
- package/pager/focusable.directive.d.ts +10 -1
- package/pager/localization/custom-messages.component.d.ts +12 -1
- package/pager/pager-info.component.d.ts +10 -1
- package/pager/pager-input.component.d.ts +12 -7
- package/pager/pager-next-buttons.component.d.ts +12 -7
- package/pager/pager-numeric-buttons.component.d.ts +12 -7
- package/pager/pager-page-sizes.component.d.ts +20 -121
- package/pager/pager-prev-buttons.component.d.ts +12 -7
- package/pager/pager-template.directive.d.ts +10 -30
- package/pager/pager.component.d.ts +24 -22
- package/pager/pagesize-item.interface.d.ts +3 -3
- package/pager/pagesizechange-event.d.ts +3 -3
- package/pager/spacer.component.d.ts +25 -4
- package/schematics/ngAdd/index.js +6 -6
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-pager",
|
|
3
|
-
"version": "19.1.1",
|
|
3
|
+
"version": "19.1.2-develop.1",
|
|
4
4
|
"description": "Kendo UI Angular Pager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"package": {
|
|
18
18
|
"productName": "Kendo UI for Angular",
|
|
19
19
|
"productCode": "KENDOUIANGULAR",
|
|
20
|
-
"publishDate":
|
|
20
|
+
"publishDate": 1749804270,
|
|
21
21
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
|
|
22
22
|
}
|
|
23
23
|
},
|
|
@@ -27,16 +27,16 @@
|
|
|
27
27
|
"@angular/core": "16 - 20",
|
|
28
28
|
"@angular/platform-browser": "16 - 20",
|
|
29
29
|
"@progress/kendo-licensing": "^1.5.0",
|
|
30
|
-
"@progress/kendo-angular-common": "19.1.1",
|
|
31
|
-
"@progress/kendo-angular-dropdowns": "19.1.1",
|
|
32
|
-
"@progress/kendo-angular-inputs": "19.1.1",
|
|
33
|
-
"@progress/kendo-angular-icons": "19.1.1",
|
|
34
|
-
"@progress/kendo-angular-l10n": "19.1.1",
|
|
30
|
+
"@progress/kendo-angular-common": "19.1.2-develop.1",
|
|
31
|
+
"@progress/kendo-angular-dropdowns": "19.1.2-develop.1",
|
|
32
|
+
"@progress/kendo-angular-inputs": "19.1.2-develop.1",
|
|
33
|
+
"@progress/kendo-angular-icons": "19.1.2-develop.1",
|
|
34
|
+
"@progress/kendo-angular-l10n": "19.1.2-develop.1",
|
|
35
35
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"tslib": "^2.3.1",
|
|
39
|
-
"@progress/kendo-angular-schematics": "19.1.1"
|
|
39
|
+
"@progress/kendo-angular-schematics": "19.1.2-develop.1"
|
|
40
40
|
},
|
|
41
41
|
"schematics": "./schematics/collection.json",
|
|
42
42
|
"module": "fesm2022/progress-kendo-angular-pager.mjs",
|
|
@@ -3,17 +3,15 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* Specifies the type of the `Pager`.
|
|
7
7
|
*
|
|
8
8
|
* The available values are:
|
|
9
|
-
* * `numeric`—
|
|
10
|
-
* * `input`—
|
|
9
|
+
* * `numeric`—Displays buttons with numbers.
|
|
10
|
+
* * `input`—Displays an input field for typing the page number.
|
|
11
11
|
*
|
|
12
12
|
* @example
|
|
13
|
-
* ```html
|
|
14
|
-
*
|
|
15
|
-
* <kendo-pager
|
|
16
|
-
* type="input">
|
|
13
|
+
* ```html
|
|
14
|
+
* <kendo-pager type="input">
|
|
17
15
|
* </kendo-pager>
|
|
18
16
|
* ```
|
|
19
17
|
*/
|
|
@@ -6,7 +6,16 @@ import { ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
|
|
|
6
6
|
import { PagerNavigationService } from './navigation.service';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Represents the Kendo UI Pager focusable directive for Angular. Apply this directive to custom focusable elements in the [`kendoPagerTemplate`]({% slug api_pager_pagertemplatedirective %}) to include them in the built-in Pager keyboard navigation.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```html
|
|
13
|
+
* <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
|
|
14
|
+
* <ng-template kendoPagerTemplate>
|
|
15
|
+
* <button kendoPagerFocusable type="button">Custom Button</button>
|
|
16
|
+
* </ng-template>
|
|
17
|
+
* </kendo-pager>
|
|
18
|
+
* ```
|
|
10
19
|
*/
|
|
11
20
|
export declare class PagerFocusableDirective implements OnInit, OnDestroy {
|
|
12
21
|
private navigationService;
|
|
@@ -6,8 +6,19 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
|
6
6
|
import { Messages } from './messages';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Represents the Kendo UI Pager custom messages component for Angular. Use this component to override default component messages
|
|
10
10
|
* ([see example]({% slug pager_globalization %}#toc-messages)).
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```html
|
|
14
|
+
* <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
|
|
15
|
+
* <kendo-pager-messages
|
|
16
|
+
* previousNext="Previous/Next"
|
|
17
|
+
* page="Page"
|
|
18
|
+
* of="of">
|
|
19
|
+
* </kendo-pager-messages>
|
|
20
|
+
* </kendo-pager>
|
|
21
|
+
* ```
|
|
11
22
|
*/
|
|
12
23
|
export declare class CustomMessagesComponent extends Messages {
|
|
13
24
|
protected service: LocalizationService;
|
|
@@ -8,7 +8,16 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
|
8
8
|
import { PagerContextService, PagerContextChanges } from "./pager-context.service";
|
|
9
9
|
import * as i0 from "@angular/core";
|
|
10
10
|
/**
|
|
11
|
-
* Displays information about the current page and the total number of records ([see example]({% slug pager_settings %})).
|
|
11
|
+
* Represents the Kendo UI Pager Info component for Angular. Displays information about the current page and the total number of records ([see example]({% slug pager_settings %})).
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```html
|
|
15
|
+
* <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
|
|
16
|
+
* <ng-template kendoPagerTemplate>
|
|
17
|
+
* <kendo-pager-info></kendo-pager-info>
|
|
18
|
+
* </ng-template>
|
|
19
|
+
* </kendo-pager>
|
|
20
|
+
* ```
|
|
12
21
|
*/
|
|
13
22
|
export declare class PagerInfoComponent extends PagerElementComponent {
|
|
14
23
|
/**
|
|
@@ -10,7 +10,16 @@ import { PagerContextService, PagerContextChanges } from "./pager-context.servic
|
|
|
10
10
|
import { PagerSize } from './common/pager-size';
|
|
11
11
|
import * as i0 from "@angular/core";
|
|
12
12
|
/**
|
|
13
|
-
* Displays an input element which allows
|
|
13
|
+
* Represents the Kendo UI Pager Input component for Angular. Displays an input element which allows you to type and render page numbers.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```html
|
|
17
|
+
* <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
|
|
18
|
+
* <ng-template kendoPagerTemplate>
|
|
19
|
+
* <kendo-pager-input></kendo-pager-input>
|
|
20
|
+
* </ng-template>
|
|
21
|
+
* </kendo-pager>
|
|
22
|
+
* ```
|
|
14
23
|
*/
|
|
15
24
|
export declare class PagerInputComponent extends PagerElementComponent {
|
|
16
25
|
protected pagerContext: PagerContextService;
|
|
@@ -23,13 +32,9 @@ export declare class PagerInputComponent extends PagerElementComponent {
|
|
|
23
32
|
*/
|
|
24
33
|
showPageText: boolean;
|
|
25
34
|
/**
|
|
26
|
-
* Specifies the padding of the internal
|
|
35
|
+
* Specifies the padding of the internal `NumericTextBox` component.
|
|
27
36
|
*
|
|
28
|
-
*
|
|
29
|
-
* * `small`
|
|
30
|
-
* * `medium` (default)
|
|
31
|
-
* * `large`
|
|
32
|
-
* * `none`
|
|
37
|
+
* @default 'medium'
|
|
33
38
|
*/
|
|
34
39
|
size: PagerSize;
|
|
35
40
|
constructor(localization: LocalizationService, pagerContext: PagerContextService, zone: NgZone, cd: ChangeDetectorRef, renderer: Renderer2);
|
|
@@ -9,7 +9,16 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
|
9
9
|
import { PagerSize } from './common/pager-size';
|
|
10
10
|
import * as i0 from "@angular/core";
|
|
11
11
|
/**
|
|
12
|
-
* Displays buttons for navigating to the next and to the last page ([see example]({% slug pager_settings %})).
|
|
12
|
+
* Represents the Kendo UI Pager Next Buttons component for Angular. Displays buttons for navigating to the next and to the last page ([see example]({% slug pager_settings %})).
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```html
|
|
16
|
+
* <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
|
|
17
|
+
* <ng-template kendoPagerTemplate>
|
|
18
|
+
* <kendo-pager-next-buttons></kendo-pager-next-buttons>
|
|
19
|
+
* </ng-template>
|
|
20
|
+
* </kendo-pager>
|
|
21
|
+
* ```
|
|
13
22
|
*/
|
|
14
23
|
export declare class PagerNextButtonsComponent extends PagerElementComponent {
|
|
15
24
|
/**
|
|
@@ -21,13 +30,9 @@ export declare class PagerNextButtonsComponent extends PagerElementComponent {
|
|
|
21
30
|
*/
|
|
22
31
|
get disabled(): boolean;
|
|
23
32
|
/**
|
|
24
|
-
* Specifies the padding of the buttons.
|
|
33
|
+
* Specifies the padding of the navigation buttons.
|
|
25
34
|
*
|
|
26
|
-
*
|
|
27
|
-
* * `small`
|
|
28
|
-
* * `medium` (default)
|
|
29
|
-
* * `large`
|
|
30
|
-
* * `none`
|
|
35
|
+
* @default 'medium'
|
|
31
36
|
*/
|
|
32
37
|
size: PagerSize;
|
|
33
38
|
constructor(localization: LocalizationService, pagerContext: PagerContextService, cd: ChangeDetectorRef);
|
|
@@ -9,7 +9,16 @@ import { PagerContextChanges, PagerContextService } from './pager-context.servic
|
|
|
9
9
|
import { PagerElementComponent } from './pager-element.component';
|
|
10
10
|
import * as i0 from "@angular/core";
|
|
11
11
|
/**
|
|
12
|
-
* Displays numeric buttons to enable navigation between the pages.
|
|
12
|
+
* Represents the Kendo UI Pager Numeric Buttons component for Angular. Displays numeric buttons to enable navigation between the pages.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```html
|
|
16
|
+
* <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
|
|
17
|
+
* <ng-template kendoPagerTemplate>
|
|
18
|
+
* <kendo-pager-numeric-buttons [buttonCount]="5"></kendo-pager-numeric-buttons>
|
|
19
|
+
* </ng-template>
|
|
20
|
+
* </kendo-pager>
|
|
21
|
+
* ```
|
|
13
22
|
*/
|
|
14
23
|
export declare class PagerNumericButtonsComponent extends PagerElementComponent {
|
|
15
24
|
protected pagerContext: PagerContextService;
|
|
@@ -17,7 +26,7 @@ export declare class PagerNumericButtonsComponent extends PagerElementComponent
|
|
|
17
26
|
selectElement: any;
|
|
18
27
|
numbersElement: any;
|
|
19
28
|
/**
|
|
20
|
-
*
|
|
29
|
+
* Specifies the count of the displayed buttons.
|
|
21
30
|
*
|
|
22
31
|
* @type {number}
|
|
23
32
|
* @memberOf PagerNumericButtonsComponent
|
|
@@ -26,11 +35,7 @@ export declare class PagerNumericButtonsComponent extends PagerElementComponent
|
|
|
26
35
|
/**
|
|
27
36
|
* Specifies the padding of the numeric buttons.
|
|
28
37
|
*
|
|
29
|
-
*
|
|
30
|
-
* * `small`
|
|
31
|
-
* * `medium` (default)
|
|
32
|
-
* * `large`
|
|
33
|
-
* * `none`
|
|
38
|
+
* @default 'medium'
|
|
34
39
|
*/
|
|
35
40
|
set size(size: PagerSize);
|
|
36
41
|
get size(): PagerSize;
|
|
@@ -12,7 +12,16 @@ import { PagerSize } from './common/pager-size';
|
|
|
12
12
|
import { AdaptiveMode } from '../util';
|
|
13
13
|
import * as i0 from "@angular/core";
|
|
14
14
|
/**
|
|
15
|
-
* Displays a drop-down list for the page size selection ([see example]({% slug pager_settings %})).
|
|
15
|
+
* Represents the Kendo UI Pager Page Sizes component for Angular. Displays a drop-down list for the page size selection ([see example]({% slug pager_settings %})).
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```html
|
|
19
|
+
* <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
|
|
20
|
+
* <ng-template kendoPagerTemplate>
|
|
21
|
+
* <kendo-pager-page-sizes [pageSizes]="[10, 20, 50]"></kendo-pager-page-sizes>
|
|
22
|
+
* </ng-template>
|
|
23
|
+
* </kendo-pager>
|
|
24
|
+
* ```
|
|
16
25
|
*/
|
|
17
26
|
export declare class PagerPageSizesComponent extends PagerElementComponent implements AfterViewInit, OnDestroy {
|
|
18
27
|
protected pagerContext: PagerContextService;
|
|
@@ -27,136 +36,26 @@ export declare class PagerPageSizesComponent extends PagerElementComponent imple
|
|
|
27
36
|
get showItemsText(): boolean;
|
|
28
37
|
set showItemsText(value: boolean);
|
|
29
38
|
/**
|
|
30
|
-
*
|
|
39
|
+
* Specifies the page sizes collection. You can include numbers and [`PageSizeItem`]({% slug api_pager_pagesizeitem %}) objects.
|
|
31
40
|
*
|
|
32
41
|
* @example
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
* <span>{{item.ProductID}}. </span>
|
|
40
|
-
* <span>{{item.ProductName}}</span>
|
|
41
|
-
* </div>
|
|
42
|
-
* <kendo-pager
|
|
43
|
-
* [skip]="skip"
|
|
44
|
-
* [pageSize]="pageSize"
|
|
45
|
-
* [total]="total"
|
|
46
|
-
* (pageChange)="onPageChange($event)">
|
|
47
|
-
* <ng-template kendoPagerTemplate>
|
|
48
|
-
* <kendo-pager-page-sizes [pageSizes]="pagesizes"></kendo-pager-page-sizes>
|
|
49
|
-
* </ng-template>
|
|
50
|
-
* </kendo-pager>
|
|
51
|
-
* `
|
|
52
|
-
* })
|
|
53
|
-
* class AppComponent {
|
|
54
|
-
* public data: any[] = products;
|
|
55
|
-
* public pagedData = [];
|
|
56
|
-
* public skip = 0;
|
|
57
|
-
* public pageSize = 2;
|
|
58
|
-
* public total = products.length;
|
|
59
|
-
* public pagesizes = [{text: 'One', value: 1}, {text: 'Two', value: 2}, {text: 'All', value : 'all'}];
|
|
60
|
-
*
|
|
61
|
-
* public ngOnInit() {
|
|
62
|
-
* this.pageData();
|
|
63
|
-
* }
|
|
64
|
-
*
|
|
65
|
-
* public onPageChange(e) {
|
|
66
|
-
* this.skip = e.skip;
|
|
67
|
-
* this.pageSize = e.take;
|
|
68
|
-
* this.pageData();
|
|
69
|
-
* }
|
|
70
|
-
*
|
|
71
|
-
* private pageData() {
|
|
72
|
-
* this.pagedData = this.data.slice(this.skip, this.skip + this.pageSize);
|
|
73
|
-
* }
|
|
74
|
-
* }
|
|
75
|
-
*
|
|
76
|
-
* const products = [{
|
|
77
|
-
* 'ProductID' : 1,
|
|
78
|
-
* 'ProductName' : "Chai",
|
|
79
|
-
* 'SupplierID' : 1,
|
|
80
|
-
* 'CategoryID' : 1,
|
|
81
|
-
* 'QuantityPerUnit' : "10 boxes x 20 bags",
|
|
82
|
-
* 'UnitPrice' : 18.0000,
|
|
83
|
-
* 'UnitsInStock' : 39,
|
|
84
|
-
* 'UnitsOnOrder' : 0,
|
|
85
|
-
* 'ReorderLevel' : 10,
|
|
86
|
-
* 'Discontinued' : false
|
|
87
|
-
*
|
|
88
|
-
* }, {
|
|
89
|
-
* 'ProductID' : 2,
|
|
90
|
-
* 'ProductName' : "Chang",
|
|
91
|
-
* 'SupplierID' : 1,
|
|
92
|
-
* 'CategoryID' : 1,
|
|
93
|
-
* 'QuantityPerUnit' : "24 - 12 oz bottles",
|
|
94
|
-
* 'UnitPrice' : 19.0000,
|
|
95
|
-
* 'UnitsInStock' : 17,
|
|
96
|
-
* 'UnitsOnOrder' : 40,
|
|
97
|
-
* 'ReorderLevel' : 25,
|
|
98
|
-
* 'Discontinued' : false
|
|
99
|
-
* }, {
|
|
100
|
-
* 'ProductID' : 3,
|
|
101
|
-
* 'ProductName' : "Aniseed Syrup",
|
|
102
|
-
* 'SupplierID' : 1,
|
|
103
|
-
* 'CategoryID' : 2,
|
|
104
|
-
* 'QuantityPerUnit' : "12 - 550 ml bottles",
|
|
105
|
-
* 'UnitPrice' : 10.0000,
|
|
106
|
-
* 'UnitsInStock' : 13,
|
|
107
|
-
* 'UnitsOnOrder' : 70,
|
|
108
|
-
* 'ReorderLevel' : 25,
|
|
109
|
-
* 'Discontinued' : false
|
|
110
|
-
* }, {
|
|
111
|
-
* 'ProductID' : 4,
|
|
112
|
-
* 'ProductName' : "Chef Anton\'s Cajun Seasoning",
|
|
113
|
-
* 'SupplierID' : 2,
|
|
114
|
-
* 'CategoryID' : 2,
|
|
115
|
-
* 'QuantityPerUnit' : "48 - 6 oz jars",
|
|
116
|
-
* 'UnitPrice' : 22.0000,
|
|
117
|
-
* 'UnitsInStock' : 53,
|
|
118
|
-
* 'UnitsOnOrder' : 0,
|
|
119
|
-
* 'ReorderLevel' : 0,
|
|
120
|
-
* 'Discontinued' : false
|
|
121
|
-
* }, {
|
|
122
|
-
* 'ProductID' : 5,
|
|
123
|
-
* 'ProductName' : "Chef Anton\'s Gumbo Mix",
|
|
124
|
-
* 'SupplierID' : 2,
|
|
125
|
-
* 'CategoryID' : 2,
|
|
126
|
-
* 'QuantityPerUnit' : "36 boxes",
|
|
127
|
-
* 'UnitPrice' : 21.3500,
|
|
128
|
-
* 'UnitsInStock' : 0,
|
|
129
|
-
* 'UnitsOnOrder' : 0,
|
|
130
|
-
* 'ReorderLevel' : 0,
|
|
131
|
-
* 'Discontinued' : true
|
|
132
|
-
* }, {
|
|
133
|
-
* 'ProductID' : 6,
|
|
134
|
-
* 'ProductName' : "Grandma\'s Boysenberry Spread",
|
|
135
|
-
* 'SupplierID' : 3,
|
|
136
|
-
* 'CategoryID' : 2,
|
|
137
|
-
* 'QuantityPerUnit' : "12 - 8 oz jars",
|
|
138
|
-
* 'UnitPrice' : 25.0000,
|
|
139
|
-
* 'UnitsInStock' : 120,
|
|
140
|
-
* 'UnitsOnOrder' : 0,
|
|
141
|
-
* 'ReorderLevel' : 25,
|
|
142
|
-
* 'Discontinued' : false
|
|
143
|
-
* }];
|
|
42
|
+
* ```html
|
|
43
|
+
* <kendo-pager [skip]="0" [pageSize]="10" [total]="100">
|
|
44
|
+
* <ng-template kendoPagerTemplate>
|
|
45
|
+
* <kendo-pager-page-sizes [pageSizes]="[5, 10, 20, { text: 'All', value: 'all' }]"></kendo-pager-page-sizes>
|
|
46
|
+
* </ng-template>
|
|
47
|
+
* </kendo-pager>
|
|
144
48
|
* ```
|
|
145
|
-
*
|
|
146
49
|
*/
|
|
147
50
|
set pageSizes(pageSizes: PageSizeItem[] | number[]);
|
|
148
51
|
/**
|
|
149
|
-
* Specifies the padding of the
|
|
52
|
+
* Specifies the padding of the DropDownList component.
|
|
150
53
|
*
|
|
151
|
-
*
|
|
152
|
-
* * `small`
|
|
153
|
-
* * `medium` (default)
|
|
154
|
-
* * `large`
|
|
155
|
-
* * `none`
|
|
54
|
+
* @default 'medium'
|
|
156
55
|
*/
|
|
157
56
|
size: PagerSize;
|
|
158
57
|
/**
|
|
159
|
-
*
|
|
58
|
+
* Specifies the adaptive mode of the internal `DropDownList` component.
|
|
160
59
|
*
|
|
161
60
|
* @default 'auto'
|
|
162
61
|
*/
|
|
@@ -9,18 +9,23 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
|
9
9
|
import { PagerSize } from './common/pager-size';
|
|
10
10
|
import * as i0 from "@angular/core";
|
|
11
11
|
/**
|
|
12
|
-
* Displays buttons for navigating to the first and to the previous page ([see example]({% slug pager_settings %})).
|
|
12
|
+
* Represents the Kendo UI Pager Previous Buttons component for Angular. Displays buttons for navigating to the first and to the previous page ([see example]({% slug pager_settings %})).
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```html
|
|
16
|
+
* <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
|
|
17
|
+
* <ng-template kendoPagerTemplate>
|
|
18
|
+
* <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
|
|
19
|
+
* </ng-template>
|
|
20
|
+
* </kendo-pager>
|
|
21
|
+
* ```
|
|
13
22
|
*/
|
|
14
23
|
export declare class PagerPrevButtonsComponent extends PagerElementComponent {
|
|
15
24
|
constructor(localization: LocalizationService, pagerContext: PagerContextService, cd: ChangeDetectorRef);
|
|
16
25
|
/**
|
|
17
|
-
* Specifies the padding of the buttons.
|
|
26
|
+
* Specifies the padding of the navigation buttons.
|
|
18
27
|
*
|
|
19
|
-
*
|
|
20
|
-
* * `small`
|
|
21
|
-
* * `medium` (default)
|
|
22
|
-
* * `large`
|
|
23
|
-
* * `none`
|
|
28
|
+
* @default 'medium'
|
|
24
29
|
*/
|
|
25
30
|
size: PagerSize;
|
|
26
31
|
/**
|
|
@@ -5,10 +5,11 @@
|
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
/**
|
|
8
|
-
* Represents the
|
|
9
|
-
* template, nest an `<ng-template>` tag with the `kendoPagerTemplate` directive inside `<kendo-pager>`.
|
|
8
|
+
* Represents the Kendo UI Pager template directive for Angular.
|
|
9
|
+
* Use this directive to customize the Pager appearance. To define a Pager template, nest an `<ng-template>` tag with the `kendoPagerTemplate` directive inside `<kendo-pager>`.
|
|
10
10
|
*
|
|
11
11
|
* The template context provides the following fields:
|
|
12
|
+
*
|
|
12
13
|
* * `currentPage`—The index of the displayed page.
|
|
13
14
|
* * `pageSize`—The value of the current `pageSize`.
|
|
14
15
|
* * `skip`—The current skip value.
|
|
@@ -16,34 +17,13 @@ import * as i0 from "@angular/core";
|
|
|
16
17
|
* * `totalPages`—The total number of available pages.
|
|
17
18
|
*
|
|
18
19
|
* @example
|
|
19
|
-
* ```
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
* <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
|
|
27
|
-
* <kendo-pager-numeric-buttons [buttonCount]="10"></kendo-pager-numeric-buttons>
|
|
28
|
-
* <kendo-pager-next-buttons></kendo-pager-next-buttons>
|
|
29
|
-
* <kendo-pager-info></kendo-pager-info>
|
|
30
|
-
* Current page: {{currentPage}}
|
|
31
|
-
* </ng-template>
|
|
32
|
-
* </kendo-pager>
|
|
33
|
-
* `
|
|
34
|
-
* })
|
|
35
|
-
*
|
|
36
|
-
* class AppComponent {
|
|
37
|
-
* public skip = 0;
|
|
38
|
-
* public pageSize = 10;
|
|
39
|
-
* public total = 100;
|
|
40
|
-
*
|
|
41
|
-
* public onPageChange(e: any): void {
|
|
42
|
-
* this.skip = e.skip;
|
|
43
|
-
* this.pageSize = e.take;
|
|
44
|
-
* }
|
|
45
|
-
* }
|
|
46
|
-
*
|
|
20
|
+
* ```html
|
|
21
|
+
* <kendo-pager [skip]="0" [pageSize]="10" [total]="100">
|
|
22
|
+
* <ng-template kendoPagerTemplate let-currentPage="currentPage" let-pageSize="pageSize" let-skip="skip" let-total="total" let-totalPages="totalPages">
|
|
23
|
+
* <span>Page {{currentPage}} of {{totalPages}}</span>
|
|
24
|
+
* <span>Items per page: {{pageSize}}</span>
|
|
25
|
+
* </ng-template>
|
|
26
|
+
* </kendo-pager>
|
|
47
27
|
* ```
|
|
48
28
|
*/
|
|
49
29
|
export declare class PagerTemplateDirective {
|
|
@@ -24,6 +24,9 @@ export declare class PagerComponent implements OnChanges, AfterViewInit, OnInit,
|
|
|
24
24
|
private ngZone;
|
|
25
25
|
private cdr;
|
|
26
26
|
private navigationService;
|
|
27
|
+
/**
|
|
28
|
+
* Represents the collection of pager template directives.
|
|
29
|
+
*/
|
|
27
30
|
template: QueryList<PagerTemplateDirective>;
|
|
28
31
|
set numericButtons(buttons: ElementRef);
|
|
29
32
|
set pagerInput(input: ElementRef);
|
|
@@ -35,55 +38,55 @@ export declare class PagerComponent implements OnChanges, AfterViewInit, OnInit,
|
|
|
35
38
|
*/
|
|
36
39
|
externalTemplate: any;
|
|
37
40
|
/**
|
|
38
|
-
*
|
|
41
|
+
* Specifies the total number of data items in the collection.
|
|
39
42
|
*
|
|
40
43
|
* @default 0
|
|
41
44
|
*/
|
|
42
45
|
total: number;
|
|
43
46
|
/**
|
|
44
|
-
*
|
|
47
|
+
* Specifies the number of data items to skip.
|
|
45
48
|
*
|
|
46
49
|
* @default 0
|
|
47
50
|
*/
|
|
48
51
|
skip: number;
|
|
49
52
|
/**
|
|
50
|
-
*
|
|
53
|
+
* Specifies the number of data items per page.
|
|
51
54
|
*/
|
|
52
55
|
pageSize: number;
|
|
53
56
|
/**
|
|
54
|
-
*
|
|
57
|
+
* Specifies the maximum number of numeric buttons before the buttons are collapsed.
|
|
55
58
|
*
|
|
56
59
|
* @default 10
|
|
57
60
|
*/
|
|
58
61
|
buttonCount: number;
|
|
59
62
|
/**
|
|
60
|
-
*
|
|
63
|
+
* Determines whether to display information about the current page and the total number of records.
|
|
61
64
|
*
|
|
62
65
|
* @default true
|
|
63
66
|
*/
|
|
64
67
|
info: boolean;
|
|
65
68
|
/**
|
|
66
|
-
*
|
|
69
|
+
* Specifies the type of the Pager.
|
|
67
70
|
*
|
|
68
71
|
* @default 'numeric'
|
|
69
72
|
*/
|
|
70
73
|
type: PagerType;
|
|
71
74
|
/**
|
|
72
|
-
*
|
|
73
|
-
* When set to `true`, the dropdown
|
|
75
|
+
* Displays a dropdown for selecting the page size.
|
|
76
|
+
* When set to `true`, the dropdown contains the default list of options - 5, 10, 20.
|
|
74
77
|
* To customize the list of options, set `pageSizeValues` to an array of the desired values.
|
|
75
78
|
* The array can contain numbers and [PageSizeItem]({% slug api_pager_pagesizeitem %}) objects.
|
|
76
79
|
*/
|
|
77
80
|
set pageSizeValues(value: boolean | number[] | PageSizeItem[]);
|
|
78
81
|
get pageSizeValues(): boolean | number[] | PageSizeItem[];
|
|
79
82
|
/**
|
|
80
|
-
*
|
|
83
|
+
* Determines whether to display the **Previous** and **Next** buttons.
|
|
81
84
|
*
|
|
82
85
|
* @default true
|
|
83
86
|
*/
|
|
84
87
|
previousNext: boolean;
|
|
85
88
|
/**
|
|
86
|
-
*
|
|
89
|
+
* Determines whether users can use dedicated shortcuts to interact with the Pager ([see example]({% slug keyboard_navigation_pager %})).
|
|
87
90
|
* By default, navigation is enabled. To disable it and make the Pager content accessible in the normal tab sequence, set the property to `false`.
|
|
88
91
|
* @default true
|
|
89
92
|
*/
|
|
@@ -92,35 +95,31 @@ export declare class PagerComponent implements OnChanges, AfterViewInit, OnInit,
|
|
|
92
95
|
/**
|
|
93
96
|
* Specifies the padding of all Pager elements.
|
|
94
97
|
*
|
|
95
|
-
*
|
|
96
|
-
* * `small`
|
|
97
|
-
* * `medium` (default)
|
|
98
|
-
* * `large`
|
|
99
|
-
* * `none`
|
|
98
|
+
* @default 'medium'
|
|
100
99
|
*/
|
|
101
100
|
set size(size: PagerSize);
|
|
102
101
|
get size(): PagerSize;
|
|
103
102
|
/**
|
|
104
|
-
*
|
|
103
|
+
* Determines whether the Pager responsive functionality is enabled ([see example](slug:responsive_pager)).
|
|
105
104
|
*
|
|
106
105
|
* @default true
|
|
107
106
|
*/
|
|
108
107
|
responsive: boolean;
|
|
109
108
|
/**
|
|
110
|
-
*
|
|
109
|
+
* Determines whether the Pager adaptiveness functionality is enabled ([see example](slug:adaptive_mode_pager)).
|
|
111
110
|
*
|
|
112
111
|
* @default 'auto'
|
|
113
112
|
*/
|
|
114
113
|
adaptiveMode: AdaptiveMode;
|
|
115
114
|
/**
|
|
116
|
-
* Fires when the current page of the Pager
|
|
117
|
-
* You have to handle the event
|
|
115
|
+
* Fires when the current page of the Pager changes ([see example](slug:overview_pager)).
|
|
116
|
+
* You have to handle the event and page the data.
|
|
118
117
|
*/
|
|
119
118
|
pageChange: EventEmitter<PageChangeEvent>;
|
|
120
119
|
/**
|
|
121
|
-
* Fires when the page size of the Pager
|
|
122
|
-
* You have to handle the event
|
|
123
|
-
* If the event is prevented, the page size
|
|
120
|
+
* Fires when the page size of the Pager changes.
|
|
121
|
+
* You have to handle the event and page the data.
|
|
122
|
+
* If the event is prevented, the page size remains unchanged ([see example]({% slug pager_events %})).
|
|
124
123
|
*/
|
|
125
124
|
pageSizeChange: EventEmitter<PageSizeChangeEvent>;
|
|
126
125
|
/**
|
|
@@ -186,6 +185,9 @@ export declare class PagerComponent implements OnChanges, AfterViewInit, OnInit,
|
|
|
186
185
|
private pagerDimensions;
|
|
187
186
|
constructor(pagerContext: PagerContextService, element: ElementRef, localization: LocalizationService, renderer: Renderer2, ngZone: NgZone, cdr: ChangeDetectorRef, navigationService: PagerNavigationService);
|
|
188
187
|
ngOnInit(): void;
|
|
188
|
+
/**
|
|
189
|
+
* Gets the maximum number of items displayed on the current page.
|
|
190
|
+
*/
|
|
189
191
|
get maxItems(): number;
|
|
190
192
|
ngAfterViewInit(): void;
|
|
191
193
|
ngOnChanges(changes: SimpleChanges): void;
|
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
export interface PageSizeItem {
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
7
|
+
* Specifies the text that represents each available option in the page sizes dropdown list.
|
|
8
8
|
*/
|
|
9
9
|
text: string;
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
12
|
-
* When the value
|
|
11
|
+
* Specifies the numeric value that you use as page size.
|
|
12
|
+
* When you set the value to `all`, the page size becomes the total number of items.
|
|
13
13
|
*/
|
|
14
14
|
value: number | 'all';
|
|
15
15
|
}
|
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { PreventableEvent } from './preventable-event';
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
8
|
-
*
|
|
7
|
+
* Represents the arguments for the `pageSizeChange` event. The `pageSizeChange` event fires when you change the page size
|
|
8
|
+
* from the UI. If you cancel the event, the change does not occur.
|
|
9
9
|
*/
|
|
10
10
|
export declare class PageSizeChangeEvent extends PreventableEvent {
|
|
11
11
|
/**
|
|
12
|
-
*
|
|
12
|
+
* Gets the newly selected page size.
|
|
13
13
|
*/
|
|
14
14
|
newPageSize: number | string;
|
|
15
15
|
/**
|