@progress/kendo-angular-pager 13.4.0-develop.1 → 13.4.0-develop.10

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.
Files changed (10) hide show
  1. package/esm2020/package-metadata.mjs +2 -2
  2. package/esm2020/pager/pager-numeric-buttons.component.mjs +8 -3
  3. package/esm2020/pager/pager-page-sizes.component.mjs +1 -1
  4. package/esm2020/pager/pager.component.mjs +66 -30
  5. package/fesm2015/progress-kendo-angular-pager.mjs +83 -44
  6. package/fesm2020/progress-kendo-angular-pager.mjs +82 -44
  7. package/package.json +7 -7
  8. package/pager/pager-numeric-buttons.component.d.ts +1 -0
  9. package/pager/pager.component.d.ts +6 -2
  10. package/schematics/ngAdd/index.js +5 -5
package/esm2020/package-metadata.mjs CHANGED
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-pager',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1692286581,
13
- version: '13.4.0-develop.1',
12
+ publishDate: 1692971955,
13
+ version: '13.4.0-develop.10',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
15
15
  };
package/esm2020/pager/pager-numeric-buttons.component.mjs CHANGED
@@ -127,9 +127,10 @@ export class PagerNumericButtonsComponent extends PagerElementComponent {
127
127
  }
128
128
  }
129
129
  PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
130
- PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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: `
130
+ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: { buttonCount: "buttonCount", size: "size" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }, { propertyName: "numbersElement", first: true, predicate: ["numbers"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
131
131
  <select kendoPagerFocusable #select
132
132
  class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
133
+ [style.display]="'none'"
133
134
  [attr.title]="pageChooserLabel"
134
135
  [attr.aria-label]="pageChooserLabel"
135
136
  (change)="onSelectChange($event)">
@@ -152,7 +153,7 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
152
153
  [attr.aria-label]="pageLabel(end + 1)">...
153
154
  </option>
154
155
  </select>
155
- <div [ngClass]="{'k-pager-numbers': true}">
156
+ <div class="k-pager-numbers" #numbers>
156
157
  <button *ngIf="start > 1"
157
158
  type="button"
158
159
  kendoPagerFocusable
@@ -200,6 +201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
200
201
  template: `
201
202
  <select kendoPagerFocusable #select
202
203
  class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
204
+ [style.display]="'none'"
203
205
  [attr.title]="pageChooserLabel"
204
206
  [attr.aria-label]="pageChooserLabel"
205
207
  (change)="onSelectChange($event)">
@@ -222,7 +224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
222
224
  [attr.aria-label]="pageLabel(end + 1)">...
223
225
  </option>
224
226
  </select>
225
- <div [ngClass]="{'k-pager-numbers': true}">
227
+ <div class="k-pager-numbers" #numbers>
226
228
  <button *ngIf="start > 1"
227
229
  type="button"
228
230
  kendoPagerFocusable
