@progress/kendo-angular-treelist 5.0.9 → 11.0.0-develop.101

package/{esm2015/pager/pager-info.component.js → esm2020/pager/pager-info.component.mjs}

@@ -1,10 +1,12 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 // eslint-disable no-access-missing-member
-import { Component, ChangeDetectionStrategy, HostBinding } from '@angular/core';
+import { Component, ChangeDetectorRef, ChangeDetectionStrategy, HostBinding } from '@angular/core';
 import { PagerElementComponent } from './pager-element.component';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { PagerContextService } from "./pager-context.service";
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./pager-context.service";
@@ -54,9 +56,9 @@ export class PagerInfoComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerInfoComponent, selector: "kendo-treelist-pager-info", host: { properties: { "class.k-pager-info": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{textFor('pagerPage')}} {{currentPageText}} {{textFor('pagerOf')}} {{maxPage}} ({{allCount}} {{textFor('pagerItemsTotal')}})`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerInfoComponent, decorators: [{
+PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerInfoComponent, selector: "kendo-treelist-pager-info", host: { properties: { "class.k-pager-info": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{textFor('pagerPage')}} {{currentPageText}} {{textFor('pagerOf')}} {{maxPage}} ({{allCount}} {{textFor('pagerItemsTotal')}})`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInfoComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,

package/{esm2015/pager/pager-input.component.js → esm2020/pager/pager-input.component.mjs}

@@ -1,18 +1,19 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { NumericTextBoxComponent } from '@progress/kendo-angular-inputs';
 // eslint-disable no-access-missing-member
-import { Component, ViewChild } from '@angular/core';
+import { Component, ChangeDetectorRef, ViewChild, NgZone } from '@angular/core';
 import { PagerElementComponent } from './pager-element.component';
+import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { PagerContextService } from "./pager-context.service";
 import { Keys } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./pager-context.service";
 import * as i3 from "@progress/kendo-angular-inputs";
-import * as i4 from "@angular/common";
-import * as i5 from "@progress/kendo-angular-common";
+import * as i4 from "@progress/kendo-angular-common";
 /**
  * Displays an input element which allows the typing and rendering of page numbers.
  */
@@ -29,7 +30,7 @@ export class PagerInputComponent extends PagerElementComponent {
          * @memberOf PagerInputComponent
          */
         this.handleKeyDown = (event) => {
-            let incomingValue = this.numericInput.value || this.current;
+            const incomingValue = this.numericInput.value || this.current;
             if (event.keyCode === Keys.Enter) {
                 event.preventDefault();
                 if (incomingValue !== this.current) {
@@ -75,56 +76,56 @@ export class PagerInputComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerInputComponent, selector: "kendo-treelist-pager-input", viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
-     <span [ngClass]="{'k-pager-input': true, 'k-label': true}">
-        {{textFor('pagerPage')}}
-        <kendo-numerictextbox
-            [style.margin]="'0 1ex'"
-            [style.width]="'3em'"
-            [spinners]="false"
-            [decimals]="0"
-            format="n0"
-            [disabled]="!hasPages"
-            [value]="current"
-            [min]="hasPages ? 1 : 0"
-            [max]="totalPages"
-            [autoCorrect]="true"
-            [title]="textFor('pagerPageNumberInputTitle')"
-            [kendoEventsOutsideAngular]="{
-                keydown: handleKeyDown,
-                focusout: handleBlur
-            }">
-        </kendo-numerictextbox>
-            {{textFor('pagerOf')}} {{totalPages}}
-     </span>
-    `, isInline: true, components: [{ type: i3.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"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerInputComponent, decorators: [{
+PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerInputComponent, selector: "kendo-treelist-pager-input", viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+        <span class="k-pager-input k-label">
+            {{textFor('pagerPage')}}
+            <kendo-numerictextbox
+                [style.margin]="'0 1ex'"
+                [style.width]="'3em'"
+                [spinners]="false"
+                [decimals]="0"
+                format="n0"
+                [disabled]="!hasPages"
+                [value]="current"
+                [min]="hasPages ? 1 : 0"
+                [max]="totalPages"
+                [autoCorrect]="true"
+                [title]="textFor('pagerPageNumberInputTitle')"
+                [kendoEventsOutsideAngular]="{
+                    keydown: handleKeyDown,
+                    focusout: handleBlur
+                }">
+            </kendo-numerictextbox>
+                {{textFor('pagerOf')}} {{totalPages}}
+        </span>
+    `, isInline: true, components: [{ type: i3.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"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-treelist-pager-input',
                     template: `
-     <span [ngClass]="{'k-pager-input': true, 'k-label': true}">
-        {{textFor('pagerPage')}}
-        <kendo-numerictextbox
-            [style.margin]="'0 1ex'"
-            [style.width]="'3em'"
-            [spinners]="false"
-            [decimals]="0"
-            format="n0"
-            [disabled]="!hasPages"
-            [value]="current"
-            [min]="hasPages ? 1 : 0"
-            [max]="totalPages"
-            [autoCorrect]="true"
-            [title]="textFor('pagerPageNumberInputTitle')"
-            [kendoEventsOutsideAngular]="{
-                keydown: handleKeyDown,
-                focusout: handleBlur
-            }">
-        </kendo-numerictextbox>
-            {{textFor('pagerOf')}} {{totalPages}}
-     </span>
+        <span class="k-pager-input k-label">
+            {{textFor('pagerPage')}}
+            <kendo-numerictextbox
+                [style.margin]="'0 1ex'"
+                [style.width]="'3em'"
+                [spinners]="false"
+                [decimals]="0"
+                format="n0"
+                [disabled]="!hasPages"
+                [value]="current"
+                [min]="hasPages ? 1 : 0"
+                [max]="totalPages"
+                [autoCorrect]="true"
+                [title]="textFor('pagerPageNumberInputTitle')"
+                [kendoEventsOutsideAngular]="{
+                    keydown: handleKeyDown,
+                    focusout: handleBlur
+                }">
+            </kendo-numerictextbox>
+                {{textFor('pagerOf')}} {{totalPages}}
+        </span>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PagerContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { numericInput: [{

package/{esm2015/pager/pager-next-buttons.component.js → esm2020/pager/pager-next-buttons.component.mjs}

@@ -1,14 +1,16 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 // eslint-disable  no-access-missing-member
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { PagerContextService } from "./pager-context.service";
 import { PagerElementComponent } from './pager-element.component';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./pager-context.service";
-import * as i3 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-buttons";
 /**
  * Displays buttons for navigating to the next and to the last page ([see example]({% slug paging_treelist %}#toc-pager-templates)).
  */
@@ -33,83 +35,67 @@ export class PagerNextButtonsComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerNextButtonsComponent, selector: "kendo-treelist-pager-next-buttons", usesInheritance: true, ngImport: i0, template: `
-        <a  href="#"
-            tabindex="-1"
+PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerNextButtonsComponent, selector: "kendo-treelist-pager-next-buttons", usesInheritance: true, ngImport: i0, template: `
+        <button
+            kendoButton
+            type="button"
+            icon="caret-alt-right"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav"
+            [tabIndex]="-1"
+            [disabled]="disabled"
             [title]="textFor('pagerNextPage')"
-            (click)="currentPage !== totalPages ? changePage(currentPage) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                '': true
-            }">
-            <span [attr.aria-label]="textFor('pagerNextPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-right': true
-                }">
-            </span>
-        </a>
-        <a  href="#"
-            tabindex="-1"
+            [attr.aria-label]="textFor('pagerNextPage')"
+            (click)="currentPage !== totalPages ? changePage(currentPage) : false">
+        </button>
+        <button
+            kendoButton
+            type="button"
+            [tabIndex]="-1"
+            icon="caret-alt-to-right"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav k-pager-last"
+            [disabled]="disabled"
             [title]="textFor('pagerLastPage')"
-            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                'k-pager-last': true
-            }">
-            <span [attr.aria-label]="textFor('pagerLastPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-to-right': true
-                }">
-            </span>
-        </a>
-    `, isInline: true, directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
+            [attr.aria-label]="textFor('pagerLastPage')"
+            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
+        </button>
+    `, isInline: true, components: [{ type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-treelist-pager-next-buttons',
                     template: `
-        <a  href="#"
-            tabindex="-1"
+        <button
+            kendoButton
+            type="button"
+            icon="caret-alt-right"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav"
+            [tabIndex]="-1"
+            [disabled]="disabled"
             [title]="textFor('pagerNextPage')"
-            (click)="currentPage !== totalPages ? changePage(currentPage) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                '': true
-            }">
-            <span [attr.aria-label]="textFor('pagerNextPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-right': true
-                }">
-            </span>
-        </a>
-        <a  href="#"
-            tabindex="-1"
+            [attr.aria-label]="textFor('pagerNextPage')"
+            (click)="currentPage !== totalPages ? changePage(currentPage) : false">
+        </button>
+        <button
+            kendoButton
+            type="button"
+            [tabIndex]="-1"
+            icon="caret-alt-to-right"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav k-pager-last"
+            [disabled]="disabled"
             [title]="textFor('pagerLastPage')"
-            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                'k-pager-last': true
-            }">
-            <span [attr.aria-label]="textFor('pagerLastPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-to-right': true
-                }">
-            </span>
-        </a>
+            [attr.aria-label]="textFor('pagerLastPage')"
+            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
+        </button>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PagerContextService }, { type: i0.ChangeDetectorRef }]; } });

