@progress/kendo-angular-pager 4.1.0-dev.202211250852 → 11.0.0-develop.100
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/LICENSE.md +1 -1
- package/NOTICE.txt +4 -4
- package/README.md +1 -1
- package/{esm2015/main.js → esm2020/index.mjs} +1 -1
- package/{esm2015/package-metadata.js → esm2020/package-metadata.mjs} +3 -3
- package/{esm2015/pager/change-event-args.interface.js → esm2020/pager/change-event-args.interface.mjs} +1 -1
- package/{esm2015/pager/common/constants.js → esm2020/pager/common/constants.mjs} +1 -1
- package/{esm2015/pager/pagesize-item.interface.js → esm2020/pager/common/pager-classes.mjs} +1 -1
- package/{esm2015/pager/common/pager-type.js → esm2020/pager/common/pager-size.mjs} +1 -1
- package/esm2020/pager/common/pager-type.mjs +5 -0
- package/{esm2015/pager/focusable.directive.js → esm2020/pager/focusable.directive.mjs} +6 -5
- package/{esm2015/pager/localization/custom-messages.component.js → esm2020/pager/localization/custom-messages.component.mjs} +5 -4
- package/{esm2015/pager/localization/localized-messages.directive.js → esm2020/pager/localization/localized-messages.directive.mjs} +5 -4
- package/{esm2015/pager/localization/messages.js → esm2020/pager/localization/messages.mjs} +4 -4
- package/{esm2015/pager/navigation.service.js → esm2020/pager/navigation.service.mjs} +1 -1
- package/{esm2015/pager/pager-context.service.js → esm2020/pager/pager-context.service.mjs} +1 -1
- package/{esm2015/pager/pager-element.component.js → esm2020/pager/pager-element.component.mjs} +7 -5
- package/{esm2015/pager/pager-info.component.js → esm2020/pager/pager-info.component.mjs} +7 -8
- package/{esm2015/pager/pager-input.component.js → esm2020/pager/pager-input.component.mjs} +23 -6
- package/esm2020/pager/pager-next-buttons.component.mjs +124 -0
- package/esm2020/pager/pager-numeric-buttons.component.mjs +273 -0
- package/{esm2015/pager/pager-page-sizes.component.js → esm2020/pager/pager-page-sizes.component.mjs} +25 -8
- package/esm2020/pager/pager-prev-buttons.component.mjs +124 -0
- package/{esm2015/pager/pager-template.directive.js → esm2020/pager/pager-template.directive.mjs} +5 -5
- package/{esm2015/pager/pager.component.js → esm2020/pager/pager.component.mjs} +72 -35
- package/{esm2015/pager/pager.module.js → esm2020/pager/pager.module.mjs} +8 -5
- package/esm2020/pager/pagesize-item.interface.mjs +5 -0
- package/{esm2015/pager/pagesizechange-event.js → esm2020/pager/pagesizechange-event.mjs} +1 -1
- package/{esm2015/pager/preventable-event.js → esm2020/pager/preventable-event.mjs} +1 -1
- package/{esm2015/kendo-angular-pager.js → esm2020/progress-kendo-angular-pager.mjs} +2 -2
- package/{esm2015/util.js → esm2020/util.mjs} +26 -1
- package/fesm2015/progress-kendo-angular-pager.mjs +1966 -0
- package/{fesm2015/kendo-angular-pager.js → fesm2020/progress-kendo-angular-pager.mjs} +417 -210
- package/{main.d.ts → index.d.ts} +2 -1
- package/package-metadata.d.ts +1 -1
- package/package.json +30 -55
- package/pager/change-event-args.interface.d.ts +1 -1
- package/pager/common/constants.d.ts +1 -1
- package/pager/common/pager-classes.d.ts +11 -0
- package/pager/common/pager-size.d.ts +9 -0
- package/pager/common/pager-type.d.ts +1 -1
- package/pager/focusable.directive.d.ts +1 -1
- package/pager/localization/custom-messages.component.d.ts +1 -1
- package/pager/localization/localized-messages.directive.d.ts +1 -1
- package/pager/localization/messages.d.ts +1 -1
- package/pager/navigation.service.d.ts +1 -1
- package/pager/pager-context.service.d.ts +1 -1
- package/pager/pager-element.component.d.ts +1 -1
- package/pager/pager-info.component.d.ts +1 -1
- package/pager/pager-input.component.d.ts +13 -2
- package/pager/pager-next-buttons.component.d.ts +22 -2
- package/pager/pager-numeric-buttons.component.d.ts +21 -5
- package/pager/pager-page-sizes.component.d.ts +13 -2
- package/pager/pager-prev-buttons.component.d.ts +22 -2
- package/pager/pager-template.directive.d.ts +1 -1
- package/pager/pager.component.d.ts +19 -5
- package/pager/pager.module.d.ts +4 -3
- package/pager/pagesize-item.interface.d.ts +1 -1
- package/pager/pagesizechange-event.d.ts +1 -1
- package/pager/preventable-event.d.ts +1 -1
- package/{kendo-angular-pager.d.ts → progress-kendo-angular-pager.d.ts} +2 -2
- package/schematics/ngAdd/index.js +4 -6
- package/util.d.ts +13 -1
- package/bundles/kendo-angular-pager.umd.js +0 -5
- package/esm2015/pager/pager-next-buttons.component.js +0 -87
- package/esm2015/pager/pager-numeric-buttons.component.js +0 -217
- package/esm2015/pager/pager-prev-buttons.component.js +0 -87
- package/schematics/ngAdd/index.js.map +0 -1
|
@@ -1,19 +1,22 @@
|
|
|
1
1
|
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2023 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
5
|
import * as i0 from '@angular/core';
|
|
6
|
-
import { Directive, Input, forwardRef, Component, ChangeDetectionStrategy, ViewChild, HostBinding, Optional, EventEmitter, ContentChild, Output, HostListener, NgModule } from '@angular/core';
|
|
6
|
+
import { Directive, Input, forwardRef, Component, ChangeDetectionStrategy, ViewChild, HostBinding, Optional, ElementRef, EventEmitter, ContentChild, Output, HostListener, NgModule } from '@angular/core';
|
|
7
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
|
+
import { caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
|
|
11
|
+
import * as i3 from '@progress/kendo-angular-buttons';
|
|
12
|
+
import { ButtonsModule } from '@progress/kendo-angular-buttons';
|
|
13
|
+
import * as i3$1 from '@progress/kendo-angular-dropdowns';
|
|
14
|
+
import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
|
|
10
15
|
import * as i6 from '@progress/kendo-angular-common';
|
|
11
16
|
import { Keys, anyChanged, ResizeSensorComponent, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
|
|
12
|
-
import * as
|
|
13
|
-
import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
|
|
14
|
-
import * as i4 from '@angular/common';
|
|
17
|
+
import * as i5 from '@angular/common';
|
|
15
18
|
import { CommonModule } from '@angular/common';
|
|
16
|
-
import * as i3$
|
|
19
|
+
import * as i3$2 from '@progress/kendo-angular-inputs';
|
|
17
20
|
import { NumericTextBoxComponent, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
|
|
18
21
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
19
22
|
|
|
@@ -62,9 +65,9 @@ class PageSizeChangeEvent extends PreventableEvent {
|
|
|
62
65
|
*/
|
|
63
66
|
class Messages extends ComponentMessages {
|
|
64
67
|
}
|
|
65
|
-
Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
66
|
-
Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "
|
|
67
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
68
|
+
Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
69
|
+
Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", 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 });
|
|
70
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, decorators: [{
|
|
68
71
|
type: Directive,
|
|
69
72
|
args: [{
|
|
70
73
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -107,14 +110,14 @@ class CustomMessagesComponent extends Messages {
|
|
|
107
110
|
return true;
|
|
108
111
|
}
|
|
109
112
|
}
|
|
110
|
-
CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
111
|
-
CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "
|
|
113
|
+
CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
114
|
+
CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CustomMessagesComponent, selector: "kendo-datapager-messages", providers: [
|
|
112
115
|
{
|
|
113
116
|
provide: Messages,
|
|
114
117
|
useExisting: forwardRef(() => CustomMessagesComponent)
|
|
115
118
|
}
|
|
116
119
|
], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
|
|
117
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
120
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, decorators: [{
|
|
118
121
|
type: Component,
|
|
119
122
|
args: [{
|
|
120
123
|
providers: [
|
|
@@ -137,14 +140,14 @@ class LocalizedMessagesDirective extends Messages {
|
|
|
137
140
|
this.service = service;
|
|
138
141
|
}
|
|
139
142
|
}
|
|
140
|
-
LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
141
|
-
LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "
|
|
143
|
+
LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
144
|
+
LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]", providers: [
|
|
142
145
|
{
|
|
143
146
|
provide: Messages,
|
|
144
147
|
useExisting: forwardRef(() => LocalizedMessagesDirective)
|
|
145
148
|
}
|
|
146
149
|
], usesInheritance: true, ngImport: i0 });
|
|
147
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
150
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
|
|
148
151
|
type: Directive,
|
|
149
152
|
args: [{
|
|
150
153
|
providers: [
|
|
@@ -264,9 +267,9 @@ class PagerElementComponent {
|
|
|
264
267
|
}
|
|
265
268
|
}
|
|
266
269
|
}
|
|
267
|
-
PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
268
|
-
PagerElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "
|
|
269
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
270
|
+
PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerElementComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
271
|
+
PagerElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerElementComponent, selector: "kendo-pager-element", ngImport: i0, template: ``, isInline: true });
|
|
272
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerElementComponent, decorators: [{
|
|
270
273
|
type: Component,
|
|
271
274
|
args: [{
|
|
272
275
|
selector: 'kendo-pager-element',
|
|
@@ -304,6 +307,31 @@ const focusableSelector = [
|
|
|
304
307
|
'*[tabindex]:not([disabled])',
|
|
305
308
|
'*[contenteditable]:not([disabled]):not([contenteditable="false"])'
|
|
306
309
|
].join(',');
|
|
310
|
+
/**
|
|
311
|
+
* @hidden
|
|
312
|
+
*/
|
|
313
|
+
const DEFAULT_SIZE = 'medium';
|
|
314
|
+
const SIZES = {
|
|
315
|
+
small: 'sm',
|
|
316
|
+
medium: 'md',
|
|
317
|
+
large: 'lg'
|
|
318
|
+
};
|
|
319
|
+
/**
|
|
320
|
+
* @hidden
|
|
321
|
+
*
|
|
322
|
+
* Returns the styling classes to be added and removed
|
|
323
|
+
*/
|
|
324
|
+
const getStylingClasses = (componentType, stylingOption, previousValue, newValue) => {
|
|
325
|
+
switch (stylingOption) {
|
|
326
|
+
case 'size':
|
|
327
|
+
return {
|
|
328
|
+
toRemove: `k-${componentType}-${SIZES[previousValue]}`,
|
|
329
|
+
toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
|
|
330
|
+
};
|
|
331
|
+
default:
|
|
332
|
+
break;
|
|
333
|
+
}
|
|
334
|
+
};
|
|
307
335
|
|
|
308
336
|
/**
|
|
309
337
|
* @hidden
|
|
@@ -370,9 +398,9 @@ class PagerFocusableDirective {
|
|
|
370
398
|
});
|
|
371
399
|
}
|
|
372
400
|
}
|
|
373
|
-
PagerFocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
374
|
-
PagerFocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "
|
|
375
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
401
|
+
PagerFocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerFocusableDirective, deps: [{ token: PagerNavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
402
|
+
PagerFocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"], ngImport: i0 });
|
|
403
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerFocusableDirective, decorators: [{
|
|
376
404
|
type: Directive,
|
|
377
405
|
args: [{
|
|
378
406
|
selector: '[kendoPagerFocusable]',
|
|
@@ -387,6 +415,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
387
415
|
class PagerPrevButtonsComponent extends PagerElementComponent {
|
|
388
416
|
constructor(localization, pagerContext, cd) {
|
|
389
417
|
super(localization, pagerContext, cd);
|
|
418
|
+
/**
|
|
419
|
+
* @hidden
|
|
420
|
+
*/
|
|
421
|
+
this.caretAltLeftIcon = caretAltLeftIcon;
|
|
422
|
+
/**
|
|
423
|
+
* @hidden
|
|
424
|
+
*/
|
|
425
|
+
this.caretAltToLeftIcon = caretAltToLeftIcon;
|
|
426
|
+
/**
|
|
427
|
+
* Specifies the padding of the buttons.
|
|
428
|
+
*
|
|
429
|
+
* The possible values are:
|
|
430
|
+
* * `small`
|
|
431
|
+
* * `medium` (default)
|
|
432
|
+
* * `large`
|
|
433
|
+
* * `none`
|
|
434
|
+
*/
|
|
435
|
+
this.size = DEFAULT_SIZE;
|
|
390
436
|
}
|
|
391
437
|
/**
|
|
392
438
|
* @hidden
|
|
@@ -405,58 +451,72 @@ class PagerPrevButtonsComponent extends PagerElementComponent {
|
|
|
405
451
|
this.cd.markForCheck();
|
|
406
452
|
}
|
|
407
453
|
}
|
|
408
|
-
PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
409
|
-
PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "
|
|
454
|
+
PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
455
|
+
PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
|
|
410
456
|
<button
|
|
411
|
-
type="button" kendoPagerFocusable
|
|
412
|
-
class="k-
|
|
413
|
-
[
|
|
457
|
+
type="button" kendoButton kendoPagerFocusable
|
|
458
|
+
class="k-pager-nav k-pager-first"
|
|
459
|
+
[disabled]="disabled"
|
|
460
|
+
icon="caret-alt-to-left"
|
|
461
|
+
[svgIcon]="caretAltToLeftIcon"
|
|
462
|
+
fillMode="flat"
|
|
463
|
+
rounded="none"
|
|
464
|
+
[size]="size"
|
|
414
465
|
[title]="textFor('firstPage')"
|
|
415
466
|
[attr.aria-label]="textFor('firstPage')"
|
|
416
|
-
[attr.aria-disabled]="disabled ? true : undefined"
|
|
417
467
|
(click)="currentPage !== 1 ? changePage(0) : false">
|
|
418
|
-
<span class="k-icon k-i-seek-w" role="note" [attr.aria-label]="textFor('firstPage')"></span>
|
|
419
468
|
</button>
|
|
420
469
|
<button
|
|
421
|
-
type="button" kendoPagerFocusable
|
|
422
|
-
class="k-
|
|
423
|
-
[
|
|
470
|
+
type="button" kendoButton kendoPagerFocusable
|
|
471
|
+
class="k-pager-nav"
|
|
472
|
+
[disabled]="disabled"
|
|
473
|
+
icon="caret-alt-left"
|
|
474
|
+
[svgIcon]="caretAltLeftIcon"
|
|
475
|
+
fillMode="flat"
|
|
476
|
+
rounded="none"
|
|
477
|
+
[size]="size"
|
|
424
478
|
[title]="textFor('previousPage')"
|
|
425
479
|
[attr.aria-label]="textFor('previousPage')"
|
|
426
|
-
[attr.aria-disabled]="disabled ? true : undefined"
|
|
427
480
|
(click)="currentPage !== 1 ? changePage(currentPage-2) : false">
|
|
428
|
-
<span class="k-icon k-i-arrow-w" role="note" [attr.aria-label]="textFor('previousPage')"></span>
|
|
429
481
|
</button>
|
|
430
|
-
`, isInline: true, directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
431
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
482
|
+
`, isInline: true, components: [{ type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
483
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
|
|
432
484
|
type: Component,
|
|
433
485
|
args: [{
|
|
434
486
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
435
487
|
selector: 'kendo-datapager-prev-buttons',
|
|
436
488
|
template: `
|
|
437
489
|
<button
|
|
438
|
-
type="button" kendoPagerFocusable
|
|
439
|
-
class="k-
|
|
440
|
-
[
|
|
490
|
+
type="button" kendoButton kendoPagerFocusable
|
|
491
|
+
class="k-pager-nav k-pager-first"
|
|
492
|
+
[disabled]="disabled"
|
|
493
|
+
icon="caret-alt-to-left"
|
|
494
|
+
[svgIcon]="caretAltToLeftIcon"
|
|
495
|
+
fillMode="flat"
|
|
496
|
+
rounded="none"
|
|
497
|
+
[size]="size"
|
|
441
498
|
[title]="textFor('firstPage')"
|
|
442
499
|
[attr.aria-label]="textFor('firstPage')"
|
|
443
|
-
[attr.aria-disabled]="disabled ? true : undefined"
|
|
444
500
|
(click)="currentPage !== 1 ? changePage(0) : false">
|
|
445
|
-
<span class="k-icon k-i-seek-w" role="note" [attr.aria-label]="textFor('firstPage')"></span>
|
|
446
501
|
</button>
|
|
447
502
|
<button
|
|
448
|
-
type="button" kendoPagerFocusable
|
|
449
|
-
class="k-
|
|
450
|
-
[
|
|
503
|
+
type="button" kendoButton kendoPagerFocusable
|
|
504
|
+
class="k-pager-nav"
|
|
505
|
+
[disabled]="disabled"
|
|
506
|
+
icon="caret-alt-left"
|
|
507
|
+
[svgIcon]="caretAltLeftIcon"
|
|
508
|
+
fillMode="flat"
|
|
509
|
+
rounded="none"
|
|
510
|
+
[size]="size"
|
|
451
511
|
[title]="textFor('previousPage')"
|
|
452
512
|
[attr.aria-label]="textFor('previousPage')"
|
|
453
|
-
[attr.aria-disabled]="disabled ? true : undefined"
|
|
454
513
|
(click)="currentPage !== 1 ? changePage(currentPage-2) : false">
|
|
455
|
-
<span class="k-icon k-i-arrow-w" role="note" [attr.aria-label]="textFor('previousPage')"></span>
|
|
456
514
|
</button>
|
|
457
515
|
`
|
|
458
516
|
}]
|
|
459
|
-
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; }
|
|
517
|
+
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
|
|
518
|
+
type: Input
|
|
519
|
+
}] } });
|
|
460
520
|
|
|
461
521
|
/**
|
|
462
522
|
* Displays a drop-down list for the page size selection ([see example]({% slug pager_settings %})).
|
|
@@ -467,6 +527,16 @@ class PagerPageSizesComponent extends PagerElementComponent {
|
|
|
467
527
|
this.pagerContext = pagerContext;
|
|
468
528
|
this.element = element;
|
|
469
529
|
this.ngZone = ngZone;
|
|
530
|
+
/**
|
|
531
|
+
* Specifies the padding of the dropdown.
|
|
532
|
+
*
|
|
533
|
+
* The possible values are:
|
|
534
|
+
* * `small`
|
|
535
|
+
* * `medium` (default)
|
|
536
|
+
* * `large`
|
|
537
|
+
* * `none`
|
|
538
|
+
*/
|
|
539
|
+
this.size = DEFAULT_SIZE;
|
|
470
540
|
this._pageSizes = [];
|
|
471
541
|
}
|
|
472
542
|
/**
|
|
@@ -650,10 +720,12 @@ class PagerPageSizesComponent extends PagerElementComponent {
|
|
|
650
720
|
}
|
|
651
721
|
}
|
|
652
722
|
}
|
|
653
|
-
PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
654
|
-
PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "
|
|
723
|
+
PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
724
|
+
PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: { pageSizes: "pageSizes", size: "size" }, host: { properties: { "class.k-pager-sizes": "this.classes" } }, viewQueries: [{ propertyName: "dropDownList", first: true, predicate: ["dropdownlist"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
|
|
655
725
|
<kendo-dropdownlist kendoPagerFocusable
|
|
726
|
+
class="k-dropdown"
|
|
656
727
|
#dropdownlist
|
|
728
|
+
[size]="size"
|
|
657
729
|
[data]="pageSizes"
|
|
658
730
|
textField="text"
|
|
659
731
|
valueField="value"
|
|
@@ -661,15 +733,17 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
|
|
|
661
733
|
[value]="pageSize"
|
|
662
734
|
(valueChange)="pageSizeChange($event, dropdownlist)"></kendo-dropdownlist>
|
|
663
735
|
{{ textFor('itemsPerPage') }}
|
|
664
|
-
`, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
665
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
736
|
+
`, isInline: true, components: [{ type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
737
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
|
|
666
738
|
type: Component,
|
|
667
739
|
args: [{
|
|
668
740
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
669
741
|
selector: 'kendo-datapager-page-sizes',
|
|
670
742
|
template: `
|
|
671
743
|
<kendo-dropdownlist kendoPagerFocusable
|
|
744
|
+
class="k-dropdown"
|
|
672
745
|
#dropdownlist
|
|
746
|
+
[size]="size"
|
|
673
747
|
[data]="pageSizes"
|
|
674
748
|
textField="text"
|
|
675
749
|
valueField="value"
|
|
@@ -684,12 +758,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
684
758
|
args: ['dropdownlist', { static: true }]
|
|
685
759
|
}], pageSizes: [{
|
|
686
760
|
type: Input
|
|
761
|
+
}], size: [{
|
|
762
|
+
type: Input
|
|
687
763
|
}], classes: [{
|
|
688
764
|
type: HostBinding,
|
|
689
765
|
args: ["class.k-pager-sizes"]
|
|
690
|
-
}, {
|
|
691
|
-
type: HostBinding,
|
|
692
|
-
args: ["class.k-label"]
|
|
693
766
|
}] } });
|
|
694
767
|
|
|
695
768
|
/**
|
|
@@ -739,9 +812,9 @@ class PagerTemplateDirective {
|
|
|
739
812
|
this.templateRef = templateRef;
|
|
740
813
|
}
|
|
741
814
|
}
|
|
742
|
-
PagerTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
743
|
-
PagerTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "
|
|
744
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
815
|
+
PagerTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
816
|
+
PagerTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: PagerTemplateDirective, selector: "[kendoDataPagerTemplate]", ngImport: i0 });
|
|
817
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerTemplateDirective, decorators: [{
|
|
745
818
|
type: Directive,
|
|
746
819
|
args: [{
|
|
747
820
|
selector: '[kendoDataPagerTemplate]'
|
|
@@ -754,10 +827,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
754
827
|
* Displays numeric buttons to enable navigation between the pages.
|
|
755
828
|
*/
|
|
756
829
|
class PagerNumericButtonsComponent extends PagerElementComponent {
|
|
757
|
-
constructor(localization, cd, pagerContext) {
|
|
830
|
+
constructor(localization, cd, pagerContext, renderer) {
|
|
758
831
|
super(localization, pagerContext, cd);
|
|
759
832
|
this.pagerContext = pagerContext;
|
|
760
|
-
this.
|
|
833
|
+
this.renderer = renderer;
|
|
834
|
+
this._size = DEFAULT_SIZE;
|
|
835
|
+
}
|
|
836
|
+
/**
|
|
837
|
+
* Specifies the padding of the numeric buttons.
|
|
838
|
+
*
|
|
839
|
+
* The possible values are:
|
|
840
|
+
* * `small`
|
|
841
|
+
* * `medium` (default)
|
|
842
|
+
* * `large`
|
|
843
|
+
* * `none`
|
|
844
|
+
*/
|
|
845
|
+
set size(size) {
|
|
846
|
+
const newSize = size ? size : DEFAULT_SIZE;
|
|
847
|
+
this.handleClasses(newSize, 'size');
|
|
848
|
+
this._size = newSize;
|
|
849
|
+
}
|
|
850
|
+
get size() {
|
|
851
|
+
return this._size;
|
|
761
852
|
}
|
|
762
853
|
/**
|
|
763
854
|
* @hidden
|
|
@@ -767,7 +858,7 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
|
|
|
767
858
|
* @memberOf PagerNumericButtonsComponent
|
|
768
859
|
*/
|
|
769
860
|
get buttons() {
|
|
770
|
-
|
|
861
|
+
const result = [];
|
|
771
862
|
for (let idx = this.start; idx <= this.end; idx++) {
|
|
772
863
|
result.push(idx);
|
|
773
864
|
}
|
|
@@ -791,6 +882,9 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
|
|
|
791
882
|
}
|
|
792
883
|
return 1;
|
|
793
884
|
}
|
|
885
|
+
ngAfterViewInit() {
|
|
886
|
+
this.handleClasses(this.size, 'size');
|
|
887
|
+
}
|
|
794
888
|
/**
|
|
795
889
|
* @hidden
|
|
796
890
|
*/
|
|
@@ -828,16 +922,28 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
|
|
|
828
922
|
get pageChooserLabel() {
|
|
829
923
|
return this.textFor('selectPage');
|
|
830
924
|
}
|
|
925
|
+
handleClasses(value, input) {
|
|
926
|
+
const elem = this.selectElement?.nativeElement;
|
|
927
|
+
const classes = getStylingClasses('picker', input, this[input], value);
|
|
928
|
+
if (!elem) {
|
|
929
|
+
return;
|
|
930
|
+
}
|
|
931
|
+
if (classes.toRemove) {
|
|
932
|
+
this.renderer.removeClass(elem, classes.toRemove);
|
|
933
|
+
}
|
|
934
|
+
if (classes.toAdd) {
|
|
935
|
+
this.renderer.addClass(elem, classes.toAdd);
|
|
936
|
+
}
|
|
937
|
+
}
|
|
831
938
|
}
|
|
832
|
-
PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
833
|
-
PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "
|
|
834
|
-
<select kendoPagerFocusable
|
|
835
|
-
class="k-dropdown-list k-
|
|
939
|
+
PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
940
|
+
PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: { buttonCount: "buttonCount", size: "size" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
|
|
941
|
+
<select kendoPagerFocusable #select
|
|
942
|
+
class="k-dropdown-list k-dropdown k-picker k-rounded-md"
|
|
836
943
|
[attr.title]="pageChooserLabel"
|
|
837
944
|
[attr.aria-label]="pageChooserLabel"
|
|
838
945
|
(change)="onSelectChange($event)">
|
|
839
946
|
<option *ngIf="start > 1"
|
|
840
|
-
class="k-link"
|
|
841
947
|
value="previousButtons"
|
|
842
948
|
[selected]="false"
|
|
843
949
|
[attr.aria-label]="pageLabel(start - 1)">...
|
|
@@ -847,59 +953,67 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
|
|
|
847
953
|
[selected]="num === currentPage"
|
|
848
954
|
[attr.aria-label]="pageLabel(num)"
|
|
849
955
|
[attr.aria-current]="currentPage === num ? 'page' : undefined"
|
|
850
|
-
[ngClass]="{'k-
|
|
956
|
+
[ngClass]="{'k-selected':currentPage === num}">
|
|
851
957
|
{{num}}
|
|
852
958
|
</option>
|
|
853
959
|
<option *ngIf="end < totalPages"
|
|
854
960
|
value="nextButtons"
|
|
855
961
|
[selected]="false"
|
|
856
|
-
class="k-link"
|
|
857
962
|
[attr.aria-label]="pageLabel(end + 1)">...
|
|
858
963
|
</option>
|
|
859
964
|
</select>
|
|
860
|
-
<
|
|
861
|
-
<
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
965
|
+
<div [ngClass]="{'k-pager-numbers': true}">
|
|
966
|
+
<button *ngIf="start > 1"
|
|
967
|
+
type="button"
|
|
968
|
+
kendoPagerFocusable
|
|
969
|
+
kendoButton
|
|
970
|
+
[size]="size"
|
|
971
|
+
fillMode="flat"
|
|
972
|
+
themeColor="primary"
|
|
973
|
+
rounded="none"
|
|
974
|
+
[attr.aria-label]="pageLabel(start - 1)"
|
|
975
|
+
[attr.title]="pageLabel(start - 1)"
|
|
976
|
+
(click)="changePage(start - 2)">...</button>
|
|
977
|
+
<button *ngFor="let num of buttons"
|
|
978
|
+
type="button"
|
|
979
|
+
kendoPagerFocusable
|
|
980
|
+
kendoButton
|
|
981
|
+
[size]="size"
|
|
982
|
+
fillMode="flat"
|
|
983
|
+
themeColor="primary"
|
|
984
|
+
rounded="none"
|
|
985
|
+
[attr.aria-label]="pageLabel(num)"
|
|
986
|
+
[attr.title]="pageLabel(num)"
|
|
987
|
+
[attr.aria-current]="currentPage === num ? 'page' : undefined"
|
|
988
|
+
[selected]="currentPage === num"
|
|
989
|
+
(click)="changePage(num - 1)">
|
|
990
|
+
{{num}}
|
|
991
|
+
</button>
|
|
992
|
+
<button *ngIf="end < totalPages"
|
|
993
|
+
type="button"
|
|
994
|
+
kendoPagerFocusable
|
|
995
|
+
kendoButton
|
|
996
|
+
[size]="size"
|
|
997
|
+
fillMode="flat"
|
|
998
|
+
themeColor="primary"
|
|
999
|
+
rounded="none"
|
|
1000
|
+
[attr.aria-label]="pageLabel(end + 1)"
|
|
1001
|
+
[attr.title]="pageLabel(end + 1)"
|
|
1002
|
+
(click)="changePage(end)">...</button>
|
|
1003
|
+
</div>
|
|
1004
|
+
`, isInline: true, components: [{ type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1005
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
|
|
891
1006
|
type: Component,
|
|
892
1007
|
args: [{
|
|
893
1008
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
894
1009
|
selector: 'kendo-datapager-numeric-buttons',
|
|
895
1010
|
template: `
|
|
896
|
-
<select kendoPagerFocusable
|
|
897
|
-
class="k-dropdown-list k-
|
|
1011
|
+
<select kendoPagerFocusable #select
|
|
1012
|
+
class="k-dropdown-list k-dropdown k-picker k-rounded-md"
|
|
898
1013
|
[attr.title]="pageChooserLabel"
|
|
899
1014
|
[attr.aria-label]="pageChooserLabel"
|
|
900
1015
|
(change)="onSelectChange($event)">
|
|
901
1016
|
<option *ngIf="start > 1"
|
|
902
|
-
class="k-link"
|
|
903
1017
|
value="previousButtons"
|
|
904
1018
|
[selected]="false"
|
|
905
1019
|
[attr.aria-label]="pageLabel(start - 1)">...
|
|
@@ -909,52 +1023,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
909
1023
|
[selected]="num === currentPage"
|
|
910
1024
|
[attr.aria-label]="pageLabel(num)"
|
|
911
1025
|
[attr.aria-current]="currentPage === num ? 'page' : undefined"
|
|
912
|
-
[ngClass]="{'k-
|
|
1026
|
+
[ngClass]="{'k-selected':currentPage === num}">
|
|
913
1027
|
{{num}}
|
|
914
1028
|
</option>
|
|
915
1029
|
<option *ngIf="end < totalPages"
|
|
916
1030
|
value="nextButtons"
|
|
917
1031
|
[selected]="false"
|
|
918
|
-
class="k-link"
|
|
919
1032
|
[attr.aria-label]="pageLabel(end + 1)">...
|
|
920
1033
|
</option>
|
|
921
1034
|
</select>
|
|
922
|
-
<
|
|
923
|
-
<
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
1035
|
+
<div [ngClass]="{'k-pager-numbers': true}">
|
|
1036
|
+
<button *ngIf="start > 1"
|
|
1037
|
+
type="button"
|
|
1038
|
+
kendoPagerFocusable
|
|
1039
|
+
kendoButton
|
|
1040
|
+
[size]="size"
|
|
1041
|
+
fillMode="flat"
|
|
1042
|
+
themeColor="primary"
|
|
1043
|
+
rounded="none"
|
|
1044
|
+
[attr.aria-label]="pageLabel(start - 1)"
|
|
1045
|
+
[attr.title]="pageLabel(start - 1)"
|
|
1046
|
+
(click)="changePage(start - 2)">...</button>
|
|
1047
|
+
<button *ngFor="let num of buttons"
|
|
1048
|
+
type="button"
|
|
1049
|
+
kendoPagerFocusable
|
|
1050
|
+
kendoButton
|
|
1051
|
+
[size]="size"
|
|
1052
|
+
fillMode="flat"
|
|
1053
|
+
themeColor="primary"
|
|
1054
|
+
rounded="none"
|
|
1055
|
+
[attr.aria-label]="pageLabel(num)"
|
|
1056
|
+
[attr.title]="pageLabel(num)"
|
|
1057
|
+
[attr.aria-current]="currentPage === num ? 'page' : undefined"
|
|
1058
|
+
[selected]="currentPage === num"
|
|
1059
|
+
(click)="changePage(num - 1)">
|
|
1060
|
+
{{num}}
|
|
1061
|
+
</button>
|
|
1062
|
+
<button *ngIf="end < totalPages"
|
|
1063
|
+
type="button"
|
|
1064
|
+
kendoPagerFocusable
|
|
1065
|
+
kendoButton
|
|
1066
|
+
[size]="size"
|
|
1067
|
+
fillMode="flat"
|
|
1068
|
+
themeColor="primary"
|
|
1069
|
+
rounded="none"
|
|
1070
|
+
[attr.aria-label]="pageLabel(end + 1)"
|
|
1071
|
+
[attr.title]="pageLabel(end + 1)"
|
|
1072
|
+
(click)="changePage(end)">...</button>
|
|
1073
|
+
</div>
|
|
951
1074
|
`
|
|
952
1075
|
}]
|
|
953
|
-
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: {
|
|
954
|
-
type:
|
|
955
|
-
args: ['
|
|
1076
|
+
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: i0.Renderer2 }]; }, propDecorators: { selectElement: [{
|
|
1077
|
+
type: ViewChild,
|
|
1078
|
+
args: ['select', { read: ElementRef }]
|
|
956
1079
|
}], buttonCount: [{
|
|
957
1080
|
type: Input
|
|
1081
|
+
}], size: [{
|
|
1082
|
+
type: Input
|
|
958
1083
|
}] } });
|
|
959
1084
|
|
|
960
1085
|
// eslint-disable no-access-missing-member
|
|
@@ -964,6 +1089,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
964
1089
|
class PagerNextButtonsComponent extends PagerElementComponent {
|
|
965
1090
|
constructor(localization, pagerContext, cd) {
|
|
966
1091
|
super(localization, pagerContext, cd);
|
|
1092
|
+
/**
|
|
1093
|
+
* @hidden
|
|
1094
|
+
*/
|
|
1095
|
+
this.caretAltRightIcon = caretAltRightIcon;
|
|
1096
|
+
/**
|
|
1097
|
+
* @hidden
|
|
1098
|
+
*/
|
|
1099
|
+
this.caretAltToRightIcon = caretAltToRightIcon;
|
|
1100
|
+
/**
|
|
1101
|
+
* Specifies the padding of the buttons.
|
|
1102
|
+
*
|
|
1103
|
+
* The possible values are:
|
|
1104
|
+
* * `small`
|
|
1105
|
+
* * `medium` (default)
|
|
1106
|
+
* * `large`
|
|
1107
|
+
* * `none`
|
|
1108
|
+
*/
|
|
1109
|
+
this.size = DEFAULT_SIZE;
|
|
967
1110
|
}
|
|
968
1111
|
/**
|
|
969
1112
|
* @hidden
|
|
@@ -982,58 +1125,72 @@ class PagerNextButtonsComponent extends PagerElementComponent {
|
|
|
982
1125
|
this.cd.markForCheck();
|
|
983
1126
|
}
|
|
984
1127
|
}
|
|
985
|
-
PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
986
|
-
PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "
|
|
987
|
-
<button
|
|
988
|
-
type="button"
|
|
989
|
-
|
|
990
|
-
|
|
1128
|
+
PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1129
|
+
PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
|
|
1130
|
+
<button kendoButton kendoPagerFocusable
|
|
1131
|
+
type="button"
|
|
1132
|
+
[size]="size"
|
|
1133
|
+
icon="caret-alt-right"
|
|
1134
|
+
[svgIcon]="caretAltRightIcon"
|
|
1135
|
+
fillMode="flat"
|
|
1136
|
+
rounded="none"
|
|
1137
|
+
class="k-pager-nav"
|
|
1138
|
+
[disabled]="disabled"
|
|
991
1139
|
[title]="textFor('nextPage')"
|
|
992
1140
|
[attr.aria-label]="textFor('nextPage')"
|
|
993
|
-
[attr.aria-disabled]="disabled ? true : undefined"
|
|
994
1141
|
(click)="currentPage !== totalPages ? changePage(currentPage) : false">
|
|
995
|
-
<span class="k-icon k-i-arrow-e" role="note" [attr.aria-label]="textFor('nextPage')"></span>
|
|
996
1142
|
</button>
|
|
997
|
-
<button
|
|
998
|
-
type="button"
|
|
999
|
-
|
|
1000
|
-
|
|
1143
|
+
<button kendoButton kendoPagerFocusable
|
|
1144
|
+
type="button"
|
|
1145
|
+
[size]="size"
|
|
1146
|
+
icon="caret-alt-to-right"
|
|
1147
|
+
[svgIcon]="caretAltToRightIcon"
|
|
1148
|
+
fillMode="flat"
|
|
1149
|
+
rounded="none"
|
|
1150
|
+
class="k-pager-nav k-pager-last"
|
|
1151
|
+
[disabled]="disabled"
|
|
1001
1152
|
[title]="textFor('lastPage')"
|
|
1002
1153
|
[attr.aria-label]="textFor('lastPage')"
|
|
1003
|
-
[attr.aria-disabled]="disabled ? true : undefined"
|
|
1004
1154
|
(click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
|
|
1005
|
-
<span class="k-icon k-i-seek-e" role="note" [attr.aria-label]="textFor('lastPage')"></span>
|
|
1006
1155
|
</button>
|
|
1007
|
-
`, isInline: true, directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1008
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1156
|
+
`, isInline: true, components: [{ type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1157
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
|
|
1009
1158
|
type: Component,
|
|
1010
1159
|
args: [{
|
|
1011
1160
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1012
1161
|
selector: 'kendo-datapager-next-buttons',
|
|
1013
1162
|
template: `
|
|
1014
|
-
<button
|
|
1015
|
-
type="button"
|
|
1016
|
-
|
|
1017
|
-
|
|
1163
|
+
<button kendoButton kendoPagerFocusable
|
|
1164
|
+
type="button"
|
|
1165
|
+
[size]="size"
|
|
1166
|
+
icon="caret-alt-right"
|
|
1167
|
+
[svgIcon]="caretAltRightIcon"
|
|
1168
|
+
fillMode="flat"
|
|
1169
|
+
rounded="none"
|
|
1170
|
+
class="k-pager-nav"
|
|
1171
|
+
[disabled]="disabled"
|
|
1018
1172
|
[title]="textFor('nextPage')"
|
|
1019
1173
|
[attr.aria-label]="textFor('nextPage')"
|
|
1020
|
-
[attr.aria-disabled]="disabled ? true : undefined"
|
|
1021
1174
|
(click)="currentPage !== totalPages ? changePage(currentPage) : false">
|
|
1022
|
-
<span class="k-icon k-i-arrow-e" role="note" [attr.aria-label]="textFor('nextPage')"></span>
|
|
1023
1175
|
</button>
|
|
1024
|
-
<button
|
|
1025
|
-
type="button"
|
|
1026
|
-
|
|
1027
|
-
|
|
1176
|
+
<button kendoButton kendoPagerFocusable
|
|
1177
|
+
type="button"
|
|
1178
|
+
[size]="size"
|
|
1179
|
+
icon="caret-alt-to-right"
|
|
1180
|
+
[svgIcon]="caretAltToRightIcon"
|
|
1181
|
+
fillMode="flat"
|
|
1182
|
+
rounded="none"
|
|
1183
|
+
class="k-pager-nav k-pager-last"
|
|
1184
|
+
[disabled]="disabled"
|
|
1028
1185
|
[title]="textFor('lastPage')"
|
|
1029
1186
|
[attr.aria-label]="textFor('lastPage')"
|
|
1030
|
-
[attr.aria-disabled]="disabled ? true : undefined"
|
|
1031
1187
|
(click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
|
|
1032
|
-
<span class="k-icon k-i-seek-e" role="note" [attr.aria-label]="textFor('lastPage')"></span>
|
|
1033
1188
|
</button>
|
|
1034
1189
|
`
|
|
1035
1190
|
}]
|
|
1036
|
-
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; }
|
|
1191
|
+
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
|
|
1192
|
+
type: Input
|
|
1193
|
+
}] } });
|
|
1037
1194
|
|
|
1038
1195
|
/**
|
|
1039
1196
|
* Displays an input element which allows the typing and rendering of page numbers.
|
|
@@ -1044,6 +1201,16 @@ class PagerInputComponent extends PagerElementComponent {
|
|
|
1044
1201
|
this.pagerContext = pagerContext;
|
|
1045
1202
|
this.zone = zone;
|
|
1046
1203
|
this.renderer = renderer;
|
|
1204
|
+
/**
|
|
1205
|
+
* Specifies the padding of the internal numeric input element.
|
|
1206
|
+
*
|
|
1207
|
+
* The possible values are:
|
|
1208
|
+
* * `small`
|
|
1209
|
+
* * `medium` (default)
|
|
1210
|
+
* * `large`
|
|
1211
|
+
* * `none`
|
|
1212
|
+
*/
|
|
1213
|
+
this.size = DEFAULT_SIZE;
|
|
1047
1214
|
/**
|
|
1048
1215
|
* @hidden
|
|
1049
1216
|
*
|
|
@@ -1052,7 +1219,7 @@ class PagerInputComponent extends PagerElementComponent {
|
|
|
1052
1219
|
* @memberOf PagerInputComponent
|
|
1053
1220
|
*/
|
|
1054
1221
|
this.handleKeyDown = (event) => {
|
|
1055
|
-
|
|
1222
|
+
const incomingValue = this.numericInput.value || this.current;
|
|
1056
1223
|
// eslint-disable import/no-deprecated
|
|
1057
1224
|
if (event.keyCode === Keys.Enter) {
|
|
1058
1225
|
event.preventDefault();
|
|
@@ -1106,14 +1273,15 @@ class PagerInputComponent extends PagerElementComponent {
|
|
|
1106
1273
|
this.cd.markForCheck();
|
|
1107
1274
|
}
|
|
1108
1275
|
}
|
|
1109
|
-
PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1110
|
-
PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "
|
|
1276
|
+
PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1277
|
+
PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerInputComponent, selector: "kendo-datapager-input", inputs: { size: "size" }, viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
|
|
1111
1278
|
<span [ngClass]="{'k-pager-input': true, 'k-label': true}">
|
|
1112
1279
|
{{textFor('page')}}
|
|
1113
1280
|
<kendo-numerictextbox kendoPagerFocusable
|
|
1114
1281
|
[spinners]="false"
|
|
1115
1282
|
[decimals]="0"
|
|
1116
1283
|
format="n0"
|
|
1284
|
+
[size]="size"
|
|
1117
1285
|
[disabled]="!hasPages"
|
|
1118
1286
|
[value]="current"
|
|
1119
1287
|
[min]="hasPages ? 1 : 0"
|
|
@@ -1127,8 +1295,8 @@ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
1127
1295
|
</kendo-numerictextbox>
|
|
1128
1296
|
{{textFor('of')}} {{totalPages}}
|
|
1129
1297
|
</span>
|
|
1130
|
-
`, isInline: true, components: [{ type: i3$
|
|
1131
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1298
|
+
`, isInline: true, components: [{ type: i3$2.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"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
|
|
1299
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInputComponent, decorators: [{
|
|
1132
1300
|
type: Component,
|
|
1133
1301
|
args: [{
|
|
1134
1302
|
selector: 'kendo-datapager-input',
|
|
@@ -1139,6 +1307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
1139
1307
|
[spinners]="false"
|
|
1140
1308
|
[decimals]="0"
|
|
1141
1309
|
format="n0"
|
|
1310
|
+
[size]="size"
|
|
1142
1311
|
[disabled]="!hasPages"
|
|
1143
1312
|
[value]="current"
|
|
1144
1313
|
[min]="hasPages ? 1 : 0"
|
|
@@ -1157,6 +1326,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
1157
1326
|
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { numericInput: [{
|
|
1158
1327
|
type: ViewChild,
|
|
1159
1328
|
args: [NumericTextBoxComponent, { static: true }]
|
|
1329
|
+
}], size: [{
|
|
1330
|
+
type: Input
|
|
1160
1331
|
}] } });
|
|
1161
1332
|
|
|
1162
1333
|
// eslint-disable no-access-missing-member
|
|
@@ -1207,9 +1378,9 @@ class PagerInfoComponent extends PagerElementComponent {
|
|
|
1207
1378
|
this.cd.markForCheck();
|
|
1208
1379
|
}
|
|
1209
1380
|
}
|
|
1210
|
-
PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1211
|
-
PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "
|
|
1212
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1381
|
+
PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1382
|
+
PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerInfoComponent, 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 });
|
|
1383
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInfoComponent, decorators: [{
|
|
1213
1384
|
type: Component,
|
|
1214
1385
|
args: [{
|
|
1215
1386
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -1219,9 +1390,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
1219
1390
|
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { classes: [{
|
|
1220
1391
|
type: HostBinding,
|
|
1221
1392
|
args: ["class.k-pager-info"]
|
|
1222
|
-
}, {
|
|
1223
|
-
type: HostBinding,
|
|
1224
|
-
args: ["class.k-label"]
|
|
1225
1393
|
}] } });
|
|
1226
1394
|
|
|
1227
1395
|
/**
|
|
@@ -1240,9 +1408,9 @@ const packageMetadata = {
|
|
|
1240
1408
|
name: '@progress/kendo-angular-pager',
|
|
1241
1409
|
productName: 'Kendo UI for Angular',
|
|
1242
1410
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
1243
|
-
publishDate:
|
|
1411
|
+
publishDate: 1673469356,
|
|
1244
1412
|
version: '',
|
|
1245
|
-
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license
|
|
1413
|
+
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
1246
1414
|
};
|
|
1247
1415
|
|
|
1248
1416
|
class PagerComponent {
|
|
@@ -1298,6 +1466,7 @@ class PagerComponent {
|
|
|
1298
1466
|
this._pageSizeValues = DEFAULT_PAGE_SIZE_VALUES;
|
|
1299
1467
|
this.isInnerNavigationEnabled = false;
|
|
1300
1468
|
this._navigable = false;
|
|
1469
|
+
this._size = DEFAULT_SIZE;
|
|
1301
1470
|
this.resizeHandler = () => {
|
|
1302
1471
|
if (this.template) {
|
|
1303
1472
|
return;
|
|
@@ -1305,16 +1474,16 @@ class PagerComponent {
|
|
|
1305
1474
|
const element = this.element.nativeElement;
|
|
1306
1475
|
const width = element.offsetWidth;
|
|
1307
1476
|
if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
|
|
1308
|
-
element.classList.remove('k-pager-md');
|
|
1309
|
-
element.classList.add('k-pager-sm');
|
|
1477
|
+
element.classList.remove('k-pager-mobile-md');
|
|
1478
|
+
element.classList.add('k-pager-mobile-sm');
|
|
1310
1479
|
}
|
|
1311
1480
|
else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
|
|
1312
|
-
element.classList.add('k-pager-md');
|
|
1313
|
-
element.classList.remove('k-pager-sm');
|
|
1481
|
+
element.classList.add('k-pager-mobile-md');
|
|
1482
|
+
element.classList.remove('k-pager-mobile-sm');
|
|
1314
1483
|
}
|
|
1315
1484
|
else {
|
|
1316
|
-
element.classList.remove('k-pager-md');
|
|
1317
|
-
element.classList.remove('k-pager-sm');
|
|
1485
|
+
element.classList.remove('k-pager-mobile-md');
|
|
1486
|
+
element.classList.remove('k-pager-mobile-sm');
|
|
1318
1487
|
}
|
|
1319
1488
|
};
|
|
1320
1489
|
validatePackage(packageMetadata);
|
|
@@ -1329,6 +1498,9 @@ class PagerComponent {
|
|
|
1329
1498
|
set pageSizeValues(pageSizeValues) {
|
|
1330
1499
|
this._pageSizeValues = Array.isArray(pageSizeValues) ? pageSizeValues : pageSizeValues ? DEFAULT_PAGE_SIZE_VALUES : false;
|
|
1331
1500
|
}
|
|
1501
|
+
get pageSizeValues() {
|
|
1502
|
+
return this._pageSizeValues;
|
|
1503
|
+
}
|
|
1332
1504
|
/**
|
|
1333
1505
|
* If set to `true`, the user can use dedicated shortcuts to interact with the Pager ([see example]({% slug keyboard_navigation_pager %})).
|
|
1334
1506
|
* By default, navigation is disabled and the Pager content is accessible in the normal tab sequence.
|
|
@@ -1343,6 +1515,23 @@ class PagerComponent {
|
|
|
1343
1515
|
return this._navigable;
|
|
1344
1516
|
}
|
|
1345
1517
|
;
|
|
1518
|
+
/**
|
|
1519
|
+
* Specifies the padding of all Pager elements.
|
|
1520
|
+
*
|
|
1521
|
+
* The possible values are:
|
|
1522
|
+
* * `small`
|
|
1523
|
+
* * `medium` (default)
|
|
1524
|
+
* * `large`
|
|
1525
|
+
* * `none`
|
|
1526
|
+
*/
|
|
1527
|
+
set size(size) {
|
|
1528
|
+
const newSize = size ? size : DEFAULT_SIZE;
|
|
1529
|
+
this.handleClasses(newSize, 'size');
|
|
1530
|
+
this._size = newSize;
|
|
1531
|
+
}
|
|
1532
|
+
get size() {
|
|
1533
|
+
return this._size;
|
|
1534
|
+
}
|
|
1346
1535
|
get dir() {
|
|
1347
1536
|
return this.direction;
|
|
1348
1537
|
}
|
|
@@ -1359,9 +1548,6 @@ class PagerComponent {
|
|
|
1359
1548
|
get currentPage() {
|
|
1360
1549
|
return Math.floor((this.skip || 0) / this.pageSize) + 1;
|
|
1361
1550
|
}
|
|
1362
|
-
get pageSizeValues() {
|
|
1363
|
-
return this._pageSizeValues;
|
|
1364
|
-
}
|
|
1365
1551
|
get templateContext() {
|
|
1366
1552
|
const context = this._templateContext;
|
|
1367
1553
|
context.totalPages = this.totalPages;
|
|
@@ -1389,6 +1575,7 @@ class PagerComponent {
|
|
|
1389
1575
|
ngAfterViewInit() {
|
|
1390
1576
|
this.resizeHandler();
|
|
1391
1577
|
this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
|
|
1578
|
+
this.handleClasses(this.size, 'size');
|
|
1392
1579
|
}
|
|
1393
1580
|
ngOnChanges(changes) {
|
|
1394
1581
|
if (anyChanged(["pageSize", "skip", "total"], changes, false)) {
|
|
@@ -1484,7 +1671,7 @@ class PagerComponent {
|
|
|
1484
1671
|
e.preventDefault();
|
|
1485
1672
|
const [firstFocusable] = this.navigationService.getFirstAndLastFocusable(wrapper);
|
|
1486
1673
|
this.navigationService.toggleInnerNavigation(true);
|
|
1487
|
-
firstFocusable
|
|
1674
|
+
firstFocusable?.focus();
|
|
1488
1675
|
}
|
|
1489
1676
|
}
|
|
1490
1677
|
});
|
|
@@ -1492,9 +1679,19 @@ class PagerComponent {
|
|
|
1492
1679
|
innerNavigationChange(value) {
|
|
1493
1680
|
this.isInnerNavigationEnabled = value;
|
|
1494
1681
|
}
|
|
1682
|
+
handleClasses(value, input) {
|
|
1683
|
+
const elem = this.element.nativeElement;
|
|
1684
|
+
const classes = getStylingClasses('pager', input, this[input], value);
|
|
1685
|
+
if (classes.toRemove) {
|
|
1686
|
+
this.renderer.removeClass(elem, classes.toRemove);
|
|
1687
|
+
}
|
|
1688
|
+
if (classes.toAdd) {
|
|
1689
|
+
this.renderer.addClass(elem, classes.toAdd);
|
|
1690
|
+
}
|
|
1691
|
+
}
|
|
1495
1692
|
}
|
|
1496
|
-
PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1497
|
-
PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "
|
|
1693
|
+
PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerComponent, deps: [{ token: PagerContextService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: PagerNavigationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1694
|
+
PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerComponent, selector: "kendo-datapager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext", navigable: "navigable", size: "size" }, 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: [
|
|
1498
1695
|
LocalizationService,
|
|
1499
1696
|
PagerContextService,
|
|
1500
1697
|
PagerNavigationService
|
|
@@ -1540,19 +1737,22 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
|
|
|
1540
1737
|
[ngTemplateOutletContext]="templateContext">
|
|
1541
1738
|
</ng-container>
|
|
1542
1739
|
<ng-container *ngIf="!template?.templateRef">
|
|
1543
|
-
<
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1740
|
+
<div class="k-pager-numbers-wrap">
|
|
1741
|
+
<kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
|
|
1742
|
+
<kendo-datapager-numeric-buttons
|
|
1743
|
+
[size]="size"
|
|
1744
|
+
*ngIf="type === 'numeric' && buttonCount > 0"
|
|
1745
|
+
[buttonCount]="buttonCount">
|
|
1746
|
+
</kendo-datapager-numeric-buttons>
|
|
1747
|
+
<kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
|
|
1748
|
+
<kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
|
|
1749
|
+
</div>
|
|
1750
|
+
<kendo-datapager-page-sizes [size]="size" *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
|
|
1550
1751
|
<kendo-datapager-info *ngIf='info'></kendo-datapager-info>
|
|
1551
|
-
<kendo-datapager-page-sizes *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
|
|
1552
1752
|
</ng-container>
|
|
1553
1753
|
<kendo-resize-sensor></kendo-resize-sensor>
|
|
1554
|
-
`, isInline: true, components: [{ type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons" }, { type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: ["buttonCount"] }, { type: PagerInputComponent, selector: "kendo-datapager-input" }, { type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons"
|
|
1555
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1754
|
+
`, isInline: true, components: [{ type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons", inputs: ["size"] }, { type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: ["buttonCount", "size"] }, { type: PagerInputComponent, selector: "kendo-datapager-input", inputs: ["size"] }, { type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons", inputs: ["size"] }, { type: PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: ["pageSizes", "size"] }, { type: PagerInfoComponent, selector: "kendo-datapager-info" }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
1755
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerComponent, decorators: [{
|
|
1556
1756
|
type: Component,
|
|
1557
1757
|
args: [{
|
|
1558
1758
|
selector: 'kendo-datapager',
|
|
@@ -1604,15 +1804,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
1604
1804
|
[ngTemplateOutletContext]="templateContext">
|
|
1605
1805
|
</ng-container>
|
|
1606
1806
|
<ng-container *ngIf="!template?.templateRef">
|
|
1607
|
-
<
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1807
|
+
<div class="k-pager-numbers-wrap">
|
|
1808
|
+
<kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
|
|
1809
|
+
<kendo-datapager-numeric-buttons
|
|
1810
|
+
[size]="size"
|
|
1811
|
+
*ngIf="type === 'numeric' && buttonCount > 0"
|
|
1812
|
+
[buttonCount]="buttonCount">
|
|
1813
|
+
</kendo-datapager-numeric-buttons>
|
|
1814
|
+
<kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
|
|
1815
|
+
<kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
|
|
1816
|
+
</div>
|
|
1817
|
+
<kendo-datapager-page-sizes [size]="size" *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
|
|
1614
1818
|
<kendo-datapager-info *ngIf='info'></kendo-datapager-info>
|
|
1615
|
-
<kendo-datapager-page-sizes *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
|
|
1616
1819
|
</ng-container>
|
|
1617
1820
|
<kendo-resize-sensor></kendo-resize-sensor>
|
|
1618
1821
|
`
|
|
@@ -1641,6 +1844,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
1641
1844
|
type: Input
|
|
1642
1845
|
}], navigable: [{
|
|
1643
1846
|
type: Input
|
|
1847
|
+
}], size: [{
|
|
1848
|
+
type: Input
|
|
1644
1849
|
}], pageChange: [{
|
|
1645
1850
|
type: Output
|
|
1646
1851
|
}], pageSizeChange: [{
|
|
@@ -1672,6 +1877,7 @@ const importedModules = [
|
|
|
1672
1877
|
CommonModule,
|
|
1673
1878
|
NumericTextBoxModule,
|
|
1674
1879
|
DropDownListModule,
|
|
1880
|
+
ButtonsModule,
|
|
1675
1881
|
EventsModule,
|
|
1676
1882
|
ResizeSensorModule
|
|
1677
1883
|
];
|
|
@@ -1711,8 +1917,8 @@ class PagerModule {
|
|
|
1711
1917
|
];
|
|
1712
1918
|
}
|
|
1713
1919
|
}
|
|
1714
|
-
PagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1715
|
-
PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
|
|
1920
|
+
PagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1921
|
+
PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerModule, declarations: [PagerComponent,
|
|
1716
1922
|
PagerPrevButtonsComponent,
|
|
1717
1923
|
PagerNextButtonsComponent,
|
|
1718
1924
|
PagerNumericButtonsComponent,
|
|
@@ -1725,6 +1931,7 @@ PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
1725
1931
|
PagerFocusableDirective], imports: [CommonModule,
|
|
1726
1932
|
NumericTextBoxModule,
|
|
1727
1933
|
DropDownListModule,
|
|
1934
|
+
ButtonsModule,
|
|
1728
1935
|
EventsModule,
|
|
1729
1936
|
ResizeSensorModule], exports: [PagerComponent,
|
|
1730
1937
|
PagerPrevButtonsComponent,
|
|
@@ -1737,8 +1944,8 @@ PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
1737
1944
|
LocalizedMessagesDirective,
|
|
1738
1945
|
CustomMessagesComponent,
|
|
1739
1946
|
PagerFocusableDirective] });
|
|
1740
|
-
PagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1741
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1947
|
+
PagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerModule, providers: [providers], imports: [[...importedModules]] });
|
|
1948
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerModule, decorators: [{
|
|
1742
1949
|
type: NgModule,
|
|
1743
1950
|
args: [{
|
|
1744
1951
|
declarations: [INTERNAL_COMPONENTS],
|