@progress/kendo-angular-treelist 12.0.2-develop.3 → 12.1.0-develop.1

package/common/provider.service.d.ts

@@ -2,7 +2,9 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { Renderer2 } from '@angular/core';
 import type { TreeListComponent } from '../treelist.component';
+import { TreeListToolbarNavigationService } from '../rendering/toolbar/toolbar-navigation.service';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -14,7 +16,11 @@ import * as i0 from "@angular/core";
  * and a avoids dependency cycles between components.
  */
 export declare class ContextService {
+    private renderer;
     treelist: TreeListComponent;
+    topToolbarNavigation: TreeListToolbarNavigationService;
+    bottomToolbarNavigation: TreeListToolbarNavigationService;
+    constructor(renderer: Renderer2);
     static ɵfac: i0.ɵɵFactoryDeclaration<ContextService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ContextService>;
 }

package/esm2020/common/provider.service.mjs

@@ -2,7 +2,8 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Injectable } from '@angular/core';
+import { Injectable, Renderer2 } from '@angular/core';
+import { TreeListToolbarNavigationService } from '../rendering/toolbar/toolbar-navigation.service';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -14,9 +15,14 @@ import * as i0 from "@angular/core";
  * and a avoids dependency cycles between components.
  */
 export class ContextService {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.topToolbarNavigation = new TreeListToolbarNavigationService(this.renderer);
+        this.bottomToolbarNavigation = new TreeListToolbarNavigationService(this.renderer);
+    }
 }
-ContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
 ContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });

package/esm2020/filtering/cell/filter-cell-operators.component.mjs

@@ -116,7 +116,7 @@ FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             (click)="clearClick()"
             (keydown)="clearKeydown($event)">
         </button>
-    `, isInline: true, components: [{ type: i2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { 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: i5.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }] });
+    `, isInline: true, components: [{ type: i2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { 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: i5.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellOperatorsComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/filtering/cell/numeric-filter-cell.component.mjs

@@ -68,7 +68,7 @@ NumericFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 [step]="step">
             </kendo-numerictextbox>
         </kendo-treelist-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: i3.FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i4.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: i5.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i6.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
+    `, isInline: true, components: [{ type: i3.FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i4.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: i5.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i6.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterCellComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/filtering/cell/string-filter-cell.component.mjs

@@ -63,7 +63,7 @@ StringFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                 [filterDelay]="filterDelay"
                 [ngModel]="currentFilter?.value" />
         </kendo-treelist-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: i3.FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }], directives: [{ type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i6.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    `, isInline: true, components: [{ type: i3.FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }], directives: [{ type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i6.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterCellComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/filtering/filter-row.component.mjs

@@ -25,7 +25,7 @@ export class FilterRowComponent {
 }
 FilterRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterRowComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 FilterRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: { columns: "columns", filter: "filter", logicalRowIndex: "logicalRowIndex", lockedColumnsCount: "lockedColumnsCount" }, host: { properties: { "class.k-filter-row": "this.filterRowClass" } }, ngImport: i0, template: `
-      <td *ngFor="let column of columns; let columnIndex = index"
+      <td *ngFor="let column of columns; let columnIndex = index" role="gridcell"
           [attr.aria-label]="filterLabel"
           kendoTreeListFilterCell
             [column]="$any(column)"
@@ -43,7 +43,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             args: [{
                     selector: '[kendoTreeListFilterRow]',
                     template: `
-      <td *ngFor="let column of columns; let columnIndex = index"
+      <td *ngFor="let column of columns; let columnIndex = index" role="gridcell"
           [attr.aria-label]="filterLabel"
           kendoTreeListFilterCell
             [column]="$any(column)"

package/esm2020/index.mjs

@@ -16,6 +16,7 @@ export { SpanColumnComponent } from './columns/span-column.component';
 export { ColumnGroupComponent } from './columns/column-group.component';
 export { ToolbarComponent } from './rendering/toolbar/toolbar.component';
 export { ToolbarTemplateDirective } from './rendering/toolbar/toolbar-template.directive';
+export { TreeListToolbarFocusableDirective } from './rendering/toolbar/toolbar-focusable.directive';
 export { CellTemplateDirective } from './rendering/cell-template.directive';
 export { HeaderTemplateDirective } from './rendering/header/header-template.directive';
 export { FooterTemplateDirective } from './rendering/footer-template.directive';

package/esm2020/localization/messages.mjs

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export class Messages extends ComponentMessages {
 }
 Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItemsTotal: "pagerItemsTotal", selectPage: "selectPage", filter: "filter", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", columnMenu: "columnMenu", columns: "columns", lock: "lock", unlock: "unlock", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset" }, usesInheritance: true, ngImport: i0 });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItemsTotal: "pagerItemsTotal", selectPage: "selectPage", filter: "filter", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", columnMenu: "columnMenu", columns: "columns", lock: "lock", unlock: "unlock", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{}]
@@ -19,6 +19,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], noRecords: [{
                 type: Input
+            }], pagerLabel: [{
+                type: Input
             }], pagerFirstPage: [{
                 type: Input
             }], pagerLastPage: [{
@@ -117,4 +119,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], columnsReset: [{
                 type: Input
+            }], topToolbarLabel: [{
+                type: Input
+            }], bottomToolbarLabel: [{
+                type: Input
             }] } });

