@progress/kendo-angular-pager 17.0.0-develop.34 → 17.0.0-develop.35

package/esm2022/pager/pager.component.mjs

@@ -2,12 +2,12 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, EventEmitter, Output, HostBinding, ViewChild, ElementRef, Renderer2, NgZone, HostListener, ContentChildren, QueryList } from '@angular/core';
+import { Component, Input, EventEmitter, Output, HostBinding, ElementRef, Renderer2, NgZone, HostListener, ContentChildren, QueryList, Optional, SkipSelf, inject } from '@angular/core';
 import { PagerTemplateDirective } from "./pager-template.directive";
 import { anyChanged, Keys, ResizeSensorComponent } from "@progress/kendo-angular-common";
 import { PagerContextService } from "./pager-context.service";
 import { Subscription } from "rxjs";
-import { DEFAULT_PAGE_SIZE_VALUES, getStylingClasses, DEFAULT_SIZE } from '../util';
+import { DEFAULT_PAGE_SIZE_VALUES, getStylingClasses, DEFAULT_SIZE, replaceMessagePlaceholder } from '../util';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -32,17 +32,21 @@ export class PagerComponent {
     renderer;
     ngZone;
     navigationService;
-    resizeSensor;
-    pagerInfo;
-    pagerPageSizes;
-    numericButtons;
     template;
+    /**
+     * @hidden
+     */
+    externalTemplate;
     /**
      * Represents the total number of data items in the collection.
+     *
+     * @default 0
      */
     total = 0;
     /**
      * Defines the number of data items to be skipped.
+     *
+     * @default 0
      */
     skip = 0;
     /**
@@ -51,14 +55,20 @@ export class PagerComponent {
     pageSize;
     /**
      * Sets the maximum numeric buttons count before the buttons are collapsed.
+     *
+     * @default 10
      */
     buttonCount = 10;
     /**
      * Toggles the information about the current page and the total number of records.
+     *
+     * @default true
      */
     info = true;
     /**
      * Defines the type of the pager.
+     *
+     * @default 'numeric'
      */
     type = 'numeric';
     /**
@@ -75,6 +85,8 @@ export class PagerComponent {
     }
     /**
      * Toggles the **Previous** and **Next** buttons.
+     *
+     * @default true
      */
     previousNext = true;
     /**
@@ -106,6 +118,13 @@ export class PagerComponent {
     get size() {
         return this._size;
     }
+    /**
+     * @hidden
+     * Toggles the Pager responsive functionality.
+     *
+     * @default true
+     */
+    responsive = true;
     /**
      * Fires when the current page of the Pager is changed ([see example](slug:overview_pager)).
      * You have to handle the event yourself and page the data.
@@ -121,7 +140,9 @@ export class PagerComponent {
     widgetRole = 'application';
     roleDescription = 'pager';
     keyShortcuts = 'Enter ArrowRight ArrowLeft';
-    hostTabindex = '0';
+    get hostTabindex() {
+        return this.navigable ? '0' : '-1';
+    }
     get dir() {
         return this.direction;
     }
@@ -163,11 +184,17 @@ export class PagerComponent {
         this.navigationService = navigationService;
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
+        if (!navigationService) {
+            this.navigationService = inject(PagerNavigationService);
+        }
+        if (!pagerContext) {
+            this.pagerContext = inject(PagerContextService);
+        }
+        this.pagerContext.localization = localization;
     }
     ngOnInit() {
         this.subscriptions.add(this.pagerContext.pageChange.subscribe(this.changePage.bind(this)));
         this.subscriptions.add(this.pagerContext.pageSizeChange.subscribe(this.changePageSize.bind(this)));
-        this.subscriptions.add(this.resizeSensor.resize.subscribe(() => this.resizeHandler()));
         this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         }));
@@ -180,10 +207,10 @@ export class PagerComponent {
         }
     }
     ngAfterViewInit() {
-        this.resizeHandler();
+        this.responsive && this.resizeHandler();
         this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
         this.subscriptions.add(this.template.changes.subscribe(() => {
-            this.resizeHandler();
+            this.responsive && this.resizeHandler();
         }));
         this.handleClasses(this.size, 'size');
     }
@@ -196,6 +223,9 @@ export class PagerComponent {
             });
             this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
         }
+        if (changes['responsive']) {
+            this.responsive && this.resizeHandler();
+        }
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
@@ -229,48 +259,53 @@ export class PagerComponent {
             this.pageChange.emit({ skip: this.skip, take: event.newPageSize });
         }
     }
+    /**
+     * @hidden
+     */
     resizeHandler = () => {
-        if (this.template?.first) {
+        if (this.template?.first && !this.responsive) {
             return;
         }
         const width = this.element.nativeElement.offsetWidth;
         this.ngZone.runOutsideAngular(() => {
             setTimeout(() => {
-                if (this.numericButtons) {
-                    const selectElement = this.numericButtons.selectElement.nativeElement;
-                    const numbersElement = this.numericButtons.numbersElement.nativeElement;
-                    this.renderer.removeStyle(numbersElement, 'display');
-                    this.renderer.setStyle(selectElement, 'display', 'none');
-                    this.renderer.addClass(selectElement, 'k-hidden');
+                const numericButtonsElement = this.element.nativeElement.querySelector('kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons');
+                const pagerInfoElement = this.element.nativeElement.querySelector('.k-pager-info');
+                const pagerPageSizes = this.element.nativeElement.querySelector('.k-pager-sizes');
+                if (numericButtonsElement) {
+                    const selectElement = numericButtonsElement.querySelector('select');
+                    const numbersElement = numericButtonsElement.querySelector('.k-pager-numbers');
                     if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-                        this.renderer.removeStyle(selectElement, 'display');
                         this.renderer.removeClass(selectElement, 'k-hidden');
-                        this.renderer.setStyle(numbersElement, 'display', 'none');
+                        this.renderer.addClass(numbersElement, 'k-hidden');
                     }
                     else {
                         this.renderer.addClass(selectElement, 'k-hidden');
+                        this.renderer.removeClass(numbersElement, 'k-hidden');
                     }
                 }
-                if (this.pagerInfo) {
-                    this.renderer.removeStyle(this.pagerInfo.nativeElement, 'display');
+                if (pagerInfoElement) {
                     if (width < RESPONSIVE_BREAKPOINT_LARGE) {
-                        this.renderer.setStyle(this.pagerInfo.nativeElement, 'display', 'none');
+                        this.renderer.addClass(pagerInfoElement, 'k-hidden');
+                    }
+                    else {
+                        this.renderer.removeClass(pagerInfoElement, 'k-hidden');
                     }
                 }
-                if (this.pagerPageSizes) {
-                    this.renderer.removeStyle(this.pagerPageSizes.nativeElement, 'display');
+                if (pagerPageSizes) {
                     if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-                        this.renderer.setStyle(this.pagerPageSizes.nativeElement, 'display', 'none');
+                        this.renderer.addClass(pagerPageSizes, 'k-hidden');
+                    }
+                    else {
+                        this.renderer.removeClass(pagerPageSizes, 'k-hidden');
                     }
                 }
             });
         });
     };
-    textFor(value) {
-        return this.localization.get(value);
-    }
     get ariaLabel() {
-        return `${this.textFor('page')} ${this.currentPage} ${this.textFor('of')} ${this.totalPages}`;
+        const localizationMsg = this.localization.get('ariaLabel') || '';
+        return replaceMessagePlaceholder(replaceMessagePlaceholder(localizationMsg, 'currentPage', this.currentPage.toString()), 'totalPages', this.totalPages.toString());
     }
     keyDownHandler(e) {
         const target = e.target;
@@ -286,11 +321,17 @@ export class PagerComponent {
         const isLastPage = this.currentPage === this.totalPages;
         this.ngZone.run(() => {
             if (isHome) {
+                if (e.target !== wrapper) {
+                    return;
+                }
                 e.preventDefault();
                 !isFirstPage && this.pagerContext.changePage(0);
             }
             else if (isEnd) {
                 e.preventDefault();
+                if (e.target !== wrapper) {
+                    return;
+                }
                 !isLastPage && this.pagerContext.changePage(this.totalPages - 1);
             }
             else if (this.isInnerNavigationEnabled) {
@@ -303,6 +344,9 @@ export class PagerComponent {
                 }
             }
             else {
+                if (e.target !== wrapper) {
+                    return;
+                }
                 if (isArrowLeftOrPageUp) {
                     e.preventDefault();
                     !isFirstPage && this.pagerContext.prevPage();
@@ -312,9 +356,6 @@ export class PagerComponent {
                     !isLastPage && this.pagerContext.nextPage();
                 }
                 else if (isEnter) {
-                    if (e.target !== wrapper) {
-                        return;
-                    }
                     e.preventDefault();
                     const [firstFocusable] = this.navigationService.getFirstAndLastFocusable(wrapper);
                     this.navigationService.toggleInnerNavigation(true);
@@ -336,8 +377,8 @@ export class PagerComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerComponent, deps: [{ token: i1.PagerContextService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.PagerNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerComponent, isStandalone: true, 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerComponent, deps: [{ token: i1.PagerContextService, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.PagerNavigationService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerComponent, isStandalone: true, selector: "kendo-datapager, kendo-pager", inputs: { externalTemplate: "externalTemplate", total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext", navigable: "navigable", size: "size", responsive: "responsive" }, 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: [
             LocalizationService,
             PagerContextService,
             PagerNavigationService,
@@ -345,8 +386,11 @@ export class PagerComponent {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.pager'
             }
-        ], 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: `
-        <ng-container kendoDataPagerLocalizedMessages
+        ], queries: [{ propertyName: "template", predicate: PagerTemplateDirective }], exportAs: ["kendoDataPager", "kendoPager"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container kendoPagerLocalizedMessages
+            i18n-ariaLabel="kendo.pager.ariaLabel|The value of the aria-label attribute of the Pager"
+            ariaLabel="{{ 'Page navigation, page {currentPage} of {totalPages}' }}"
+
             i18n-firstPage="kendo.pager.firstPage|The label for the first page button in the Pager"
             firstPage="Go to the first page"
 
@@ -382,36 +426,36 @@ export class PagerComponent {
          >
         </ng-container>
         <ng-container
-            *ngIf="template.first?.templateRef"
+            *ngIf="template.first?.templateRef; else default"
             [ngTemplateOutlet]="template.first?.templateRef"
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
-        <ng-container *ngIf="!template?.first?.templateRef">
+        <ng-template #default>
             <div class="k-pager-numbers-wrap">
-                <kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
-                <kendo-datapager-numeric-buttons
+                <kendo-pager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-pager-prev-buttons>
+                <kendo-pager-numeric-buttons
                     [size]="size"
                     *ngIf="type === 'numeric' && buttonCount > 0"
                     [buttonCount]="buttonCount">
-                </kendo-datapager-numeric-buttons>
-                <kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
-                <kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
+                </kendo-pager-numeric-buttons>
+                <kendo-pager-input [size]="size" *ngIf="type === 'input'"></kendo-pager-input>
+                <kendo-pager-next-buttons [size]="size" *ngIf="previousNext"></kendo-pager-next-buttons>
             </div>
-            <kendo-datapager-page-sizes *ngIf="pageSizeValues"
+            <kendo-pager-page-sizes *ngIf="pageSizeValues"
                 [size]="size"
                 [pageSizes]="pageSizeValues">
-            </kendo-datapager-page-sizes>
-            <kendo-datapager-info *ngIf='info'>
-            </kendo-datapager-info>
-        </ng-container>
-        <kendo-resize-sensor></kendo-resize-sensor>
-  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons", inputs: ["size"] }, { kind: "component", type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: PagerInputComponent, selector: "kendo-datapager-input", inputs: ["size"] }, { kind: "component", type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons", inputs: ["size"] }, { kind: "component", type: PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: ["pageSizes", "size"] }, { kind: "component", type: PagerInfoComponent, selector: "kendo-datapager-info" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+            </kendo-pager-page-sizes>
+            <kendo-pager-info *ngIf="info">
+            </kendo-pager-info>
+        </ng-template>
+        <kendo-resize-sensor *ngIf="responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
+  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoPagerLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PagerPrevButtonsComponent, selector: "kendo-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: ["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: ["pageSizes", "size"] }, { kind: "component", type: PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-datapager',
-                    exportAs: 'kendoDataPager',
+                    selector: 'kendo-datapager, kendo-pager',
+                    exportAs: 'kendoDataPager, kendoPager',
                     providers: [
                         LocalizationService,
                         PagerContextService,
@@ -422,7 +466,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         }
                     ],
                     template: `
-        <ng-container kendoDataPagerLocalizedMessages
+        <ng-container kendoPagerLocalizedMessages
+            i18n-ariaLabel="kendo.pager.ariaLabel|The value of the aria-label attribute of the Pager"
+            ariaLabel="{{ 'Page navigation, page {currentPage} of {totalPages}' }}"
+
             i18n-firstPage="kendo.pager.firstPage|The label for the first page button in the Pager"
             firstPage="Go to the first page"
 
@@ -458,48 +505,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
          >
         </ng-container>
         <ng-container
-            *ngIf="template.first?.templateRef"
+            *ngIf="template.first?.templateRef; else default"
             [ngTemplateOutlet]="template.first?.templateRef"
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
-        <ng-container *ngIf="!template?.first?.templateRef">
+        <ng-template #default>
             <div class="k-pager-numbers-wrap">
-                <kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
-                <kendo-datapager-numeric-buttons
+                <kendo-pager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-pager-prev-buttons>
+                <kendo-pager-numeric-buttons
                     [size]="size"
                     *ngIf="type === 'numeric' && buttonCount > 0"
                     [buttonCount]="buttonCount">
-                </kendo-datapager-numeric-buttons>
-                <kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
-                <kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
+                </kendo-pager-numeric-buttons>
+                <kendo-pager-input [size]="size" *ngIf="type === 'input'"></kendo-pager-input>
+                <kendo-pager-next-buttons [size]="size" *ngIf="previousNext"></kendo-pager-next-buttons>
             </div>
-            <kendo-datapager-page-sizes *ngIf="pageSizeValues"
+            <kendo-pager-page-sizes *ngIf="pageSizeValues"
                 [size]="size"
                 [pageSizes]="pageSizeValues">
-            </kendo-datapager-page-sizes>
-            <kendo-datapager-info *ngIf='info'>
-            </kendo-datapager-info>
-        </ng-container>
-        <kendo-resize-sensor></kendo-resize-sensor>
+            </kendo-pager-page-sizes>
+            <kendo-pager-info *ngIf="info">
+            </kendo-pager-info>
+        </ng-template>
+        <kendo-resize-sensor *ngIf="responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
   `,
                     standalone: true,
                     imports: [LocalizedMessagesDirective, NgIf, NgTemplateOutlet, PagerPrevButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerNextButtonsComponent, PagerPageSizesComponent, PagerInfoComponent, ResizeSensorComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.PagerContextService }, { type: i0.ElementRef }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.PagerNavigationService }]; }, propDecorators: { resizeSensor: [{
-                type: ViewChild,
-                args: [ResizeSensorComponent, { static: true }]
-            }], pagerInfo: [{
-                type: ViewChild,
-                args: [PagerInfoComponent, { read: ElementRef }]
-            }], pagerPageSizes: [{
-                type: ViewChild,
-                args: [PagerPageSizesComponent, { read: ElementRef }]
-            }], numericButtons: [{
-                type: ViewChild,
-                args: [PagerNumericButtonsComponent]
-            }], template: [{
+        }], ctorParameters: function () { return [{ type: i1.PagerContextService, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }, { type: i0.ElementRef }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.PagerNavigationService, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }]; }, propDecorators: { template: [{
                 type: ContentChildren,
                 args: [PagerTemplateDirective]
+            }], externalTemplate: [{
+                type: Input
             }], total: [{
                 type: Input
             }], skip: [{
@@ -520,6 +565,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], responsive: [{
+                type: Input
             }], pageChange: [{
                 type: Output
             }], pageSizeChange: [{

package/esm2022/pager/pager.module.mjs

@@ -18,13 +18,14 @@ import * as i7 from "./pager-page-sizes.component";
 import * as i8 from "./pager-prev-buttons.component";
 import * as i9 from "./pager-template.directive";
 import * as i10 from "./pager.component";
+import * as i11 from "./spacer.component";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * @hidden
  */
 export class PagerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, imports: [i1.CustomMessagesComponent, i2.PagerFocusableDirective, i3.PagerInfoComponent, i4.PagerInputComponent, i5.PagerNextButtonsComponent, i6.PagerNumericButtonsComponent, i7.PagerPageSizesComponent, i8.PagerPrevButtonsComponent, i9.PagerTemplateDirective, i10.PagerComponent], exports: [i1.CustomMessagesComponent, i2.PagerFocusableDirective, i3.PagerInfoComponent, i4.PagerInputComponent, i5.PagerNextButtonsComponent, i6.PagerNumericButtonsComponent, i7.PagerPageSizesComponent, i8.PagerPrevButtonsComponent, i9.PagerTemplateDirective, i10.PagerComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, imports: [i1.CustomMessagesComponent, i2.PagerFocusableDirective, i3.PagerInfoComponent, i4.PagerInputComponent, i5.PagerNextButtonsComponent, i6.PagerNumericButtonsComponent, i7.PagerPageSizesComponent, i8.PagerPrevButtonsComponent, i9.PagerTemplateDirective, i10.PagerComponent, i11.PagerSpacerComponent], exports: [i1.CustomMessagesComponent, i2.PagerFocusableDirective, i3.PagerInfoComponent, i4.PagerInputComponent, i5.PagerNextButtonsComponent, i6.PagerNumericButtonsComponent, i7.PagerPageSizesComponent, i8.PagerPrevButtonsComponent, i9.PagerTemplateDirective, i10.PagerComponent, i11.PagerSpacerComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, providers: [
             IconsService,
             PopupService,

package/esm2022/pager/spacer.component.mjs

@@ -0,0 +1,49 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input } from '@angular/core';
+import { isPresent } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+/**
+ * Represents the Kendo UI PagerSpacer component for Angular.
+ * Used to give additional white space between the Pager inner elements,
+ * and provides a way for customizing the spacer width.
+ */
+export class PagerSpacerComponent {
+    hostClass = true;
+    get sizedClass() {
+        return isPresent(this.width);
+    }
+    get flexBasisStyle() {
+        return this.width;
+    }
+    /**
+     * Specifies the width of the PagerSpacer.
+     * Accepts the [string values of the CSS `flex-basis` property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis).
+     *
+     * If not set, the PagerSpacer will take all the available space.
+     */
+    width;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerSpacerComponent, isStandalone: true, selector: "kendo-pager-spacer", inputs: { width: "width" }, host: { properties: { "class.k-spacer": "this.hostClass", "class.k-spacer-sized": "this.sizedClass", "style.flexBasis": "this.flexBasisStyle" } }, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerSpacerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pager-spacer',
+                    template: ``,
+                    standalone: true
+                }]
+        }], propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-spacer']
+            }], sizedClass: [{
+                type: HostBinding,
+                args: ['class.k-spacer-sized']
+            }], flexBasisStyle: [{
+                type: HostBinding,
+                args: ['style.flexBasis']
+            }], width: [{
+                type: Input
+            }] } });

package/esm2022/util.mjs

@@ -20,16 +20,16 @@ export const getAllFocusableChildren = (parent) => {
  * @hidden
  */
 export const focusableSelector = [
-    'a[href]:not([disabled])',
-    'area[href]:not([disabled])',
-    'input:not([disabled])',
-    'select:not([disabled])',
-    'textarea:not([disabled])',
-    'button',
+    'a[href]:not([disabled]):not([aria-hidden="true"])',
+    'area[href]:not([disabled]):not([aria-hidden="true"])',
+    'input:not([disabled]):not([aria-hidden="true"])',
+    'select:not([disabled]):not([aria-hidden="true"])',
+    'textarea:not([disabled]):not([aria-hidden="true"])',
+    'button:not([aria-hidden="true"])',
     'iframe:not([disabled])',
     'object:not([disabled])',
     'embed:not([disabled])',
-    '*[tabindex]:not([disabled])',
+    '*[tabindex]:not([disabled]):not([aria-hidden="true"])',
     '*[contenteditable]:not([disabled]):not([contenteditable="false"])'
 ].join(',');
 /**
@@ -57,3 +57,7 @@ export const getStylingClasses = (componentType, stylingOption, previousValue, n
             break;
     }
 };
+/**
+ * @hidden
+ */
+export const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);