package/{esm2015/pager/pager-numeric-buttons.component.js → esm2020/pager/pager-numeric-buttons.component.mjs}

@@ -1,13 +1,16 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { PagerContextService } from './pager-context.service';
 import { PagerElementComponent } from './pager-element.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./pager-context.service";
-import * as i3 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-buttons";
+import * as i4 from "@angular/common";
 /**
  * Displays numeric buttons to enable navigation between the pages.
  */
@@ -25,7 +28,7 @@ export class PagerNumericButtonsComponent extends PagerElementComponent {
      * @memberOf PagerNumericButtonsComponent
      */
     get buttons() {
-        let result = [];
+        const result = [];
         for (let idx = this.start; idx <= this.end; idx++) {
             result.push(idx);
         }
@@ -84,13 +87,14 @@ export class PagerNumericButtonsComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerNumericButtonsComponent, selector: "kendo-treelist-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
-       <select
-            class="k-dropdown"
+PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerNumericButtonsComponent, selector: "kendo-treelist-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
+        <select
+            class="k-dropdown-list k-dropdown k-picker k-picker-md k-rounded-md k-pager-nav"
+            [attr.title]="textFor('selectPage')"
+            [attr.aria-label]="textFor('selectPage')"
             (change)="onSelectChange($event)">
             <option *ngIf="start > 1"
-                class="k-link"
                 value="previousButtons"
                 [selected]="false"
                 [attr.aria-label]="pageLabel(start - 1)">...
@@ -100,53 +104,67 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 [selected]="num === currentPage"
                 [attr.aria-label]="pageLabel(num)"
                 [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                [ngClass]="{'k-link': true, 'k-selected':currentPage === num}">
+                [ngClass]="{'k-selected':currentPage === num}">
                 {{num}}
             </option>
             <option *ngIf="end < totalPages"
                 value="nextButtons"
-                class="k-link"
                 [selected]="false"
                 [attr.aria-label]="pageLabel(end + 1)">...
             </option>
         </select>
-        <ul [ngClass]="{'k-pager-numbers': true, 'k-reset': true}">
-            <li *ngIf="start > 1">
-                <a  class="k-link"
-                    [attr.aria-label]="pageLabel(start - 1)"
-                    href="#"
-                    tabindex="-1"
-                    (click)="changePage(start - 2)">...</a>
-            </li>
-            <li *ngFor="let num of buttons">
-                <a  href="#"
-                    [attr.aria-label]="pageLabel(num)"
-                    tabindex="-1"
-                    [ngClass]="{'k-link': true, 'k-selected':currentPage === num}"
-                    (click)="changePage(num - 1)">
-                    {{num}}
-                </a>
-            </li>
-            <li *ngIf="end < totalPages">
-                <a  class="k-link"
-                    [attr.aria-label]="pageLabel(end + 1)"
-                    href="#"
-                    tabindex="-1"
-                    (click)="changePage(end)">...</a>
-            </li>
-        </ul>
-    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
+        <div class="k-pager-numbers">
+            <button *ngIf="start > 1"
+                type="button"
+                [tabIndex]="-1"
+                kendoButton
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                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"
+                [tabIndex]="-1"
+                kendoButton
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                rounded="none"
+                [attr.aria-label]="pageLabel(num)"
+                [attr.title]="pageLabel(num)"
+                [attr.aria-current]="currentPage === num ? 'page' : undefined"
+                [selected]="currentPage === num"
+                (click)="changePage(num - 1)">
+                {{num}}
+            </button>
+            <button *ngIf="end < totalPages"
+                type="button"
+                [tabIndex]="-1"
+                kendoButton
+                class="k-pager-nav"
+                fillMode="flat"
+                themeColor="primary"
+                rounded="none"
+                [attr.aria-label]="pageLabel(end + 1)"
+                [attr.title]="pageLabel(end + 1)"
+                (click)="changePage(end)">...</button>
+        </div>
+    `, isInline: true, components: [{ type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-treelist-pager-numeric-buttons',
                     template: `
-       <select
-            class="k-dropdown"
+        <select
+            class="k-dropdown-list k-dropdown k-picker k-picker-md k-rounded-md k-pager-nav"
+            [attr.title]="textFor('selectPage')"
+            [attr.aria-label]="textFor('selectPage')"
             (change)="onSelectChange($event)">
             <option *ngIf="start > 1"
-                class="k-link"
                 value="previousButtons"
                 [selected]="false"
                 [attr.aria-label]="pageLabel(start - 1)">...
@@ -156,41 +174,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 [selected]="num === currentPage"
                 [attr.aria-label]="pageLabel(num)"
                 [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                [ngClass]="{'k-link': true, 'k-selected':currentPage === num}">
+                [ngClass]="{'k-selected':currentPage === num}">
                 {{num}}
             </option>
             <option *ngIf="end < totalPages"
                 value="nextButtons"
-                class="k-link"
                 [selected]="false"
                 [attr.aria-label]="pageLabel(end + 1)">...
             </option>
         </select>
-        <ul [ngClass]="{'k-pager-numbers': true, 'k-reset': true}">
-            <li *ngIf="start > 1">
-                <a  class="k-link"
-                    [attr.aria-label]="pageLabel(start - 1)"
-                    href="#"
-                    tabindex="-1"
-                    (click)="changePage(start - 2)">...</a>
-            </li>
-            <li *ngFor="let num of buttons">
-                <a  href="#"
-                    [attr.aria-label]="pageLabel(num)"
-                    tabindex="-1"
-                    [ngClass]="{'k-link': true, 'k-selected':currentPage === num}"
-                    (click)="changePage(num - 1)">
-                    {{num}}
-                </a>
-            </li>
-            <li *ngIf="end < totalPages">
-                <a  class="k-link"
-                    [attr.aria-label]="pageLabel(end + 1)"
-                    href="#"
-                    tabindex="-1"
-                    (click)="changePage(end)">...</a>
-            </li>
-        </ul>
+        <div class="k-pager-numbers">
+            <button *ngIf="start > 1"
+                type="button"
+                [tabIndex]="-1"
+                kendoButton
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                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"
+                [tabIndex]="-1"
+                kendoButton
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                rounded="none"
+                [attr.aria-label]="pageLabel(num)"
+                [attr.title]="pageLabel(num)"
+                [attr.aria-current]="currentPage === num ? 'page' : undefined"
+                [selected]="currentPage === num"
+                (click)="changePage(num - 1)">
+                {{num}}
+            </button>
+            <button *ngIf="end < totalPages"
+                type="button"
+                [tabIndex]="-1"
+                kendoButton
+                class="k-pager-nav"
+                fillMode="flat"
+                themeColor="primary"
+                rounded="none"
+                [attr.aria-label]="pageLabel(end + 1)"
+                [attr.title]="pageLabel(end + 1)"
+                (click)="changePage(end)">...</button>
+        </div>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }]; }, propDecorators: { numbersWrapClass: [{

package/{esm2015/pager/pager-page-sizes.component.js → esm2020/pager/pager-page-sizes.component.mjs}

@@ -1,10 +1,12 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 // eslint-disable no-access-missing-member
-import { Component, ChangeDetectionStrategy, HostBinding, Input } from '@angular/core';
+import { Component, ChangeDetectorRef, ChangeDetectionStrategy, HostBinding, Input } from '@angular/core';
 import { PagerElementComponent } from './pager-element.component';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { PagerContextService } from "./pager-context.service";
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./pager-context.service";
@@ -87,10 +89,11 @@ export class PagerPageSizesComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerPageSizesComponent, selector: "kendo-treelist-pager-page-sizes", inputs: { pageSizes: "pageSizes" }, host: { properties: { "class.k-pager-sizes": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `
+PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerPageSizesComponent, selector: "kendo-treelist-pager-page-sizes", inputs: { pageSizes: "pageSizes" }, host: { properties: { "class.k-pager-sizes": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-dropdownlist
             #dropdownlist
+            class="k-dropdown"
             [data]="pageSizes"
             textField="text"
             valueField="value"
@@ -99,7 +102,7 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
         <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
     `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -107,6 +110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     template: `
         <kendo-dropdownlist
             #dropdownlist
+            class="k-dropdown"
             [data]="pageSizes"
             textField="text"
             valueField="value"