@progress/kendo-angular-pager 21.1.1-develop.2 → 21.2.0-develop.1

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

@@ -11,9 +11,9 @@ import { caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRigh
 import { isVisible, isDocumentAvailable, isFocusable, Keys, EventsOutsideAngularDirective, anyChanged, isChanged, replaceMessagePlaceholder, normalizeNumpadKeys, ResizeSensorComponent, isPresent, ResizeBatchService } from '@progress/kendo-angular-common';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
-import { NgIf, NgFor, NgTemplateOutlet, NgStyle } from '@angular/common';
 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';
@@ -839,20 +839,23 @@ class PagerPageSizesComponent extends PagerElementComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PagerPageSizesComponent, isStandalone: true, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: { showItemsText: "showItemsText", pageSizes: "pageSizes", size: "size", adaptiveMode: "adaptiveMode" }, host: { properties: { "class.k-pager-sizes": "this.classes" } }, viewQueries: [{ propertyName: "dropDownList", first: true, predicate: ["dropdownlist"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PagerPageSizesComponent, isStandalone: true, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: { showItemsText: "showItemsText", pageSizes: "pageSizes", size: "size", adaptiveMode: "adaptiveMode" }, host: { properties: { "class.k-pager-sizes": "this.classes" } }, viewQueries: [{ propertyName: "dropDownList", first: true, predicate: ["dropdownlist"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
         <kendo-dropdownlist kendoPagerFocusable
-            #dropdownlist
-            [size]="size"
-            [data]="_pageSizes"
-            textField="text"
-            valueField="value"
-            [valuePrimitive]="true"
-            [value]="pageSize"
-            (valueChange)="pageSizeChange($event, dropdownlist)"
-            [adaptiveMode]="adaptiveMode"
-            [attr.aria-label]="textFor('itemsPerPage')"></kendo-dropdownlist>
-        <ng-container *ngIf="showItemsText">{{ textFor('itemsPerPage') }}</ng-container>
-    `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+          #dropdownlist
+          [size]="size"
+          [data]="_pageSizes"
+          textField="text"
+          valueField="value"
+          [valuePrimitive]="true"
+          [value]="pageSize"
+          (valueChange)="pageSizeChange($event, dropdownlist)"
+          [adaptiveMode]="adaptiveMode"
+          [attr.aria-label]="textFor('itemsPerPage')">
+        </kendo-dropdownlist>
+        @if (showItemsText) {
+          {{ textFor('itemsPerPage') }}
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
             type: Component,
@@ -861,20 +864,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-datapager-page-sizes, kendo-pager-page-sizes',
                     template: `
         <kendo-dropdownlist kendoPagerFocusable
-            #dropdownlist
-            [size]="size"
-            [data]="_pageSizes"
-            textField="text"
-            valueField="value"
-            [valuePrimitive]="true"
-            [value]="pageSize"
-            (valueChange)="pageSizeChange($event, dropdownlist)"
-            [adaptiveMode]="adaptiveMode"
-            [attr.aria-label]="textFor('itemsPerPage')"></kendo-dropdownlist>
-        <ng-container *ngIf="showItemsText">{{ textFor('itemsPerPage') }}</ng-container>
-    `,
+          #dropdownlist
+          [size]="size"
+          [data]="_pageSizes"
+          textField="text"
+          valueField="value"
+          [valuePrimitive]="true"
+          [value]="pageSize"
+          (valueChange)="pageSizeChange($event, dropdownlist)"
+          [adaptiveMode]="adaptiveMode"
+          [attr.aria-label]="textFor('itemsPerPage')">
+        </kendo-dropdownlist>
+        @if (showItemsText) {
+          {{ textFor('itemsPerPage') }}
+        }
+        `,
                     standalone: true,
-                    imports: [DropDownListComponent, PagerFocusableDirective, NgIf]
+                    imports: [DropDownListComponent, PagerFocusableDirective]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dropDownList: [{
                 type: ViewChild,
@@ -1061,47 +1067,53 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PagerNumericButtonsComponent, isStandalone: true, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: { buttonCount: "buttonCount", size: "size" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }, { propertyName: "numbersElement", first: true, predicate: ["numbers"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PagerNumericButtonsComponent, isStandalone: true, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: { buttonCount: "buttonCount", size: "size" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }, { propertyName: "numbersElement", first: true, predicate: ["numbers"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
         <div class="k-pager-numbers" #numbers>
-            <button *ngIf="start > 1"
-                type="button"
-                kendoPagerFocusable
-                kendoButton
-                [size]="size"
-                fillMode="flat"
-                themeColor="primary"
-                rounded="none"
-                [attr.aria-label]="pageLabel(start - 1)"
-                [attr.title]="pageLabel(start - 1)"
-                (click)="changePage(start - 2)">...</button>
-            <button *ngFor="let num of buttons"
-                type="button"
-                kendoPagerFocusable
-                kendoButton
-                [size]="size"
-                fillMode="flat"
-                themeColor="primary"
-                rounded="none"
-                [attr.aria-label]="pageLabel(num)"
-                [attr.title]="pageLabel(num)"
-                [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                [selected]="currentPage === num"
-                (click)="currentPage === num ? false : changePage(num - 1)">
-                {{num}}
+          @if (start > 1) {
+            <button
+              type="button"
+              kendoPagerFocusable
+              kendoButton
+              [size]="size"
+              fillMode="flat"
+              themeColor="primary"
+              rounded="none"
+              [attr.aria-label]="pageLabel(start - 1)"
+              [attr.title]="pageLabel(start - 1)"
+            (click)="changePage(start - 2)">...</button>
+          }
+          @for (num of buttons; track num) {
+            <button
+              type="button"
+              kendoPagerFocusable
+              kendoButton
+              [size]="size"
+              fillMode="flat"
+              themeColor="primary"
+              rounded="none"
+              [attr.aria-label]="pageLabel(num)"
+              [attr.title]="pageLabel(num)"
+              [attr.aria-current]="currentPage === num ? 'page' : undefined"
+              [selected]="currentPage === num"
+              (click)="currentPage === num ? false : changePage(num - 1)">
+              {{num}}
             </button>
-            <button *ngIf="end < totalPages"
-                type="button"
-                kendoPagerFocusable
-                kendoButton
-                [size]="size"
-                fillMode="flat"
-                themeColor="primary"
-                rounded="none"
-                [attr.aria-label]="pageLabel(end + 1)"
-                [attr.title]="pageLabel(end + 1)"
-                (click)="changePage(end)">...</button>
+          }
+          @if (end < totalPages) {
+            <button
+              type="button"
+              kendoPagerFocusable
+              kendoButton
+              [size]="size"
+              fillMode="flat"
+              themeColor="primary"
+              rounded="none"
+              [attr.aria-label]="pageLabel(end + 1)"
+              [attr.title]="pageLabel(end + 1)"
+            (click)="changePage(end)">...</button>
+          }
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        `, isInline: true, dependencies: [{ kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
             type: Component,
@@ -1110,47 +1122,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons',
                     template: `
         <div class="k-pager-numbers" #numbers>
-            <button *ngIf="start > 1"
-                type="button"
-                kendoPagerFocusable
-                kendoButton
-                [size]="size"
-                fillMode="flat"
-                themeColor="primary"
-                rounded="none"
-                [attr.aria-label]="pageLabel(start - 1)"
-                [attr.title]="pageLabel(start - 1)"
-                (click)="changePage(start - 2)">...</button>
-            <button *ngFor="let num of buttons"
-                type="button"
-                kendoPagerFocusable
-                kendoButton
-                [size]="size"
-                fillMode="flat"
-                themeColor="primary"
-                rounded="none"
-                [attr.aria-label]="pageLabel(num)"
-                [attr.title]="pageLabel(num)"
-                [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                [selected]="currentPage === num"
-                (click)="currentPage === num ? false : changePage(num - 1)">
-                {{num}}
+          @if (start > 1) {
+            <button
+              type="button"
+              kendoPagerFocusable
+              kendoButton
+              [size]="size"
+              fillMode="flat"
+              themeColor="primary"
+              rounded="none"
+              [attr.aria-label]="pageLabel(start - 1)"
+              [attr.title]="pageLabel(start - 1)"
+            (click)="changePage(start - 2)">...</button>
+          }
+          @for (num of buttons; track num) {
+            <button
+              type="button"
+              kendoPagerFocusable
+              kendoButton
+              [size]="size"
+              fillMode="flat"
+              themeColor="primary"
+              rounded="none"
+              [attr.aria-label]="pageLabel(num)"
+              [attr.title]="pageLabel(num)"
+              [attr.aria-current]="currentPage === num ? 'page' : undefined"
+              [selected]="currentPage === num"
+              (click)="currentPage === num ? false : changePage(num - 1)">
+              {{num}}
             </button>
-            <button *ngIf="end < totalPages"
-                type="button"
-                kendoPagerFocusable
-                kendoButton
-                [size]="size"
-                fillMode="flat"
-                themeColor="primary"
-                rounded="none"
-                [attr.aria-label]="pageLabel(end + 1)"
-                [attr.title]="pageLabel(end + 1)"
-                (click)="changePage(end)">...</button>
+          }
+          @if (end < totalPages) {
+            <button
+              type="button"
+              kendoPagerFocusable
+              kendoButton
+              [size]="size"
+              fillMode="flat"
+              themeColor="primary"
+              rounded="none"
+              [attr.aria-label]="pageLabel(end + 1)"
+              [attr.title]="pageLabel(end + 1)"
+            (click)="changePage(end)">...</button>
+          }
         </div>
-    `,
+        `,
                     standalone: true,
-                    imports: [PagerFocusableDirective, NgIf, NgFor, ButtonComponent]
+                    imports: [PagerFocusableDirective, ButtonComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: i0.Renderer2 }], propDecorators: { selectElement: [{
                 type: ViewChild,
@@ -1378,31 +1396,33 @@ class PagerInputComponent extends PagerElementComponent {
         return this.totalPages !== 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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">
-        <ng-container *ngIf="showPageText">{{textFor('page')}}</ng-container>
-        <kendo-numerictextbox kendoPagerFocusable
-            [spinners]="false"
-            [decimals]="0"
-            format="n0"
-            [size]="size"
-            [disabled]="!hasPages"
-            [value]="current"
-            [min]="hasPages ? 1 : 0"
-            [max]="totalPages"
-            [autoCorrect]="true"
+       @if (showPageText) {
+         {{textFor('page')}}
+       }
+       <kendo-numerictextbox kendoPagerFocusable
+         [spinners]="false"
+         [decimals]="0"
+         format="n0"
+         [size]="size"
+         [disabled]="!hasPages"
+         [value]="current"
+         [min]="hasPages ? 1 : 0"
+         [max]="totalPages"
+         [autoCorrect]="true"
             [inputAttributes]="{
                 'aria-label': textFor('inputLabel')
             }"
-            [title]="textFor('pageNumberInputTitle')"
+         [title]="textFor('pageNumberInputTitle')"
             [kendoEventsOutsideAngular]="{
                 keydown: handleKeyDown,
                 focusout: handleBlur
             }">
-        </kendo-numerictextbox>
-        {{textFor('of')}} {{totalPages}}
+       </kendo-numerictextbox>
+       {{textFor('of')}} {{totalPages}}
      </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PagerInputComponent, decorators: [{
             type: Component,
@@ -1410,31 +1430,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-datapager-input, kendo-pager-input',
                     template: `
      <span class="k-pager-input">
-        <ng-container *ngIf="showPageText">{{textFor('page')}}</ng-container>
-        <kendo-numerictextbox kendoPagerFocusable
-            [spinners]="false"
-            [decimals]="0"
-            format="n0"
-            [size]="size"
-            [disabled]="!hasPages"
-            [value]="current"
-            [min]="hasPages ? 1 : 0"
-            [max]="totalPages"
-            [autoCorrect]="true"
+       @if (showPageText) {
+         {{textFor('page')}}
+       }
+       <kendo-numerictextbox kendoPagerFocusable
+         [spinners]="false"
+         [decimals]="0"
+         format="n0"
+         [size]="size"
+         [disabled]="!hasPages"
+         [value]="current"
+         [min]="hasPages ? 1 : 0"
+         [max]="totalPages"
+         [autoCorrect]="true"
             [inputAttributes]="{
                 'aria-label': textFor('inputLabel')
             }"
-            [title]="textFor('pageNumberInputTitle')"
+         [title]="textFor('pageNumberInputTitle')"
             [kendoEventsOutsideAngular]="{
                 keydown: handleKeyDown,
                 focusout: handleBlur
             }">
-        </kendo-numerictextbox>
-        {{textFor('of')}} {{totalPages}}
+       </kendo-numerictextbox>
+       {{textFor('of')}} {{totalPages}}
      </span>
-    `,
+     `,
                     standalone: true,
-                    imports: [NgIf, NumericTextBoxComponent, PagerFocusableDirective, EventsOutsideAngularDirective]
+                    imports: [NumericTextBoxComponent, PagerFocusableDirective, EventsOutsideAngularDirective]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { numericInput: [{
                 type: ViewChild,
@@ -1522,8 +1544,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1763729141,
-    version: '21.1.1-develop.2',
+    publishDate: 1763998244,
+    version: '21.2.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2333,7 +2355,7 @@ class PagerComponent {
         !this.pagerDimensions.gapPageText && (this.pagerDimensions.gapPageText = calculateGap(innerStyledElement));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PagerComponent, isStandalone: true, selector: "kendo-datapager, kendo-pager", inputs: { externalTemplate: "externalTemplate", total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext", navigable: "navigable", size: "size", responsive: "responsive", adaptiveMode: "adaptiveMode" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", pagerInputVisibilityChange: "pagerInputVisibilityChange", pageTextVisibilityChange: "pageTextVisibilityChange", itemsTextVisibilityChange: "itemsTextVisibilityChange" }, host: { listeners: { "focusin": "focusHandler($event)" }, properties: { "class.k-pager": "this.pagerClass", "class.k-pager-responsive": "this.responsiveClass", "attr.role": "this.widgetRole", "attr.aria-roledescription": "this.roleDescription", "attr.aria-keyshortcuts": "this.keyShortcuts", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.dir" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PagerComponent, isStandalone: true, selector: "kendo-datapager, kendo-pager", inputs: { externalTemplate: "externalTemplate", total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext", navigable: "navigable", size: "size", responsive: "responsive", adaptiveMode: "adaptiveMode" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", pagerInputVisibilityChange: "pagerInputVisibilityChange", pageTextVisibilityChange: "pageTextVisibilityChange", itemsTextVisibilityChange: "itemsTextVisibilityChange" }, host: { listeners: { "focusin": "focusHandler($event)" }, properties: { "class.k-pager": "this.pagerClass", "class.k-pager-responsive": "this.responsiveClass", "attr.role": "this.widgetRole", "attr.aria-roledescription": "this.roleDescription", "attr.aria-keyshortcuts": "this.keyShortcuts", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.dir" } }, providers: [
             LocalizationService,
             PagerContextService,
             PagerNavigationService,
@@ -2343,70 +2365,83 @@ class PagerComponent {
             }
         ], 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: `
         <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"
-
-            i18n-previousPage="kendo.pager.previousPage|The label for the previous page button in the Pager"
-            previousPage="Go to the previous page"
-
-            i18n-nextPage="kendo.pager.nextPage|The label for the next page button in the Pager"
-            nextPage="Go to the next page"
-
-            i18n-lastPage="kendo.pager.lastPage|The label for the last page button in the Pager"
-            lastPage="Go to the last page"
-
-            i18n-page="kendo.pager.page|The label before the current page number in the Pager"
-            page="Page"
-
-            i18n-of="kendo.pager.of|The label before the total pages number in the Pager"
-            of="of"
-
-            i18n-pageNumberInputTitle="kendo.pager.pageNumberInputTitle|The label for the pager input in the Pager"
-            pageNumberInputTitle="Page Number"
-
-            i18n-items="kendo.pager.items|The label after the total pages number in the Pager"
-            items="items"
-
-            i18n-itemsPerPage="kendo.pager.itemsPerPage|The label for the page size chooser in the Pager"
-            itemsPerPage="items per page"
-
-            i18n-selectPage="kendo.pager.selectPage|The text of the title and aria-label attributes applied to the page chooser in the Pager"
-            selectPage="Select page"
-
-            i18n-inputLabel="kendo.pager.inputLabel|The text of the aria-label attribute applied to the input element for entering the page number."
-            inputLabel="Type a page number"
-         >
+          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"
+        
+          i18n-previousPage="kendo.pager.previousPage|The label for the previous page button in the Pager"
+          previousPage="Go to the previous page"
+        
+          i18n-nextPage="kendo.pager.nextPage|The label for the next page button in the Pager"
+          nextPage="Go to the next page"
+        
+          i18n-lastPage="kendo.pager.lastPage|The label for the last page button in the Pager"
+          lastPage="Go to the last page"
+        
+          i18n-page="kendo.pager.page|The label before the current page number in the Pager"
+          page="Page"
+        
+          i18n-of="kendo.pager.of|The label before the total pages number in the Pager"
+          of="of"
+        
+          i18n-pageNumberInputTitle="kendo.pager.pageNumberInputTitle|The label for the pager input in the Pager"
+          pageNumberInputTitle="Page Number"
+        
+          i18n-items="kendo.pager.items|The label after the total pages number in the Pager"
+          items="items"
+        
+          i18n-itemsPerPage="kendo.pager.itemsPerPage|The label for the page size chooser in the Pager"
+          itemsPerPage="items per page"
+        
+          i18n-selectPage="kendo.pager.selectPage|The text of the title and aria-label attributes applied to the page chooser in the Pager"
+          selectPage="Select page"
+        
+          i18n-inputLabel="kendo.pager.inputLabel|The text of the aria-label attribute applied to the input element for entering the page number."
+          inputLabel="Type a page number"
+          >
         </ng-container>
-        <ng-container
-            *ngIf="template.first?.templateRef; else default"
+        @if (template.first?.templateRef) {
+          <ng-container
             [ngTemplateOutlet]="template.first?.templateRef"
             [ngTemplateOutletContext]="templateContext">
-        </ng-container>
-        <ng-template #default>
-            <div class="k-pager-numbers-wrap" [ngStyle]="{opacity: initialized ? null : '0'}">
-                <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-pager-numeric-buttons>
-                <kendo-pager-input [size]="size" *ngIf="showInput"></kendo-pager-input>
-                <kendo-pager-next-buttons [size]="size" *ngIf="previousNext"></kendo-pager-next-buttons>
-            </div>
-            <kendo-pager-page-sizes *ngIf="_pageSizeValues.length"
-                [ngStyle]="{opacity: initialized ? null : '0'}"
+          </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"
-                [pageSizes]="_pageSizeValues"
-                [adaptiveMode]="adaptiveMode">
+                [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>
-            <kendo-pager-info *ngIf="info" [ngStyle]="{opacity: initialized ? null : '0'}">
+          }
+          @if (info) {
+            <kendo-pager-info [ngStyle]="{opacity: initialized ? null : '0'}">
             </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: ["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"] }] });
+          }
+        }
+        @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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
@@ -2424,72 +2459,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     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"
-
-            i18n-previousPage="kendo.pager.previousPage|The label for the previous page button in the Pager"
-            previousPage="Go to the previous page"
-
-            i18n-nextPage="kendo.pager.nextPage|The label for the next page button in the Pager"
-            nextPage="Go to the next page"
-
-            i18n-lastPage="kendo.pager.lastPage|The label for the last page button in the Pager"
-            lastPage="Go to the last page"
-
-            i18n-page="kendo.pager.page|The label before the current page number in the Pager"
-            page="Page"
-
-            i18n-of="kendo.pager.of|The label before the total pages number in the Pager"
-            of="of"
-
-            i18n-pageNumberInputTitle="kendo.pager.pageNumberInputTitle|The label for the pager input in the Pager"
-            pageNumberInputTitle="Page Number"
-
-            i18n-items="kendo.pager.items|The label after the total pages number in the Pager"
-            items="items"
-
-            i18n-itemsPerPage="kendo.pager.itemsPerPage|The label for the page size chooser in the Pager"
-            itemsPerPage="items per page"
-
-            i18n-selectPage="kendo.pager.selectPage|The text of the title and aria-label attributes applied to the page chooser in the Pager"
-            selectPage="Select page"
-
-            i18n-inputLabel="kendo.pager.inputLabel|The text of the aria-label attribute applied to the input element for entering the page number."
-            inputLabel="Type a page number"
-         >
+          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"
+        
+          i18n-previousPage="kendo.pager.previousPage|The label for the previous page button in the Pager"
+          previousPage="Go to the previous page"
+        
+          i18n-nextPage="kendo.pager.nextPage|The label for the next page button in the Pager"
+          nextPage="Go to the next page"
+        
+          i18n-lastPage="kendo.pager.lastPage|The label for the last page button in the Pager"
+          lastPage="Go to the last page"
+        
+          i18n-page="kendo.pager.page|The label before the current page number in the Pager"
+          page="Page"
+        
+          i18n-of="kendo.pager.of|The label before the total pages number in the Pager"
+          of="of"
+        
+          i18n-pageNumberInputTitle="kendo.pager.pageNumberInputTitle|The label for the pager input in the Pager"
+          pageNumberInputTitle="Page Number"
+        
+          i18n-items="kendo.pager.items|The label after the total pages number in the Pager"
+          items="items"
+        
+          i18n-itemsPerPage="kendo.pager.itemsPerPage|The label for the page size chooser in the Pager"
+          itemsPerPage="items per page"
+        
+          i18n-selectPage="kendo.pager.selectPage|The text of the title and aria-label attributes applied to the page chooser in the Pager"
+          selectPage="Select page"
+        
+          i18n-inputLabel="kendo.pager.inputLabel|The text of the aria-label attribute applied to the input element for entering the page number."
+          inputLabel="Type a page number"
+          >
         </ng-container>
-        <ng-container
-            *ngIf="template.first?.templateRef; else default"
+        @if (template.first?.templateRef) {
+          <ng-container
             [ngTemplateOutlet]="template.first?.templateRef"
             [ngTemplateOutletContext]="templateContext">
-        </ng-container>
-        <ng-template #default>
-            <div class="k-pager-numbers-wrap" [ngStyle]="{opacity: initialized ? null : '0'}">
-                <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-pager-numeric-buttons>
-                <kendo-pager-input [size]="size" *ngIf="showInput"></kendo-pager-input>
-                <kendo-pager-next-buttons [size]="size" *ngIf="previousNext"></kendo-pager-next-buttons>
-            </div>
-            <kendo-pager-page-sizes *ngIf="_pageSizeValues.length"
-                [ngStyle]="{opacity: initialized ? null : '0'}"
+          </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"
-                [pageSizes]="_pageSizeValues"
-                [adaptiveMode]="adaptiveMode">
+                [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>
-            <kendo-pager-info *ngIf="info" [ngStyle]="{opacity: initialized ? null : '0'}">
+          }
+          @if (info) {
+            <kendo-pager-info [ngStyle]="{opacity: initialized ? null : '0'}">
             </kendo-pager-info>
-        </ng-template>
-        <kendo-resize-sensor *ngIf="responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
-  `,
+          }
+        }
+        @if (responsive) {
+          <kendo-resize-sensor (resize)="resizeHandler()"></kendo-resize-sensor>
+        }
+        `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, NgIf, 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