@progress/kendo-angular-pager 25.1.0-develop.2 → 25.1.0-develop.21

package/fesm2022/progress-kendo-angular-pager.mjs

@@ -3,18 +3,17 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Input, Directive, forwardRef, Component, ChangeDetectionStrategy, HostBinding, ViewChild, Optional, ElementRef, EventEmitter, inject, HostListener, Output, ContentChildren, SkipSelf, NgModule } from '@angular/core';
+import { signal, Input, Directive, forwardRef, Component, ChangeDetectionStrategy, HostBinding, ViewChild, Optional, ElementRef, EventEmitter, effect, untracked, inject, afterNextRender, HostListener, Output, ContentChildren, SkipSelf, NgModule } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { Subject, Subscription } from 'rxjs';
 import { caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
-import { isVisible, isDocumentAvailable, isFocusable, Keys, EventsOutsideAngularDirective, anyChanged, isChanged, replaceMessagePlaceholder, normalizeKeys, ResizeSensorComponent, provideComponentName, isPresent, ResizeBatchService } from '@progress/kendo-angular-common';
+import { isVisible, isDocumentAvailable, isFocusable, Keys, EventsOutsideAngularDirective, replaceMessagePlaceholder, normalizeKeys, ResizeSensorComponent, provideComponentName, isPresent, ResizeBatchService } from '@progress/kendo-angular-common';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
 import { NumericTextBoxComponent } from '@progress/kendo-angular-inputs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { NgTemplateOutlet, NgStyle } from '@angular/common';
-import { take } from 'rxjs/operators';
 import { IconsService } from '@progress/kendo-angular-icons';
 import { PopupService } from '@progress/kendo-angular-popup';
 
@@ -74,51 +73,123 @@ class Messages extends ComponentMessages {
      * and total number of pages. The `{currentPage}` and `{totalPages}` placeholders will be replaced
      * internally with the respective actual values.
      */
-    ariaLabel;
+    set ariaLabel(value) {
+        this._ariaLabel.set(value);
+    }
+    get ariaLabel() {
+        return this._ariaLabel();
+    }
     /**
      * The label for the **First page** button.
      */
-    firstPage;
+    set firstPage(value) {
+        this._firstPage.set(value);
+    }
+    get firstPage() {
+        return this._firstPage();
+    }
     /**
      * The label for the **Last page** button.
      */
-    lastPage;
+    set lastPage(value) {
+        this._lastPage.set(value);
+    }
+    get lastPage() {
+        return this._lastPage();
+    }
     /**
      * The label for the **Previous page** button.
      */
-    previousPage;
+    set previousPage(value) {
+        this._previousPage.set(value);
+    }
+    get previousPage() {
+        return this._previousPage();
+    }
     /**
      * The label for the **Next page** button.
      */
-    nextPage;
+    set nextPage(value) {
+        this._nextPage.set(value);
+    }
+    get nextPage() {
+        return this._nextPage();
+    }
     /**
      * The label displayed before the pager input.
      */
-    page;
+    set page(value) {
+        this._page.set(value);
+    }
+    get page() {
+        return this._page();
+    }
     /**
      * The title attribute of the page number input element.
      */
-    pageNumberInputTitle;
+    set pageNumberInputTitle(value) {
+        this._pageNumberInputTitle.set(value);
+    }
+    get pageNumberInputTitle() {
+        return this._pageNumberInputTitle();
+    }
     /**
      * The label displayed after the page-size selector.
      */
-    itemsPerPage;
+    set itemsPerPage(value) {
+        this._itemsPerPage.set(value);
+    }
+    get itemsPerPage() {
+        return this._itemsPerPage();
+    }
     /**
      * The label before the total-page number.
      */
-    of;
+    set of(value) {
+        this._of.set(value);
+    }
+    get of() {
+        return this._of();
+    }
     /**
      * The label after the total-page number.
      */
-    items;
+    set items(value) {
+        this._items.set(value);
+    }
+    get items() {
+        return this._items();
+    }
     /**
      * The text of the title and aria-label attributes applied to the page chooser.
      */
-    selectPage;
+    set selectPage(value) {
+        this._selectPage.set(value);
+    }
+    get selectPage() {
+        return this._selectPage();
+    }
     /**
      * The text of the aria-label attribute applied to the input element for entering the page number."
      */
-    inputLabel;
+    set inputLabel(value) {
+        this._inputLabel.set(value);
+    }
+    get inputLabel() {
+        return this._inputLabel();
+    }
+    _ariaLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_ariaLabel" }] : []));
+    _firstPage = signal(undefined, ...(ngDevMode ? [{ debugName: "_firstPage" }] : []));
+    _lastPage = signal(undefined, ...(ngDevMode ? [{ debugName: "_lastPage" }] : []));
+    _previousPage = signal(undefined, ...(ngDevMode ? [{ debugName: "_previousPage" }] : []));
+    _nextPage = signal(undefined, ...(ngDevMode ? [{ debugName: "_nextPage" }] : []));
+    _page = signal(undefined, ...(ngDevMode ? [{ debugName: "_page" }] : []));
+    _pageNumberInputTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_pageNumberInputTitle" }] : []));
+    _itemsPerPage = signal(undefined, ...(ngDevMode ? [{ debugName: "_itemsPerPage" }] : []));
+    _of = signal(undefined, ...(ngDevMode ? [{ debugName: "_of" }] : []));
+    _items = signal(undefined, ...(ngDevMode ? [{ debugName: "_items" }] : []));
+    _selectPage = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectPage" }] : []));
+    _inputLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_inputLabel" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: Messages, isStandalone: true, selector: "kendoPagerMessages", inputs: { ariaLabel: "ariaLabel", firstPage: "firstPage", lastPage: "lastPage", previousPage: "previousPage", nextPage: "nextPage", page: "page", pageNumberInputTitle: "pageNumberInputTitle", itemsPerPage: "itemsPerPage", of: "of", items: "items", selectPage: "selectPage", inputLabel: "inputLabel" }, usesInheritance: true, ngImport: i0 });
 }
@@ -280,9 +351,24 @@ class PagerElementComponent {
     localization;
     pagerContext;
     cd;
-    total;
-    skip;
-    pageSize;
+    set total(v) {
+        this._total.set(v);
+    }
+    get total() {
+        return this._total();
+    }
+    set skip(v) {
+        this._skip.set(v);
+    }
+    get skip() {
+        return this._skip();
+    }
+    set pageSize(v) {
+        this._pageSize.set(v);
+    }
+    get pageSize() {
+        return this._pageSize();
+    }
     caretAltLeftIcon = caretAltLeftIcon;
     caretAltToLeftIcon = caretAltToLeftIcon;
     caretAltRightIcon = caretAltRightIcon;
@@ -308,6 +394,9 @@ class PagerElementComponent {
         return Math.ceil((this.total || 0) / this.pageSize);
     }
     subscriptions;
+    _total = signal(undefined, ...(ngDevMode ? [{ debugName: "_total" }] : []));
+    _skip = signal(undefined, ...(ngDevMode ? [{ debugName: "_skip" }] : []));
+    _pageSize = signal(undefined, ...(ngDevMode ? [{ debugName: "_pageSize" }] : []));
     constructor(localization, pagerContext, cd) {
         this.localization = localization;
         this.pagerContext = pagerContext;
@@ -609,7 +698,13 @@ class PagerPrevButtonsComponent extends PagerElementComponent {
     /**
      * Specifies the padding of the navigation buttons. The default value is set by the Kendo theme.
      */
-    size;
+    set size(value) {
+        this._size.set(value);
+    }
+    get size() {
+        return this._size();
+    }
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
     /**
      * @hidden
      *
@@ -634,7 +729,6 @@ class PagerPrevButtonsComponent extends PagerElementComponent {
         this.total = total;
         this.skip = skip;
         this.pageSize = pageSize;
-        this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: PagerPrevButtonsComponent, isStandalone: true, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
@@ -727,17 +821,15 @@ class PagerPageSizesComponent extends PagerElementComponent {
     element;
     ngZone;
     dropDownList;
-    _showItemsText = true;
     /**
      * Controls the visibility of the page text label.
      * @hidden
      */
     get showItemsText() {
-        return this._showItemsText;
+        return this._showItemsText();
     }
     set showItemsText(value) {
-        this._showItemsText = value;
-        this.cd.markForCheck();
+        this._showItemsText.set(value);
     }
     /**
      * Specifies the page sizes collection. You can include numbers and [`PageSizeItem`](https://www.telerik.com/kendo-angular-ui/components/pager/api/pagesizeitem) objects.
@@ -777,13 +869,23 @@ class PagerPageSizesComponent extends PagerElementComponent {
     /**
      * Specifies the padding of the DropDownList component. The default value is set by the Kendo theme.
      */
-    size;
+    set size(value) {
+        this._size.set(value);
+    }
+    get size() {
+        return this._size();
+    }
     /**
      * Specifies the adaptive mode of the internal `DropDownList` component.
      *
      * @default 'none'
      */
-    adaptiveMode = 'none';
+    set adaptiveMode(value) {
+        this._adaptiveMode.set(value);
+    }
+    get adaptiveMode() {
+        return this._adaptiveMode();
+    }
     /**
      * @hidden
      *
@@ -793,6 +895,9 @@ class PagerPageSizesComponent extends PagerElementComponent {
         return true;
     }
     _pageSizes = [];
+    _showItemsText = signal(true, ...(ngDevMode ? [{ debugName: "_showItemsText" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _adaptiveMode = signal('none', ...(ngDevMode ? [{ debugName: "_adaptiveMode" }] : []));
     constructor(localization, cd, pagerContext, element, ngZone) {
         super(localization, pagerContext, cd);
         this.pagerContext = pagerContext;
@@ -822,7 +927,6 @@ class PagerPageSizesComponent extends PagerElementComponent {
         this.skip = skip;
         const normalizedPageSize = typeof pageSize === 'number' ? pageSize : this.total;
         this.pageSize = isAllSelected ? 'all' : normalizedPageSize;
-        this.cd.markForCheck();
     }
     keyDownHandler(ev) {
         if (ev.code === Keys.Escape && this.dropDownList.isOpen) {
@@ -953,16 +1057,21 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
      * @type {number}
      * @memberOf PagerNumericButtonsComponent
      */
-    buttonCount;
+    set buttonCount(value) {
+        this._buttonCount.set(value);
+    }
+    get buttonCount() {
+        return this._buttonCount();
+    }
     /**
      * Specifies the padding of the numeric buttons. The default value is set by the Kendo theme.
      */
     set size(size) {
         this.handleClasses(size, 'size');
-        this._size = size;
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * @hidden
@@ -1001,7 +1110,8 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
         this.pagerContext = pagerContext;
         this.renderer = renderer;
     }
-    _size;
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _buttonCount = signal(undefined, ...(ngDevMode ? [{ debugName: "_buttonCount" }] : []));
     ngAfterViewInit() {
         this.handleClasses(this.size, 'size');
     }
@@ -1037,7 +1147,6 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
         this.total = total;
         this.skip = skip;
         this.pageSize = pageSize;
-        this.cd.markForCheck();
     }
     get pageChooserLabel() {
         return this.textFor('selectPage');
@@ -1070,7 +1179,7 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
               [attr.title]="pageLabel(start - 1)"
             (click)="changePage(start - 2)">...</button>
           }
-          @for (num of buttons; track num) {
+          @for (num of buttons; track $index) {
             <button
               type="button"
               kendoPagerFocusable
@@ -1120,7 +1229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
               [attr.title]="pageLabel(start - 1)"
             (click)="changePage(start - 2)">...</button>
           }
-          @for (num of buttons; track num) {
+          @for (num of buttons; track $index) {
             <button
               type="button"
               kendoPagerFocusable
@@ -1192,7 +1301,13 @@ class PagerNextButtonsComponent extends PagerElementComponent {
     /**
      * Specifies the padding of the navigation buttons. The default value is set by the Kendo theme.
      */
-    size;
+    set size(value) {
+        this._size.set(value);
+    }
+    get size() {
+        return this._size();
+    }
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
     constructor(localization, pagerContext, cd) {
         super(localization, pagerContext, cd);
     }
@@ -1210,7 +1325,6 @@ class PagerNextButtonsComponent extends PagerElementComponent {
         this.total = total;
         this.skip = skip;
         this.pageSize = pageSize;
-        this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: PagerNextButtonsComponent, isStandalone: true, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
@@ -1297,28 +1411,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
 class PagerInputComponent extends PagerElementComponent {
     pagerContext;
     zone;
-    renderer;
     numericInput;
     /**
      * Controls the visibility of the page text label.
      * @hidden
      */
-    showPageText = true;
+    set showPageText(value) {
+        this._showPageText.set(value);
+    }
+    get showPageText() {
+        return this._showPageText();
+    }
     /**
      * Specifies the padding of the internal `NumericTextBox` component. The default value is set by the Kendo theme.
      */
-    size;
-    constructor(localization, pagerContext, zone, cd, renderer) {
+    set size(value) {
+        this._size.set(value);
+    }
+    get size() {
+        return this._size();
+    }
+    _showPageText = signal(true, ...(ngDevMode ? [{ debugName: "_showPageText" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    constructor(localization, pagerContext, zone, cd) {
         super(localization, pagerContext, cd);
         this.pagerContext = pagerContext;
         this.zone = zone;
-        this.renderer = renderer;
     }
     onChanges({ total, skip, pageSize }) {
         this.total = total;
         this.skip = skip;
         this.pageSize = pageSize;
-        this.cd.markForCheck();
     }
     /**
      * @hidden
@@ -1370,7 +1493,7 @@ class PagerInputComponent extends PagerElementComponent {
     get hasPages() {
         return this.totalPages !== 0;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: PagerInputComponent, isStandalone: true, selector: "kendo-datapager-input, kendo-pager-input", inputs: { showPageText: "showPageText", size: "size" }, viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
      <span class="k-pager-input">
        @if (showPageText) {
@@ -1397,11 +1520,12 @@ class PagerInputComponent extends PagerElementComponent {
        </kendo-numerictextbox>
        {{textFor('of')}} {{totalPages}}
      </span>
-     `, isInline: true, dependencies: [{ kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+     `, isInline: true, dependencies: [{ kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PagerInputComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-datapager-input, kendo-pager-input',
                     template: `
      <span class="k-pager-input">
@@ -1433,7 +1557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     standalone: true,
                     imports: [NumericTextBoxComponent, PagerFocusableDirective, EventsOutsideAngularDirective]
                 }]
-        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { numericInput: [{
+        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { numericInput: [{
                 type: ViewChild,
                 args: [NumericTextBoxComponent, { static: true }]
             }], showPageText: [{
@@ -1493,7 +1617,6 @@ class PagerInfoComponent extends PagerElementComponent {
         this.total = total;
         this.skip = skip;
         this.pageSize = pageSize;
-        this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: PagerInfoComponent, isStandalone: true, selector: "kendo-datapager-info, kendo-pager-info", host: { properties: { "class.k-pager-info": "this.hostClass" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('of')}} {{total}} {{textFor('items')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -1519,8 +1642,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1786694207,
-    version: '25.1.0-develop.2',
+    publishDate: 1788250744,
+    version: '25.1.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1569,7 +1692,8 @@ class PagerComponent {
     localization;
     renderer;
     ngZone;
-    cdr;
+    injector;
+    cd;
     navigationService;
     /**
      * Represents the collection of pager template directives.
@@ -1602,41 +1726,76 @@ class PagerComponent {
     /**
      * @hidden
      */
-    externalTemplate;
+    set externalTemplate(value) {
+        this._externalTemplate.set(value);
+    }
+    get externalTemplate() {
+        return this._externalTemplate();
+    }
     /**
      * Specifies the total number of data items in the collection.
      *
      * @default 0
      */
-    total = 0;
+    set total(value) {
+        this._total.set(value);
+    }
+    get total() {
+        return this._total();
+    }
     /**
      * Specifies the number of data items to skip.
      *
      * @default 0
      */
-    skip = 0;
+    set skip(value) {
+        this._skip.set(value);
+    }
+    get skip() {
+        return this._skip();
+    }
     /**
      * Specifies the number of data items per page.
      */
-    pageSize;
+    set pageSize(value) {
+        this._pageSize.set(value);
+    }
+    get pageSize() {
+        return this._pageSize();
+    }
     /**
      * Specifies the maximum number of numeric buttons before the buttons are collapsed.
      *
      * @default 10
      */
-    buttonCount = 10;
+    set buttonCount(value) {
+        this._buttonCount.set(value);
+    }
+    get buttonCount() {
+        return this._buttonCount();
+    }
     /**
      * Determines whether to display information about the current page and the total number of records.
      *
      * @default true
      */
-    info = true;
+    set info(value) {
+        this._info.set(value);
+    }
+    get info() {
+        return this._info();
+    }
     /**
      * Specifies the type of the Pager.
      *
      * @default 'numeric'
      */
-    type = 'numeric';
+    set type(value) {
+        this._type.set(value);
+    }
+    get type() {
+        return this._type();
+    }
     /**
      * Displays a dropdown for selecting the page size.
      * When set to `true`, the dropdown contains the default list of options - 5, 10, 20.
@@ -1645,21 +1804,26 @@ class PagerComponent {
      */
     set pageSizeValues(value) {
         if (typeof value === 'boolean') {
-            this._pageSizeValues = value ? DEFAULT_PAGE_SIZE_VALUES : [];
+            this._pageSizeValues.set(value ? DEFAULT_PAGE_SIZE_VALUES : []);
         }
         else {
-            this._pageSizeValues = value;
+            this._pageSizeValues.set(value);
         }
     }
     get pageSizeValues() {
-        return this._pageSizeValues;
+        return this._pageSizeValues();
     }
     /**
      * Determines whether to display the **Previous** and **Next** buttons.
      *
      * @default true
      */
-    previousNext = true;
+    set previousNext(value) {
+        this._previousNext.set(value);
+    }
+    get previousNext() {
+        return this._previousNext();
+    }
     /**
      * Determines whether users can use dedicated shortcuts to interact with the Pager ([see example](https://www.telerik.com/kendo-angular-ui/components/pager/keyboard-navigation)).
      * By default, navigation is enabled. To disable it and make the Pager content accessible in the normal tab sequence, set the property to `false`.
@@ -1669,34 +1833,43 @@ class PagerComponent {
      * This property is related to accessibility.
      */
     set navigable(value) {
-        this._navigable = value;
+        this._navigable.set(value);
         this.navigationService.isNavigable = value;
     }
     get navigable() {
-        return this._navigable;
+        return this._navigable();
     }
     /**
      * Specifies the padding of all Pager elements. The default value is set by the Kendo theme.
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * Determines whether the Pager responsive functionality is enabled ([see example](https://www.telerik.com/kendo-angular-ui/components/pager/responsive-design)).
      *
      * @default true
      */
-    responsive = true;
+    set responsive(value) {
+        this._responsive.set(value);
+    }
+    get responsive() {
+        return this._responsive();
+    }
     /**
      * Determines whether the Pager adaptiveness functionality is enabled ([see example](https://www.telerik.com/kendo-angular-ui/components/pager/adaptiveness)).
      *
      * @default 'none'
      */
-    adaptiveMode = 'none';
+    set adaptiveMode(value) {
+        this._adaptiveMode.set(value);
+    }
+    get adaptiveMode() {
+        return this._adaptiveMode();
+    }
     /**
      * Fires when the current page of the Pager changes ([see example](https://www.telerik.com/kendo-angular-ui/components/pager)).
      * You have to handle the event and page the data.
@@ -1747,22 +1920,22 @@ class PagerComponent {
         return Math.floor((this.skip || 0) / this.pageSize) + 1;
     }
     get templateContext() {
-        const context = this._templateContext;
-        context.totalPages = this.totalPages;
-        context.total = this.total;
-        context.skip = this.skip;
-        context.pageSize = this.pageSize;
-        context.currentPage = this.currentPage;
-        return context;
+        return {
+            totalPages: this.totalPages,
+            total: this.total,
+            skip: this.skip,
+            pageSize: this.pageSize,
+            currentPage: this.currentPage,
+        };
     }
     /**
      * @hidden
      */
     get showPageText() {
-        return this._showPageText;
+        return this._showPageText();
     }
     set showPageText(value) {
-        this._showPageText = value;
+        this._showPageText.set(value);
         if (this.pagerInputComponent) {
             this.pagerInputComponent.showPageText = value;
         }
@@ -1772,10 +1945,10 @@ class PagerComponent {
      * @hidden
      */
     get showItemsText() {
-        return this._showItemsText;
+        return this._showItemsText();
     }
     set showItemsText(value) {
-        this._showItemsText = value;
+        this._showItemsText.set(value);
         if (this.pageSizesComponent) {
             this.pageSizesComponent.showItemsText = value;
         }
@@ -1785,27 +1958,121 @@ class PagerComponent {
      * @hidden
      */
     get showInput() {
-        return this._showInput;
+        return this._showInput();
     }
     set showInput(value) {
-        this._showInput = value;
+        this._showInput.set(value);
         this.pagerInputVisibilityChange.emit(value);
     }
     /**
      * @hidden
      */
-    initialized = false;
+    get initialized() {
+        return this._initialized();
+    }
     subscriptions = new Subscription();
-    _templateContext = {};
-    _pageSizeValues = DEFAULT_PAGE_SIZE_VALUES;
+    _pageSizeValues = signal(DEFAULT_PAGE_SIZE_VALUES, ...(ngDevMode ? [{ debugName: "_pageSizeValues" }] : []));
     direction;
     isInnerNavigationEnabled = false;
-    _navigable = true;
-    _size;
-    _showInput = true;
-    _showPageText = true;
-    _showItemsText = true;
-    _isAllSelected = false;
+    _navigable = signal(true, ...(ngDevMode ? [{ debugName: "_navigable" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _previousSize = undefined;
+    _showInput = signal(true, ...(ngDevMode ? [{ debugName: "_showInput" }] : []));
+    _showPageText = signal(true, ...(ngDevMode ? [{ debugName: "_showPageText" }] : []));
+    _showItemsText = signal(true, ...(ngDevMode ? [{ debugName: "_showItemsText" }] : []));
+    _isAllSelected = signal(false, ...(ngDevMode ? [{ debugName: "_isAllSelected" }] : []));
+    _initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : []));
+    _externalTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_externalTemplate" }] : []));
+    _total = signal(0, ...(ngDevMode ? [{ debugName: "_total" }] : []));
+    _skip = signal(0, ...(ngDevMode ? [{ debugName: "_skip" }] : []));
+    _pageSize = signal(undefined, ...(ngDevMode ? [{ debugName: "_pageSize" }] : []));
+    _buttonCount = signal(10, ...(ngDevMode ? [{ debugName: "_buttonCount" }] : []));
+    _info = signal(true, ...(ngDevMode ? [{ debugName: "_info" }] : []));
+    _type = signal('numeric', ...(ngDevMode ? [{ debugName: "_type" }] : []));
+    _previousNext = signal(true, ...(ngDevMode ? [{ debugName: "_previousNext" }] : []));
+    _responsive = signal(true, ...(ngDevMode ? [{ debugName: "_responsive" }] : []));
+    _adaptiveMode = signal('none', ...(ngDevMode ? [{ debugName: "_adaptiveMode" }] : []));
+    _previousTotal = undefined;
+    _previousPageSize = undefined;
+    _previousResponsive = undefined;
+    _layoutEffectInitialized = false;
+    _typeEffectInitialized = false;
+    sizeClassEffect = effect(() => {
+        const newSize = this._size();
+        this.handleClasses(newSize, 'size', this._previousSize);
+        this._previousSize = newSize;
+    }, ...(ngDevMode ? [{ debugName: "sizeClassEffect" }] : []));
+    pageStateEffect = effect(() => {
+        const skip = this._skip();
+        const pageSize = this._pageSize();
+        const total = this._total();
+        const buttonCount = untracked(() => this._buttonCount());
+        const isAllSelected = untracked(() => this._isAllSelected());
+        const responsive = untracked(() => this._responsive());
+        const isTotalChanged = this._previousTotal !== undefined && total !== this._previousTotal && total > 0;
+        if (isAllSelected && isTotalChanged) {
+            this._pageSize.set(total);
+            Promise.resolve().then(() => {
+                this.pageChange.emit({ skip: untracked(() => this._skip()), take: total });
+            });
+        }
+        const previousButtonCount = Math.min(buttonCount, (this._previousTotal ?? total) / (this._previousPageSize ?? pageSize));
+        this.pagerContext.notifyChanges({
+            pageSize: untracked(() => this._pageSize()),
+            skip,
+            total,
+            isAllSelected,
+        });
+        this.pagerDimensions.numericButtonsWidth =
+            (this.pagerDimensions.numericButtonsWidth * Math.min(buttonCount, total / untracked(() => this._pageSize()))) /
+                previousButtonCount;
+        this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
+        if (responsive) {
+            this.resizeHandler(false);
+        }
+        this._previousTotal = total;
+        this._previousPageSize = pageSize;
+    }, ...(ngDevMode ? [{ debugName: "pageStateEffect" }] : []));
+    layoutParamsEffect = effect(() => {
+        this._pageSizeValues();
+        this._previousNext();
+        this._buttonCount();
+        if (!this._layoutEffectInitialized) {
+            this._layoutEffectInitialized = true;
+            return;
+        }
+        if (untracked(() => this._responsive())) {
+            this.resizeHandler(false);
+        }
+    }, ...(ngDevMode ? [{ debugName: "layoutParamsEffect" }] : []));
+    responsiveEffect = effect(() => {
+        const responsive = this._responsive();
+        if (this._previousResponsive === undefined) {
+            this._previousResponsive = responsive;
+            return;
+        }
+        if (responsive && !this._previousResponsive) {
+            this.measureAllTextWidths();
+            this.resizeHandler(false);
+        }
+        if (!responsive) {
+            // Use untracked to avoid _type becoming a dependency of this effect
+            this.showInput = untracked(() => this._type()) === 'input';
+            this.showElements(this.element.nativeElement.offsetWidth, this.pagerDimensions.width);
+        }
+        this._previousResponsive = responsive;
+    }, ...(ngDevMode ? [{ debugName: "responsiveEffect" }] : []));
+    typeEffect = effect(() => {
+        this._type();
+        if (!this._typeEffectInitialized) {
+            this._typeEffectInitialized = true;
+            return;
+        }
+        this.showNumericButtonsResponsive();
+        if (untracked(() => this._responsive())) {
+            this.resizeHandler(false);
+        }
+    }, ...(ngDevMode ? [{ debugName: "typeEffect" }] : []));
     /**
      * Stores the measurements of various Pager elements.
      * These dimensions are used for responsive layout calculations.
@@ -1822,15 +2089,16 @@ class PagerComponent {
         gapNumbersSizes: 0,
         gapSizesInfo: 0,
         gapPageText: 0,
-        width: 0
+        width: 0,
     };
-    constructor(pagerContext, element, localization, renderer, ngZone, cdr, navigationService) {
+    constructor(pagerContext, element, localization, renderer, ngZone, injector, cd, navigationService) {
         this.pagerContext = pagerContext;
         this.element = element;
         this.localization = localization;
         this.renderer = renderer;
         this.ngZone = ngZone;
-        this.cdr = cdr;
+        this.injector = injector;
+        this.cd = cd;
         this.navigationService = navigationService;
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
@@ -1869,80 +2137,24 @@ class PagerComponent {
     ngAfterViewInit() {
         this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
         this.subscriptions.add(this.template.changes.subscribe(() => {
+            this.cd.markForCheck();
             this.measureAllTextWidths();
             if (this.responsive) {
                 this.resizeHandler(false);
             }
         }));
-        this.handleClasses(this.size, 'size');
         this.setPagerDimensions();
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+        afterNextRender(() => {
+            this._initialized.set(true);
             if (this.type !== 'input') {
                 this.showInput = false;
             }
             this.responsive && this.resizeHandler();
-        });
+        }, { injector: this.injector });
         if (!isDocumentAvailable()) {
-            this.initialized = true;
+            this._initialized.set(true);
             return;
         }
-        this.ngZone.runOutsideAngular(() => {
-            setTimeout(() => {
-                this.initialized = true;
-                this.cdr.markForCheck();
-            }, 0);
-        });
-    }
-    ngOnChanges(changes) {
-        if (anyChanged(["pageSize", "skip", "total"], changes, false)) {
-            const previousTotal = changes['total']?.previousValue;
-            const currentTotal = this.total;
-            let pageSizeAdjusted = false;
-            const isTotalChanged = changes['total'] && currentTotal !== previousTotal && currentTotal > 0;
-            if (this._isAllSelected && isTotalChanged) {
-                this.pageSize = currentTotal;
-                pageSizeAdjusted = true;
-            }
-            const previousButtonCount = Math.min(this.buttonCount, (changes['total']?.previousValue || this.total) / (changes['pageSize']?.previousValue || this.pageSize));
-            this.pagerContext.notifyChanges({
-                pageSize: this.pageSize,
-                skip: this.skip,
-                total: this.total,
-                isAllSelected: this._isAllSelected
-            });
-            this.pagerDimensions.numericButtonsWidth = (this.pagerDimensions.numericButtonsWidth * Math.min(this.buttonCount, this.total / this.pageSize)) / previousButtonCount;
-            this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
-            if (this.responsive) {
-                this.resizeHandler(false);
-            }
-            if (pageSizeAdjusted) {
-                Promise.resolve().then(() => {
-                    this.pageChange.emit({ skip: this.skip, take: currentTotal });
-                    this.cdr.detectChanges();
-                });
-            }
-        }
-        if (anyChanged(["pageSizeValues", "previousNext", "buttonCount"], changes, true)) {
-            if (this.responsive) {
-                this.resizeHandler(false);
-            }
-        }
-        if (isChanged('responsive', changes, true)) {
-            if (changes['responsive'].currentValue && !changes['responsive'].previousValue) {
-                this.measureAllTextWidths();
-                this.resizeHandler(false);
-            }
-            if (!this.responsive) {
-                this.showInput = this.type === 'input';
-                this.showElements(this.element.nativeElement.offsetWidth, this.pagerDimensions.width);
-            }
-        }
-        if (isChanged('type', changes, true)) {
-            this.showNumericButtonsResponsive();
-            if (this.responsive) {
-                this.resizeHandler(false);
-            }
-        }
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
@@ -1960,11 +2172,11 @@ class PagerComponent {
         this.pageSizeChange.emit(event);
         if (!event.isDefaultPrevented()) {
             if (event.newPageSize === 'all') {
-                this._isAllSelected = true;
+                this._isAllSelected.set(true);
                 this.pageChange.emit({ skip: 0, take: this.total });
             }
             else {
-                this._isAllSelected = false;
+                this._isAllSelected.set(false);
                 this.pageChange.emit({ skip: 0, take: event.newPageSize });
             }
         }
@@ -1986,7 +2198,7 @@ class PagerComponent {
             return;
         }
         if (!isDocumentAvailable() || !this.element?.nativeElement) {
-            this.initialized = true;
+            this._initialized.set(true);
             return;
         }
         let pagerWidth = this.element.nativeElement.offsetWidth;
@@ -2007,7 +2219,9 @@ class PagerComponent {
                 const numericButtonsWrapperElement = this.element.nativeElement.querySelector('.k-pager-numbers-wrap');
                 const pagerInfoElement = this.pagerInfoElement();
                 const pagerPageSizes = this.sizesDropDownElement();
-                let elementsWidths = numericButtonsWrapperElement?.offsetWidth + (pagerPageSizes?.offsetWidth || 0) + (pagerInfoElement?.offsetWidth > 0 ? Math.min(this.pagerDimensions.infoTextWidth) : 0);
+                let elementsWidths = numericButtonsWrapperElement?.offsetWidth +
+                    (pagerPageSizes?.offsetWidth || 0) +
+                    (pagerInfoElement?.offsetWidth > 0 ? Math.min(this.pagerDimensions.infoTextWidth) : 0);
                 if (this.isElementVisible(pagerInfoElement)) {
                     elementsWidths += this.pagerDimensions.gapSizesInfo;
                 }
@@ -2020,7 +2234,7 @@ class PagerComponent {
                 }
                 this.showElements(pagerWidth, elementsWidths);
                 if (!this.initialized) {
-                    this.ngZone.onStable.pipe(take(1)).subscribe(() => this.initialized = true);
+                    this._initialized.set(true);
                 }
             });
         });
@@ -2034,30 +2248,32 @@ class PagerComponent {
         name: 'sizeDropDown',
         isEnabled: () => this.showPageSizes,
         isVisible: () => this.isElementVisible(this.sizesDropDownElement()),
-        width: () => this.pagerDimensions.pageSizesWidth + this.pagerDimensions.gapNumbersSizes - this.pagerDimensions.sizesTextWidth,
+        width: () => this.pagerDimensions.pageSizesWidth +
+            this.pagerDimensions.gapNumbersSizes -
+            this.pagerDimensions.sizesTextWidth,
         show: () => {
-            this.ngZone.run(() => this.showItemsText = false);
+            this.ngZone.run(() => (this.showItemsText = false));
             this.showElement(this.sizesDropDownElement());
         },
         hide: () => {
             this.hideElement(this.sizesDropDownElement());
-        }
+        },
     };
     responsiveDropDownTextElement = {
         name: 'itemsDropDownText',
         isEnabled: () => this.showPageSizes,
         isVisible: () => this.isElementVisible(this.sizesDropDownElement()) && this.showItemsText,
         width: () => this.pagerDimensions.sizesTextWidth + this.pagerDimensions.gapPageText,
-        show: () => this.ngZone.run(() => this.showItemsText = true),
-        hide: () => this.ngZone.run(() => this.showItemsText = false)
+        show: () => this.ngZone.run(() => (this.showItemsText = true)),
+        hide: () => this.ngZone.run(() => (this.showItemsText = false)),
     };
     responsivePageTextElement = {
         name: 'pageText',
         isEnabled: () => this.isElementVisible(this.pagerInputElement()),
         isVisible: () => this.showPageText,
         width: () => this.pagerDimensions.pageTextWidth + this.pagerDimensions.gapPageText,
-        show: () => this.ngZone.run(() => this.showPageText = true),
-        hide: () => this.ngZone.run(() => this.showPageText = false)
+        show: () => this.ngZone.run(() => (this.showPageText = true)),
+        hide: () => this.ngZone.run(() => (this.showPageText = false)),
     };
     responsiveInfoTextElement = {
         name: 'infoText',
@@ -2073,7 +2289,7 @@ class PagerComponent {
             this.ngZone.run(() => {
                 this.hideElement(this.pagerInfoElement());
             });
-        }
+        },
     };
     responsiveNumericButtonsElement = {
         name: 'numericButtons',
@@ -2084,7 +2300,6 @@ class PagerComponent {
             this.showElement(this.numericButtonsElement());
             this.ngZone.run(() => {
                 this.showInput = false;
-                this.cdr.markForCheck();
             });
         },
         hide: () => {
@@ -2092,9 +2307,8 @@ class PagerComponent {
             this.ngZone.run(() => {
                 this.showInput = true;
                 this.showPageText = true;
-                this.cdr.markForCheck();
             });
-        }
+        },
     };
     /**
      * Contains all elements that are subject to responsive toggling.
@@ -2107,7 +2321,7 @@ class PagerComponent {
         this.responsiveDropDownTextElement,
         this.responsivePageTextElement,
         this.responsiveInfoTextElement,
-        this.responsiveNumericButtonsElement
+        this.responsiveNumericButtonsElement,
     ];
     get ariaLabel() {
         const localizationMsg = this.localization.get('ariaLabel') || '';
@@ -2192,9 +2406,9 @@ class PagerComponent {
     innerNavigationChange(value) {
         this.isInnerNavigationEnabled = value;
     }
-    handleClasses(value, input) {
+    handleClasses(value, input, oldValue) {
         const elem = this.element.nativeElement;
-        const classes = getStylingClasses('pager', input, this[input], value);
+        const classes = getStylingClasses('pager', input, oldValue !== undefined ? oldValue : this[input], value);
         if (classes.toRemove) {
             this.renderer.removeClass(elem, classes.toRemove);
         }
@@ -2212,7 +2426,7 @@ class PagerComponent {
             }
             const elementWidth = element.width();
             // If not responsive, show all elements regardless of available width. If responsive, check if the current element fits
-            if (this.responsive && (currentWidth + elementWidth) > availableWidth) {
+            if (this.responsive && currentWidth + elementWidth > availableWidth) {
                 index++;
                 break;
             }
@@ -2279,11 +2493,13 @@ class PagerComponent {
         measureContainer.getBoundingClientRect();
         this.pagerDimensions.infoTextWidth = infoSpan?.offsetWidth;
         if (this.pagerDimensions.inputWidth && this.pagerDimensions.pageTextWidth) {
-            this.pagerDimensions.inputWidth = this.pagerDimensions.inputWidth - this.pagerDimensions.pageTextWidth + pageSpan.offsetWidth;
+            this.pagerDimensions.inputWidth =
+                this.pagerDimensions.inputWidth - this.pagerDimensions.pageTextWidth + pageSpan.offsetWidth;
         }
         this.pagerDimensions.pageTextWidth = pageSpan?.offsetWidth;
         if (this.pagerDimensions.pageSizesWidth && this.pagerDimensions.sizesTextWidth) {
-            this.pagerDimensions.pageSizesWidth = this.pagerDimensions.pageSizesWidth - this.pagerDimensions.sizesTextWidth + sizesSpan.offsetWidth;
+            this.pagerDimensions.pageSizesWidth =
+                this.pagerDimensions.pageSizesWidth - this.pagerDimensions.sizesTextWidth + sizesSpan.offsetWidth;
         }
         this.pagerDimensions.sizesTextWidth = sizesSpan?.offsetWidth;
         this.renderer.removeChild(this.element.nativeElement, measureContainer);
@@ -2310,7 +2526,10 @@ class PagerComponent {
         }
         const pagerWidth = this.element.nativeElement?.offsetWidth;
         const numericButtonsWrapperElement = this.element.nativeElement.querySelector('.k-pager-numbers-wrap');
-        const elementsWidths = numericButtonsWrapperElement?.offsetWidth + this.pagerDimensions.pageSizesWidth + this.pagerDimensions.infoTextWidth + this.pagerDimensions.gapSizesInfo;
+        const elementsWidths = numericButtonsWrapperElement?.offsetWidth +
+            this.pagerDimensions.pageSizesWidth +
+            this.pagerDimensions.infoTextWidth +
+            this.pagerDimensions.gapSizesInfo;
         const hasAvailableWidth = pagerWidth > elementsWidths - this.pagerDimensions.inputWidth + this.pagerDimensions.numericButtonsWidth;
         this.showInput = !hasAvailableWidth;
     }
@@ -2322,8 +2541,12 @@ class PagerComponent {
     }
     setPagerDimensions() {
         this.measureAllTextWidths();
-        !this.numericButtons && (this.pagerDimensions.numericButtonsWidth = this.element.nativeElement.querySelector('.k-pager-numbers')?.offsetWidth ?? 0);
-        !this.pagerInput && (this.pagerDimensions.inputWidth = this.element.nativeElement.querySelector('kendo-pager-input')?.offsetWidth ?? 0);
+        !this.numericButtons &&
+            (this.pagerDimensions.numericButtonsWidth =
+                this.element.nativeElement.querySelector('.k-pager-numbers')?.offsetWidth ?? 0);
+        !this.pagerInput &&
+            (this.pagerDimensions.inputWidth =
+                this.element.nativeElement.querySelector('kendo-pager-input')?.offsetWidth ?? 0);
         !this.pageSizes && (this.pagerDimensions.pageSizesWidth = this.sizesDropDownElement()?.offsetWidth ?? 0);
         const padding = calculatePadding(this.element.nativeElement);
         this.pagerDimensions.padding = padding.padding;
@@ -2332,7 +2555,7 @@ class PagerComponent {
         const innerStyledElement = this.pagerInputElement();
         !this.pagerDimensions.gapPageText && (this.pagerDimensions.gapPageText = calculateGap(innerStyledElement));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PagerComponent, deps: [{ token: PagerContextService, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: PagerNavigationService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PagerComponent, deps: [{ token: PagerContextService, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: PagerNavigationService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", 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: [
             LocalizationService,
             PagerContextService,
@@ -2342,7 +2565,7 @@ class PagerComponent {
                 useValue: 'kendo.pager'
             },
             provideComponentName('pager')
-        ], 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: `
+        ], 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"], 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]]"
@@ -2382,51 +2605,41 @@ class PagerComponent {
           >
         </ng-container>
         @if (template.first?.templateRef) {
-          <ng-container
-            [ngTemplateOutlet]="template.first?.templateRef"
-            [ngTemplateOutletContext]="templateContext">
-          </ng-container>
+        <ng-container [ngTemplateOutlet]="template.first?.templateRef" [ngTemplateOutletContext]="templateContext">
+        </ng-container>
         } @else {
-          <div class="k-pager-numbers-wrap" [ngStyle]="{opacity: initialized ? null : '0'}">
+        <div class="k-pager-numbers-wrap" [ngStyle]="{ opacity: initialized ? null : '0' }">
             @if (previousNext) {
-              <kendo-pager-prev-buttons [size]="size"></kendo-pager-prev-buttons>
-            }
-            @if (type === 'numeric' && buttonCount > 0) {
-              <kendo-pager-numeric-buttons
-                [size]="size"
-                [buttonCount]="buttonCount">
-              </kendo-pager-numeric-buttons>
+            <kendo-pager-prev-buttons [size]="size"></kendo-pager-prev-buttons>
+            } @if (type === 'numeric' && buttonCount > 0) {
+            <kendo-pager-numeric-buttons [size]="size" [buttonCount]="buttonCount"> </kendo-pager-numeric-buttons>
+            } @if (showInput) {
+            <kendo-pager-input [size]="size"></kendo-pager-input>
+            } @if (previousNext) {
+            <kendo-pager-next-buttons [size]="size"></kendo-pager-next-buttons>
             }
-            @if (showInput) {
-              <kendo-pager-input [size]="size"></kendo-pager-input>
-            }
-            @if (previousNext) {
-              <kendo-pager-next-buttons [size]="size"></kendo-pager-next-buttons>
-            }
-          </div>
-          @if (_pageSizeValues.length) {
-            <kendo-pager-page-sizes
-              [ngStyle]="{opacity: initialized ? null : '0'}"
-              [size]="size"
-              [pageSizes]="_pageSizeValues"
-              [adaptiveMode]="adaptiveMode">
-            </kendo-pager-page-sizes>
-          }
-          @if (info) {
-            <kendo-pager-info [ngStyle]="{opacity: initialized ? null : '0'}">
-            </kendo-pager-info>
-          }
-        }
-        @if (responsive) {
-          <kendo-resize-sensor (resize)="resizeHandler()"></kendo-resize-sensor>
-        }
-        `, 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"] }] });
+        </div>
+        @if (_pageSizeValues().length) {
+        <kendo-pager-page-sizes
+            [ngStyle]="{ opacity: initialized ? null : '0' }"
+            [size]="size"
+            [pageSizes]="_pageSizeValues()"
+            [adaptiveMode]="adaptiveMode"
+        >
+        </kendo-pager-page-sizes>
+        } @if (info) {
+        <kendo-pager-info [ngStyle]="{ opacity: initialized ? null : '0' }"> </kendo-pager-info>
+        } } @if (responsive) {
+        <kendo-resize-sensor (resize)="resizeHandler()"></kendo-resize-sensor>
+        }
+    `, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-datapager, kendo-pager',
                     exportAs: 'kendoDataPager, kendoPager',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         LocalizationService,
                         PagerContextService,
@@ -2477,53 +2690,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
           >
         </ng-container>
         @if (template.first?.templateRef) {
-          <ng-container
-            [ngTemplateOutlet]="template.first?.templateRef"
-            [ngTemplateOutletContext]="templateContext">
-          </ng-container>
+        <ng-container [ngTemplateOutlet]="template.first?.templateRef" [ngTemplateOutletContext]="templateContext">
+        </ng-container>
         } @else {
-          <div class="k-pager-numbers-wrap" [ngStyle]="{opacity: initialized ? null : '0'}">
-            @if (previousNext) {
-              <kendo-pager-prev-buttons [size]="size"></kendo-pager-prev-buttons>
-            }
-            @if (type === 'numeric' && buttonCount > 0) {
-              <kendo-pager-numeric-buttons
-                [size]="size"
-                [buttonCount]="buttonCount">
-              </kendo-pager-numeric-buttons>
-            }
-            @if (showInput) {
-              <kendo-pager-input [size]="size"></kendo-pager-input>
-            }
+        <div class="k-pager-numbers-wrap" [ngStyle]="{ opacity: initialized ? null : '0' }">
             @if (previousNext) {
-              <kendo-pager-next-buttons [size]="size"></kendo-pager-next-buttons>
+            <kendo-pager-prev-buttons [size]="size"></kendo-pager-prev-buttons>
+            } @if (type === 'numeric' && buttonCount > 0) {
+            <kendo-pager-numeric-buttons [size]="size" [buttonCount]="buttonCount"> </kendo-pager-numeric-buttons>
+            } @if (showInput) {
+            <kendo-pager-input [size]="size"></kendo-pager-input>
+            } @if (previousNext) {
+            <kendo-pager-next-buttons [size]="size"></kendo-pager-next-buttons>
             }
-          </div>
-          @if (_pageSizeValues.length) {
-            <kendo-pager-page-sizes
-              [ngStyle]="{opacity: initialized ? null : '0'}"
-              [size]="size"
-              [pageSizes]="_pageSizeValues"
-              [adaptiveMode]="adaptiveMode">
-            </kendo-pager-page-sizes>
-          }
-          @if (info) {
-            <kendo-pager-info [ngStyle]="{opacity: initialized ? null : '0'}">
-            </kendo-pager-info>
-          }
-        }
-        @if (responsive) {
-          <kendo-resize-sensor (resize)="resizeHandler()"></kendo-resize-sensor>
+        </div>
+        @if (_pageSizeValues().length) {
+        <kendo-pager-page-sizes
+            [ngStyle]="{ opacity: initialized ? null : '0' }"
+            [size]="size"
+            [pageSizes]="_pageSizeValues()"
+            [adaptiveMode]="adaptiveMode"
+        >
+        </kendo-pager-page-sizes>
+        } @if (info) {
+        <kendo-pager-info [ngStyle]="{ opacity: initialized ? null : '0' }"> </kendo-pager-info>
+        } } @if (responsive) {
+        <kendo-resize-sensor (resize)="resizeHandler()"></kendo-resize-sensor>
         }
-        `,
+    `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, NgTemplateOutlet, PagerPrevButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerNextButtonsComponent, PagerPageSizesComponent, PagerInfoComponent, ResizeSensorComponent, NgStyle]
+                    imports: [
+                        LocalizedMessagesDirective,
+                        NgTemplateOutlet,
+                        PagerPrevButtonsComponent,
+                        PagerNumericButtonsComponent,
+                        PagerInputComponent,
+                        PagerNextButtonsComponent,
+                        PagerPageSizesComponent,
+                        PagerInfoComponent,
+                        ResizeSensorComponent,
+                        NgStyle,
+                    ],
                 }]
         }], ctorParameters: () => [{ type: PagerContextService, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf
-                }] }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: PagerNavigationService, decorators: [{
+                }] }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: PagerNavigationService, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf