@progress/kendo-angular-pager 19.0.0-develop.23 → 19.0.0-develop.25
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.
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: '19.0.0-develop.
|
|
13
|
+
publishDate: 1747671338,
|
|
14
|
+
version: '19.0.0-develop.25',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
16
16
|
};
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { Component, Input, EventEmitter, Output, HostBinding, ElementRef, Renderer2, NgZone, HostListener, ContentChildren, QueryList, Optional, SkipSelf, inject, ViewChild, ChangeDetectorRef } from '@angular/core';
|
|
6
6
|
import { PagerTemplateDirective } from "./pager-template.directive";
|
|
7
|
-
import { anyChanged, isDocumentAvailable, Keys, ResizeSensorComponent } from "@progress/kendo-angular-common";
|
|
7
|
+
import { anyChanged, isChanged, isDocumentAvailable, Keys, ResizeSensorComponent } from "@progress/kendo-angular-common";
|
|
8
8
|
import { PagerContextService } from "./pager-context.service";
|
|
9
9
|
import { Subscription } from "rxjs";
|
|
10
10
|
import { DEFAULT_PAGE_SIZE_VALUES, getStylingClasses, DEFAULT_SIZE, replaceMessagePlaceholder, calculatePadding, createMeasurementSpan, copyComputedStyles, positionOffScreen } from '../util';
|
|
@@ -106,6 +106,9 @@ export class PagerComponent {
|
|
|
106
106
|
this._pageSizeValues = value;
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
|
+
get pageSizeValues() {
|
|
110
|
+
return this._pageSizeValues;
|
|
111
|
+
}
|
|
109
112
|
/**
|
|
110
113
|
* Toggles the **Previous** and **Next** buttons.
|
|
111
114
|
*
|
|
@@ -164,7 +167,22 @@ export class PagerComponent {
|
|
|
164
167
|
* If the event is prevented, the page size will remain unchanged ([see example]({% slug pager_events %})).
|
|
165
168
|
*/
|
|
166
169
|
pageSizeChange = new EventEmitter();
|
|
170
|
+
/**
|
|
171
|
+
* @hidden
|
|
172
|
+
*/
|
|
173
|
+
pagerInputVisibilityChange = new EventEmitter();
|
|
174
|
+
/**
|
|
175
|
+
* @hidden
|
|
176
|
+
*/
|
|
177
|
+
pageTextVisibilityChange = new EventEmitter();
|
|
178
|
+
/**
|
|
179
|
+
* @hidden
|
|
180
|
+
*/
|
|
181
|
+
itemsTextVisibilityChange = new EventEmitter();
|
|
167
182
|
pagerClass = true;
|
|
183
|
+
get responsiveClass() {
|
|
184
|
+
return this.responsive;
|
|
185
|
+
}
|
|
168
186
|
widgetRole = 'application';
|
|
169
187
|
roleDescription = 'pager';
|
|
170
188
|
keyShortcuts = 'Enter ArrowRight ArrowLeft';
|
|
@@ -199,7 +217,35 @@ export class PagerComponent {
|
|
|
199
217
|
/**
|
|
200
218
|
* @hidden
|
|
201
219
|
*/
|
|
202
|
-
|
|
220
|
+
get showPageText() {
|
|
221
|
+
return this._showPageText;
|
|
222
|
+
}
|
|
223
|
+
set showPageText(value) {
|
|
224
|
+
this._showPageText = value;
|
|
225
|
+
this.pagerInputComponent && (this.pagerInputComponent.showPageText = value);
|
|
226
|
+
this.pageTextVisibilityChange.emit(value);
|
|
227
|
+
}
|
|
228
|
+
/**
|
|
229
|
+
* @hidden
|
|
230
|
+
*/
|
|
231
|
+
get showItemsText() {
|
|
232
|
+
return this._showItemsText;
|
|
233
|
+
}
|
|
234
|
+
set showItemsText(value) {
|
|
235
|
+
this._showItemsText = value;
|
|
236
|
+
this.pageSizesComponent && (this.pageSizesComponent.showItemsText = value);
|
|
237
|
+
this.itemsTextVisibilityChange.emit(value);
|
|
238
|
+
}
|
|
239
|
+
/**
|
|
240
|
+
* @hidden
|
|
241
|
+
*/
|
|
242
|
+
get showInput() {
|
|
243
|
+
return this._showInput;
|
|
244
|
+
}
|
|
245
|
+
set showInput(value) {
|
|
246
|
+
this._showInput = value;
|
|
247
|
+
this.pagerInputVisibilityChange.emit(value);
|
|
248
|
+
}
|
|
203
249
|
/**
|
|
204
250
|
* @hidden
|
|
205
251
|
*/
|
|
@@ -211,6 +257,9 @@ export class PagerComponent {
|
|
|
211
257
|
isInnerNavigationEnabled = false;
|
|
212
258
|
_navigable = true;
|
|
213
259
|
_size = DEFAULT_SIZE;
|
|
260
|
+
_showInput = true;
|
|
261
|
+
_showPageText = true;
|
|
262
|
+
_showItemsText = true;
|
|
214
263
|
/**
|
|
215
264
|
* Stores the measurements of various Pager elements.
|
|
216
265
|
* These dimensions are used for responsive layout calculations.
|
|
@@ -225,7 +274,8 @@ export class PagerComponent {
|
|
|
225
274
|
pageTextWidth: 0,
|
|
226
275
|
infoTextWidth: 0,
|
|
227
276
|
gapNumbersSizes: 0,
|
|
228
|
-
gapSizesInfo: 0
|
|
277
|
+
gapSizesInfo: 0,
|
|
278
|
+
width: 0
|
|
229
279
|
};
|
|
230
280
|
constructor(pagerContext, element, localization, renderer, ngZone, cdr, navigationService) {
|
|
231
281
|
this.pagerContext = pagerContext;
|
|
@@ -260,9 +310,6 @@ export class PagerComponent {
|
|
|
260
310
|
this.subscriptions.add(this.renderer.listen(wrapper, 'keydown', this.keyDownHandler.bind(this)));
|
|
261
311
|
});
|
|
262
312
|
}
|
|
263
|
-
if (this.type === 'input') {
|
|
264
|
-
this.showInput = true;
|
|
265
|
-
}
|
|
266
313
|
}
|
|
267
314
|
get maxItems() {
|
|
268
315
|
return Math.min(this.currentPage * this.pageSize, this.total);
|
|
@@ -271,14 +318,22 @@ export class PagerComponent {
|
|
|
271
318
|
this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
|
|
272
319
|
this.subscriptions.add(this.template.changes.subscribe(() => {
|
|
273
320
|
this.measureAllTextWidths();
|
|
274
|
-
this.responsive && this.resizeHandler();
|
|
321
|
+
this.responsive && this.resizeHandler(false);
|
|
275
322
|
}));
|
|
276
323
|
this.handleClasses(this.size, 'size');
|
|
277
324
|
this.measureAllTextWidths();
|
|
325
|
+
!this.numericButtons && (this.pagerDimensions.numericButtonsWidth = this.element.nativeElement.querySelector('.k-pager-numbers')?.offsetWidth ?? 0);
|
|
326
|
+
!this.pagerInput && (this.pagerDimensions.inputWidth = this.element.nativeElement.querySelector('.k-pager-input')?.offsetWidth ?? 0);
|
|
327
|
+
!this.pageSizes && (this.pagerDimensions.pageSizesWidth = this.element.nativeElement.querySelector('.k-pager-sizes')?.offsetWidth ?? 0);
|
|
278
328
|
const padding = calculatePadding(this.element.nativeElement);
|
|
279
329
|
this.pagerDimensions.padding = padding.padding;
|
|
280
330
|
this.pagerDimensions.gapNumbersSizes = padding.gapNumbersSizes;
|
|
281
331
|
this.pagerDimensions.gapSizesInfo = padding.gapSizesInfo;
|
|
332
|
+
this.ngZone.onStable.pipe(take(1)).subscribe(() => {
|
|
333
|
+
if (this.type !== 'input') {
|
|
334
|
+
this.showInput = false;
|
|
335
|
+
}
|
|
336
|
+
});
|
|
282
337
|
if (!isDocumentAvailable()) {
|
|
283
338
|
this.initialized = true;
|
|
284
339
|
return;
|
|
@@ -291,21 +346,30 @@ export class PagerComponent {
|
|
|
291
346
|
}
|
|
292
347
|
ngOnChanges(changes) {
|
|
293
348
|
if (anyChanged(["pageSize", "skip", "total"], changes, false)) {
|
|
349
|
+
const previousButtonCount = Math.min(this.buttonCount, (changes['total']?.previousValue || this.total) / (changes['pageSize']?.previousValue || this.pageSize));
|
|
294
350
|
this.pagerContext.notifyChanges({
|
|
295
351
|
pageSize: this.pageSize,
|
|
296
352
|
skip: this.skip,
|
|
297
353
|
total: this.total
|
|
298
354
|
});
|
|
355
|
+
this.pagerDimensions.numericButtonsWidth = (this.pagerDimensions.numericButtonsWidth * Math.min(this.buttonCount, this.total / this.pageSize)) / previousButtonCount;
|
|
299
356
|
this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
|
|
357
|
+
this.responsive && this.resizeHandler(false);
|
|
300
358
|
}
|
|
301
|
-
if (changes['
|
|
302
|
-
this.
|
|
303
|
-
|
|
359
|
+
if (changes['pageSizeValues'] || changes['previousNext']) {
|
|
360
|
+
this.responsive && this.resizeHandler(false);
|
|
361
|
+
}
|
|
362
|
+
if (isChanged('responsive', changes, true)) {
|
|
363
|
+
if (changes['responsive'].currentValue && !changes['responsive'].previousValue) {
|
|
364
|
+
this.measureAllTextWidths();
|
|
365
|
+
this.resizeHandler(false);
|
|
366
|
+
}
|
|
304
367
|
if (!this.responsive) {
|
|
305
368
|
this.showInput = this.type === 'input';
|
|
369
|
+
this.showElementsInOrder(this.element.nativeElement.offsetWidth, this.pagerDimensions.width);
|
|
306
370
|
}
|
|
307
371
|
}
|
|
308
|
-
if (
|
|
372
|
+
if (isChanged('type', changes, true)) {
|
|
309
373
|
this.showNumericButtonsResponsive();
|
|
310
374
|
}
|
|
311
375
|
}
|
|
@@ -344,7 +408,7 @@ export class PagerComponent {
|
|
|
344
408
|
/**
|
|
345
409
|
* @hidden
|
|
346
410
|
*/
|
|
347
|
-
resizeHandler = () => {
|
|
411
|
+
resizeHandler = (compareWidth = true) => {
|
|
348
412
|
if (this.template?.first && !this.responsive) {
|
|
349
413
|
return;
|
|
350
414
|
}
|
|
@@ -356,9 +420,15 @@ export class PagerComponent {
|
|
|
356
420
|
if (pagerWidth <= 0) {
|
|
357
421
|
return;
|
|
358
422
|
}
|
|
423
|
+
if (compareWidth && pagerWidth === this.pagerDimensions.width) {
|
|
424
|
+
return;
|
|
425
|
+
}
|
|
426
|
+
else {
|
|
427
|
+
this.pagerDimensions.width = pagerWidth;
|
|
428
|
+
}
|
|
359
429
|
this.ngZone.runOutsideAngular(() => {
|
|
360
430
|
setTimeout(() => {
|
|
361
|
-
if (this.template?.first
|
|
431
|
+
if (this.template?.first && !this.responsive) {
|
|
362
432
|
return;
|
|
363
433
|
}
|
|
364
434
|
const numericButtonsWrapperElement = this.element.nativeElement.querySelector('.k-pager-numbers-wrap');
|
|
@@ -461,51 +531,51 @@ export class PagerComponent {
|
|
|
461
531
|
const numericButtonsElement = el.querySelector('kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons');
|
|
462
532
|
const pagerInfoElement = el.querySelector('.k-pager-info');
|
|
463
533
|
const pagerPageSizes = el.querySelector('.k-pager-sizes');
|
|
464
|
-
const pagerInput = el.querySelector('kendo-pager-input');
|
|
465
534
|
const pagerSizesDropDown = el.querySelector('.k-pager-sizes .k-dropdownlist');
|
|
535
|
+
const checkOverflow = this.responsive;
|
|
466
536
|
if (this.type === 'input' && this.isElementVisible(pagerInfoElement) || this.isElementVisible(numericButtonsElement)) {
|
|
467
537
|
return;
|
|
468
538
|
}
|
|
469
|
-
if (!this.isElementVisible(pagerPageSizes)) {
|
|
539
|
+
if (this.pageSizeValues && !this.isElementVisible(pagerPageSizes)) {
|
|
470
540
|
const addDropDownWidth = currentWidth + this.pagerDimensions.pageSizesWidth + this.pagerDimensions.gapNumbersSizes - this.pagerDimensions.sizesTextWidth;
|
|
471
|
-
if (addDropDownWidth > availableWidth)
|
|
541
|
+
if (checkOverflow && addDropDownWidth > availableWidth)
|
|
472
542
|
return;
|
|
473
|
-
this.ngZone.run(() => this.
|
|
543
|
+
this.ngZone.run(() => this.showItemsText = false);
|
|
474
544
|
this.showElement(pagerPageSizes);
|
|
475
545
|
currentWidth = addDropDownWidth;
|
|
476
|
-
if (currentWidth >= availableWidth)
|
|
546
|
+
if (checkOverflow && currentWidth >= availableWidth)
|
|
477
547
|
return;
|
|
478
548
|
}
|
|
479
|
-
if (this.
|
|
549
|
+
if (this.pageSizeValues && this.isElementVisible(pagerPageSizes) && !this.showItemsText) {
|
|
480
550
|
const addPageSizesText = currentWidth - pagerSizesDropDown?.offsetWidth + this.pagerDimensions.pageSizesWidth;
|
|
481
|
-
if (addPageSizesText > availableWidth)
|
|
551
|
+
if (checkOverflow && addPageSizesText > availableWidth)
|
|
482
552
|
return;
|
|
483
|
-
this.ngZone.run(() => this.
|
|
553
|
+
this.ngZone.run(() => this.showItemsText = true);
|
|
484
554
|
currentWidth = addPageSizesText;
|
|
485
|
-
if (currentWidth >= availableWidth)
|
|
555
|
+
if (checkOverflow && currentWidth >= availableWidth)
|
|
486
556
|
return;
|
|
487
557
|
}
|
|
488
|
-
if (this.
|
|
489
|
-
const addPageText = currentWidth
|
|
490
|
-
if (addPageText > availableWidth)
|
|
558
|
+
if (!this.showPageText && (!this.pageSizeValues || (this.isElementVisible(pagerPageSizes) && this.showItemsText))) {
|
|
559
|
+
const addPageText = currentWidth + this.pagerDimensions.pageTextWidth;
|
|
560
|
+
if (checkOverflow && addPageText > availableWidth)
|
|
491
561
|
return;
|
|
492
|
-
this.ngZone.run(() => this.
|
|
562
|
+
this.ngZone.run(() => this.showPageText = true);
|
|
493
563
|
currentWidth = addPageText;
|
|
494
|
-
if (currentWidth >= availableWidth)
|
|
564
|
+
if (checkOverflow && currentWidth >= availableWidth)
|
|
495
565
|
return;
|
|
496
566
|
}
|
|
497
|
-
if (this.isElementVisible(pagerPageSizes) && this.
|
|
567
|
+
if (this.info && !this.isElementVisible(pagerInfoElement) && (!this.pageSizeValues || (this.isElementVisible(pagerPageSizes) && this.showPageText))) {
|
|
498
568
|
const addInfoText = currentWidth + this.pagerDimensions.infoTextWidth + this.pagerDimensions.gapSizesInfo;
|
|
499
|
-
if (addInfoText > availableWidth)
|
|
569
|
+
if (checkOverflow && addInfoText > availableWidth)
|
|
500
570
|
return;
|
|
501
571
|
this.ngZone.run(() => {
|
|
502
572
|
this.showElement(pagerInfoElement);
|
|
503
573
|
});
|
|
504
574
|
currentWidth = addInfoText;
|
|
505
575
|
}
|
|
506
|
-
if (this.
|
|
576
|
+
if (this.type === 'numeric' && (!this.info || this.isElementVisible(pagerInfoElement))) {
|
|
507
577
|
const addNumericButtons = currentWidth - this.pagerDimensions.inputWidth + this.pagerDimensions.numericButtonsWidth;
|
|
508
|
-
if (addNumericButtons > availableWidth)
|
|
578
|
+
if (checkOverflow && addNumericButtons > availableWidth)
|
|
509
579
|
return;
|
|
510
580
|
this.showElement(numericButtonsElement);
|
|
511
581
|
this.ngZone.run(() => {
|
|
@@ -529,18 +599,18 @@ export class PagerComponent {
|
|
|
529
599
|
}
|
|
530
600
|
if (this.isElementVisible(pagerInfoElement)) {
|
|
531
601
|
this.hideElement(pagerInfoElement);
|
|
532
|
-
currentWidth -= this.pagerDimensions.infoTextWidth;
|
|
602
|
+
currentWidth -= (this.pagerDimensions.infoTextWidth + this.pagerDimensions.gapSizesInfo);
|
|
533
603
|
if (currentWidth <= availableWidth)
|
|
534
604
|
return;
|
|
535
605
|
}
|
|
536
|
-
if (this.
|
|
537
|
-
this.ngZone.run(() => this.
|
|
606
|
+
if (this.showPageText) {
|
|
607
|
+
this.ngZone.run(() => this.showPageText = false);
|
|
538
608
|
currentWidth = currentWidth - this.pagerDimensions.pageTextWidth;
|
|
539
609
|
if (currentWidth <= availableWidth)
|
|
540
610
|
return;
|
|
541
611
|
}
|
|
542
|
-
if (this.isElementVisible(pagerPageSizes) && this.
|
|
543
|
-
this.ngZone.run(() => this.
|
|
612
|
+
if (this.pageSizeValues && this.isElementVisible(pagerPageSizes) && this.showItemsText) {
|
|
613
|
+
this.ngZone.run(() => this.showItemsText = false);
|
|
544
614
|
currentWidth = currentWidth - this.pagerDimensions.pageSizesWidth + pagerSizesDropDown?.offsetWidth;
|
|
545
615
|
if (currentWidth <= availableWidth)
|
|
546
616
|
return;
|
|
@@ -621,7 +691,7 @@ export class PagerComponent {
|
|
|
621
691
|
this.showInput = !hasAvailableWidth;
|
|
622
692
|
}
|
|
623
693
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerComponent, deps: [{ token: i1.PagerContextService, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.PagerNavigationService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
624
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerComponent, isStandalone: true, selector: "kendo-datapager, kendo-pager", inputs: { externalTemplate: "externalTemplate", total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext", navigable: "navigable", size: "size", responsive: "responsive", adaptiveMode: "adaptiveMode" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "focusin": "focusHandler($event)" }, properties: { "class.k-pager": "this.pagerClass", "attr.role": "this.widgetRole", "attr.aria-roledescription": "this.roleDescription", "attr.aria-keyshortcuts": "this.keyShortcuts", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.dir" } }, providers: [
|
|
694
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerComponent, isStandalone: true, selector: "kendo-datapager, kendo-pager", inputs: { externalTemplate: "externalTemplate", total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext", navigable: "navigable", size: "size", responsive: "responsive", adaptiveMode: "adaptiveMode" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", pagerInputVisibilityChange: "pagerInputVisibilityChange", pageTextVisibilityChange: "pageTextVisibilityChange", itemsTextVisibilityChange: "itemsTextVisibilityChange" }, host: { listeners: { "focusin": "focusHandler($event)" }, properties: { "class.k-pager": "this.pagerClass", "class.k-pager-responsive": "this.responsiveClass", "attr.role": "this.widgetRole", "attr.aria-roledescription": "this.roleDescription", "attr.aria-keyshortcuts": "this.keyShortcuts", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.dir" } }, providers: [
|
|
625
695
|
LocalizationService,
|
|
626
696
|
PagerContextService,
|
|
627
697
|
PagerNavigationService,
|
|
@@ -674,7 +744,7 @@ export class PagerComponent {
|
|
|
674
744
|
[ngTemplateOutletContext]="templateContext">
|
|
675
745
|
</ng-container>
|
|
676
746
|
<ng-template #default>
|
|
677
|
-
<div class="k-pager-numbers-wrap" [ngStyle]="{opacity: initialized ?
|
|
747
|
+
<div class="k-pager-numbers-wrap" [ngStyle]="{opacity: initialized ? null : '0'}">
|
|
678
748
|
<kendo-pager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-pager-prev-buttons>
|
|
679
749
|
<kendo-pager-numeric-buttons
|
|
680
750
|
[size]="size"
|
|
@@ -685,12 +755,12 @@ export class PagerComponent {
|
|
|
685
755
|
<kendo-pager-next-buttons [size]="size" *ngIf="previousNext"></kendo-pager-next-buttons>
|
|
686
756
|
</div>
|
|
687
757
|
<kendo-pager-page-sizes *ngIf="_pageSizeValues.length"
|
|
688
|
-
[ngStyle]="{opacity: initialized ?
|
|
758
|
+
[ngStyle]="{opacity: initialized ? null : '0'}"
|
|
689
759
|
[size]="size"
|
|
690
760
|
[pageSizes]="_pageSizeValues"
|
|
691
761
|
[adaptiveMode]="adaptiveMode">
|
|
692
762
|
</kendo-pager-page-sizes>
|
|
693
|
-
<kendo-pager-info *ngIf="info" [ngStyle]="{opacity: initialized ?
|
|
763
|
+
<kendo-pager-info *ngIf="info" [ngStyle]="{opacity: initialized ? null : '0'}">
|
|
694
764
|
</kendo-pager-info>
|
|
695
765
|
</ng-template>
|
|
696
766
|
<kendo-resize-sensor *ngIf="responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
|
|
@@ -755,7 +825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
755
825
|
[ngTemplateOutletContext]="templateContext">
|
|
756
826
|
</ng-container>
|
|
757
827
|
<ng-template #default>
|
|
758
|
-
<div class="k-pager-numbers-wrap" [ngStyle]="{opacity: initialized ?
|
|
828
|
+
<div class="k-pager-numbers-wrap" [ngStyle]="{opacity: initialized ? null : '0'}">
|
|
759
829
|
<kendo-pager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-pager-prev-buttons>
|
|
760
830
|
<kendo-pager-numeric-buttons
|
|
761
831
|
[size]="size"
|
|
@@ -766,12 +836,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
766
836
|
<kendo-pager-next-buttons [size]="size" *ngIf="previousNext"></kendo-pager-next-buttons>
|
|
767
837
|
</div>
|
|
768
838
|
<kendo-pager-page-sizes *ngIf="_pageSizeValues.length"
|
|
769
|
-
[ngStyle]="{opacity: initialized ?
|
|
839
|
+
[ngStyle]="{opacity: initialized ? null : '0'}"
|
|
770
840
|
[size]="size"
|
|
771
841
|
[pageSizes]="_pageSizeValues"
|
|
772
842
|
[adaptiveMode]="adaptiveMode">
|
|
773
843
|
</kendo-pager-page-sizes>
|
|
774
|
-
<kendo-pager-info *ngIf="info" [ngStyle]="{opacity: initialized ?
|
|
844
|
+
<kendo-pager-info *ngIf="info" [ngStyle]="{opacity: initialized ? null : '0'}">
|
|
775
845
|
</kendo-pager-info>
|
|
776
846
|
</ng-template>
|
|
777
847
|
<kendo-resize-sensor *ngIf="responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
|
|
@@ -835,9 +905,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
835
905
|
type: Output
|
|
836
906
|
}], pageSizeChange: [{
|
|
837
907
|
type: Output
|
|
908
|
+
}], pagerInputVisibilityChange: [{
|
|
909
|
+
type: Output
|
|
910
|
+
}], pageTextVisibilityChange: [{
|
|
911
|
+
type: Output
|
|
912
|
+
}], itemsTextVisibilityChange: [{
|
|
913
|
+
type: Output
|
|
838
914
|
}], pagerClass: [{
|
|
839
915
|
type: HostBinding,
|
|
840
916
|
args: ['class.k-pager']
|
|
917
|
+
}], responsiveClass: [{
|
|
918
|
+
type: HostBinding,
|
|
919
|
+
args: ['class.k-pager-responsive']
|
|
841
920
|
}], widgetRole: [{
|
|
842
921
|
type: HostBinding,
|
|
843
922
|
args: ['attr.role']
|
package/esm2022/util.mjs
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { isDocumentAvailable } from "@progress/kendo-angular-common";
|
|
5
6
|
/**
|
|
6
7
|
* @hidden
|
|
7
8
|
*/
|
|
@@ -68,6 +69,9 @@ export const replaceMessagePlaceholder = (message, name, value) => message.repla
|
|
|
68
69
|
* @hidden
|
|
69
70
|
*/
|
|
70
71
|
export const calculatePadding = (element) => {
|
|
72
|
+
if (!element || !isDocumentAvailable()) {
|
|
73
|
+
return { padding: 0, gapNumbersSizes: 0, gapSizesInfo: 0 };
|
|
74
|
+
}
|
|
71
75
|
const computedStyle = window.getComputedStyle(element);
|
|
72
76
|
const paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;
|
|
73
77
|
const paddingRight = parseInt(computedStyle.paddingRight, 10) || 0;
|
|
@@ -8,7 +8,7 @@ import * as i1 from '@progress/kendo-angular-l10n';
|
|
|
8
8
|
import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
9
9
|
import { Subject, Subscription } from 'rxjs';
|
|
10
10
|
import { caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
|
|
11
|
-
import { isFocusable, Keys, EventsOutsideAngularDirective,
|
|
11
|
+
import { isDocumentAvailable, isFocusable, Keys, EventsOutsideAngularDirective, anyChanged, isChanged, ResizeSensorComponent, isPresent, ResizeBatchService } from '@progress/kendo-angular-common';
|
|
12
12
|
import { ButtonComponent } from '@progress/kendo-angular-buttons';
|
|
13
13
|
import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
|
|
14
14
|
import { NgIf, NgFor, NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
|
|
@@ -430,6 +430,9 @@ const replaceMessagePlaceholder = (message, name, value) => message.replace(new
|
|
|
430
430
|
* @hidden
|
|
431
431
|
*/
|
|
432
432
|
const calculatePadding = (element) => {
|
|
433
|
+
if (!element || !isDocumentAvailable()) {
|
|
434
|
+
return { padding: 0, gapNumbersSizes: 0, gapSizesInfo: 0 };
|
|
435
|
+
}
|
|
433
436
|
const computedStyle = window.getComputedStyle(element);
|
|
434
437
|
const paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;
|
|
435
438
|
const paddingRight = parseInt(computedStyle.paddingRight, 10) || 0;
|
|
@@ -1582,8 +1585,8 @@ const packageMetadata = {
|
|
|
1582
1585
|
productName: 'Kendo UI for Angular',
|
|
1583
1586
|
productCode: 'KENDOUIANGULAR',
|
|
1584
1587
|
productCodes: ['KENDOUIANGULAR'],
|
|
1585
|
-
publishDate:
|
|
1586
|
-
version: '19.0.0-develop.
|
|
1588
|
+
publishDate: 1747671338,
|
|
1589
|
+
version: '19.0.0-develop.25',
|
|
1587
1590
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
1588
1591
|
};
|
|
1589
1592
|
|
|
@@ -1668,6 +1671,9 @@ class PagerComponent {
|
|
|
1668
1671
|
this._pageSizeValues = value;
|
|
1669
1672
|
}
|
|
1670
1673
|
}
|
|
1674
|
+
get pageSizeValues() {
|
|
1675
|
+
return this._pageSizeValues;
|
|
1676
|
+
}
|
|
1671
1677
|
/**
|
|
1672
1678
|
* Toggles the **Previous** and **Next** buttons.
|
|
1673
1679
|
*
|
|
@@ -1726,7 +1732,22 @@ class PagerComponent {
|
|
|
1726
1732
|
* If the event is prevented, the page size will remain unchanged ([see example]({% slug pager_events %})).
|
|
1727
1733
|
*/
|
|
1728
1734
|
pageSizeChange = new EventEmitter();
|
|
1735
|
+
/**
|
|
1736
|
+
* @hidden
|
|
1737
|
+
*/
|
|
1738
|
+
pagerInputVisibilityChange = new EventEmitter();
|
|
1739
|
+
/**
|
|
1740
|
+
* @hidden
|
|
1741
|
+
*/
|
|
1742
|
+
pageTextVisibilityChange = new EventEmitter();
|
|
1743
|
+
/**
|
|
1744
|
+
* @hidden
|
|
1745
|
+
*/
|
|
1746
|
+
itemsTextVisibilityChange = new EventEmitter();
|
|
1729
1747
|
pagerClass = true;
|
|
1748
|
+
get responsiveClass() {
|
|
1749
|
+
return this.responsive;
|
|
1750
|
+
}
|
|
1730
1751
|
widgetRole = 'application';
|
|
1731
1752
|
roleDescription = 'pager';
|
|
1732
1753
|
keyShortcuts = 'Enter ArrowRight ArrowLeft';
|
|
@@ -1761,7 +1782,35 @@ class PagerComponent {
|
|
|
1761
1782
|
/**
|
|
1762
1783
|
* @hidden
|
|
1763
1784
|
*/
|
|
1764
|
-
|
|
1785
|
+
get showPageText() {
|
|
1786
|
+
return this._showPageText;
|
|
1787
|
+
}
|
|
1788
|
+
set showPageText(value) {
|
|
1789
|
+
this._showPageText = value;
|
|
1790
|
+
this.pagerInputComponent && (this.pagerInputComponent.showPageText = value);
|
|
1791
|
+
this.pageTextVisibilityChange.emit(value);
|
|
1792
|
+
}
|
|
1793
|
+
/**
|
|
1794
|
+
* @hidden
|
|
1795
|
+
*/
|
|
1796
|
+
get showItemsText() {
|
|
1797
|
+
return this._showItemsText;
|
|
1798
|
+
}
|
|
1799
|
+
set showItemsText(value) {
|
|
1800
|
+
this._showItemsText = value;
|
|
1801
|
+
this.pageSizesComponent && (this.pageSizesComponent.showItemsText = value);
|
|
1802
|
+
this.itemsTextVisibilityChange.emit(value);
|
|
1803
|
+
}
|
|
1804
|
+
/**
|
|
1805
|
+
* @hidden
|
|
1806
|
+
*/
|
|
1807
|
+
get showInput() {
|
|
1808
|
+
return this._showInput;
|
|
1809
|
+
}
|
|
1810
|
+
set showInput(value) {
|
|
1811
|
+
this._showInput = value;
|
|
1812
|
+
this.pagerInputVisibilityChange.emit(value);
|
|
1813
|
+
}
|
|
1765
1814
|
/**
|
|
1766
1815
|
* @hidden
|
|
1767
1816
|
*/
|
|
@@ -1773,6 +1822,9 @@ class PagerComponent {
|
|
|
1773
1822
|
isInnerNavigationEnabled = false;
|
|
1774
1823
|
_navigable = true;
|
|
1775
1824
|
_size = DEFAULT_SIZE;
|
|
1825
|
+
_showInput = true;
|
|
1826
|
+
_showPageText = true;
|
|
1827
|
+
_showItemsText = true;
|
|
1776
1828
|
/**
|
|
1777
1829
|
* Stores the measurements of various Pager elements.
|
|
1778
1830
|
* These dimensions are used for responsive layout calculations.
|
|
@@ -1787,7 +1839,8 @@ class PagerComponent {
|
|
|
1787
1839
|
pageTextWidth: 0,
|
|
1788
1840
|
infoTextWidth: 0,
|
|
1789
1841
|
gapNumbersSizes: 0,
|
|
1790
|
-
gapSizesInfo: 0
|
|
1842
|
+
gapSizesInfo: 0,
|
|
1843
|
+
width: 0
|
|
1791
1844
|
};
|
|
1792
1845
|
constructor(pagerContext, element, localization, renderer, ngZone, cdr, navigationService) {
|
|
1793
1846
|
this.pagerContext = pagerContext;
|
|
@@ -1822,9 +1875,6 @@ class PagerComponent {
|
|
|
1822
1875
|
this.subscriptions.add(this.renderer.listen(wrapper, 'keydown', this.keyDownHandler.bind(this)));
|
|
1823
1876
|
});
|
|
1824
1877
|
}
|
|
1825
|
-
if (this.type === 'input') {
|
|
1826
|
-
this.showInput = true;
|
|
1827
|
-
}
|
|
1828
1878
|
}
|
|
1829
1879
|
get maxItems() {
|
|
1830
1880
|
return Math.min(this.currentPage * this.pageSize, this.total);
|
|
@@ -1833,14 +1883,22 @@ class PagerComponent {
|
|
|
1833
1883
|
this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
|
|
1834
1884
|
this.subscriptions.add(this.template.changes.subscribe(() => {
|
|
1835
1885
|
this.measureAllTextWidths();
|
|
1836
|
-
this.responsive && this.resizeHandler();
|
|
1886
|
+
this.responsive && this.resizeHandler(false);
|
|
1837
1887
|
}));
|
|
1838
1888
|
this.handleClasses(this.size, 'size');
|
|
1839
1889
|
this.measureAllTextWidths();
|
|
1890
|
+
!this.numericButtons && (this.pagerDimensions.numericButtonsWidth = this.element.nativeElement.querySelector('.k-pager-numbers')?.offsetWidth ?? 0);
|
|
1891
|
+
!this.pagerInput && (this.pagerDimensions.inputWidth = this.element.nativeElement.querySelector('.k-pager-input')?.offsetWidth ?? 0);
|
|
1892
|
+
!this.pageSizes && (this.pagerDimensions.pageSizesWidth = this.element.nativeElement.querySelector('.k-pager-sizes')?.offsetWidth ?? 0);
|
|
1840
1893
|
const padding = calculatePadding(this.element.nativeElement);
|
|
1841
1894
|
this.pagerDimensions.padding = padding.padding;
|
|
1842
1895
|
this.pagerDimensions.gapNumbersSizes = padding.gapNumbersSizes;
|
|
1843
1896
|
this.pagerDimensions.gapSizesInfo = padding.gapSizesInfo;
|
|
1897
|
+
this.ngZone.onStable.pipe(take(1)).subscribe(() => {
|
|
1898
|
+
if (this.type !== 'input') {
|
|
1899
|
+
this.showInput = false;
|
|
1900
|
+
}
|
|
1901
|
+
});
|
|
1844
1902
|
if (!isDocumentAvailable()) {
|
|
1845
1903
|
this.initialized = true;
|
|
1846
1904
|
return;
|
|
@@ -1853,21 +1911,30 @@ class PagerComponent {
|
|
|
1853
1911
|
}
|
|
1854
1912
|
ngOnChanges(changes) {
|
|
1855
1913
|
if (anyChanged(["pageSize", "skip", "total"], changes, false)) {
|
|
1914
|
+
const previousButtonCount = Math.min(this.buttonCount, (changes['total']?.previousValue || this.total) / (changes['pageSize']?.previousValue || this.pageSize));
|
|
1856
1915
|
this.pagerContext.notifyChanges({
|
|
1857
1916
|
pageSize: this.pageSize,
|
|
1858
1917
|
skip: this.skip,
|
|
1859
1918
|
total: this.total
|
|
1860
1919
|
});
|
|
1920
|
+
this.pagerDimensions.numericButtonsWidth = (this.pagerDimensions.numericButtonsWidth * Math.min(this.buttonCount, this.total / this.pageSize)) / previousButtonCount;
|
|
1861
1921
|
this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
|
|
1922
|
+
this.responsive && this.resizeHandler(false);
|
|
1862
1923
|
}
|
|
1863
|
-
if (changes['
|
|
1864
|
-
this.
|
|
1865
|
-
|
|
1924
|
+
if (changes['pageSizeValues'] || changes['previousNext']) {
|
|
1925
|
+
this.responsive && this.resizeHandler(false);
|
|
1926
|
+
}
|
|
1927
|
+
if (isChanged('responsive', changes, true)) {
|
|
1928
|
+
if (changes['responsive'].currentValue && !changes['responsive'].previousValue) {
|
|
1929
|
+
this.measureAllTextWidths();
|
|
1930
|
+
this.resizeHandler(false);
|
|
1931
|
+
}
|
|
1866
1932
|
if (!this.responsive) {
|
|
1867
1933
|
this.showInput = this.type === 'input';
|
|
1934
|
+
this.showElementsInOrder(this.element.nativeElement.offsetWidth, this.pagerDimensions.width);
|
|
1868
1935
|
}
|
|
1869
1936
|
}
|
|
1870
|
-
if (
|
|
1937
|
+
if (isChanged('type', changes, true)) {
|
|
1871
1938
|
this.showNumericButtonsResponsive();
|
|
1872
1939
|
}
|
|
1873
1940
|
}
|
|
@@ -1906,7 +1973,7 @@ class PagerComponent {
|
|
|
1906
1973
|
/**
|
|
1907
1974
|
* @hidden
|
|
1908
1975
|
*/
|
|
1909
|
-
resizeHandler = () => {
|
|
1976
|
+
resizeHandler = (compareWidth = true) => {
|
|
1910
1977
|
if (this.template?.first && !this.responsive) {
|
|
1911
1978
|
return;
|
|
1912
1979
|
}
|
|
@@ -1918,9 +1985,15 @@ class PagerComponent {
|
|
|
1918
1985
|
if (pagerWidth <= 0) {
|
|
1919
1986
|
return;
|
|
1920
1987
|
}
|
|
1988
|
+
if (compareWidth && pagerWidth === this.pagerDimensions.width) {
|
|
1989
|
+
return;
|
|
1990
|
+
}
|
|
1991
|
+
else {
|
|
1992
|
+
this.pagerDimensions.width = pagerWidth;
|
|
1993
|
+
}
|
|
1921
1994
|
this.ngZone.runOutsideAngular(() => {
|
|
1922
1995
|
setTimeout(() => {
|
|
1923
|
-
if (this.template?.first
|
|
1996
|
+
if (this.template?.first && !this.responsive) {
|
|
1924
1997
|
return;
|
|
1925
1998
|
}
|
|
1926
1999
|
const numericButtonsWrapperElement = this.element.nativeElement.querySelector('.k-pager-numbers-wrap');
|
|
@@ -2023,51 +2096,51 @@ class PagerComponent {
|
|
|
2023
2096
|
const numericButtonsElement = el.querySelector('kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons');
|
|
2024
2097
|
const pagerInfoElement = el.querySelector('.k-pager-info');
|
|
2025
2098
|
const pagerPageSizes = el.querySelector('.k-pager-sizes');
|
|
2026
|
-
const pagerInput = el.querySelector('kendo-pager-input');
|
|
2027
2099
|
const pagerSizesDropDown = el.querySelector('.k-pager-sizes .k-dropdownlist');
|
|
2100
|
+
const checkOverflow = this.responsive;
|
|
2028
2101
|
if (this.type === 'input' && this.isElementVisible(pagerInfoElement) || this.isElementVisible(numericButtonsElement)) {
|
|
2029
2102
|
return;
|
|
2030
2103
|
}
|
|
2031
|
-
if (!this.isElementVisible(pagerPageSizes)) {
|
|
2104
|
+
if (this.pageSizeValues && !this.isElementVisible(pagerPageSizes)) {
|
|
2032
2105
|
const addDropDownWidth = currentWidth + this.pagerDimensions.pageSizesWidth + this.pagerDimensions.gapNumbersSizes - this.pagerDimensions.sizesTextWidth;
|
|
2033
|
-
if (addDropDownWidth > availableWidth)
|
|
2106
|
+
if (checkOverflow && addDropDownWidth > availableWidth)
|
|
2034
2107
|
return;
|
|
2035
|
-
this.ngZone.run(() => this.
|
|
2108
|
+
this.ngZone.run(() => this.showItemsText = false);
|
|
2036
2109
|
this.showElement(pagerPageSizes);
|
|
2037
2110
|
currentWidth = addDropDownWidth;
|
|
2038
|
-
if (currentWidth >= availableWidth)
|
|
2111
|
+
if (checkOverflow && currentWidth >= availableWidth)
|
|
2039
2112
|
return;
|
|
2040
2113
|
}
|
|
2041
|
-
if (this.
|
|
2114
|
+
if (this.pageSizeValues && this.isElementVisible(pagerPageSizes) && !this.showItemsText) {
|
|
2042
2115
|
const addPageSizesText = currentWidth - pagerSizesDropDown?.offsetWidth + this.pagerDimensions.pageSizesWidth;
|
|
2043
|
-
if (addPageSizesText > availableWidth)
|
|
2116
|
+
if (checkOverflow && addPageSizesText > availableWidth)
|
|
2044
2117
|
return;
|
|
2045
|
-
this.ngZone.run(() => this.
|
|
2118
|
+
this.ngZone.run(() => this.showItemsText = true);
|
|
2046
2119
|
currentWidth = addPageSizesText;
|
|
2047
|
-
if (currentWidth >= availableWidth)
|
|
2120
|
+
if (checkOverflow && currentWidth >= availableWidth)
|
|
2048
2121
|
return;
|
|
2049
2122
|
}
|
|
2050
|
-
if (this.
|
|
2051
|
-
const addPageText = currentWidth
|
|
2052
|
-
if (addPageText > availableWidth)
|
|
2123
|
+
if (!this.showPageText && (!this.pageSizeValues || (this.isElementVisible(pagerPageSizes) && this.showItemsText))) {
|
|
2124
|
+
const addPageText = currentWidth + this.pagerDimensions.pageTextWidth;
|
|
2125
|
+
if (checkOverflow && addPageText > availableWidth)
|
|
2053
2126
|
return;
|
|
2054
|
-
this.ngZone.run(() => this.
|
|
2127
|
+
this.ngZone.run(() => this.showPageText = true);
|
|
2055
2128
|
currentWidth = addPageText;
|
|
2056
|
-
if (currentWidth >= availableWidth)
|
|
2129
|
+
if (checkOverflow && currentWidth >= availableWidth)
|
|
2057
2130
|
return;
|
|
2058
2131
|
}
|
|
2059
|
-
if (this.isElementVisible(pagerPageSizes) && this.
|
|
2132
|
+
if (this.info && !this.isElementVisible(pagerInfoElement) && (!this.pageSizeValues || (this.isElementVisible(pagerPageSizes) && this.showPageText))) {
|
|
2060
2133
|
const addInfoText = currentWidth + this.pagerDimensions.infoTextWidth + this.pagerDimensions.gapSizesInfo;
|
|
2061
|
-
if (addInfoText > availableWidth)
|
|
2134
|
+
if (checkOverflow && addInfoText > availableWidth)
|
|
2062
2135
|
return;
|
|
2063
2136
|
this.ngZone.run(() => {
|
|
2064
2137
|
this.showElement(pagerInfoElement);
|
|
2065
2138
|
});
|
|
2066
2139
|
currentWidth = addInfoText;
|
|
2067
2140
|
}
|
|
2068
|
-
if (this.
|
|
2141
|
+
if (this.type === 'numeric' && (!this.info || this.isElementVisible(pagerInfoElement))) {
|
|
2069
2142
|
const addNumericButtons = currentWidth - this.pagerDimensions.inputWidth + this.pagerDimensions.numericButtonsWidth;
|
|
2070
|
-
if (addNumericButtons > availableWidth)
|
|
2143
|
+
if (checkOverflow && addNumericButtons > availableWidth)
|
|
2071
2144
|
return;
|
|
2072
2145
|
this.showElement(numericButtonsElement);
|
|
2073
2146
|
this.ngZone.run(() => {
|
|
@@ -2091,18 +2164,18 @@ class PagerComponent {
|
|
|
2091
2164
|
}
|
|
2092
2165
|
if (this.isElementVisible(pagerInfoElement)) {
|
|
2093
2166
|
this.hideElement(pagerInfoElement);
|
|
2094
|
-
currentWidth -= this.pagerDimensions.infoTextWidth;
|
|
2167
|
+
currentWidth -= (this.pagerDimensions.infoTextWidth + this.pagerDimensions.gapSizesInfo);
|
|
2095
2168
|
if (currentWidth <= availableWidth)
|
|
2096
2169
|
return;
|
|
2097
2170
|
}
|
|
2098
|
-
if (this.
|
|
2099
|
-
this.ngZone.run(() => this.
|
|
2171
|
+
if (this.showPageText) {
|
|
2172
|
+
this.ngZone.run(() => this.showPageText = false);
|
|
2100
2173
|
currentWidth = currentWidth - this.pagerDimensions.pageTextWidth;
|
|
2101
2174
|
if (currentWidth <= availableWidth)
|
|
2102
2175
|
return;
|
|
2103
2176
|
}
|
|
2104
|
-
if (this.isElementVisible(pagerPageSizes) && this.
|
|
2105
|
-
this.ngZone.run(() => this.
|
|
2177
|
+
if (this.pageSizeValues && this.isElementVisible(pagerPageSizes) && this.showItemsText) {
|
|
2178
|
+
this.ngZone.run(() => this.showItemsText = false);
|
|
2106
2179
|
currentWidth = currentWidth - this.pagerDimensions.pageSizesWidth + pagerSizesDropDown?.offsetWidth;
|
|
2107
2180
|
if (currentWidth <= availableWidth)
|
|
2108
2181
|
return;
|
|
@@ -2183,7 +2256,7 @@ class PagerComponent {
|
|
|
2183
2256
|
this.showInput = !hasAvailableWidth;
|
|
2184
2257
|
}
|
|
2185
2258
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerComponent, deps: [{ token: PagerContextService, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: PagerNavigationService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2186
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerComponent, isStandalone: true, selector: "kendo-datapager, kendo-pager", inputs: { externalTemplate: "externalTemplate", total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext", navigable: "navigable", size: "size", responsive: "responsive", adaptiveMode: "adaptiveMode" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "focusin": "focusHandler($event)" }, properties: { "class.k-pager": "this.pagerClass", "attr.role": "this.widgetRole", "attr.aria-roledescription": "this.roleDescription", "attr.aria-keyshortcuts": "this.keyShortcuts", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.dir" } }, providers: [
|
|
2259
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerComponent, isStandalone: true, selector: "kendo-datapager, kendo-pager", inputs: { externalTemplate: "externalTemplate", total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext", navigable: "navigable", size: "size", responsive: "responsive", adaptiveMode: "adaptiveMode" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", pagerInputVisibilityChange: "pagerInputVisibilityChange", pageTextVisibilityChange: "pageTextVisibilityChange", itemsTextVisibilityChange: "itemsTextVisibilityChange" }, host: { listeners: { "focusin": "focusHandler($event)" }, properties: { "class.k-pager": "this.pagerClass", "class.k-pager-responsive": "this.responsiveClass", "attr.role": "this.widgetRole", "attr.aria-roledescription": "this.roleDescription", "attr.aria-keyshortcuts": "this.keyShortcuts", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.dir" } }, providers: [
|
|
2187
2260
|
LocalizationService,
|
|
2188
2261
|
PagerContextService,
|
|
2189
2262
|
PagerNavigationService,
|
|
@@ -2236,7 +2309,7 @@ class PagerComponent {
|
|
|
2236
2309
|
[ngTemplateOutletContext]="templateContext">
|
|
2237
2310
|
</ng-container>
|
|
2238
2311
|
<ng-template #default>
|
|
2239
|
-
<div class="k-pager-numbers-wrap" [ngStyle]="{opacity: initialized ?
|
|
2312
|
+
<div class="k-pager-numbers-wrap" [ngStyle]="{opacity: initialized ? null : '0'}">
|
|
2240
2313
|
<kendo-pager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-pager-prev-buttons>
|
|
2241
2314
|
<kendo-pager-numeric-buttons
|
|
2242
2315
|
[size]="size"
|
|
@@ -2247,12 +2320,12 @@ class PagerComponent {
|
|
|
2247
2320
|
<kendo-pager-next-buttons [size]="size" *ngIf="previousNext"></kendo-pager-next-buttons>
|
|
2248
2321
|
</div>
|
|
2249
2322
|
<kendo-pager-page-sizes *ngIf="_pageSizeValues.length"
|
|
2250
|
-
[ngStyle]="{opacity: initialized ?
|
|
2323
|
+
[ngStyle]="{opacity: initialized ? null : '0'}"
|
|
2251
2324
|
[size]="size"
|
|
2252
2325
|
[pageSizes]="_pageSizeValues"
|
|
2253
2326
|
[adaptiveMode]="adaptiveMode">
|
|
2254
2327
|
</kendo-pager-page-sizes>
|
|
2255
|
-
<kendo-pager-info *ngIf="info" [ngStyle]="{opacity: initialized ?
|
|
2328
|
+
<kendo-pager-info *ngIf="info" [ngStyle]="{opacity: initialized ? null : '0'}">
|
|
2256
2329
|
</kendo-pager-info>
|
|
2257
2330
|
</ng-template>
|
|
2258
2331
|
<kendo-resize-sensor *ngIf="responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
|
|
@@ -2317,7 +2390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2317
2390
|
[ngTemplateOutletContext]="templateContext">
|
|
2318
2391
|
</ng-container>
|
|
2319
2392
|
<ng-template #default>
|
|
2320
|
-
<div class="k-pager-numbers-wrap" [ngStyle]="{opacity: initialized ?
|
|
2393
|
+
<div class="k-pager-numbers-wrap" [ngStyle]="{opacity: initialized ? null : '0'}">
|
|
2321
2394
|
<kendo-pager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-pager-prev-buttons>
|
|
2322
2395
|
<kendo-pager-numeric-buttons
|
|
2323
2396
|
[size]="size"
|
|
@@ -2328,12 +2401,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2328
2401
|
<kendo-pager-next-buttons [size]="size" *ngIf="previousNext"></kendo-pager-next-buttons>
|
|
2329
2402
|
</div>
|
|
2330
2403
|
<kendo-pager-page-sizes *ngIf="_pageSizeValues.length"
|
|
2331
|
-
[ngStyle]="{opacity: initialized ?
|
|
2404
|
+
[ngStyle]="{opacity: initialized ? null : '0'}"
|
|
2332
2405
|
[size]="size"
|
|
2333
2406
|
[pageSizes]="_pageSizeValues"
|
|
2334
2407
|
[adaptiveMode]="adaptiveMode">
|
|
2335
2408
|
</kendo-pager-page-sizes>
|
|
2336
|
-
<kendo-pager-info *ngIf="info" [ngStyle]="{opacity: initialized ?
|
|
2409
|
+
<kendo-pager-info *ngIf="info" [ngStyle]="{opacity: initialized ? null : '0'}">
|
|
2337
2410
|
</kendo-pager-info>
|
|
2338
2411
|
</ng-template>
|
|
2339
2412
|
<kendo-resize-sensor *ngIf="responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
|
|
@@ -2397,9 +2470,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2397
2470
|
type: Output
|
|
2398
2471
|
}], pageSizeChange: [{
|
|
2399
2472
|
type: Output
|
|
2473
|
+
}], pagerInputVisibilityChange: [{
|
|
2474
|
+
type: Output
|
|
2475
|
+
}], pageTextVisibilityChange: [{
|
|
2476
|
+
type: Output
|
|
2477
|
+
}], itemsTextVisibilityChange: [{
|
|
2478
|
+
type: Output
|
|
2400
2479
|
}], pagerClass: [{
|
|
2401
2480
|
type: HostBinding,
|
|
2402
2481
|
args: ['class.k-pager']
|
|
2482
|
+
}], responsiveClass: [{
|
|
2483
|
+
type: HostBinding,
|
|
2484
|
+
args: ['class.k-pager-responsive']
|
|
2403
2485
|
}], widgetRole: [{
|
|
2404
2486
|
type: HostBinding,
|
|
2405
2487
|
args: ['attr.role']
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-pager",
|
|
3
|
-
"version": "19.0.0-develop.
|
|
3
|
+
"version": "19.0.0-develop.25",
|
|
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": 1747671338,
|
|
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 - 19",
|
|
28
28
|
"@angular/platform-browser": "16 - 19",
|
|
29
29
|
"@progress/kendo-licensing": "^1.5.0",
|
|
30
|
-
"@progress/kendo-angular-common": "19.0.0-develop.
|
|
31
|
-
"@progress/kendo-angular-dropdowns": "19.0.0-develop.
|
|
32
|
-
"@progress/kendo-angular-inputs": "19.0.0-develop.
|
|
33
|
-
"@progress/kendo-angular-icons": "19.0.0-develop.
|
|
34
|
-
"@progress/kendo-angular-l10n": "19.0.0-develop.
|
|
30
|
+
"@progress/kendo-angular-common": "19.0.0-develop.25",
|
|
31
|
+
"@progress/kendo-angular-dropdowns": "19.0.0-develop.25",
|
|
32
|
+
"@progress/kendo-angular-inputs": "19.0.0-develop.25",
|
|
33
|
+
"@progress/kendo-angular-icons": "19.0.0-develop.25",
|
|
34
|
+
"@progress/kendo-angular-l10n": "19.0.0-develop.25",
|
|
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.0.0-develop.
|
|
39
|
+
"@progress/kendo-angular-schematics": "19.0.0-develop.25"
|
|
40
40
|
},
|
|
41
41
|
"schematics": "./schematics/collection.json",
|
|
42
42
|
"module": "fesm2022/progress-kendo-angular-pager.mjs",
|
|
@@ -75,6 +75,7 @@ export declare class PagerComponent implements OnChanges, AfterViewInit, OnInit,
|
|
|
75
75
|
* The array can contain numbers and [PageSizeItem]({% slug api_pager_pagesizeitem %}) objects.
|
|
76
76
|
*/
|
|
77
77
|
set pageSizeValues(value: boolean | number[] | PageSizeItem[]);
|
|
78
|
+
get pageSizeValues(): boolean | number[] | PageSizeItem[];
|
|
78
79
|
/**
|
|
79
80
|
* Toggles the **Previous** and **Next** buttons.
|
|
80
81
|
*
|
|
@@ -122,7 +123,20 @@ export declare class PagerComponent implements OnChanges, AfterViewInit, OnInit,
|
|
|
122
123
|
* If the event is prevented, the page size will remain unchanged ([see example]({% slug pager_events %})).
|
|
123
124
|
*/
|
|
124
125
|
pageSizeChange: EventEmitter<PageSizeChangeEvent>;
|
|
126
|
+
/**
|
|
127
|
+
* @hidden
|
|
128
|
+
*/
|
|
129
|
+
pagerInputVisibilityChange: EventEmitter<boolean>;
|
|
130
|
+
/**
|
|
131
|
+
* @hidden
|
|
132
|
+
*/
|
|
133
|
+
pageTextVisibilityChange: EventEmitter<boolean>;
|
|
134
|
+
/**
|
|
135
|
+
* @hidden
|
|
136
|
+
*/
|
|
137
|
+
itemsTextVisibilityChange: EventEmitter<boolean>;
|
|
125
138
|
pagerClass: boolean;
|
|
139
|
+
get responsiveClass(): boolean;
|
|
126
140
|
widgetRole: string;
|
|
127
141
|
roleDescription: string;
|
|
128
142
|
keyShortcuts: string;
|
|
@@ -138,7 +152,18 @@ export declare class PagerComponent implements OnChanges, AfterViewInit, OnInit,
|
|
|
138
152
|
/**
|
|
139
153
|
* @hidden
|
|
140
154
|
*/
|
|
141
|
-
|
|
155
|
+
get showPageText(): boolean;
|
|
156
|
+
set showPageText(value: boolean);
|
|
157
|
+
/**
|
|
158
|
+
* @hidden
|
|
159
|
+
*/
|
|
160
|
+
get showItemsText(): boolean;
|
|
161
|
+
set showItemsText(value: boolean);
|
|
162
|
+
/**
|
|
163
|
+
* @hidden
|
|
164
|
+
*/
|
|
165
|
+
get showInput(): boolean;
|
|
166
|
+
set showInput(value: boolean);
|
|
142
167
|
/**
|
|
143
168
|
* @hidden
|
|
144
169
|
*/
|
|
@@ -150,6 +175,9 @@ export declare class PagerComponent implements OnChanges, AfterViewInit, OnInit,
|
|
|
150
175
|
private isInnerNavigationEnabled;
|
|
151
176
|
private _navigable;
|
|
152
177
|
private _size;
|
|
178
|
+
private _showInput;
|
|
179
|
+
private _showPageText;
|
|
180
|
+
private _showItemsText;
|
|
153
181
|
/**
|
|
154
182
|
* Stores the measurements of various Pager elements.
|
|
155
183
|
* These dimensions are used for responsive layout calculations.
|
|
@@ -177,7 +205,7 @@ export declare class PagerComponent implements OnChanges, AfterViewInit, OnInit,
|
|
|
177
205
|
/**
|
|
178
206
|
* @hidden
|
|
179
207
|
*/
|
|
180
|
-
resizeHandler: () => void;
|
|
208
|
+
resizeHandler: (compareWidth?: boolean) => void;
|
|
181
209
|
private get ariaLabel();
|
|
182
210
|
private keyDownHandler;
|
|
183
211
|
private innerNavigationChange;
|
|
@@ -190,5 +218,5 @@ export declare class PagerComponent implements OnChanges, AfterViewInit, OnInit,
|
|
|
190
218
|
private measureAllTextWidths;
|
|
191
219
|
private showNumericButtonsResponsive;
|
|
192
220
|
static ɵfac: i0.ɵɵFactoryDeclaration<PagerComponent, [{ optional: true; skipSelf: true; }, null, null, null, null, null, { optional: true; skipSelf: true; }]>;
|
|
193
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<PagerComponent, "kendo-datapager, kendo-pager", ["kendoDataPager", "kendoPager"], { "externalTemplate": { "alias": "externalTemplate"; "required": false; }; "total": { "alias": "total"; "required": false; }; "skip": { "alias": "skip"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "buttonCount": { "alias": "buttonCount"; "required": false; }; "info": { "alias": "info"; "required": false; }; "type": { "alias": "type"; "required": false; }; "pageSizeValues": { "alias": "pageSizeValues"; "required": false; }; "previousNext": { "alias": "previousNext"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "responsive": { "alias": "responsive"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; }, ["template"], never, true, never>;
|
|
221
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<PagerComponent, "kendo-datapager, kendo-pager", ["kendoDataPager", "kendoPager"], { "externalTemplate": { "alias": "externalTemplate"; "required": false; }; "total": { "alias": "total"; "required": false; }; "skip": { "alias": "skip"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "buttonCount": { "alias": "buttonCount"; "required": false; }; "info": { "alias": "info"; "required": false; }; "type": { "alias": "type"; "required": false; }; "pageSizeValues": { "alias": "pageSizeValues"; "required": false; }; "previousNext": { "alias": "previousNext"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "responsive": { "alias": "responsive"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "pagerInputVisibilityChange": "pagerInputVisibilityChange"; "pageTextVisibilityChange": "pageTextVisibilityChange"; "itemsTextVisibilityChange": "itemsTextVisibilityChange"; }, ["template"], never, true, never>;
|
|
194
222
|
}
|
|
@@ -4,14 +4,14 @@ const schematics_1 = require("@angular-devkit/schematics");
|
|
|
4
4
|
function default_1(options) {
|
|
5
5
|
const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'PagerModule', package: 'pager', peerDependencies: {
|
|
6
6
|
// Peers of inputs and dropdowns
|
|
7
|
-
'@progress/kendo-angular-treeview': '19.0.0-develop.
|
|
8
|
-
'@progress/kendo-angular-intl': '19.0.0-develop.
|
|
9
|
-
'@progress/kendo-angular-navigation': '19.0.0-develop.
|
|
10
|
-
'@progress/kendo-angular-popup': '19.0.0-develop.
|
|
7
|
+
'@progress/kendo-angular-treeview': '19.0.0-develop.25',
|
|
8
|
+
'@progress/kendo-angular-intl': '19.0.0-develop.25',
|
|
9
|
+
'@progress/kendo-angular-navigation': '19.0.0-develop.25',
|
|
10
|
+
'@progress/kendo-angular-popup': '19.0.0-develop.25',
|
|
11
11
|
'@progress/kendo-drawing': '^1.5.12',
|
|
12
12
|
// peer dependency of kendo-angular-inputs
|
|
13
|
-
'@progress/kendo-angular-buttons': '19.0.0-develop.
|
|
14
|
-
'@progress/kendo-angular-dialog': '19.0.0-develop.
|
|
13
|
+
'@progress/kendo-angular-buttons': '19.0.0-develop.25',
|
|
14
|
+
'@progress/kendo-angular-dialog': '19.0.0-develop.25',
|
|
15
15
|
// Peer dependency of icons
|
|
16
16
|
'@progress/kendo-svg-icons': '^4.0.0'
|
|
17
17
|
} });
|