@progress/kendo-angular-pager 21.1.1-develop.2 → 21.2.0-develop.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/pager/pager-input.component.mjs +36 -33
- package/esm2022/pager/pager-numeric-buttons.component.mjs +88 -77
- package/esm2022/pager/pager-page-sizes.component.mjs +32 -27
- package/esm2022/pager/pager.component.mjs +145 -119
- package/fesm2022/progress-kendo-angular-pager.mjs +303 -255
- package/package.json +8 -8
- package/schematics/ngAdd/index.js +6 -6
|
@@ -18,7 +18,7 @@ import { PagerPageSizesComponent } from './pager-page-sizes.component';
|
|
|
18
18
|
import { PagerNextButtonsComponent } from './pager-next-buttons.component';
|
|
19
19
|
import { PagerInputComponent } from './pager-input.component';
|
|
20
20
|
import { PagerPrevButtonsComponent } from './pager-prev-buttons.component';
|
|
21
|
-
import {
|
|
21
|
+
import { NgStyle, NgTemplateOutlet } from '@angular/common';
|
|
22
22
|
import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
|
|
23
23
|
import { take } from 'rxjs/operators';
|
|
24
24
|
import * as i0 from "@angular/core";
|
|
@@ -831,7 +831,7 @@ export class PagerComponent {
|
|
|
831
831
|
!this.pagerDimensions.gapPageText && (this.pagerDimensions.gapPageText = calculateGap(innerStyledElement));
|
|
832
832
|
}
|
|
833
833
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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 });
|
|
834
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
834
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: [
|
|
835
835
|
LocalizationService,
|
|
836
836
|
PagerContextService,
|
|
837
837
|
PagerNavigationService,
|
|
@@ -841,70 +841,83 @@ export class PagerComponent {
|
|
|
841
841
|
}
|
|
842
842
|
], queries: [{ propertyName: "template", predicate: PagerTemplateDirective }], viewQueries: [{ propertyName: "numericButtons", first: true, predicate: PagerNumericButtonsComponent, descendants: true, read: ElementRef }, { propertyName: "pagerInput", first: true, predicate: PagerInputComponent, descendants: true, read: ElementRef }, { propertyName: "pagerInputComponent", first: true, predicate: PagerInputComponent, descendants: true }, { propertyName: "pageSizes", first: true, predicate: PagerPageSizesComponent, descendants: true, read: ElementRef }, { propertyName: "pageSizesComponent", first: true, predicate: PagerPageSizesComponent, descendants: true }], exportAs: ["kendoDataPager", "kendoPager"], usesOnChanges: true, ngImport: i0, template: `
|
|
843
843
|
<ng-container kendoPagerLocalizedMessages
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
844
|
+
i18n-ariaLabel="kendo.pager.ariaLabel|The value of the aria-label attribute of the Pager"
|
|
845
|
+
ariaLabel="{{ 'Page navigation, page {currentPage} of {totalPages}' }}"
|
|
846
|
+
|
|
847
|
+
i18n-firstPage="kendo.pager.firstPage|The label for the first page button in the Pager"
|
|
848
|
+
firstPage="Go to the first page"
|
|
849
|
+
|
|
850
|
+
i18n-previousPage="kendo.pager.previousPage|The label for the previous page button in the Pager"
|
|
851
|
+
previousPage="Go to the previous page"
|
|
852
|
+
|
|
853
|
+
i18n-nextPage="kendo.pager.nextPage|The label for the next page button in the Pager"
|
|
854
|
+
nextPage="Go to the next page"
|
|
855
|
+
|
|
856
|
+
i18n-lastPage="kendo.pager.lastPage|The label for the last page button in the Pager"
|
|
857
|
+
lastPage="Go to the last page"
|
|
858
|
+
|
|
859
|
+
i18n-page="kendo.pager.page|The label before the current page number in the Pager"
|
|
860
|
+
page="Page"
|
|
861
|
+
|
|
862
|
+
i18n-of="kendo.pager.of|The label before the total pages number in the Pager"
|
|
863
|
+
of="of"
|
|
864
|
+
|
|
865
|
+
i18n-pageNumberInputTitle="kendo.pager.pageNumberInputTitle|The label for the pager input in the Pager"
|
|
866
|
+
pageNumberInputTitle="Page Number"
|
|
867
|
+
|
|
868
|
+
i18n-items="kendo.pager.items|The label after the total pages number in the Pager"
|
|
869
|
+
items="items"
|
|
870
|
+
|
|
871
|
+
i18n-itemsPerPage="kendo.pager.itemsPerPage|The label for the page size chooser in the Pager"
|
|
872
|
+
itemsPerPage="items per page"
|
|
873
|
+
|
|
874
|
+
i18n-selectPage="kendo.pager.selectPage|The text of the title and aria-label attributes applied to the page chooser in the Pager"
|
|
875
|
+
selectPage="Select page"
|
|
876
|
+
|
|
877
|
+
i18n-inputLabel="kendo.pager.inputLabel|The text of the aria-label attribute applied to the input element for entering the page number."
|
|
878
|
+
inputLabel="Type a page number"
|
|
879
|
+
>
|
|
880
880
|
</ng-container>
|
|
881
|
-
|
|
882
|
-
|
|
881
|
+
@if (template.first?.templateRef) {
|
|
882
|
+
<ng-container
|
|
883
883
|
[ngTemplateOutlet]="template.first?.templateRef"
|
|
884
884
|
[ngTemplateOutletContext]="templateContext">
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
</kendo-pager-numeric-buttons>
|
|
894
|
-
<kendo-pager-input [size]="size" *ngIf="showInput"></kendo-pager-input>
|
|
895
|
-
<kendo-pager-next-buttons [size]="size" *ngIf="previousNext"></kendo-pager-next-buttons>
|
|
896
|
-
</div>
|
|
897
|
-
<kendo-pager-page-sizes *ngIf="_pageSizeValues.length"
|
|
898
|
-
[ngStyle]="{opacity: initialized ? null : '0'}"
|
|
885
|
+
</ng-container>
|
|
886
|
+
} @else {
|
|
887
|
+
<div class="k-pager-numbers-wrap" [ngStyle]="{opacity: initialized ? null : '0'}">
|
|
888
|
+
@if (previousNext) {
|
|
889
|
+
<kendo-pager-prev-buttons [size]="size"></kendo-pager-prev-buttons>
|
|
890
|
+
}
|
|
891
|
+
@if (type === 'numeric' && buttonCount > 0) {
|
|
892
|
+
<kendo-pager-numeric-buttons
|
|
899
893
|
[size]="size"
|
|
900
|
-
[
|
|
901
|
-
|
|
894
|
+
[buttonCount]="buttonCount">
|
|
895
|
+
</kendo-pager-numeric-buttons>
|
|
896
|
+
}
|
|
897
|
+
@if (showInput) {
|
|
898
|
+
<kendo-pager-input [size]="size"></kendo-pager-input>
|
|
899
|
+
}
|
|
900
|
+
@if (previousNext) {
|
|
901
|
+
<kendo-pager-next-buttons [size]="size"></kendo-pager-next-buttons>
|
|
902
|
+
}
|
|
903
|
+
</div>
|
|
904
|
+
@if (_pageSizeValues.length) {
|
|
905
|
+
<kendo-pager-page-sizes
|
|
906
|
+
[ngStyle]="{opacity: initialized ? null : '0'}"
|
|
907
|
+
[size]="size"
|
|
908
|
+
[pageSizes]="_pageSizeValues"
|
|
909
|
+
[adaptiveMode]="adaptiveMode">
|
|
902
910
|
</kendo-pager-page-sizes>
|
|
903
|
-
|
|
911
|
+
}
|
|
912
|
+
@if (info) {
|
|
913
|
+
<kendo-pager-info [ngStyle]="{opacity: initialized ? null : '0'}">
|
|
904
914
|
</kendo-pager-info>
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
915
|
+
}
|
|
916
|
+
}
|
|
917
|
+
@if (responsive) {
|
|
918
|
+
<kendo-resize-sensor (resize)="resizeHandler()"></kendo-resize-sensor>
|
|
919
|
+
}
|
|
920
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoPagerLocalizedMessages]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "component", type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["showPageText", "size"] }, { kind: "component", type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
908
921
|
}
|
|
909
922
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PagerComponent, decorators: [{
|
|
910
923
|
type: Component,
|
|
@@ -922,72 +935,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
922
935
|
],
|
|
923
936
|
template: `
|
|
924
937
|
<ng-container kendoPagerLocalizedMessages
|
|
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
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
938
|
+
i18n-ariaLabel="kendo.pager.ariaLabel|The value of the aria-label attribute of the Pager"
|
|
939
|
+
ariaLabel="{{ 'Page navigation, page {currentPage} of {totalPages}' }}"
|
|
940
|
+
|
|
941
|
+
i18n-firstPage="kendo.pager.firstPage|The label for the first page button in the Pager"
|
|
942
|
+
firstPage="Go to the first page"
|
|
943
|
+
|
|
944
|
+
i18n-previousPage="kendo.pager.previousPage|The label for the previous page button in the Pager"
|
|
945
|
+
previousPage="Go to the previous page"
|
|
946
|
+
|
|
947
|
+
i18n-nextPage="kendo.pager.nextPage|The label for the next page button in the Pager"
|
|
948
|
+
nextPage="Go to the next page"
|
|
949
|
+
|
|
950
|
+
i18n-lastPage="kendo.pager.lastPage|The label for the last page button in the Pager"
|
|
951
|
+
lastPage="Go to the last page"
|
|
952
|
+
|
|
953
|
+
i18n-page="kendo.pager.page|The label before the current page number in the Pager"
|
|
954
|
+
page="Page"
|
|
955
|
+
|
|
956
|
+
i18n-of="kendo.pager.of|The label before the total pages number in the Pager"
|
|
957
|
+
of="of"
|
|
958
|
+
|
|
959
|
+
i18n-pageNumberInputTitle="kendo.pager.pageNumberInputTitle|The label for the pager input in the Pager"
|
|
960
|
+
pageNumberInputTitle="Page Number"
|
|
961
|
+
|
|
962
|
+
i18n-items="kendo.pager.items|The label after the total pages number in the Pager"
|
|
963
|
+
items="items"
|
|
964
|
+
|
|
965
|
+
i18n-itemsPerPage="kendo.pager.itemsPerPage|The label for the page size chooser in the Pager"
|
|
966
|
+
itemsPerPage="items per page"
|
|
967
|
+
|
|
968
|
+
i18n-selectPage="kendo.pager.selectPage|The text of the title and aria-label attributes applied to the page chooser in the Pager"
|
|
969
|
+
selectPage="Select page"
|
|
970
|
+
|
|
971
|
+
i18n-inputLabel="kendo.pager.inputLabel|The text of the aria-label attribute applied to the input element for entering the page number."
|
|
972
|
+
inputLabel="Type a page number"
|
|
973
|
+
>
|
|
961
974
|
</ng-container>
|
|
962
|
-
|
|
963
|
-
|
|
975
|
+
@if (template.first?.templateRef) {
|
|
976
|
+
<ng-container
|
|
964
977
|
[ngTemplateOutlet]="template.first?.templateRef"
|
|
965
978
|
[ngTemplateOutletContext]="templateContext">
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
</kendo-pager-numeric-buttons>
|
|
975
|
-
<kendo-pager-input [size]="size" *ngIf="showInput"></kendo-pager-input>
|
|
976
|
-
<kendo-pager-next-buttons [size]="size" *ngIf="previousNext"></kendo-pager-next-buttons>
|
|
977
|
-
</div>
|
|
978
|
-
<kendo-pager-page-sizes *ngIf="_pageSizeValues.length"
|
|
979
|
-
[ngStyle]="{opacity: initialized ? null : '0'}"
|
|
979
|
+
</ng-container>
|
|
980
|
+
} @else {
|
|
981
|
+
<div class="k-pager-numbers-wrap" [ngStyle]="{opacity: initialized ? null : '0'}">
|
|
982
|
+
@if (previousNext) {
|
|
983
|
+
<kendo-pager-prev-buttons [size]="size"></kendo-pager-prev-buttons>
|
|
984
|
+
}
|
|
985
|
+
@if (type === 'numeric' && buttonCount > 0) {
|
|
986
|
+
<kendo-pager-numeric-buttons
|
|
980
987
|
[size]="size"
|
|
981
|
-
[
|
|
982
|
-
|
|
988
|
+
[buttonCount]="buttonCount">
|
|
989
|
+
</kendo-pager-numeric-buttons>
|
|
990
|
+
}
|
|
991
|
+
@if (showInput) {
|
|
992
|
+
<kendo-pager-input [size]="size"></kendo-pager-input>
|
|
993
|
+
}
|
|
994
|
+
@if (previousNext) {
|
|
995
|
+
<kendo-pager-next-buttons [size]="size"></kendo-pager-next-buttons>
|
|
996
|
+
}
|
|
997
|
+
</div>
|
|
998
|
+
@if (_pageSizeValues.length) {
|
|
999
|
+
<kendo-pager-page-sizes
|
|
1000
|
+
[ngStyle]="{opacity: initialized ? null : '0'}"
|
|
1001
|
+
[size]="size"
|
|
1002
|
+
[pageSizes]="_pageSizeValues"
|
|
1003
|
+
[adaptiveMode]="adaptiveMode">
|
|
983
1004
|
</kendo-pager-page-sizes>
|
|
984
|
-
|
|
1005
|
+
}
|
|
1006
|
+
@if (info) {
|
|
1007
|
+
<kendo-pager-info [ngStyle]="{opacity: initialized ? null : '0'}">
|
|
985
1008
|
</kendo-pager-info>
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
1009
|
+
}
|
|
1010
|
+
}
|
|
1011
|
+
@if (responsive) {
|
|
1012
|
+
<kendo-resize-sensor (resize)="resizeHandler()"></kendo-resize-sensor>
|
|
1013
|
+
}
|
|
1014
|
+
`,
|
|
989
1015
|
standalone: true,
|
|
990
|
-
imports: [LocalizedMessagesDirective,
|
|
1016
|
+
imports: [LocalizedMessagesDirective, NgTemplateOutlet, PagerPrevButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerNextButtonsComponent, PagerPageSizesComponent, PagerInfoComponent, ResizeSensorComponent, NgStyle]
|
|
991
1017
|
}]
|
|
992
1018
|
}], ctorParameters: () => [{ type: i1.PagerContextService, decorators: [{
|
|
993
1019
|
type: Optional
|