@@ -266,6 +268,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
266
268
  }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }, { type: i0.Renderer2 }]; }, propDecorators: { selectElement: [{
267
269
  type: ViewChild,
268
270
  args: ['select', { read: ElementRef }]
271
+ }], numbersElement: [{
272
+ type: ViewChild,
273
+ args: ['numbers', { read: ElementRef }]
269
274
  }], buttonCount: [{
270
275
  type: Input
271
276
  }], size: [{
package/esm2020/pager/pager-page-sizes.component.mjs CHANGED
@@ -230,7 +230,7 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
230
230
  [value]="pageSize"
231
231
  (valueChange)="pageSizeChange($event, dropdownlist)"></kendo-dropdownlist>
232
232
  {{ textFor('itemsPerPage') }}
233
- `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "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: i4.PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
233
+ `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "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: i4.PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
234
234
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
235
235
  type: Component,
236
236
  args: [{
package/esm2020/pager/pager.component.mjs CHANGED
@@ -2,8 +2,7 @@
2
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
- import { RESPONSIVE_BREAKPOINT_MEDIUM, RESPONSIVE_BREAKPOINT_LARGE } from './common/constants';
6
- import { Component, Input, EventEmitter, Output, HostBinding, ViewChild, ElementRef, ContentChild, Renderer2, NgZone, HostListener } from '@angular/core';
5
+ import { Component, Input, EventEmitter, Output, HostBinding, ViewChild, ElementRef, Renderer2, NgZone, HostListener, ContentChildren, QueryList } from '@angular/core';
7
6
  import { PagerTemplateDirective } from "./pager-template.directive";
8
7
  import { anyChanged, Keys, ResizeSensorComponent } from "@progress/kendo-angular-common";
9
8
  import { PagerContextService } from "./pager-context.service";
@@ -13,6 +12,10 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
13
12
  import { validatePackage } from '@progress/kendo-licensing';
14
13
  import { packageMetadata } from '../package-metadata';
15
14
  import { PagerNavigationService } from './navigation.service';
15
+ import { PagerNumericButtonsComponent } from './pager-numeric-buttons.component';
16
+ import { PagerInfoComponent } from './pager-info.component';
17
+ import { PagerPageSizesComponent } from './pager-page-sizes.component';
18
+ import { RESPONSIVE_BREAKPOINT_MEDIUM, RESPONSIVE_BREAKPOINT_LARGE } from './common/constants';
16
19
  import * as i0 from "@angular/core";
17
20
  import * as i1 from "./pager-context.service";
18
21
  import * as i2 from "@progress/kendo-angular-l10n";
@@ -81,23 +84,36 @@ export class PagerComponent {
81
84
  this._navigable = false;
82
85
  this._size = DEFAULT_SIZE;
83
86
  this.resizeHandler = () => {
84
- if (this.template) {
87
+ if (this.template?.first) {
85
88
  return;
86
89
  }
87
- const element = this.element.nativeElement;
88
- const width = element.offsetWidth;
89
- if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
90
- element.classList.remove('k-pager-mobile-md');
91
- element.classList.add('k-pager-mobile-sm');
92
- }
93
- else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
94
- element.classList.add('k-pager-mobile-md');
95
- element.classList.remove('k-pager-mobile-sm');
96
- }
97
- else {
98
- element.classList.remove('k-pager-mobile-md');
99
- element.classList.remove('k-pager-mobile-sm');
100
- }
90
+ const width = this.element.nativeElement.offsetWidth;
91
+ this.ngZone.runOutsideAngular(() => {
92
+ setTimeout(() => {
93
+ if (this.numericButtons) {
94
+ const selectElement = this.numericButtons.selectElement.nativeElement;
95
+ const numbersElement = this.numericButtons.numbersElement.nativeElement;
96
+ this.renderer.removeStyle(numbersElement, 'display');
97
+ this.renderer.setStyle(selectElement, 'display', 'none');
98
+ if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
99
+ this.renderer.removeStyle(selectElement, 'display');
100
+ this.renderer.setStyle(numbersElement, 'display', 'none');
101
+ }
102
+ }
103
+ if (this.pagerInfo) {
104
+ this.renderer.removeStyle(this.pagerInfo.nativeElement, 'display');
105
+ if (width < RESPONSIVE_BREAKPOINT_LARGE) {
106
+ this.renderer.setStyle(this.pagerInfo.nativeElement, 'display', 'none');
107
+ }
108
+ }
109
+ if (this.pagerPageSizes) {
110
+ this.renderer.removeStyle(this.pagerPageSizes.nativeElement, 'display');
111
+ if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
112
+ this.renderer.setStyle(this.pagerPageSizes.nativeElement, 'display', 'none');
113
+ }
114
+ }
115
+ });
116
+ });
101
117
  };
102
118
  validatePackage(packageMetadata);
103
119
  this.direction = localization.rtl ? 'rtl' : 'ltr';
@@ -188,6 +204,9 @@ export class PagerComponent {
188
204
  ngAfterViewInit() {
189
205
  this.resizeHandler();
190
206
  this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
207
+ this.subscriptions.add(this.template.changes.subscribe(() => {
208
+ this.resizeHandler();
209
+ }));
191
210
  this.handleClasses(this.size, 'size');
192
211
  }
193
212
  ngOnChanges(changes) {
@@ -308,7 +327,7 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
308
327
  LocalizationService,
309
328
  PagerContextService,
310
329
  PagerNavigationService
311
- ], queries: [{ propertyName: "template", first: true, predicate: PagerTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }], exportAs: ["kendoDataPager"], usesOnChanges: true, ngImport: i0, template: `
330
+ ], queries: [{ propertyName: "template", predicate: PagerTemplateDirective }], viewQueries: [{ propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }, { propertyName: "pagerInfo", first: true, predicate: PagerInfoComponent, descendants: true, read: ElementRef }, { propertyName: "pagerPageSizes", first: true, predicate: PagerPageSizesComponent, descendants: true, read: ElementRef }, { propertyName: "numericButtons", first: true, predicate: PagerNumericButtonsComponent, descendants: true }], exportAs: ["kendoDataPager"], usesOnChanges: true, ngImport: i0, template: `
312
331
  <ng-container kendoDataPagerLocalizedMessages
313
332
  i18n-firstPage="kendo.pager.firstPage|The label for the first page button in the Pager"
314
333
  firstPage="Go to the first page"
@@ -345,11 +364,11 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
345
364
  >
346
365
  </ng-container>
347
366
  <ng-container
348
- *ngIf="template?.templateRef"
349
- [ngTemplateOutlet]="template.templateRef"
367
+ *ngIf="template.first?.templateRef"
368
+ [ngTemplateOutlet]="template.first?.templateRef"
350
369
  [ngTemplateOutletContext]="templateContext">
351
370
  </ng-container>
352
- <ng-container *ngIf="!template?.templateRef">
371
+ <ng-container *ngIf="!template?.first?.templateRef">
353
372
  <div class="k-pager-numbers-wrap">
354
373
  <kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
355
374
  <kendo-datapager-numeric-buttons
@@ -360,8 +379,12 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
360
379
  <kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
361
380
  <kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
362
381
  </div>
363
- <kendo-datapager-page-sizes [size]="size" *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
364
- <kendo-datapager-info *ngIf='info'></kendo-datapager-info>
382
+ <kendo-datapager-page-sizes *ngIf="pageSizeValues"
383
+ [size]="size"
384
+ [pageSizes]="pageSizeValues">
385
+ </kendo-datapager-page-sizes>
386
+ <kendo-datapager-info *ngIf='info'>
387
+ </kendo-datapager-info>
365
388
  </ng-container>
366
389
  <kendo-resize-sensor></kendo-resize-sensor>
367
390
  `, isInline: true, components: [{ type: i4.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons", inputs: ["size"] }, { type: i5.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: ["buttonCount", "size"] }, { type: i6.PagerInputComponent, selector: "kendo-datapager-input", inputs: ["size"] }, { type: i7.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons", inputs: ["size"] }, { type: i8.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: ["pageSizes", "size"] }, { type: i9.PagerInfoComponent, selector: "kendo-datapager-info" }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i11.LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]" }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
@@ -412,11 +435,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
412
435
  >
413
436
  </ng-container>
414
437
  <ng-container
415
- *ngIf="template?.templateRef"
416
- [ngTemplateOutlet]="template.templateRef"
438
+ *ngIf="template.first?.templateRef"
439
+ [ngTemplateOutlet]="template.first?.templateRef"
417
440
  [ngTemplateOutletContext]="templateContext">
418
441
  </ng-container>
419
- <ng-container *ngIf="!template?.templateRef">
442
+ <ng-container *ngIf="!template?.first?.templateRef">
420
443
  <div class="k-pager-numbers-wrap">
421
444
  <kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
422
445
  <kendo-datapager-numeric-buttons
@@ -427,8 +450,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
427
450
  <kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
428
451
  <kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
429
452
  </div>
430
- <kendo-datapager-page-sizes [size]="size" *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
431
- <kendo-datapager-info *ngIf='info'></kendo-datapager-info>
453
+ <kendo-datapager-page-sizes *ngIf="pageSizeValues"
454
+ [size]="size"
455
+ [pageSizes]="pageSizeValues">
456
+ </kendo-datapager-page-sizes>
457
+ <kendo-datapager-info *ngIf='info'>
458
+ </kendo-datapager-info>
432
459
  </ng-container>
433
460
  <kendo-resize-sensor></kendo-resize-sensor>
434
461
  `
@@ -436,9 +463,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
436
463
  }], ctorParameters: function () { return [{ type: i1.PagerContextService }, { type: i0.ElementRef }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.PagerNavigationService }]; }, propDecorators: { resizeSensor: [{
437
464
  type: ViewChild,
438
465
  args: [ResizeSensorComponent, { static: true }]
466
+ }], pagerInfo: [{
467
+ type: ViewChild,
468
+ args: [PagerInfoComponent, { read: ElementRef }]
469
+ }], pagerPageSizes: [{
470
+ type: ViewChild,
471
+ args: [PagerPageSizesComponent, { read: ElementRef }]
472
+ }], numericButtons: [{
473
+ type: ViewChild,
474
+ args: [PagerNumericButtonsComponent]
439
475
  }], template: [{
440
- type: ContentChild,
441
- args: [PagerTemplateDirective, { static: false }]
476
+ type: ContentChildren,
477
+ args: [PagerTemplateDirective]
442
478
  }], total: [{
443
479
  type: Input
444
480
  }], skip: [{
package/fesm2015/progress-kendo-angular-pager.mjs CHANGED
@@ -3,7 +3,7 @@
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, ElementRef, EventEmitter, ContentChild, Output, HostListener, NgModule } from '@angular/core';
6
+ import { Directive, Input, forwardRef, Component, ChangeDetectionStrategy, ViewChild, HostBinding, Optional, ElementRef, EventEmitter, ContentChildren, 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 { caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
@@ -741,7 +741,7 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
741
741
  [value]="pageSize"
742
742
  (valueChange)="pageSizeChange($event, dropdownlist)"></kendo-dropdownlist>
743
743
  {{ textFor('itemsPerPage') }}
744
- `, isInline: true, components: [{ type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "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 });
744
+ `, isInline: true, components: [{ type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "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 });
745
745
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
746
746
  type: Component,
747
747
  args: [{
@@ -948,9 +948,10 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
948
948
  }
949
949
  }
950
950
  PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
951
- PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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: `
951
+ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: { buttonCount: "buttonCount", size: "size" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }, { propertyName: "numbersElement", first: true, predicate: ["numbers"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
952
952
  <select kendoPagerFocusable #select
953
953
  class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
954
+ [style.display]="'none'"
954
955
  [attr.title]="pageChooserLabel"
955
956
  [attr.aria-label]="pageChooserLabel"
956
957
  (change)="onSelectChange($event)">
@@ -973,7 +974,7 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
973
974
  [attr.aria-label]="pageLabel(end + 1)">...
974
975
  </option>
975
976
  </select>
976
- <div [ngClass]="{'k-pager-numbers': true}">
977
+ <div class="k-pager-numbers" #numbers>
977
978
  <button *ngIf="start > 1"
978
979
  type="button"
979
980
  kendoPagerFocusable
@@ -1021,6 +1022,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1021
1022
  template: `
1022
1023
  <select kendoPagerFocusable #select
1023
1024
  class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
1025
+ [style.display]="'none'"
1024
1026
  [attr.title]="pageChooserLabel"
1025
1027
  [attr.aria-label]="pageChooserLabel"
1026
1028
  (change)="onSelectChange($event)">
@@ -1043,7 +1045,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1043
1045
  [attr.aria-label]="pageLabel(end + 1)">...
1044
1046
  </option>
1045
1047
  </select>
1046
- <div [ngClass]="{'k-pager-numbers': true}">
1048
+ <div class="k-pager-numbers" #numbers>
1047
1049
  <button *ngIf="start > 1"
1048
1050
  type="button"
1049
1051
  kendoPagerFocusable
@@ -1087,6 +1089,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1087
1089
  }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: i0.Renderer2 }]; }, propDecorators: { selectElement: [{
1088
1090
  type: ViewChild,
1089
1091
  args: ['select', { read: ElementRef }]
1092
+ }], numbersElement: [{
1093
+ type: ViewChild,
1094
+ args: ['numbers', { read: ElementRef }]
1090
1095
  }], buttonCount: [{
1091
1096
  type: Input
1092
1097
  }], size: [{
@@ -1395,15 +1400,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1395
1400
  args: ["class.k-pager-info"]
1396
1401
  }] } });
1397
1402
 
1398
- /**
1399
- * @hidden
1400
- */
1401
- const RESPONSIVE_BREAKPOINT_MEDIUM = 600;
1402
- /**
1403
- * @hidden
1404
- */
1405
- const RESPONSIVE_BREAKPOINT_LARGE = 768;
1406
-
1407
1403
  /**
1408
1404
  * @hidden
1409
1405
  */
@@ -1411,11 +1407,20 @@ const packageMetadata = {
1411
1407
  name: '@progress/kendo-angular-pager',
1412
1408
  productName: 'Kendo UI for Angular',
1413
1409
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
1414
- publishDate: 1692286581,
1415
- version: '13.4.0-develop.1',
1410
+ publishDate: 1692971955,
1411
+ version: '13.4.0-develop.10',
1416
1412
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
1417
1413
  };
1418
1414
 
1415
+ /**
1416
+ * @hidden
1417
+ */
1418
+ const RESPONSIVE_BREAKPOINT_MEDIUM = 600;
1419
+ /**
1420
+ * @hidden
1421
+ */
1422
+ const RESPONSIVE_BREAKPOINT_LARGE = 768;
1423
+
1419
1424
  class PagerComponent {
1420
1425
  constructor(pagerContext, element, localization, renderer, ngZone, navigationService) {
1421
1426
  this.pagerContext = pagerContext;
@@ -1471,23 +1476,37 @@ class PagerComponent {
1471
1476
  this._navigable = false;
1472
1477
  this._size = DEFAULT_SIZE;
1473
1478
  this.resizeHandler = () => {
1474
- if (this.template) {
1479
+ var _a;
1480
+ if ((_a = this.template) === null || _a === void 0 ? void 0 : _a.first) {
1475
1481
  return;
1476
1482
  }
1477
- const element = this.element.nativeElement;
1478
- const width = element.offsetWidth;
1479
- if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
1480
- element.classList.remove('k-pager-mobile-md');
1481
- element.classList.add('k-pager-mobile-sm');
1482
- }
1483
- else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
1484
- element.classList.add('k-pager-mobile-md');
1485
- element.classList.remove('k-pager-mobile-sm');
1486
- }
1487
- else {
1488
- element.classList.remove('k-pager-mobile-md');
1489
- element.classList.remove('k-pager-mobile-sm');
1490
- }
1483
+ const width = this.element.nativeElement.offsetWidth;
1484
+ this.ngZone.runOutsideAngular(() => {
1485
+ setTimeout(() => {
1486
+ if (this.numericButtons) {
1487
+ const selectElement = this.numericButtons.selectElement.nativeElement;
1488
+ const numbersElement = this.numericButtons.numbersElement.nativeElement;
1489
+ this.renderer.removeStyle(numbersElement, 'display');
1490
+ this.renderer.setStyle(selectElement, 'display', 'none');
1491
+ if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
1492
+ this.renderer.removeStyle(selectElement, 'display');
1493
+ this.renderer.setStyle(numbersElement, 'display', 'none');
1494
+ }
1495
+ }
1496
+ if (this.pagerInfo) {
1497
+ this.renderer.removeStyle(this.pagerInfo.nativeElement, 'display');
1498
+ if (width < RESPONSIVE_BREAKPOINT_LARGE) {
1499
+ this.renderer.setStyle(this.pagerInfo.nativeElement, 'display', 'none');
1500
+ }
1501
+ }
1502
+ if (this.pagerPageSizes) {
1503
+ this.renderer.removeStyle(this.pagerPageSizes.nativeElement, 'display');
1504
+ if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
1505
+ this.renderer.setStyle(this.pagerPageSizes.nativeElement, 'display', 'none');
1506
+ }
1507
+ }
1508
+ });
1509
+ });
1491
1510
  };
1492
1511
  validatePackage(packageMetadata);
1493
1512
  this.direction = localization.rtl ? 'rtl' : 'ltr';
@@ -1578,6 +1597,9 @@ class PagerComponent {
1578
1597
  ngAfterViewInit() {
1579
1598
  this.resizeHandler();
1580
1599
  this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
1600
+ this.subscriptions.add(this.template.changes.subscribe(() => {
1601
+ this.resizeHandler();
1602
+ }));
1581
1603
  this.handleClasses(this.size, 'size');
1582
1604
  }
1583
1605
  ngOnChanges(changes) {
@@ -1698,7 +1720,7 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
1698
1720
  LocalizationService,
1699
1721
  PagerContextService,
1700
1722
  PagerNavigationService
1701
- ], queries: [{ propertyName: "template", first: true, predicate: PagerTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }], exportAs: ["kendoDataPager"], usesOnChanges: true, ngImport: i0, template: `
1723
+ ], queries: [{ propertyName: "template", predicate: PagerTemplateDirective }], viewQueries: [{ propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }, { propertyName: "pagerInfo", first: true, predicate: PagerInfoComponent, descendants: true, read: ElementRef }, { propertyName: "pagerPageSizes", first: true, predicate: PagerPageSizesComponent, descendants: true, read: ElementRef }, { propertyName: "numericButtons", first: true, predicate: PagerNumericButtonsComponent, descendants: true }], exportAs: ["kendoDataPager"], usesOnChanges: true, ngImport: i0, template: `
1702
1724
  <ng-container kendoDataPagerLocalizedMessages
1703
1725
  i18n-firstPage="kendo.pager.firstPage|The label for the first page button in the Pager"
1704
1726
  firstPage="Go to the first page"
@@ -1735,11 +1757,11 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
1735
1757
  >
1736
1758
  </ng-container>
1737
1759
  <ng-container
1738
- *ngIf="template?.templateRef"
1739
- [ngTemplateOutlet]="template.templateRef"
1760
+ *ngIf="template.first?.templateRef"
1761
+ [ngTemplateOutlet]="template.first?.templateRef"
1740
1762
  [ngTemplateOutletContext]="templateContext">
1741
1763
  </ng-container>
1742
- <ng-container *ngIf="!template?.templateRef">
1764
+ <ng-container *ngIf="!template?.first?.templateRef">
1743
1765
  <div class="k-pager-numbers-wrap">
1744
1766
  <kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
1745
1767
  <kendo-datapager-numeric-buttons
@@ -1750,8 +1772,12 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
1750
1772
  <kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
1751
1773
  <kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
1752
1774
  </div>
1753
- <kendo-datapager-page-sizes [size]="size" *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
1754
- <kendo-datapager-info *ngIf='info'></kendo-datapager-info>
1775
+ <kendo-datapager-page-sizes *ngIf="pageSizeValues"
1776
+ [size]="size"
1777
+ [pageSizes]="pageSizeValues">
1778
+ </kendo-datapager-page-sizes>
1779
+ <kendo-datapager-info *ngIf='info'>
1780
+ </kendo-datapager-info>
1755
1781
  </ng-container>
1756
1782
  <kendo-resize-sensor></kendo-resize-sensor>
1757
1783
  `, 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"] }] });
@@ -1802,11 +1828,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1802
1828
  >
1803
1829
  </ng-container>
1804
1830
  <ng-container
1805
- *ngIf="template?.templateRef"
1806
- [ngTemplateOutlet]="template.templateRef"
1831
+ *ngIf="template.first?.templateRef"
1832
+ [ngTemplateOutlet]="template.first?.templateRef"
1807
1833
  [ngTemplateOutletContext]="templateContext">
1808
1834
  </ng-container>
1809
- <ng-container *ngIf="!template?.templateRef">
1835
+ <ng-container *ngIf="!template?.first?.templateRef">
1810
1836
  <div class="k-pager-numbers-wrap">
1811
1837
  <kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
1812
1838
  <kendo-datapager-numeric-buttons
@@ -1817,8 +1843,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1817
1843
  <kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
1818
1844
  <kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
1819
1845
  </div>
1820
- <kendo-datapager-page-sizes [size]="size" *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
1821
- <kendo-datapager-info *ngIf='info'></kendo-datapager-info>
1846
+ <kendo-datapager-page-sizes *ngIf="pageSizeValues"
1847
+ [size]="size"
1848
+ [pageSizes]="pageSizeValues">
1849
+ </kendo-datapager-page-sizes>
1850
+ <kendo-datapager-info *ngIf='info'>
1851
+ </kendo-datapager-info>
1822
1852
  </ng-container>
1823
1853
  <kendo-resize-sensor></kendo-resize-sensor>
1824
1854
  `
@@ -1826,9 +1856,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1826
1856
  }], ctorParameters: function () { return [{ type: PagerContextService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: PagerNavigationService }]; }, propDecorators: { resizeSensor: [{
1827
1857
  type: ViewChild,
1828
1858
  args: [ResizeSensorComponent, { static: true }]
1859
+ }], pagerInfo: [{
1860
+ type: ViewChild,
1861
+ args: [PagerInfoComponent, { read: ElementRef }]
1862
+ }], pagerPageSizes: [{
1863
+ type: ViewChild,
1864
+ args: [PagerPageSizesComponent, { read: ElementRef }]
1865
+ }], numericButtons: [{
1866
+ type: ViewChild,
1867
+ args: [PagerNumericButtonsComponent]
1829
1868
  }], template: [{
1830
- type: ContentChild,
1831
- args: [PagerTemplateDirective, { static: false }]
1869
+ type: ContentChildren,
1870
+ args: [PagerTemplateDirective]
1832
1871
  }], total: [{
1833
1872
  type: Input
1834
1873
  }], skip: [{
package/fesm2020/progress-kendo-angular-pager.mjs CHANGED
@@ -3,7 +3,7 @@
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, ElementRef, EventEmitter, ContentChild, Output, HostListener, NgModule } from '@angular/core';
6
+ import { Directive, Input, forwardRef, Component, ChangeDetectionStrategy, ViewChild, HostBinding, Optional, ElementRef, EventEmitter, ContentChildren, 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';
@@ -741,7 +741,7 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
741
741
  [value]="pageSize"
742
742
  (valueChange)="pageSizeChange($event, dropdownlist)"></kendo-dropdownlist>
743
743
  {{ textFor('itemsPerPage') }}
744
- `, isInline: true, components: [{ type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "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 });
744
+ `, isInline: true, components: [{ type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "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 });
745
745
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
746
746
  type: Component,
747
747
  args: [{
@@ -945,9 +945,10 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
945
945
  }
946
946
  }
947
947
  PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
948
- PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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: `
948
+ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: { buttonCount: "buttonCount", size: "size" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }, { propertyName: "numbersElement", first: true, predicate: ["numbers"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
949
949
  <select kendoPagerFocusable #select
950
950
  class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
951
+ [style.display]="'none'"
951
952
  [attr.title]="pageChooserLabel"
952
953
  [attr.aria-label]="pageChooserLabel"
953
954
  (change)="onSelectChange($event)">
@@ -970,7 +971,7 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
970
971
  [attr.aria-label]="pageLabel(end + 1)">...
971
972
  </option>
972
973
  </select>
973
- <div [ngClass]="{'k-pager-numbers': true}">
974
+ <div class="k-pager-numbers" #numbers>
974
975
  <button *ngIf="start > 1"
975
976
  type="button"
976
977
  kendoPagerFocusable
@@ -1018,6 +1019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1018
1019
  template: `
1019
1020
  <select kendoPagerFocusable #select
1020
1021
  class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
1022
+ [style.display]="'none'"
1021
1023
  [attr.title]="pageChooserLabel"
1022
1024
  [attr.aria-label]="pageChooserLabel"
1023
1025
  (change)="onSelectChange($event)">
@@ -1040,7 +1042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1040
1042
  [attr.aria-label]="pageLabel(end + 1)">...
1041
1043
  </option>
1042
1044
  </select>
1043
- <div [ngClass]="{'k-pager-numbers': true}">
1045
+ <div class="k-pager-numbers" #numbers>
1044
1046
  <button *ngIf="start > 1"
1045
1047
  type="button"
1046
1048
  kendoPagerFocusable
@@ -1084,6 +1086,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1084
1086
  }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: i0.Renderer2 }]; }, propDecorators: { selectElement: [{
1085
1087
  type: ViewChild,
1086
1088
  args: ['select', { read: ElementRef }]
1089
+ }], numbersElement: [{
1090
+ type: ViewChild,
1091
+ args: ['numbers', { read: ElementRef }]
1087
1092
  }], buttonCount: [{
1088
1093
  type: Input
1089
1094
  }], size: [{
@@ -1392,15 +1397,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1392
1397
  args: ["class.k-pager-info"]
1393
1398
  }] } });
1394
1399
 
1395
- /**
1396
- * @hidden
1397
- */
1398
- const RESPONSIVE_BREAKPOINT_MEDIUM = 600;
1399
- /**
1400
- * @hidden
1401
- */
1402
- const RESPONSIVE_BREAKPOINT_LARGE = 768;
1403
-
1404
1400
  /**
1405
1401
  * @hidden
1406
1402
  */
@@ -1408,11 +1404,20 @@ const packageMetadata = {
1408
1404
  name: '@progress/kendo-angular-pager',
1409
1405
  productName: 'Kendo UI for Angular',
1410
1406
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
1411
- publishDate: 1692286581,
1412
- version: '13.4.0-develop.1',
1407
+ publishDate: 1692971955,
1408
+ version: '13.4.0-develop.10',
1413
1409
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
1414
1410
  };
1415
1411
 
1412
+ /**
1413
+ * @hidden
1414
+ */
1415
+ const RESPONSIVE_BREAKPOINT_MEDIUM = 600;
1416
+ /**
1417
+ * @hidden
1418
+ */
1419
+ const RESPONSIVE_BREAKPOINT_LARGE = 768;
1420
+
1416
1421
  class PagerComponent {
1417
1422
  constructor(pagerContext, element, localization, renderer, ngZone, navigationService) {
1418
1423
  this.pagerContext = pagerContext;
@@ -1468,23 +1473,36 @@ class PagerComponent {
1468
1473
  this._navigable = false;
1469
1474
  this._size = DEFAULT_SIZE;
1470
1475
  this.resizeHandler = () => {
1471
- if (this.template) {
1476
+ if (this.template?.first) {
1472
1477
  return;
1473
1478
  }
1474
- const element = this.element.nativeElement;
1475
- const width = element.offsetWidth;
1476
- if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
1477
- element.classList.remove('k-pager-mobile-md');
1478
- element.classList.add('k-pager-mobile-sm');
1479
- }
1480
- else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
1481
- element.classList.add('k-pager-mobile-md');
1482
- element.classList.remove('k-pager-mobile-sm');
1483
- }
1484
- else {
1485
- element.classList.remove('k-pager-mobile-md');
1486
- element.classList.remove('k-pager-mobile-sm');
1487
- }
1479
+ const width = this.element.nativeElement.offsetWidth;
1480
+ this.ngZone.runOutsideAngular(() => {
1481
+ setTimeout(() => {
1482
+ if (this.numericButtons) {
1483
+ const selectElement = this.numericButtons.selectElement.nativeElement;
1484
+ const numbersElement = this.numericButtons.numbersElement.nativeElement;
1485
+ this.renderer.removeStyle(numbersElement, 'display');
1486
+ this.renderer.setStyle(selectElement, 'display', 'none');
1487
+ if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
1488
+ this.renderer.removeStyle(selectElement, 'display');
1489
+ this.renderer.setStyle(numbersElement, 'display', 'none');
1490
+ }
1491
+ }
1492
+ if (this.pagerInfo) {
1493
+ this.renderer.removeStyle(this.pagerInfo.nativeElement, 'display');
1494
+ if (width < RESPONSIVE_BREAKPOINT_LARGE) {
1495
+ this.renderer.setStyle(this.pagerInfo.nativeElement, 'display', 'none');
1496
+ }
1497
+ }
1498
+ if (this.pagerPageSizes) {
1499
+ this.renderer.removeStyle(this.pagerPageSizes.nativeElement, 'display');
1500
+ if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
1501
+ this.renderer.setStyle(this.pagerPageSizes.nativeElement, 'display', 'none');
1502
+ }
1503
+ }
1504
+ });
1505
+ });
1488
1506
  };