package/esm2020/navigation/focus-group.mjs

@@ -34,6 +34,7 @@ export class FocusGroup {
     }
     ngOnDestroy() {
         this.root.unregisterGroup(this);
+        this.active = true;
     }
     /**
      * @hidden

package/esm2020/navigation/focus-root.mjs

@@ -2,38 +2,48 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Injectable } from '@angular/core';
+import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
 import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export const FOCUS_ROOT_ACTIVE = new InjectionToken('focus-root-initial-active-state');
 /**
  * @hidden
  */
 export class FocusRoot {
-    constructor() {
+    constructor(active = false) {
+        this.active = active;
         this.groups = new Set();
     }
     registerGroup(group) {
-        if (this.alive) {
+        if (this.active) {
             this.groups.add(group);
         }
     }
     unregisterGroup(group) {
-        if (this.alive) {
+        if (this.active) {
             this.groups.delete(group);
         }
     }
     activate() {
-        if (this.alive) {
+        if (this.active) {
             this.groups.forEach(f => f.activate());
         }
     }
     deactivate() {
-        if (this.alive) {
+        if (this.active) {
             this.groups.forEach(f => f.deactivate());
         }
     }
 }
-FocusRoot.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusRoot, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FocusRoot.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusRoot, deps: [{ token: FOCUS_ROOT_ACTIVE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 FocusRoot.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusRoot });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusRoot, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [FOCUS_ROOT_ACTIVE]
+                }] }]; } });

package/esm2020/navigation/focusable.directive.mjs

@@ -27,27 +27,42 @@ export class FocusableDirective {
         this.renderer = renderer;
         this.group = group;
         this.active = true;
+        this._enabled = true;
     }
     /**
      * @hidden
      */
-    set addCellContext(value) { this.cellContext = value; }
+    set enabled(value) {
+        if (value !== this.enabled) {
+            this._enabled = value;
+            if (this.element) {
+                this.element.toggle(this.active && value);
+            }
+        }
+    }
+    get enabled() {
+        return this._enabled;
+    }
+    /**
+     * @hidden
+     */
+    set addCellContext(value) { this.cellContext = value; this.enabled = true; }
     /**
      * @hidden
      */
-    set editCellContext(value) { this.cellContext = value; }
+    set editCellContext(value) { this.cellContext = value; this.enabled = true; }
     /**
      * @hidden
      */
-    set removeCellContext(value) { this.cellContext = value; }
+    set removeCellContext(value) { this.cellContext = value; this.enabled = true; }
     /**
      * @hidden
      */
-    set saveCellContext(value) { this.cellContext = value; }
+    set saveCellContext(value) { this.cellContext = value; this.enabled = true; }
     /**
      * @hidden
      */
-    set cancelCellContext(value) { this.cellContext = value; }
+    set cancelCellContext(value) { this.cellContext = value; this.enabled = true; }
     ngOnInit() {
         if (this.cellContext && this.cellContext.focusGroup) {
             this.group = this.cellContext.focusGroup;
@@ -76,26 +91,26 @@ export class FocusableDirective {
     toggle(active) {
         if (this.element && active !== this.active) {
             this.active = active;
-            this.element.toggle(active);
+            this.element.toggle(this.enabled && active);
         }
     }
     /**
      * @hidden
      */
     canFocus() {
-        return this.element && this.element.canFocus();
+        return this.enabled && this.element && this.element.canFocus();
     }
     /**
      * @hidden
      */
     isNavigable() {
-        return this.element && this.element.isNavigable();
+        return this.enabled && this.element && this.element.isNavigable();
     }
     /**
      * @hidden
      */
     focus() {
-        if (this.element) {
+        if (this.enabled && this.element) {
             this.element.focus();
         }
     }
@@ -103,7 +118,7 @@ export class FocusableDirective {
      * @hidden
      */
     hasFocus() {
-        return this.element && this.element.hasFocus();
+        return this.enabled && this.element && this.element.hasFocus();
     }
     /**
      * @hidden
@@ -113,7 +128,7 @@ export class FocusableDirective {
     }
 }
 FocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.FocusGroup, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-FocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: { cellContext: ["kendoTreeListFocusable", "cellContext"], addCellContext: ["kendoTreeListAddCommand", "addCellContext"], editCellContext: ["kendoTreeListEditCommand", "editCellContext"], removeCellContext: ["kendoTreeListRemoveCommand", "removeCellContext"], saveCellContext: ["kendoTreeListSaveCommand", "saveCellContext"], cancelCellContext: ["kendoTreeListCancelCommand", "cancelCellContext"] }, ngImport: i0 });
+FocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: { cellContext: ["kendoTreeListFocusable", "cellContext"], enabled: "enabled", addCellContext: ["kendoTreeListAddCommand", "addCellContext"], editCellContext: ["kendoTreeListEditCommand", "editCellContext"], removeCellContext: ["kendoTreeListRemoveCommand", "removeCellContext"], saveCellContext: ["kendoTreeListSaveCommand", "saveCellContext"], cancelCellContext: ["kendoTreeListCancelCommand", "cancelCellContext"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusableDirective, decorators: [{
             type: Directive,
             args: [{
@@ -130,6 +145,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }] }]; }, propDecorators: { cellContext: [{
                 type: Input,
                 args: ['kendoTreeListFocusable']
+            }], enabled: [{
+                type: Input
             }], addCellContext: [{
                 type: Input,
                 args: ['kendoTreeListAddCommand']

package/esm2020/navigation/navigation.service.mjs

@@ -132,7 +132,7 @@ export class NavigationService {
     }
     init(meta) {
         this.alive = true;
-        this.focusRoot.alive = true;
+        this.focusRoot.active = true;
         this.metadata = meta;
         const onStableSubscriber = (...operators) => (args) => this.zone.isStable ?
             from([true]).pipe(map(() => args)) :

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1683884362,
-    version: '12.0.2-develop.3',
+    publishDate: 1684149063,
+    version: '12.1.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/pager/pager-input.component.mjs

@@ -9,18 +9,22 @@ 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 { NavigationService } from '../navigation/navigation.service';
 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 "@progress/kendo-angular-common";
+import * as i3 from "../navigation/navigation.service";
+import * as i4 from "@progress/kendo-angular-inputs";
+import * as i5 from "../navigation/focusable.directive";
+import * as i6 from "@progress/kendo-angular-common";
 /**
  * Displays an input element which allows the typing and rendering of page numbers.
  */
 export class PagerInputComponent extends PagerElementComponent {
-    constructor(localization, pagerContext, zone, cd) {
+    constructor(localization, pagerContext, navigationService, zone, cd) {
         super(localization, pagerContext, cd);
         this.pagerContext = pagerContext;
+        this.navigationService = navigationService;
         this.zone = zone;
         /**
          * @hidden
@@ -76,11 +80,13 @@ export class PagerInputComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i3.NavigationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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
+                kendoTreeListFocusable
+                [enabled]="hasPages"
                 [style.margin]="'0 1ex'"
                 [style.width]="'3em'"
                 [spinners]="false"
@@ -92,6 +98,7 @@ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 [max]="totalPages"
                 [autoCorrect]="true"
                 [title]="textFor('pagerPageNumberInputTitle')"
+                [attr.aria-label]="textFor('pagerPageNumberInputTitle')"
                 [kendoEventsOutsideAngular]="{
                     keydown: handleKeyDown,
                     focusout: handleBlur
@@ -99,7 +106,7 @@ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </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"] }] });
+    `, isInline: true, components: [{ type: i4.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: i5.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -108,6 +115,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <span class="k-pager-input k-label">
             {{textFor('pagerPage')}}
             <kendo-numerictextbox
+                kendoTreeListFocusable
+                [enabled]="hasPages"
                 [style.margin]="'0 1ex'"
                 [style.width]="'3em'"
                 [spinners]="false"
@@ -119,6 +128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [max]="totalPages"
                 [autoCorrect]="true"
                 [title]="textFor('pagerPageNumberInputTitle')"
+                [attr.aria-label]="textFor('pagerPageNumberInputTitle')"
                 [kendoEventsOutsideAngular]="{
                     keydown: handleKeyDown,
                     focusout: handleBlur
@@ -128,7 +138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </span>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PagerContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { numericInput: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PagerContextService }, { type: i3.NavigationService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { numericInput: [{
                 type: ViewChild,
                 args: [NumericTextBoxComponent, { static: true }]
             }] } });

package/esm2020/pager/pager-next-buttons.component.mjs

@@ -3,21 +3,25 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 // eslint-disable  no-access-missing-member
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core';
 import { PagerContextService } from "./pager-context.service";
 import { PagerElementComponent } from './pager-element.component';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { caretAltRightIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
+import { NavigationService } from '../navigation/navigation.service';
 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-buttons";
+import * as i3 from "../navigation/navigation.service";
+import * as i4 from "@progress/kendo-angular-buttons";
+import * as i5 from "../navigation/focusable.directive";
 /**
  * Displays buttons for navigating to the next and to the last page ([see example]({% slug paging_treelist %}#toc-pager-templates)).
  */
 export class PagerNextButtonsComponent extends PagerElementComponent {
-    constructor(localization, pagerContext, cd) {
+    constructor(localization, pagerContext, cd, navigationService) {
         super(localization, pagerContext, cd);
+        this.navigationService = navigationService;
         this.caretAltRightIcon = caretAltRightIcon;
         this.caretAltToRightIcon = caretAltToRightIcon;
     }
@@ -31,6 +35,15 @@ export class PagerNextButtonsComponent extends PagerElementComponent {
     get disabled() {
         return this.currentPage === this.totalPages || !this.total;
     }
+    /**
+     * @hidden
+     */
+    onButtonClick(buttonName) {
+        if (this.currentPage !== this.totalPages) {
+            const skipToPage = buttonName === 'nextPage' ? this.currentPage : this.totalPages - 1;
+            this.changePage(skipToPage);
+        }
+    }
     onChanges({ total, skip, pageSize }) {
         this.total = total;
         this.skip = skip;
@@ -38,26 +51,28 @@ export class PagerNextButtonsComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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.12", type: PagerNextButtonsComponent, selector: "kendo-treelist-pager-next-buttons", usesInheritance: true, ngImport: i0, template: `
+PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }, { token: i3.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNextButtonsComponent, selector: "kendo-treelist-pager-next-buttons", inputs: { navigable: "navigable" }, usesInheritance: true, ngImport: i0, template: `
         <button
             kendoButton
             type="button"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
             icon="caret-alt-right"
             [svgIcon]="caretAltRightIcon"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
-            [tabIndex]="-1"
             [disabled]="disabled"
             [title]="textFor('pagerNextPage')"
             [attr.aria-label]="textFor('pagerNextPage')"
-            (click)="currentPage !== totalPages ? changePage(currentPage) : false">
+            (click)="onButtonClick('nextPage')">
         </button>
         <button
             kendoButton
             type="button"
-            [tabIndex]="-1"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
             icon="caret-alt-to-right"
             [svgIcon]="caretAltToRightIcon"
             fillMode="flat"
@@ -66,9 +81,9 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [disabled]="disabled"
             [title]="textFor('pagerLastPage')"
             [attr.aria-label]="textFor('pagerLastPage')"
-            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
+            (click)="onButtonClick('lastPage')">
         </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 });
+    `, isInline: true, components: [{ type: i4.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: i5.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -78,21 +93,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <button
             kendoButton
             type="button"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
             icon="caret-alt-right"
             [svgIcon]="caretAltRightIcon"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
-            [tabIndex]="-1"
             [disabled]="disabled"
             [title]="textFor('pagerNextPage')"
             [attr.aria-label]="textFor('pagerNextPage')"
-            (click)="currentPage !== totalPages ? changePage(currentPage) : false">
+            (click)="onButtonClick('nextPage')">
         </button>
         <button
             kendoButton
             type="button"
-            [tabIndex]="-1"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
             icon="caret-alt-to-right"
             [svgIcon]="caretAltToRightIcon"
             fillMode="flat"
@@ -101,8 +118,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [disabled]="disabled"
             [title]="textFor('pagerLastPage')"
             [attr.aria-label]="textFor('pagerLastPage')"
-            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
+            (click)="onButtonClick('lastPage')">
         </button>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PagerContextService }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PagerContextService }, { type: i0.ChangeDetectorRef }, { type: i3.NavigationService }]; }, propDecorators: { navigable: [{
+                type: Input
+            }] } });