@progress/kendo-angular-pager 17.0.0-develop.3 → 17.0.0-develop.31
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/README.md +26 -17
- package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
- package/{esm2020 → esm2022}/pager/focusable.directive.mjs +7 -4
- package/{esm2020 → esm2022}/pager/localization/custom-messages.component.mjs +9 -8
- package/{esm2020 → esm2022}/pager/localization/localized-messages.directive.mjs +9 -8
- package/esm2022/pager/localization/messages.mjs +87 -0
- package/{esm2020 → esm2022}/pager/navigation.service.mjs +2 -4
- package/{esm2020 → esm2022}/pager/pager-context.service.mjs +6 -5
- package/{esm2020 → esm2022}/pager/pager-element.component.mjs +22 -15
- package/{esm2020 → esm2022}/pager/pager-info.component.mjs +8 -7
- package/{esm2020 → esm2022}/pager/pager-input.component.mjs +59 -55
- package/{esm2020 → esm2022}/pager/pager-next-buttons.component.mjs +18 -18
- package/{esm2020 → esm2022}/pager/pager-numeric-buttons.component.mjs +22 -11
- package/{esm2020 → esm2022}/pager/pager-page-sizes.component.mjs +25 -21
- package/{esm2020 → esm2022}/pager/pager-prev-buttons.component.mjs +15 -15
- package/{esm2020 → esm2022}/pager/pager-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/pager/pager.component.mjs +121 -105
- package/{esm2020 → esm2022}/pager/pager.module.mjs +8 -8
- package/{esm2020 → esm2022}/pager/pagesizechange-event.mjs +4 -0
- package/{esm2020 → esm2022}/pager/preventable-event.mjs +1 -3
- package/{fesm2020 → fesm2022}/progress-kendo-angular-pager.mjs +389 -295
- package/package.json +15 -21
- package/pager/common/pager-size.d.ts +1 -1
- package/pager/common/pager-type.d.ts +1 -1
- package/pager/localization/messages.d.ts +1 -1
- package/pager/pager-context.service.d.ts +1 -1
- package/pager/pager-input.component.d.ts +1 -1
- package/pager/pager-next-buttons.component.d.ts +1 -1
- package/pager/pager-numeric-buttons.component.d.ts +1 -1
- package/pager/pager-page-sizes.component.d.ts +1 -1
- package/pager/pager-prev-buttons.component.d.ts +1 -1
- package/pager/pager.component.d.ts +1 -1
- package/schematics/ngAdd/index.js +6 -6
- package/esm2020/pager/localization/messages.mjs +0 -43
- package/fesm2015/progress-kendo-angular-pager.mjs +0 -1991
- /package/{esm2020 → esm2022}/directives.mjs +0 -0
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020 → esm2022}/pager/change-event-args.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/pager/common/constants.mjs +0 -0
- /package/{esm2020 → esm2022}/pager/common/pager-classes.mjs +0 -0
- /package/{esm2020 → esm2022}/pager/common/pager-size.mjs +0 -0
- /package/{esm2020 → esm2022}/pager/common/pager-type.mjs +0 -0
- /package/{esm2020 → esm2022}/pager/pagesize-item.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/progress-kendo-angular-pager.mjs +0 -0
- /package/{esm2020 → esm2022}/util.mjs +0 -0
package/README.md
CHANGED
|
@@ -1,33 +1,42 @@
|
|
|
1
|
-
<a href="https://www.telerik.com/kendo-angular-ui/" target="_blank">
|
|
1
|
+
<a href="https://www.telerik.com/kendo-angular-ui/components/pager" target="_blank">
|
|
2
2
|
<img width="631" src="https://www.telerik.com/kendo-angular-ui/npm-banner.svg">
|
|
3
3
|
</a>
|
|
4
4
|
|
|
5
5
|
## Kendo UI for Angular Pager Component
|
|
6
6
|
|
|
7
|
-
>
|
|
8
|
-
> *
|
|
9
|
-
> *
|
|
10
|
-
> * To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-pager) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-pager). Doing so indicates that you [accept the Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-pager).
|
|
11
|
-
> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
|
|
12
|
-
>
|
|
13
|
-
> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-pager) and speed up your development process!
|
|
7
|
+
> * This package is part of the [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/)—a commercial UI library.
|
|
8
|
+
> * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
|
|
9
|
+
> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular team!
|
|
14
10
|
|
|
15
|
-
Kendo UI for Angular
|
|
11
|
+
The Kendo UI for Angular Pager component enables you to split a set of data into pages, providing a flexible and intuitive UI.
|
|
12
|
+
|
|
13
|
+
## Key Features
|
|
14
|
+
|
|
15
|
+
Among the many features which the Kendo UI for Angular Pager delivers are:
|
|
16
|
+
|
|
17
|
+
* Pager Settings and Types—The Pager component features multiple settings to customize the paging UI. [Read more about the available settings configurations of the Pager...](https://www.telerik.com/kendo-angular-ui/components/pager/settings)
|
|
18
|
+
* Pager Appearance—You can change the size of the Pager or fully customize its appearance by mixing custom components and built-in pager elements by using the built-in Pager template. Read more about the [Pager template](https://www.telerik.com/kendo-angular-ui/components/pager/template) and the [built-in sizing options...](https://www.telerik.com/kendo-angular-ui/components/pager/appearance)
|
|
19
|
+
* Responsive Design—The Pager supports responsive web-design by adapting its layout based on the set width or the available screen size. [Read more about the adaptive layout of the Pager...](https://www.telerik.com/kendo-angular-ui/components/pager/responsive)
|
|
20
|
+
* Globalization—The Kendo UI for Angular Pager supports globalization to ensure that it can fit well in any application, no matter what languages and locales need to be supported. Additionally, the Pager supports rendering in a right-to-left (RTL) direction. [Read more about the globalization of the Pager...](https://www.telerik.com/kendo-angular-ui/components/pager/globalization)
|
|
21
|
+
* Keyboard Navigation—The Pager supports a number of keyboard shortcuts which alow users to accomplish various commands. [Read more about the keyboard navigation of the Pager...](https://www.telerik.com/kendo-angular-ui/components/pager/keyboard-navigation)
|
|
22
|
+
* Accessibility—The Kendo UI for Angular Pager component is [WCAG 2.2 AA](https://www.w3.org/TR/WCAG22/) and [Section 508](http://www.section508.gov/) compliant. The component also follows the [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/) for implementing the keyboard navigation for its component role, and is tested against the popular screen readers. [Read more about the accessibility of the Pager...](https://www.telerik.com/kendo-angular-ui/components/pager/accessibility)
|
|
23
|
+
|
|
24
|
+
## Support Options
|
|
25
|
+
|
|
26
|
+
For any issues you might encounter while working with the Kendo UI for Angular Pager, you have the following support channels available:
|
|
27
|
+
|
|
28
|
+
* Industry-leading technical support—Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-center/contact-us/technical-support).
|
|
29
|
+
* Product forums—The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
|
|
30
|
+
* Feedback portal—The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
|
|
16
31
|
|
|
17
32
|
## Resources
|
|
18
33
|
|
|
19
|
-
* [
|
|
34
|
+
* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
|
|
35
|
+
* [Getting Started with the Kendo UI for Angular Pager](https://www.telerik.com/kendo-angular-ui/components/pager/installation/getting-started)
|
|
20
36
|
* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
|
|
21
37
|
* [Blogs](http://www.telerik.com/blogs/kendo-ui)
|
|
22
38
|
* [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
|
|
23
39
|
|
|
24
|
-
## Questions and Feedback
|
|
25
|
-
|
|
26
|
-
* [Official Forums](https://www.telerik.com/forums/kendo-angular-ui)
|
|
27
|
-
* [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
|
|
28
|
-
* [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
|
|
29
|
-
* [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
|
|
30
|
-
|
|
31
40
|
*Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
|
|
32
41
|
|
|
33
42
|
*Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-pager',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
13
|
-
version: '17.0.0-develop.
|
|
12
|
+
publishDate: 1730478769,
|
|
13
|
+
version: '17.0.0-develop.31',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
15
15
|
};
|
|
@@ -12,11 +12,14 @@ import * as i1 from "./navigation.service";
|
|
|
12
12
|
* Place the directive on custom focusable elements in the [`kendoDataPagerTemplate`]({% slug api_pager_pagertemplatedirective %}) to include them in the built-in Pager keyboard navigation.
|
|
13
13
|
*/
|
|
14
14
|
export class PagerFocusableDirective {
|
|
15
|
+
navigationService;
|
|
16
|
+
element;
|
|
17
|
+
renderer;
|
|
18
|
+
subscriptions = new Subscription();
|
|
15
19
|
constructor(navigationService, element, renderer) {
|
|
16
20
|
this.navigationService = navigationService;
|
|
17
21
|
this.element = element;
|
|
18
22
|
this.renderer = renderer;
|
|
19
|
-
this.subscriptions = new Subscription();
|
|
20
23
|
}
|
|
21
24
|
ngOnInit() {
|
|
22
25
|
this.subscriptions.add(this.navigationService.innerNavigationChange.subscribe(this.innerNavigationChange.bind(this)));
|
|
@@ -40,10 +43,10 @@ export class PagerFocusableDirective {
|
|
|
40
43
|
this.renderer.setAttribute(el, 'tabindex', index);
|
|
41
44
|
});
|
|
42
45
|
}
|
|
46
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerFocusableDirective, deps: [{ token: i1.PagerNavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
47
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PagerFocusableDirective, isStandalone: true, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"], ngImport: i0 });
|
|
43
48
|
}
|
|
44
|
-
|
|
45
|
-
PagerFocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PagerFocusableDirective, isStandalone: true, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"], ngImport: i0 });
|
|
46
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerFocusableDirective, decorators: [{
|
|
49
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerFocusableDirective, decorators: [{
|
|
47
50
|
type: Directive,
|
|
48
51
|
args: [{
|
|
49
52
|
selector: '[kendoPagerFocusable]',
|
|
@@ -12,6 +12,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
|
|
|
12
12
|
* ([see example]({% slug pager_globalization %}#toc-messages)).
|
|
13
13
|
*/
|
|
14
14
|
export class CustomMessagesComponent extends Messages {
|
|
15
|
+
service;
|
|
15
16
|
constructor(service) {
|
|
16
17
|
super();
|
|
17
18
|
this.service = service;
|
|
@@ -19,15 +20,15 @@ export class CustomMessagesComponent extends Messages {
|
|
|
19
20
|
get override() {
|
|
20
21
|
return true;
|
|
21
22
|
}
|
|
23
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
24
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-datapager-messages", providers: [
|
|
25
|
+
{
|
|
26
|
+
provide: Messages,
|
|
27
|
+
useExisting: forwardRef(() => CustomMessagesComponent)
|
|
28
|
+
}
|
|
29
|
+
], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
|
|
22
30
|
}
|
|
23
|
-
|
|
24
|
-
CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-datapager-messages", providers: [
|
|
25
|
-
{
|
|
26
|
-
provide: Messages,
|
|
27
|
-
useExisting: forwardRef(() => CustomMessagesComponent)
|
|
28
|
-
}
|
|
29
|
-
], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
|
|
30
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, decorators: [{
|
|
31
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
|
|
31
32
|
type: Component,
|
|
32
33
|
args: [{
|
|
33
34
|
providers: [
|
|
@@ -11,19 +11,20 @@ import * as i1 from "@progress/kendo-angular-l10n";
|
|
|
11
11
|
* @hidden
|
|
12
12
|
*/
|
|
13
13
|
export class LocalizedMessagesDirective extends Messages {
|
|
14
|
+
service;
|
|
14
15
|
constructor(service) {
|
|
15
16
|
super();
|
|
16
17
|
this.service = service;
|
|
17
18
|
}
|
|
19
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
20
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoDataPagerLocalizedMessages]", providers: [
|
|
21
|
+
{
|
|
22
|
+
provide: Messages,
|
|
23
|
+
useExisting: forwardRef(() => LocalizedMessagesDirective)
|
|
24
|
+
}
|
|
25
|
+
], usesInheritance: true, ngImport: i0 });
|
|
18
26
|
}
|
|
19
|
-
|
|
20
|
-
LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoDataPagerLocalizedMessages]", providers: [
|
|
21
|
-
{
|
|
22
|
-
provide: Messages,
|
|
23
|
-
useExisting: forwardRef(() => LocalizedMessagesDirective)
|
|
24
|
-
}
|
|
25
|
-
], usesInheritance: true, ngImport: i0 });
|
|
26
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
|
|
27
28
|
type: Directive,
|
|
28
29
|
args: [{
|
|
29
30
|
providers: [
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { Directive, Input } from '@angular/core';
|
|
6
|
+
import { ComponentMessages } from '@progress/kendo-angular-l10n';
|
|
7
|
+
import * as i0 from "@angular/core";
|
|
8
|
+
/**
|
|
9
|
+
* @hidden
|
|
10
|
+
*/
|
|
11
|
+
export class Messages extends ComponentMessages {
|
|
12
|
+
/**
|
|
13
|
+
* The label for the **First page** button.
|
|
14
|
+
*/
|
|
15
|
+
firstPage;
|
|
16
|
+
/**
|
|
17
|
+
* The label for the **Last page** button.
|
|
18
|
+
*/
|
|
19
|
+
lastPage;
|
|
20
|
+
/**
|
|
21
|
+
* The label for the **Previous page** button.
|
|
22
|
+
*/
|
|
23
|
+
previousPage;
|
|
24
|
+
/**
|
|
25
|
+
* The label for the **Next page** button.
|
|
26
|
+
*/
|
|
27
|
+
nextPage;
|
|
28
|
+
/**
|
|
29
|
+
* The label displayed before the pager input.
|
|
30
|
+
*/
|
|
31
|
+
page;
|
|
32
|
+
/**
|
|
33
|
+
* The title attribute of the page number input element.
|
|
34
|
+
*/
|
|
35
|
+
pageNumberInputTitle;
|
|
36
|
+
/**
|
|
37
|
+
* The label displayed after the page-size selector.
|
|
38
|
+
*/
|
|
39
|
+
itemsPerPage;
|
|
40
|
+
/**
|
|
41
|
+
* The label before the total-page number.
|
|
42
|
+
*/
|
|
43
|
+
of;
|
|
44
|
+
/**
|
|
45
|
+
* The label after the total-page number.
|
|
46
|
+
*/
|
|
47
|
+
items;
|
|
48
|
+
/**
|
|
49
|
+
* The text of the title and aria-label attributes applied to the page chooser.
|
|
50
|
+
*/
|
|
51
|
+
selectPage;
|
|
52
|
+
/**
|
|
53
|
+
* The text of the aria-label attribute applied to the input element for entering the page number."
|
|
54
|
+
*/
|
|
55
|
+
inputLabel;
|
|
56
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
57
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, selector: "kendoPagerMessages", inputs: { firstPage: "firstPage", lastPage: "lastPage", previousPage: "previousPage", nextPage: "nextPage", page: "page", pageNumberInputTitle: "pageNumberInputTitle", itemsPerPage: "itemsPerPage", of: "of", items: "items", selectPage: "selectPage", inputLabel: "inputLabel" }, usesInheritance: true, ngImport: i0 });
|
|
58
|
+
}
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
|
|
60
|
+
type: Directive,
|
|
61
|
+
args: [{
|
|
62
|
+
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
63
|
+
selector: 'kendoPagerMessages'
|
|
64
|
+
}]
|
|
65
|
+
}], propDecorators: { firstPage: [{
|
|
66
|
+
type: Input
|
|
67
|
+
}], lastPage: [{
|
|
68
|
+
type: Input
|
|
69
|
+
}], previousPage: [{
|
|
70
|
+
type: Input
|
|
71
|
+
}], nextPage: [{
|
|
72
|
+
type: Input
|
|
73
|
+
}], page: [{
|
|
74
|
+
type: Input
|
|
75
|
+
}], pageNumberInputTitle: [{
|
|
76
|
+
type: Input
|
|
77
|
+
}], itemsPerPage: [{
|
|
78
|
+
type: Input
|
|
79
|
+
}], of: [{
|
|
80
|
+
type: Input
|
|
81
|
+
}], items: [{
|
|
82
|
+
type: Input
|
|
83
|
+
}], selectPage: [{
|
|
84
|
+
type: Input
|
|
85
|
+
}], inputLabel: [{
|
|
86
|
+
type: Input
|
|
87
|
+
}] } });
|
|
@@ -8,10 +8,8 @@ import { getAllFocusableChildren } from "../util";
|
|
|
8
8
|
* @hidden
|
|
9
9
|
*/
|
|
10
10
|
export class PagerNavigationService {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
this.innerNavigationChange = new Subject();
|
|
14
|
-
}
|
|
11
|
+
isNavigable = false;
|
|
12
|
+
innerNavigationChange = new Subject();
|
|
15
13
|
toggleInnerNavigation(value) {
|
|
16
14
|
this.innerNavigationChange.next(value);
|
|
17
15
|
}
|
|
@@ -7,11 +7,12 @@ import { Subject } from "rxjs";
|
|
|
7
7
|
* @hidden
|
|
8
8
|
*/
|
|
9
9
|
export class PagerContextService {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
total;
|
|
11
|
+
skip;
|
|
12
|
+
pageSize;
|
|
13
|
+
changes = new Subject();
|
|
14
|
+
pageChange = new Subject();
|
|
15
|
+
pageSizeChange = new Subject();
|
|
15
16
|
get currentPage() {
|
|
16
17
|
return this.skip / this.pageSize;
|
|
17
18
|
}
|
|
@@ -13,18 +13,16 @@ import * as i2 from "./pager-context.service";
|
|
|
13
13
|
* @hidden
|
|
14
14
|
*/
|
|
15
15
|
export class PagerElementComponent {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
this.caretAltToRightIcon = caretAltToRightIcon;
|
|
27
|
-
}
|
|
16
|
+
localization;
|
|
17
|
+
pagerContext;
|
|
18
|
+
cd;
|
|
19
|
+
total;
|
|
20
|
+
skip;
|
|
21
|
+
pageSize;
|
|
22
|
+
caretAltLeftIcon = caretAltLeftIcon;
|
|
23
|
+
caretAltToLeftIcon = caretAltToLeftIcon;
|
|
24
|
+
caretAltRightIcon = caretAltRightIcon;
|
|
25
|
+
caretAltToRightIcon = caretAltToRightIcon;
|
|
28
26
|
/**
|
|
29
27
|
* @hidden
|
|
30
28
|
*
|
|
@@ -45,6 +43,15 @@ export class PagerElementComponent {
|
|
|
45
43
|
get totalPages() {
|
|
46
44
|
return Math.ceil((this.total || 0) / this.pageSize);
|
|
47
45
|
}
|
|
46
|
+
subscriptions;
|
|
47
|
+
constructor(localization, pagerContext, cd) {
|
|
48
|
+
this.localization = localization;
|
|
49
|
+
this.pagerContext = pagerContext;
|
|
50
|
+
this.cd = cd;
|
|
51
|
+
this.total = pagerContext.total;
|
|
52
|
+
this.skip = pagerContext.skip;
|
|
53
|
+
this.pageSize = pagerContext.pageSize;
|
|
54
|
+
}
|
|
48
55
|
/**
|
|
49
56
|
* @hidden
|
|
50
57
|
*
|
|
@@ -93,10 +100,10 @@ export class PagerElementComponent {
|
|
|
93
100
|
get nextArrowSVGIcons() {
|
|
94
101
|
return !this.localization.rtl ? [this.caretAltRightIcon, this.caretAltToRightIcon] : [this.caretAltLeftIcon, this.caretAltToLeftIcon];
|
|
95
102
|
}
|
|
103
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerElementComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
104
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerElementComponent, selector: "kendo-pager-element", ngImport: i0, template: ``, isInline: true });
|
|
96
105
|
}
|
|
97
|
-
|
|
98
|
-
PagerElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerElementComponent, selector: "kendo-pager-element", ngImport: i0, template: ``, isInline: true });
|
|
99
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerElementComponent, decorators: [{
|
|
106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerElementComponent, decorators: [{
|
|
100
107
|
type: Component,
|
|
101
108
|
args: [{
|
|
102
109
|
selector: 'kendo-pager-element',
|
|
@@ -14,10 +14,7 @@ import * as i2 from "./pager-context.service";
|
|
|
14
14
|
* Displays information about the current page and the total number of records ([see example]({% slug pager_settings %})).
|
|
15
15
|
*/
|
|
16
16
|
export class PagerInfoComponent extends PagerElementComponent {
|
|
17
|
-
|
|
18
|
-
super(localization, pagerContext, cd);
|
|
19
|
-
this.pagerContext = pagerContext;
|
|
20
|
-
}
|
|
17
|
+
pagerContext;
|
|
21
18
|
/**
|
|
22
19
|
* @hidden
|
|
23
20
|
*
|
|
@@ -50,16 +47,20 @@ export class PagerInfoComponent extends PagerElementComponent {
|
|
|
50
47
|
get classes() {
|
|
51
48
|
return true;
|
|
52
49
|
}
|
|
50
|
+
constructor(localization, cd, pagerContext) {
|
|
51
|
+
super(localization, pagerContext, cd);
|
|
52
|
+
this.pagerContext = pagerContext;
|
|
53
|
+
}
|
|
53
54
|
onChanges({ total, skip, pageSize }) {
|
|
54
55
|
this.total = total;
|
|
55
56
|
this.skip = skip;
|
|
56
57
|
this.pageSize = pageSize;
|
|
57
58
|
this.cd.markForCheck();
|
|
58
59
|
}
|
|
60
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
|
|
61
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerInfoComponent, isStandalone: true, selector: "kendo-datapager-info", host: { properties: { "class.k-pager-info": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('of')}} {{total}} {{textFor('items')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
59
62
|
}
|
|
60
|
-
|
|
61
|
-
PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerInfoComponent, isStandalone: true, selector: "kendo-datapager-info", host: { properties: { "class.k-pager-info": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('of')}} {{total}} {{textFor('items')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
62
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerInfoComponent, decorators: [{
|
|
63
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerInfoComponent, decorators: [{
|
|
63
64
|
type: Component,
|
|
64
65
|
args: [{
|
|
65
66
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -19,59 +19,25 @@ import * as i2 from "./pager-context.service";
|
|
|
19
19
|
* Displays an input element which allows the typing and rendering of page numbers.
|
|
20
20
|
*/
|
|
21
21
|
export class PagerInputComponent extends PagerElementComponent {
|
|
22
|
+
pagerContext;
|
|
23
|
+
zone;
|
|
24
|
+
renderer;
|
|
25
|
+
numericInput;
|
|
26
|
+
/**
|
|
27
|
+
* Specifies the padding of the internal numeric input element.
|
|
28
|
+
*
|
|
29
|
+
* The possible values are:
|
|
30
|
+
* * `small`
|
|
31
|
+
* * `medium` (default)
|
|
32
|
+
* * `large`
|
|
33
|
+
* * `none`
|
|
34
|
+
*/
|
|
35
|
+
size = DEFAULT_SIZE;
|
|
22
36
|
constructor(localization, pagerContext, zone, cd, renderer) {
|
|
23
37
|
super(localization, pagerContext, cd);
|
|
24
38
|
this.pagerContext = pagerContext;
|
|
25
39
|
this.zone = zone;
|
|
26
40
|
this.renderer = renderer;
|
|
27
|
-
/**
|
|
28
|
-
* Specifies the padding of the internal numeric input element.
|
|
29
|
-
*
|
|
30
|
-
* The possible values are:
|
|
31
|
-
* * `small`
|
|
32
|
-
* * `medium` (default)
|
|
33
|
-
* * `large`
|
|
34
|
-
* * `none`
|
|
35
|
-
*/
|
|
36
|
-
this.size = DEFAULT_SIZE;
|
|
37
|
-
/**
|
|
38
|
-
* @hidden
|
|
39
|
-
*
|
|
40
|
-
* @param {string} value
|
|
41
|
-
*
|
|
42
|
-
* @memberOf PagerInputComponent
|
|
43
|
-
*/
|
|
44
|
-
this.handleKeyDown = (event) => {
|
|
45
|
-
const incomingValue = this.numericInput.value || this.current;
|
|
46
|
-
// eslint-disable import/no-deprecated
|
|
47
|
-
if (event.keyCode === Keys.Enter) {
|
|
48
|
-
event.preventDefault();
|
|
49
|
-
if (incomingValue !== this.current) {
|
|
50
|
-
this.zone.run(() => {
|
|
51
|
-
this.changePage(incomingValue - 1);
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
/**
|
|
57
|
-
* @hidden
|
|
58
|
-
*
|
|
59
|
-
* @param {string} value
|
|
60
|
-
*
|
|
61
|
-
* @memberOf PagerInputComponent
|
|
62
|
-
*/
|
|
63
|
-
this.handleBlur = () => {
|
|
64
|
-
const inputValue = this.numericInput.value;
|
|
65
|
-
if (!inputValue) {
|
|
66
|
-
this.numericInput.writeValue(this.current);
|
|
67
|
-
return;
|
|
68
|
-
}
|
|
69
|
-
if (inputValue !== this.current) {
|
|
70
|
-
this.zone.run(() => {
|
|
71
|
-
this.changePage(inputValue - 1);
|
|
72
|
-
});
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
41
|
}
|
|
76
42
|
onChanges({ total, skip, pageSize }) {
|
|
77
43
|
this.total = total;
|
|
@@ -79,6 +45,44 @@ export class PagerInputComponent extends PagerElementComponent {
|
|
|
79
45
|
this.pageSize = pageSize;
|
|
80
46
|
this.cd.markForCheck();
|
|
81
47
|
}
|
|
48
|
+
/**
|
|
49
|
+
* @hidden
|
|
50
|
+
*
|
|
51
|
+
* @param {string} value
|
|
52
|
+
*
|
|
53
|
+
* @memberOf PagerInputComponent
|
|
54
|
+
*/
|
|
55
|
+
handleKeyDown = (event) => {
|
|
56
|
+
const incomingValue = this.numericInput.value || this.current;
|
|
57
|
+
// eslint-disable import/no-deprecated
|
|
58
|
+
if (event.keyCode === Keys.Enter) {
|
|
59
|
+
event.preventDefault();
|
|
60
|
+
if (incomingValue !== this.current) {
|
|
61
|
+
this.zone.run(() => {
|
|
62
|
+
this.changePage(incomingValue - 1);
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
/**
|
|
68
|
+
* @hidden
|
|
69
|
+
*
|
|
70
|
+
* @param {string} value
|
|
71
|
+
*
|
|
72
|
+
* @memberOf PagerInputComponent
|
|
73
|
+
*/
|
|
74
|
+
handleBlur = () => {
|
|
75
|
+
const inputValue = this.numericInput.value;
|
|
76
|
+
if (!inputValue) {
|
|
77
|
+
this.numericInput.writeValue(this.current);
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
if (inputValue !== this.current) {
|
|
81
|
+
this.zone.run(() => {
|
|
82
|
+
this.changePage(inputValue - 1);
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
};
|
|
82
86
|
/**
|
|
83
87
|
* @hidden
|
|
84
88
|
*/
|
|
@@ -91,10 +95,9 @@ export class PagerInputComponent extends PagerElementComponent {
|
|
|
91
95
|
get hasPages() {
|
|
92
96
|
return this.totalPages !== 0;
|
|
93
97
|
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
<span [ngClass]="{'k-pager-input': true, 'k-label': true}">
|
|
98
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
99
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerInputComponent, isStandalone: true, selector: "kendo-datapager-input", inputs: { size: "size" }, viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
|
|
100
|
+
<span class="k-pager-input">
|
|
98
101
|
{{textFor('page')}}
|
|
99
102
|
<kendo-numerictextbox kendoPagerFocusable
|
|
100
103
|
[spinners]="false"
|
|
@@ -117,13 +120,14 @@ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
|
|
|
117
120
|
</kendo-numerictextbox>
|
|
118
121
|
{{textFor('of')}} {{totalPages}}
|
|
119
122
|
</span>
|
|
120
|
-
`, isInline: true, dependencies: [{ kind: "
|
|
121
|
-
|
|
123
|
+
`, isInline: true, dependencies: [{ kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
|
|
124
|
+
}
|
|
125
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerInputComponent, decorators: [{
|
|
122
126
|
type: Component,
|
|
123
127
|
args: [{
|
|
124
128
|
selector: 'kendo-datapager-input',
|
|
125
129
|
template: `
|
|
126
|
-
<span
|
|
130
|
+
<span class="k-pager-input">
|
|
127
131
|
{{textFor('page')}}
|
|
128
132
|
<kendo-numerictextbox kendoPagerFocusable
|
|
129
133
|
[spinners]="false"
|
|
@@ -17,19 +17,6 @@ import * as i2 from "./pager-context.service";
|
|
|
17
17
|
* Displays buttons for navigating to the next and to the last page ([see example]({% slug pager_settings %})).
|
|
18
18
|
*/
|
|
19
19
|
export class PagerNextButtonsComponent extends PagerElementComponent {
|
|
20
|
-
constructor(localization, pagerContext, cd) {
|
|
21
|
-
super(localization, pagerContext, cd);
|
|
22
|
-
/**
|
|
23
|
-
* Specifies the padding of the buttons.
|
|
24
|
-
*
|
|
25
|
-
* The possible values are:
|
|
26
|
-
* * `small`
|
|
27
|
-
* * `medium` (default)
|
|
28
|
-
* * `large`
|
|
29
|
-
* * `none`
|
|
30
|
-
*/
|
|
31
|
-
this.size = DEFAULT_SIZE;
|
|
32
|
-
}
|
|
33
20
|
/**
|
|
34
21
|
* @hidden
|
|
35
22
|
*
|
|
@@ -40,15 +27,27 @@ export class PagerNextButtonsComponent extends PagerElementComponent {
|
|
|
40
27
|
get disabled() {
|
|
41
28
|
return this.currentPage === this.totalPages || !this.total;
|
|
42
29
|
}
|
|
30
|
+
/**
|
|
31
|
+
* Specifies the padding of the buttons.
|
|
32
|
+
*
|
|
33
|
+
* The possible values are:
|
|
34
|
+
* * `small`
|
|
35
|
+
* * `medium` (default)
|
|
36
|
+
* * `large`
|
|
37
|
+
* * `none`
|
|
38
|
+
*/
|
|
39
|
+
size = DEFAULT_SIZE;
|
|
40
|
+
constructor(localization, pagerContext, cd) {
|
|
41
|
+
super(localization, pagerContext, cd);
|
|
42
|
+
}
|
|
43
43
|
onChanges({ total, skip, pageSize }) {
|
|
44
44
|
this.total = total;
|
|
45
45
|
this.skip = skip;
|
|
46
46
|
this.pageSize = pageSize;
|
|
47
47
|
this.cd.markForCheck();
|
|
48
48
|
}
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerNextButtonsComponent, isStandalone: true, selector: "kendo-datapager-next-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
|
|
49
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
50
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerNextButtonsComponent, isStandalone: true, selector: "kendo-datapager-next-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
|
|
52
51
|
<button kendoButton kendoPagerFocusable
|
|
53
52
|
type="button"
|
|
54
53
|
[size]="size"
|
|
@@ -75,8 +74,9 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
|
|
|
75
74
|
[attr.aria-label]="textFor('lastPage')"
|
|
76
75
|
(click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
|
|
77
76
|
</button>
|
|
78
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]
|
|
79
|
-
|
|
77
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
78
|
+
}
|
|
79
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
|
|
80
80
|
type: Component,
|
|
81
81
|
args: [{
|
|
82
82
|
changeDetection: ChangeDetectionStrategy.OnPush,
|