1489
1507
  validatePackage(packageMetadata);
1490
1508
  this.direction = localization.rtl ? 'rtl' : 'ltr';
@@ -1575,6 +1593,9 @@ class PagerComponent {
1575
1593
  ngAfterViewInit() {
1576
1594
  this.resizeHandler();
1577
1595
  this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
1596
+ this.subscriptions.add(this.template.changes.subscribe(() => {
1597
+ this.resizeHandler();
1598
+ }));
1578
1599
  this.handleClasses(this.size, 'size');
1579
1600
  }
1580
1601
  ngOnChanges(changes) {
@@ -1695,7 +1716,7 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
1695
1716
  LocalizationService,
1696
1717
  PagerContextService,
1697
1718
  PagerNavigationService
1698
- ], queries: [{ propertyName: "template", first: true, predicate: PagerTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }], exportAs: ["kendoDataPager"], usesOnChanges: true, ngImport: i0, template: `
1719
+ ], queries: [{ propertyName: "template", predicate: PagerTemplateDirective }], viewQueries: [{ propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }, { propertyName: "pagerInfo", first: true, predicate: PagerInfoComponent, descendants: true, read: ElementRef }, { propertyName: "pagerPageSizes", first: true, predicate: PagerPageSizesComponent, descendants: true, read: ElementRef }, { propertyName: "numericButtons", first: true, predicate: PagerNumericButtonsComponent, descendants: true }], exportAs: ["kendoDataPager"], usesOnChanges: true, ngImport: i0, template: `
1699
1720
  <ng-container kendoDataPagerLocalizedMessages
1700
1721
  i18n-firstPage="kendo.pager.firstPage|The label for the first page button in the Pager"
1701
1722
  firstPage="Go to the first page"
@@ -1732,11 +1753,11 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
1732
1753
  >
1733
1754
  </ng-container>
1734
1755
  <ng-container
1735
- *ngIf="template?.templateRef"
1736
- [ngTemplateOutlet]="template.templateRef"
1756
+ *ngIf="template.first?.templateRef"
1757
+ [ngTemplateOutlet]="template.first?.templateRef"
1737
1758
  [ngTemplateOutletContext]="templateContext">
1738
1759
  </ng-container>
1739
- <ng-container *ngIf="!template?.templateRef">
1760
+ <ng-container *ngIf="!template?.first?.templateRef">
1740
1761
  <div class="k-pager-numbers-wrap">
1741
1762
  <kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
1742
1763
  <kendo-datapager-numeric-buttons
@@ -1747,8 +1768,12 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
1747
1768
  <kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
1748
1769
  <kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
1749
1770
  </div>
1750
- <kendo-datapager-page-sizes [size]="size" *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
1751
- <kendo-datapager-info *ngIf='info'></kendo-datapager-info>
1771
+ <kendo-datapager-page-sizes *ngIf="pageSizeValues"
1772
+ [size]="size"
1773
+ [pageSizes]="pageSizeValues">
1774
+ </kendo-datapager-page-sizes>
1775
+ <kendo-datapager-info *ngIf='info'>
1776
+ </kendo-datapager-info>
1752
1777
  </ng-container>
1753
1778
  <kendo-resize-sensor></kendo-resize-sensor>
1754
1779
  `, 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"] }] });
@@ -1799,11 +1824,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1799
1824
  >
1800
1825
  </ng-container>
1801
1826
  <ng-container
1802
- *ngIf="template?.templateRef"
1803
- [ngTemplateOutlet]="template.templateRef"
1827
+ *ngIf="template.first?.templateRef"
1828
+ [ngTemplateOutlet]="template.first?.templateRef"
1804
1829
  [ngTemplateOutletContext]="templateContext">
1805
1830
  </ng-container>
1806
- <ng-container *ngIf="!template?.templateRef">
1831
+ <ng-container *ngIf="!template?.first?.templateRef">
1807
1832
  <div class="k-pager-numbers-wrap">
1808
1833
  <kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
1809
1834
  <kendo-datapager-numeric-buttons
@@ -1814,8 +1839,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1814
1839
  <kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
1815
1840
  <kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
1816
1841
  </div>
1817
- <kendo-datapager-page-sizes [size]="size" *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
1818
- <kendo-datapager-info *ngIf='info'></kendo-datapager-info>
1842
+ <kendo-datapager-page-sizes *ngIf="pageSizeValues"
1843
+ [size]="size"
1844
+ [pageSizes]="pageSizeValues">
1845
+ </kendo-datapager-page-sizes>
1846
+ <kendo-datapager-info *ngIf='info'>
1847
+ </kendo-datapager-info>
1819
1848
  </ng-container>
1820
1849
  <kendo-resize-sensor></kendo-resize-sensor>
1821
1850
  `
@@ -1823,9 +1852,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1823
1852
  }], ctorParameters: function () { return [{ type: PagerContextService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: PagerNavigationService }]; }, propDecorators: { resizeSensor: [{
1824
1853
  type: ViewChild,
1825
1854
  args: [ResizeSensorComponent, { static: true }]
1855
+ }], pagerInfo: [{
1856
+ type: ViewChild,
1857
+ args: [PagerInfoComponent, { read: ElementRef }]
1858
+ }], pagerPageSizes: [{
1859
+ type: ViewChild,
1860
+ args: [PagerPageSizesComponent, { read: ElementRef }]
1861
+ }], numericButtons: [{
1862
+ type: ViewChild,
1863
+ args: [PagerNumericButtonsComponent]
1826
1864
  }], template: [{
1827
- type: ContentChild,
1828
- args: [PagerTemplateDirective, { static: false }]
1865
+ type: ContentChildren,
1866
+ args: [PagerTemplateDirective]
1829
1867
  }], total: [{
1830
1868
  type: Input
1831
1869
  }], skip: [{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-pager",
3
- "version": "13.4.0-develop.1",
3
+ "version": "13.4.0-develop.10",
4
4
  "description": "Kendo UI Angular Pager",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -21,16 +21,16 @@
21
21
  "@angular/core": "13 - 16",
22
22
  "@angular/platform-browser": "13 - 16",
23
23
  "@progress/kendo-licensing": "^1.0.2",
24
- "@progress/kendo-angular-common": "13.4.0-develop.1",
25
- "@progress/kendo-angular-dropdowns": "13.4.0-develop.1",
26
- "@progress/kendo-angular-inputs": "13.4.0-develop.1",
27
- "@progress/kendo-angular-icons": "13.4.0-develop.1",
28
- "@progress/kendo-angular-l10n": "13.4.0-develop.1",
24
+ "@progress/kendo-angular-common": "13.4.0-develop.10",
25
+ "@progress/kendo-angular-dropdowns": "13.4.0-develop.10",
26
+ "@progress/kendo-angular-inputs": "13.4.0-develop.10",
27
+ "@progress/kendo-angular-icons": "13.4.0-develop.10",
28
+ "@progress/kendo-angular-l10n": "13.4.0-develop.10",
29
29
  "rxjs": "^6.5.3 || ^7.0.0"
30
30
  },
31
31
  "dependencies": {
32
32
  "tslib": "^2.3.1",
33
- "@progress/kendo-angular-schematics": "13.4.0-develop.1"
33
+ "@progress/kendo-angular-schematics": "13.4.0-develop.10"
34
34
  },
35
35
  "schematics": "./schematics/collection.json",
36
36
  "module": "fesm2015/progress-kendo-angular-pager.mjs",
package/pager/pager-numeric-buttons.component.d.ts CHANGED
@@ -15,6 +15,7 @@ export declare class PagerNumericButtonsComponent extends PagerElementComponent
15
15
  protected pagerContext: PagerContextService;
16
16
  private renderer;
17
17
  selectElement: any;
18
+ numbersElement: any;
18
19
  /**
19
20
  * The count of the displayed buttons.
20
21
  *
package/pager/pager.component.d.ts CHANGED
@@ -2,7 +2,7 @@
2
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
- import { EventEmitter, OnChanges, SimpleChanges, OnInit, OnDestroy, ElementRef, Renderer2, NgZone, AfterViewInit } from '@angular/core';
5
+ import { EventEmitter, OnChanges, SimpleChanges, OnInit, OnDestroy, ElementRef, Renderer2, NgZone, AfterViewInit, QueryList } from '@angular/core';
6
6
  import { PageChangeEvent } from './change-event-args.interface';
7
7
  import { PagerTemplateDirective } from "./pager-template.directive";
8
8
  import { ResizeSensorComponent } from "@progress/kendo-angular-common";
@@ -13,6 +13,7 @@ import { PagerType } from './common/pager-type';
13
13
  import { LocalizationService } from '@progress/kendo-angular-l10n';
14
14
  import { PagerNavigationService } from './navigation.service';
15
15
  import { PagerSize } from './common/pager-size';
16
+ import { PagerNumericButtonsComponent } from './pager-numeric-buttons.component';
16
17
  import * as i0 from "@angular/core";
17
18
  export declare class PagerComponent implements OnChanges, AfterViewInit, OnInit, OnDestroy {
18
19
  private pagerContext;
@@ -22,7 +23,10 @@ export declare class PagerComponent implements OnChanges, AfterViewInit, OnInit,
22
23
  private ngZone;
23
24
  private navigationService;
24
25
  resizeSensor: ResizeSensorComponent;
25
- template: PagerTemplateDirective;
26
+ pagerInfo: ElementRef;
27
+ pagerPageSizes: ElementRef;
28
+ numericButtons: PagerNumericButtonsComponent;
29
+ template: QueryList<PagerTemplateDirective>;
26
30
  /**
27
31
  * Represents the total number of data items in the collection.
28
32
  */
package/schematics/ngAdd/index.js CHANGED
@@ -4,13 +4,13 @@ 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': '13.4.0-develop.1',
8
- '@progress/kendo-angular-intl': '13.4.0-develop.1',
9
- '@progress/kendo-angular-popup': '13.4.0-develop.1',
7
+ '@progress/kendo-angular-treeview': '13.4.0-develop.10',
8
+ '@progress/kendo-angular-intl': '13.4.0-develop.10',
9
+ '@progress/kendo-angular-popup': '13.4.0-develop.10',
10
10
  '@progress/kendo-drawing': '^1.5.12',
11
11
  // peer dependency of kendo-angular-inputs
12
- '@progress/kendo-angular-buttons': '13.4.0-develop.1',
13
- '@progress/kendo-angular-dialog': '13.4.0-develop.1',
12
+ '@progress/kendo-angular-buttons': '13.4.0-develop.10',
13
+ '@progress/kendo-angular-dialog': '13.4.0-develop.10',
14
14
  // Peer dependency of icons
15
15
  '@progress/kendo-svg-icons': '^1.0.0'
16
16
  } });