@progress/kendo-angular-grid 17.0.0-develop.33 → 17.0.0-develop.35
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/{pager → common}/pager-settings.d.ts +13 -0
- package/directives.d.ts +2 -18
- package/esm2022/directives.mjs +2 -28
- package/esm2022/grid.component.mjs +172 -37
- package/esm2022/grid.module.mjs +91 -97
- package/esm2022/index.mjs +0 -13
- package/esm2022/localization/messages.mjs +13 -7
- package/esm2022/navigation/navigation.service.mjs +2 -2
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/rendering/common/spacer.component.mjs +2 -2
- package/fesm2022/progress-kendo-angular-grid.mjs +353 -1716
- package/grid.component.d.ts +4 -5
- package/grid.module.d.ts +85 -94
- package/index.d.ts +1 -16
- package/localization/messages.d.ts +10 -6
- package/navigation/navigation.service.d.ts +1 -1
- package/package.json +18 -17
- package/rendering/common/spacer.component.d.ts +1 -1
- package/schematics/ngAdd/index.js +4 -4
- package/esm2022/pager/pager-context.service.mjs +0 -42
- package/esm2022/pager/pager-dropdown.directive.mjs +0 -40
- package/esm2022/pager/pager-element.component.mjs +0 -116
- package/esm2022/pager/pager-info.component.mjs +0 -77
- package/esm2022/pager/pager-input.component.mjs +0 -146
- package/esm2022/pager/pager-input.directive.mjs +0 -32
- package/esm2022/pager/pager-next-buttons.component.mjs +0 -115
- package/esm2022/pager/pager-numeric-buttons.component.mjs +0 -267
- package/esm2022/pager/pager-page-sizes.component.mjs +0 -147
- package/esm2022/pager/pager-prev-buttons.component.mjs +0 -117
- package/esm2022/pager/pager-template.directive.mjs +0 -49
- package/esm2022/pager/pager.component.mjs +0 -471
- package/esm2022/pager/pager.module.mjs +0 -51
- package/esm2022/pager/pagesize-item.interface.mjs +0 -5
- package/pager/pager-context.service.d.ts +0 -30
- package/pager/pager-dropdown.directive.d.ts +0 -18
- package/pager/pager-element.component.d.ts +0 -79
- package/pager/pager-info.component.d.ts +0 -43
- package/pager/pager-input.component.d.ts +0 -45
- package/pager/pager-input.directive.d.ts +0 -18
- package/pager/pager-next-buttons.component.d.ts +0 -28
- package/pager/pager-numeric-buttons.component.d.ts +0 -52
- package/pager/pager-page-sizes.component.d.ts +0 -49
- package/pager/pager-prev-buttons.component.d.ts +0 -28
- package/pager/pager-template.directive.d.ts +0 -38
- package/pager/pager.component.d.ts +0 -80
- package/pager/pager.module.d.ts +0 -37
- package/pager/pagesize-item.interface.d.ts +0 -14
- /package/esm2022/{pager → common}/pager-settings.mjs +0 -0
|
@@ -1,471 +0,0 @@
|
|
|
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 { Component, Input, EventEmitter, Output, HostBinding, ElementRef, Renderer2, HostListener, NgZone, Optional, Inject, ViewChild } from '@angular/core';
|
|
6
|
-
import { normalize } from './pager-settings';
|
|
7
|
-
import { PagerTemplateDirective } from './pager-template.directive';
|
|
8
|
-
import { anyChanged, replaceMessagePlaceholder } from '../utils';
|
|
9
|
-
import { PagerContextService } from './pager-context.service';
|
|
10
|
-
import { Subscription } from 'rxjs';
|
|
11
|
-
import { RESPONSIVE_BREAKPOINT_LARGE, RESPONSIVE_BREAKPOINT_MEDIUM } from '../constants';
|
|
12
|
-
import { NavigationService } from '../navigation/navigation.service';
|
|
13
|
-
import { take } from 'rxjs/operators';
|
|
14
|
-
import { CELL_CONTEXT } from '../rendering/common/cell-context';
|
|
15
|
-
import { FocusGroup } from '../navigation/focus-group';
|
|
16
|
-
import { FocusRoot, FOCUS_ROOT_ACTIVE } from '../navigation/focus-root';
|
|
17
|
-
import { findFocusableChild, findLastFocusableChild } from '../rendering/common/dom-queries';
|
|
18
|
-
import { ContextService } from '../common/provider.service';
|
|
19
|
-
import { PagerInfoComponent } from './pager-info.component';
|
|
20
|
-
import { PagerPageSizesComponent } from './pager-page-sizes.component';
|
|
21
|
-
import { PagerNumericButtonsComponent } from './pager-numeric-buttons.component';
|
|
22
|
-
import { PagerNextButtonsComponent } from './pager-next-buttons.component';
|
|
23
|
-
import { PagerInputComponent } from './pager-input.component';
|
|
24
|
-
import { PagerPrevButtonsComponent } from './pager-prev-buttons.component';
|
|
25
|
-
import { NgIf, NgTemplateOutlet } from '@angular/common';
|
|
26
|
-
import { ResizeSensorComponent } from '@progress/kendo-angular-common';
|
|
27
|
-
import * as i0 from "@angular/core";
|
|
28
|
-
import * as i1 from "./pager-context.service";
|
|
29
|
-
import * as i2 from "../navigation/navigation.service";
|
|
30
|
-
import * as i3 from "../common/provider.service";
|
|
31
|
-
import * as i4 from "../navigation/focus-root";
|
|
32
|
-
import * as i5 from "../navigation/focus-group";
|
|
33
|
-
/**
|
|
34
|
-
* @hidden
|
|
35
|
-
*/
|
|
36
|
-
export class PagerComponent {
|
|
37
|
-
pagerContext;
|
|
38
|
-
navigationService;
|
|
39
|
-
element;
|
|
40
|
-
renderer;
|
|
41
|
-
zone;
|
|
42
|
-
ctx;
|
|
43
|
-
cellContext;
|
|
44
|
-
focusRoot;
|
|
45
|
-
focusGroup;
|
|
46
|
-
pagerInfo;
|
|
47
|
-
pagerPageSizes;
|
|
48
|
-
numericButtons;
|
|
49
|
-
total = 0;
|
|
50
|
-
skip = 1;
|
|
51
|
-
pageSize;
|
|
52
|
-
set options(value) {
|
|
53
|
-
this.settings = normalize(value);
|
|
54
|
-
}
|
|
55
|
-
set size(size) {
|
|
56
|
-
this._size = size;
|
|
57
|
-
if (size === 'none') {
|
|
58
|
-
this.element.nativeElement.classList.remove('k-pager-sm', 'k-pager-md');
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
get size() {
|
|
62
|
-
return this._size;
|
|
63
|
-
}
|
|
64
|
-
template;
|
|
65
|
-
pageChange = new EventEmitter();
|
|
66
|
-
gridPagerClass = true;
|
|
67
|
-
get sizeSmallClass() {
|
|
68
|
-
return this.size === 'small';
|
|
69
|
-
}
|
|
70
|
-
get sizeMediumClass() {
|
|
71
|
-
return this.size === 'medium' || !this.size;
|
|
72
|
-
}
|
|
73
|
-
settings = normalize({});
|
|
74
|
-
subscriptions = new Subscription();
|
|
75
|
-
_templateContext = {};
|
|
76
|
-
_isFocused = false;
|
|
77
|
-
_size = 'medium';
|
|
78
|
-
get isFocused() {
|
|
79
|
-
return this._isFocused;
|
|
80
|
-
}
|
|
81
|
-
get pagerAriaLabel() {
|
|
82
|
-
return this.navigationService.pagerEnabled ? this.pagerLabel : undefined;
|
|
83
|
-
}
|
|
84
|
-
get pagerLabel() {
|
|
85
|
-
const localizationMsg = this.ctx.localization.get('pagerLabel') || '';
|
|
86
|
-
return replaceMessagePlaceholder(replaceMessagePlaceholder(localizationMsg, 'currentPage', this.currentPage.toString()), 'totalPages', this.totalPages.toString());
|
|
87
|
-
}
|
|
88
|
-
get focusTrapTabIndex() {
|
|
89
|
-
return this.focusGroup.isActive ? '0' : '-1';
|
|
90
|
-
}
|
|
91
|
-
onFocusIn(event) {
|
|
92
|
-
if (this.navigationService.pagerEnabled) {
|
|
93
|
-
const shouldFocusPager = event.target === this.element.nativeElement;
|
|
94
|
-
if (shouldFocusPager) {
|
|
95
|
-
this._isFocused = true;
|
|
96
|
-
this.focusRoot.deactivate();
|
|
97
|
-
}
|
|
98
|
-
else {
|
|
99
|
-
this.focusRoot.activate();
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
onFocusOut() {
|
|
104
|
-
if (this.navigationService.pagerEnabled) {
|
|
105
|
-
this._isFocused = false;
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
onEscape() {
|
|
109
|
-
if (this.navigationService.pagerEnabled) {
|
|
110
|
-
this.focusRoot.deactivate();
|
|
111
|
-
this.element.nativeElement.focus();
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
onEnter(event) {
|
|
115
|
-
if (this.navigationService.pagerEnabled && event.target === this.element.nativeElement) {
|
|
116
|
-
event.preventDefault();
|
|
117
|
-
this.focusRoot.activate();
|
|
118
|
-
this.focusFirstElement();
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
navigateToPreviousPage(e) {
|
|
122
|
-
e.preventDefault();
|
|
123
|
-
if (this.shouldTriggerPageChange(e.target, this.currentPage > 1)) {
|
|
124
|
-
this.pagerContext.prevPage();
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
navigateToNextPage(e) {
|
|
128
|
-
e.preventDefault();
|
|
129
|
-
if (this.shouldTriggerPageChange(e.target, this.currentPage < this.totalPages)) {
|
|
130
|
-
this.pagerContext.nextPage();
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
navigateToFirstPage(e) {
|
|
134
|
-
e.preventDefault();
|
|
135
|
-
if (this.shouldTriggerPageChange(e.target, this.currentPage > 1)) {
|
|
136
|
-
this.pagerContext.changePage(0);
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
navigateToLastPage(e) {
|
|
140
|
-
e.preventDefault();
|
|
141
|
-
if (this.shouldTriggerPageChange(e.target, this.currentPage < this.totalPages)) {
|
|
142
|
-
this.pagerContext.changePage(this.totalPages - 1);
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
get totalPages() {
|
|
146
|
-
return Math.ceil((this.total || 0) / this.pageSize);
|
|
147
|
-
}
|
|
148
|
-
get currentPage() {
|
|
149
|
-
return Math.floor((this.skip || 0) / this.pageSize) + 1;
|
|
150
|
-
}
|
|
151
|
-
get templateContext() {
|
|
152
|
-
const context = this._templateContext;
|
|
153
|
-
context.totalPages = this.totalPages;
|
|
154
|
-
context.total = this.total;
|
|
155
|
-
context.skip = this.skip;
|
|
156
|
-
context.pageSize = this.pageSize;
|
|
157
|
-
context.currentPage = this.currentPage;
|
|
158
|
-
return context;
|
|
159
|
-
}
|
|
160
|
-
constructor(pagerContext, navigationService, element, renderer, zone, ctx, cellContext, focusRoot, focusGroup) {
|
|
161
|
-
this.pagerContext = pagerContext;
|
|
162
|
-
this.navigationService = navigationService;
|
|
163
|
-
this.element = element;
|
|
164
|
-
this.renderer = renderer;
|
|
165
|
-
this.zone = zone;
|
|
166
|
-
this.ctx = ctx;
|
|
167
|
-
this.cellContext = cellContext;
|
|
168
|
-
this.focusRoot = focusRoot;
|
|
169
|
-
this.focusGroup = focusGroup;
|
|
170
|
-
}
|
|
171
|
-
ngOnInit() {
|
|
172
|
-
this.subscriptions.add(this.pagerContext.pageChange.subscribe(this.changePage.bind(this)));
|
|
173
|
-
if (this.navigationService.pagerEnabled) {
|
|
174
|
-
this.focusRoot.deactivate();
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
ngDoCheck() {
|
|
178
|
-
this.updateCellContext();
|
|
179
|
-
}
|
|
180
|
-
ngOnChanges(changes) {
|
|
181
|
-
if (anyChanged(['pageSize', 'skip', 'total'], changes, false)) {
|
|
182
|
-
this.pagerContext.notifyChanges({
|
|
183
|
-
pageSize: this.pageSize,
|
|
184
|
-
skip: this.skip,
|
|
185
|
-
total: this.total
|
|
186
|
-
});
|
|
187
|
-
}
|
|
188
|
-
const changesInTemplate = changes['template'];
|
|
189
|
-
if (changesInTemplate) {
|
|
190
|
-
changesInTemplate.currentValue ? this.clearResponsiveStyling() : this.resizeHandler();
|
|
191
|
-
}
|
|
192
|
-
if (changes['options']) {
|
|
193
|
-
this.settings.responsive ? this.resizeHandler() : this.clearResponsiveStyling();
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
ngOnDestroy() {
|
|
197
|
-
if (this.subscriptions) {
|
|
198
|
-
this.subscriptions.unsubscribe();
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
changePage(event) {
|
|
202
|
-
this.pageChange.emit(event);
|
|
203
|
-
}
|
|
204
|
-
resizeHandler = () => {
|
|
205
|
-
const element = this.element.nativeElement;
|
|
206
|
-
if (this.template || !element) {
|
|
207
|
-
return;
|
|
208
|
-
}
|
|
209
|
-
this.zone.runOutsideAngular(() => {
|
|
210
|
-
setTimeout(() => {
|
|
211
|
-
const width = element.offsetWidth;
|
|
212
|
-
if (this.numericButtons) {
|
|
213
|
-
const selectElement = this.numericButtons.selectElement.nativeElement;
|
|
214
|
-
const numbersElement = this.numericButtons.numbersElement.nativeElement;
|
|
215
|
-
this.renderer.removeStyle(numbersElement, 'display');
|
|
216
|
-
this.renderer.setStyle(selectElement, 'display', 'none');
|
|
217
|
-
if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
|
|
218
|
-
this.renderer.removeStyle(selectElement, 'display');
|
|
219
|
-
this.renderer.setStyle(numbersElement, 'display', 'none');
|
|
220
|
-
}
|
|
221
|
-
}
|
|
222
|
-
if (this.pagerInfo) {
|
|
223
|
-
this.renderer.removeStyle(this.pagerInfo.nativeElement, 'display');
|
|
224
|
-
if (width < RESPONSIVE_BREAKPOINT_LARGE) {
|
|
225
|
-
this.renderer.setStyle(this.pagerInfo.nativeElement, 'display', 'none');
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
if (this.pagerPageSizes) {
|
|
229
|
-
this.renderer.removeStyle(this.pagerPageSizes.nativeElement, 'display');
|
|
230
|
-
if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
|
|
231
|
-
this.renderer.setStyle(this.pagerPageSizes.nativeElement, 'display', 'none');
|
|
232
|
-
}
|
|
233
|
-
}
|
|
234
|
-
});
|
|
235
|
-
});
|
|
236
|
-
};
|
|
237
|
-
onInnerFocusIn(event, position) {
|
|
238
|
-
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
239
|
-
if (position === 'start') {
|
|
240
|
-
if (event.relatedTarget === this.element.nativeElement) {
|
|
241
|
-
this.focusFirstElement();
|
|
242
|
-
}
|
|
243
|
-
else {
|
|
244
|
-
this.focusLastElement();
|
|
245
|
-
}
|
|
246
|
-
}
|
|
247
|
-
else {
|
|
248
|
-
this.focusFirstElement();
|
|
249
|
-
}
|
|
250
|
-
});
|
|
251
|
-
}
|
|
252
|
-
shouldTriggerPageChange(target, condition) {
|
|
253
|
-
return this.navigationService.pagerEnabled &&
|
|
254
|
-
target === this.element.nativeElement &&
|
|
255
|
-
condition;
|
|
256
|
-
}
|
|
257
|
-
focusFirstElement() {
|
|
258
|
-
const first = findFocusableChild(this.element.nativeElement, true);
|
|
259
|
-
if (first) {
|
|
260
|
-
first.focus();
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
|
-
focusLastElement() {
|
|
264
|
-
const last = findLastFocusableChild(this.element.nativeElement, true);
|
|
265
|
-
if (last) {
|
|
266
|
-
last.focus();
|
|
267
|
-
}
|
|
268
|
-
}
|
|
269
|
-
updateCellContext() {
|
|
270
|
-
if (this.cellContext) {
|
|
271
|
-
this.cellContext.focusGroup = this.focusGroup;
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
clearResponsiveStyling() {
|
|
275
|
-
this.zone.runOutsideAngular(() => {
|
|
276
|
-
setTimeout(() => {
|
|
277
|
-
if (this.numericButtons) {
|
|
278
|
-
this.renderer.removeStyle(this.numericButtons.numbersElement.nativeElement, 'display');
|
|
279
|
-
this.renderer.setStyle(this.numericButtons.selectElement.nativeElement, 'display', 'none');
|
|
280
|
-
}
|
|
281
|
-
this.pagerInfo && this.renderer.removeStyle(this.pagerInfo.nativeElement, 'display');
|
|
282
|
-
this.pagerPageSizes && this.renderer.removeStyle(this.pagerPageSizes.nativeElement, 'display');
|
|
283
|
-
});
|
|
284
|
-
});
|
|
285
|
-
}
|
|
286
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerComponent, deps: [{ token: i1.PagerContextService }, { token: i2.NavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.ContextService }, { token: CELL_CONTEXT, optional: true }, { token: i4.FocusRoot }, { token: i5.FocusGroup }], target: i0.ɵɵFactoryTarget.Component });
|
|
287
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerComponent, isStandalone: true, selector: "kendo-pager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", options: "options", size: "size", template: "template" }, outputs: { pageChange: "pageChange" }, host: { listeners: { "focusin": "onFocusIn($event)", "focusout": "onFocusOut()", "keydown.escape": "onEscape()", "keydown.enter": "onEnter($event)", "keydown.arrowleft": "navigateToPreviousPage($event)", "keydown.pageup": "navigateToPreviousPage($event)", "keydown.arrowright": "navigateToNextPage($event)", "keydown.pagedown": "navigateToNextPage($event)", "keydown.home": "navigateToFirstPage($event)", "keydown.end": "navigateToLastPage($event)" }, properties: { "class.k-grid-pager": "this.gridPagerClass", "class.k-pager-sm": "this.sizeSmallClass", "class.k-pager-md": "this.sizeMediumClass", "class.k-focus": "this.isFocused", "attr.aria-label": "this.pagerAriaLabel" } }, providers: [{
|
|
288
|
-
provide: FOCUS_ROOT_ACTIVE,
|
|
289
|
-
useValue: true
|
|
290
|
-
}, {
|
|
291
|
-
provide: FocusRoot,
|
|
292
|
-
deps: [FOCUS_ROOT_ACTIVE],
|
|
293
|
-
useClass: FocusRoot
|
|
294
|
-
}, {
|
|
295
|
-
provide: FocusGroup,
|
|
296
|
-
deps: [FocusRoot],
|
|
297
|
-
useClass: FocusGroup
|
|
298
|
-
}], viewQueries: [{ propertyName: "pagerInfo", first: true, predicate: PagerInfoComponent, descendants: true, read: ElementRef }, { propertyName: "pagerPageSizes", first: true, predicate: PagerPageSizesComponent, descendants: true, read: ElementRef }, { propertyName: "numericButtons", first: true, predicate: PagerNumericButtonsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
299
|
-
<div
|
|
300
|
-
*ngIf="navigationService.pagerEnabled"
|
|
301
|
-
class="k-sr-only"
|
|
302
|
-
[tabindex]="focusTrapTabIndex"
|
|
303
|
-
[attr.aria-hidden]="true"
|
|
304
|
-
(focusin)="onInnerFocusIn($event, 'start')">
|
|
305
|
-
</div>
|
|
306
|
-
<ng-container
|
|
307
|
-
*ngIf="template?.templateRef"
|
|
308
|
-
[ngTemplateOutlet]="template.templateRef"
|
|
309
|
-
[ngTemplateOutletContext]="templateContext">
|
|
310
|
-
</ng-container>
|
|
311
|
-
<ng-container *ngIf="!template?.templateRef">
|
|
312
|
-
<div class="k-pager-numbers-wrap">
|
|
313
|
-
<kendo-pager-prev-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
|
|
314
|
-
<kendo-pager-numeric-buttons
|
|
315
|
-
[size]="size"
|
|
316
|
-
*ngIf="settings.type === 'numeric'"
|
|
317
|
-
[buttonCount]="settings.buttonCount">
|
|
318
|
-
</kendo-pager-numeric-buttons>
|
|
319
|
-
<kendo-pager-input [size]="size" *ngIf="settings.type === 'input'"></kendo-pager-input>
|
|
320
|
-
<kendo-pager-next-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-next-buttons>
|
|
321
|
-
</div>
|
|
322
|
-
<kendo-pager-info *ngIf='settings.info'></kendo-pager-info>
|
|
323
|
-
<kendo-pager-page-sizes
|
|
324
|
-
[size]="size"
|
|
325
|
-
*ngIf="settings.pageSizes"
|
|
326
|
-
[pageSizes]="$any(settings.pageSizes)"
|
|
327
|
-
></kendo-pager-page-sizes>
|
|
328
|
-
</ng-container>
|
|
329
|
-
<div
|
|
330
|
-
*ngIf="navigationService.pagerEnabled"
|
|
331
|
-
class="k-sr-only"
|
|
332
|
-
[tabindex]="focusTrapTabIndex"
|
|
333
|
-
[attr.aria-hidden]="true"
|
|
334
|
-
(focusin)="onInnerFocusIn($event, 'end')">
|
|
335
|
-
</div>
|
|
336
|
-
<kendo-resize-sensor *ngIf="settings.responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
|
|
337
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons" }, { kind: "component", type: PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: ["buttonCount"] }, { kind: "component", type: PagerInputComponent, selector: "kendo-pager-input" }, { kind: "component", type: PagerNextButtonsComponent, selector: "kendo-pager-next-buttons" }, { kind: "component", type: PagerInfoComponent, selector: "kendo-pager-info" }, { kind: "component", type: PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: ["pageSizes"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
|
|
338
|
-
}
|
|
339
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerComponent, decorators: [{
|
|
340
|
-
type: Component,
|
|
341
|
-
args: [{
|
|
342
|
-
selector: 'kendo-pager',
|
|
343
|
-
providers: [{
|
|
344
|
-
provide: FOCUS_ROOT_ACTIVE,
|
|
345
|
-
useValue: true
|
|
346
|
-
}, {
|
|
347
|
-
provide: FocusRoot,
|
|
348
|
-
deps: [FOCUS_ROOT_ACTIVE],
|
|
349
|
-
useClass: FocusRoot
|
|
350
|
-
}, {
|
|
351
|
-
provide: FocusGroup,
|
|
352
|
-
deps: [FocusRoot],
|
|
353
|
-
useClass: FocusGroup
|
|
354
|
-
}],
|
|
355
|
-
template: `
|
|
356
|
-
<div
|
|
357
|
-
*ngIf="navigationService.pagerEnabled"
|
|
358
|
-
class="k-sr-only"
|
|
359
|
-
[tabindex]="focusTrapTabIndex"
|
|
360
|
-
[attr.aria-hidden]="true"
|
|
361
|
-
(focusin)="onInnerFocusIn($event, 'start')">
|
|
362
|
-
</div>
|
|
363
|
-
<ng-container
|
|
364
|
-
*ngIf="template?.templateRef"
|
|
365
|
-
[ngTemplateOutlet]="template.templateRef"
|
|
366
|
-
[ngTemplateOutletContext]="templateContext">
|
|
367
|
-
</ng-container>
|
|
368
|
-
<ng-container *ngIf="!template?.templateRef">
|
|
369
|
-
<div class="k-pager-numbers-wrap">
|
|
370
|
-
<kendo-pager-prev-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
|
|
371
|
-
<kendo-pager-numeric-buttons
|
|
372
|
-
[size]="size"
|
|
373
|
-
*ngIf="settings.type === 'numeric'"
|
|
374
|
-
[buttonCount]="settings.buttonCount">
|
|
375
|
-
</kendo-pager-numeric-buttons>
|
|
376
|
-
<kendo-pager-input [size]="size" *ngIf="settings.type === 'input'"></kendo-pager-input>
|
|
377
|
-
<kendo-pager-next-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-next-buttons>
|
|
378
|
-
</div>
|
|
379
|
-
<kendo-pager-info *ngIf='settings.info'></kendo-pager-info>
|
|
380
|
-
<kendo-pager-page-sizes
|
|
381
|
-
[size]="size"
|
|
382
|
-
*ngIf="settings.pageSizes"
|
|
383
|
-
[pageSizes]="$any(settings.pageSizes)"
|
|
384
|
-
></kendo-pager-page-sizes>
|
|
385
|
-
</ng-container>
|
|
386
|
-
<div
|
|
387
|
-
*ngIf="navigationService.pagerEnabled"
|
|
388
|
-
class="k-sr-only"
|
|
389
|
-
[tabindex]="focusTrapTabIndex"
|
|
390
|
-
[attr.aria-hidden]="true"
|
|
391
|
-
(focusin)="onInnerFocusIn($event, 'end')">
|
|
392
|
-
</div>
|
|
393
|
-
<kendo-resize-sensor *ngIf="settings.responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
|
|
394
|
-
`,
|
|
395
|
-
standalone: true,
|
|
396
|
-
imports: [NgIf, NgTemplateOutlet, PagerPrevButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerNextButtonsComponent, PagerInfoComponent, PagerPageSizesComponent, ResizeSensorComponent]
|
|
397
|
-
}]
|
|
398
|
-
}], ctorParameters: function () { return [{ type: i1.PagerContextService }, { type: i2.NavigationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.ContextService }, { type: undefined, decorators: [{
|
|
399
|
-
type: Optional
|
|
400
|
-
}, {
|
|
401
|
-
type: Inject,
|
|
402
|
-
args: [CELL_CONTEXT]
|
|
403
|
-
}] }, { type: i4.FocusRoot }, { type: i5.FocusGroup }]; }, propDecorators: { pagerInfo: [{
|
|
404
|
-
type: ViewChild,
|
|
405
|
-
args: [PagerInfoComponent, { read: ElementRef }]
|
|
406
|
-
}], pagerPageSizes: [{
|
|
407
|
-
type: ViewChild,
|
|
408
|
-
args: [PagerPageSizesComponent, { read: ElementRef }]
|
|
409
|
-
}], numericButtons: [{
|
|
410
|
-
type: ViewChild,
|
|
411
|
-
args: [PagerNumericButtonsComponent]
|
|
412
|
-
}], total: [{
|
|
413
|
-
type: Input
|
|
414
|
-
}], skip: [{
|
|
415
|
-
type: Input
|
|
416
|
-
}], pageSize: [{
|
|
417
|
-
type: Input
|
|
418
|
-
}], options: [{
|
|
419
|
-
type: Input
|
|
420
|
-
}], size: [{
|
|
421
|
-
type: Input
|
|
422
|
-
}], template: [{
|
|
423
|
-
type: Input
|
|
424
|
-
}], pageChange: [{
|
|
425
|
-
type: Output
|
|
426
|
-
}], gridPagerClass: [{
|
|
427
|
-
type: HostBinding,
|
|
428
|
-
args: ['class.k-grid-pager']
|
|
429
|
-
}], sizeSmallClass: [{
|
|
430
|
-
type: HostBinding,
|
|
431
|
-
args: ['class.k-pager-sm']
|
|
432
|
-
}], sizeMediumClass: [{
|
|
433
|
-
type: HostBinding,
|
|
434
|
-
args: ['class.k-pager-md']
|
|
435
|
-
}], isFocused: [{
|
|
436
|
-
type: HostBinding,
|
|
437
|
-
args: ['class.k-focus']
|
|
438
|
-
}], pagerAriaLabel: [{
|
|
439
|
-
type: HostBinding,
|
|
440
|
-
args: ['attr.aria-label']
|
|
441
|
-
}], onFocusIn: [{
|
|
442
|
-
type: HostListener,
|
|
443
|
-
args: ['focusin', ['$event']]
|
|
444
|
-
}], onFocusOut: [{
|
|
445
|
-
type: HostListener,
|
|
446
|
-
args: ['focusout']
|
|
447
|
-
}], onEscape: [{
|
|
448
|
-
type: HostListener,
|
|
449
|
-
args: ['keydown.escape']
|
|
450
|
-
}], onEnter: [{
|
|
451
|
-
type: HostListener,
|
|
452
|
-
args: ['keydown.enter', ['$event']]
|
|
453
|
-
}], navigateToPreviousPage: [{
|
|
454
|
-
type: HostListener,
|
|
455
|
-
args: ['keydown.arrowleft', ['$event']]
|
|
456
|
-
}, {
|
|
457
|
-
type: HostListener,
|
|
458
|
-
args: ['keydown.pageup', ['$event']]
|
|
459
|
-
}], navigateToNextPage: [{
|
|
460
|
-
type: HostListener,
|
|
461
|
-
args: ['keydown.arrowright', ['$event']]
|
|
462
|
-
}, {
|
|
463
|
-
type: HostListener,
|
|
464
|
-
args: ['keydown.pagedown', ['$event']]
|
|
465
|
-
}], navigateToFirstPage: [{
|
|
466
|
-
type: HostListener,
|
|
467
|
-
args: ['keydown.home', ['$event']]
|
|
468
|
-
}], navigateToLastPage: [{
|
|
469
|
-
type: HostListener,
|
|
470
|
-
args: ['keydown.end', ['$event']]
|
|
471
|
-
}] } });
|
|
@@ -1,51 +0,0 @@
|
|
|
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 { NgModule } from '@angular/core';
|
|
6
|
-
import { ResizeBatchService } from '@progress/kendo-angular-common';
|
|
7
|
-
import { IconsService } from '@progress/kendo-angular-icons';
|
|
8
|
-
import { PopupService } from '@progress/kendo-angular-popup';
|
|
9
|
-
import { DialogContainerService, DialogService, WindowContainerService, WindowService } from '@progress/kendo-angular-dialog';
|
|
10
|
-
import { KENDO_GRID_PAGER_EXPORTS, KENDO_GRID_SHARED } from '../directives';
|
|
11
|
-
import * as i0 from "@angular/core";
|
|
12
|
-
import * as i1 from "../columns/column.component";
|
|
13
|
-
import * as i2 from "../columns/column-group.component";
|
|
14
|
-
import * as i3 from "../navigation/logical-cell.directive";
|
|
15
|
-
import * as i4 from "../navigation/logical-row.directive";
|
|
16
|
-
import * as i5 from "../navigation/focusable.directive";
|
|
17
|
-
import * as i6 from "../rendering/footer/footer-template.directive";
|
|
18
|
-
import * as i7 from "../rendering/common/col-group.component";
|
|
19
|
-
import * as i8 from "../layout/resizable.directive";
|
|
20
|
-
import * as i9 from "@progress/kendo-angular-common";
|
|
21
|
-
import * as i10 from "../rendering/common/field-accessor.pipe";
|
|
22
|
-
import * as i11 from "../rendering/details/detail-template.directive";
|
|
23
|
-
import * as i12 from "../columns/span-column.component";
|
|
24
|
-
import * as i13 from "../rendering/common/loading.component";
|
|
25
|
-
import * as i14 from "../rendering/grid-table.directive";
|
|
26
|
-
import * as i15 from "./pager.component";
|
|
27
|
-
import * as i16 from "./pager-prev-buttons.component";
|
|
28
|
-
import * as i17 from "./pager-next-buttons.component";
|
|
29
|
-
import * as i18 from "./pager-numeric-buttons.component";
|
|
30
|
-
import * as i19 from "./pager-input.component";
|
|
31
|
-
import * as i20 from "./pager-info.component";
|
|
32
|
-
import * as i21 from "./pager-page-sizes.component";
|
|
33
|
-
import * as i22 from "./pager-template.directive";
|
|
34
|
-
import * as i23 from "./pager-dropdown.directive";
|
|
35
|
-
import * as i24 from "./pager-input.directive";
|
|
36
|
-
/**
|
|
37
|
-
* @hidden
|
|
38
|
-
*/
|
|
39
|
-
export class PagerModule {
|
|
40
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
41
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, imports: [i1.ColumnComponent, i2.ColumnGroupComponent, i3.LogicalCellDirective, i4.LogicalRowDirective, i5.FocusableDirective, i6.FooterTemplateDirective, i7.ColGroupComponent, i8.ResizableContainerDirective, i9.TemplateContextDirective, i10.FieldAccessorPipe, i11.DetailTemplateDirective, i12.SpanColumnComponent, i13.LoadingComponent, i14.GridTableDirective, i15.PagerComponent, i16.PagerPrevButtonsComponent, i17.PagerNextButtonsComponent, i18.PagerNumericButtonsComponent, i19.PagerInputComponent, i20.PagerInfoComponent, i21.PagerPageSizesComponent, i22.PagerTemplateDirective, i23.PagerDropDownListDirective, i24.PagerInputDirective], exports: [i15.PagerComponent, i16.PagerPrevButtonsComponent, i17.PagerNextButtonsComponent, i18.PagerNumericButtonsComponent, i19.PagerInputComponent, i20.PagerInfoComponent, i21.PagerPageSizesComponent, i22.PagerTemplateDirective, i23.PagerDropDownListDirective, i24.PagerInputDirective] });
|
|
42
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [i15.PagerComponent, i16.PagerPrevButtonsComponent, i17.PagerNextButtonsComponent, i18.PagerNumericButtonsComponent, i19.PagerInputComponent, i21.PagerPageSizesComponent] });
|
|
43
|
-
}
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, decorators: [{
|
|
45
|
-
type: NgModule,
|
|
46
|
-
args: [{
|
|
47
|
-
exports: [...KENDO_GRID_PAGER_EXPORTS],
|
|
48
|
-
imports: [...KENDO_GRID_SHARED, ...KENDO_GRID_PAGER_EXPORTS],
|
|
49
|
-
providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService]
|
|
50
|
-
}]
|
|
51
|
-
}] });
|
|
@@ -1,5 +0,0 @@
|
|
|
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
|
-
export {};
|
|
@@ -1,30 +0,0 @@
|
|
|
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 { Subject } from "rxjs";
|
|
6
|
-
import { PageChangeEvent } from "../data/change-event-args.interface";
|
|
7
|
-
/**
|
|
8
|
-
* @hidden
|
|
9
|
-
*/
|
|
10
|
-
export type PagerContextChanges = {
|
|
11
|
-
total: number;
|
|
12
|
-
skip: number;
|
|
13
|
-
pageSize: number;
|
|
14
|
-
};
|
|
15
|
-
/**
|
|
16
|
-
* @hidden
|
|
17
|
-
*/
|
|
18
|
-
export declare class PagerContextService {
|
|
19
|
-
total: number;
|
|
20
|
-
skip: number;
|
|
21
|
-
pageSize: number;
|
|
22
|
-
changes: Subject<PagerContextChanges>;
|
|
23
|
-
pageChange: Subject<PageChangeEvent>;
|
|
24
|
-
private get currentPage();
|
|
25
|
-
notifyChanges(changes: PagerContextChanges): void;
|
|
26
|
-
changePage(page: number): void;
|
|
27
|
-
changePageSize(value: number): void;
|
|
28
|
-
nextPage(): void;
|
|
29
|
-
prevPage(): void;
|
|
30
|
-
}
|
|
@@ -1,18 +0,0 @@
|
|
|
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 { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
|
|
6
|
-
import * as i0 from "@angular/core";
|
|
7
|
-
/**
|
|
8
|
-
* @hidden
|
|
9
|
-
*/
|
|
10
|
-
export declare class PagerDropDownListDirective {
|
|
11
|
-
private host;
|
|
12
|
-
constructor(host: DropDownListComponent);
|
|
13
|
-
ngAfterViewInit(): void;
|
|
14
|
-
ngOnDestroy(): void;
|
|
15
|
-
private keydownHandler;
|
|
16
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<PagerDropDownListDirective, never>;
|
|
17
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<PagerDropDownListDirective, "[kendoGridPagerDropDown]", never, {}, {}, never, never, true, never>;
|
|
18
|
-
}
|
|
@@ -1,79 +0,0 @@
|
|
|
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 { OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
|
|
6
|
-
import { PagerContextService, PagerContextChanges } from "./pager-context.service";
|
|
7
|
-
import { GridSize } from '../common/size-options';
|
|
8
|
-
import { ContextService } from '../common/provider.service';
|
|
9
|
-
import { SVGIcon } from '@progress/kendo-svg-icons';
|
|
10
|
-
import * as i0 from "@angular/core";
|
|
11
|
-
/**
|
|
12
|
-
* @hidden
|
|
13
|
-
*/
|
|
14
|
-
export declare abstract class PagerElementComponent implements OnInit, OnDestroy {
|
|
15
|
-
private ctx;
|
|
16
|
-
protected pagerContext: PagerContextService;
|
|
17
|
-
protected cd: ChangeDetectorRef;
|
|
18
|
-
total: number;
|
|
19
|
-
skip: number;
|
|
20
|
-
pageSize: number;
|
|
21
|
-
caretAltLeftIcon: SVGIcon;
|
|
22
|
-
caretAltToLeftIcon: SVGIcon;
|
|
23
|
-
caretAltRightIcon: SVGIcon;
|
|
24
|
-
caretAltToRightIcon: SVGIcon;
|
|
25
|
-
/**
|
|
26
|
-
* Sets the pager element sizing option.
|
|
27
|
-
* @default `medium`
|
|
28
|
-
*/
|
|
29
|
-
size: GridSize;
|
|
30
|
-
/**
|
|
31
|
-
* @hidden
|
|
32
|
-
*
|
|
33
|
-
* @readonly
|
|
34
|
-
* @type {number}
|
|
35
|
-
* @memberOf PagerElementComponent
|
|
36
|
-
*/
|
|
37
|
-
get currentPage(): number;
|
|
38
|
-
/**
|
|
39
|
-
* @hidden
|
|
40
|
-
*
|
|
41
|
-
* @readonly
|
|
42
|
-
* @type {number}
|
|
43
|
-
* @memberOf PagerElementComponent
|
|
44
|
-
*/
|
|
45
|
-
get totalPages(): number;
|
|
46
|
-
private subscriptions;
|
|
47
|
-
constructor(ctx: ContextService, pagerContext: PagerContextService, cd: ChangeDetectorRef);
|
|
48
|
-
/**
|
|
49
|
-
* @hidden
|
|
50
|
-
*
|
|
51
|
-
* @param {string} key
|
|
52
|
-
* @returns {string}
|
|
53
|
-
*
|
|
54
|
-
* @memberOf PagerElementComponent
|
|
55
|
-
*/
|
|
56
|
-
textFor(key: string): string;
|
|
57
|
-
/**
|
|
58
|
-
* @hidden
|
|
59
|
-
*
|
|
60
|
-
* @param {number} page
|
|
61
|
-
*
|
|
62
|
-
* @memberOf PagerElementComponent
|
|
63
|
-
*/
|
|
64
|
-
changePage(page: number): boolean;
|
|
65
|
-
/**
|
|
66
|
-
* @hidden
|
|
67
|
-
*
|
|
68
|
-
* @memberOf PagerElementComponent
|
|
69
|
-
*/
|
|
70
|
-
ngOnInit(): void;
|
|
71
|
-
protected abstract onChanges(changes: PagerContextChanges): void;
|
|
72
|
-
ngOnDestroy(): void;
|
|
73
|
-
get prevArrowIcons(): string[];
|
|
74
|
-
get prevArrowSVGIcons(): SVGIcon[];
|
|
75
|
-
get nextArrowIcons(): string[];
|
|
76
|
-
get nextArrowSVGIcons(): SVGIcon[];
|
|
77
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<PagerElementComponent, never>;
|
|
78
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<PagerElementComponent, never, never, { "size": { "alias": "size"; "required": false; }; }, {}, never, never, false, never>;
|
|
79
|
-
}
|