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

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

@@ -2,6 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-inferrable-types */
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PagerContextService } from './pager-context.service';
@@ -10,7 +11,8 @@ 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 i4 from "@angular/common";
+import * as i4 from "../navigation/focusable.directive";
+import * as i5 from "@angular/common";
 /**
  * Displays numeric buttons to enable navigation between the pages.
  */
@@ -91,6 +93,7 @@ PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0
 PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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-solid k-picker-md k-rounded-md"
+            kendoTreeListFocusable
             [attr.title]="textFor('selectPage')"
             [attr.aria-label]="textFor('selectPage')"
             (change)="onSelectChange($event)">
@@ -116,7 +119,7 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
         <div class="k-pager-numbers">
             <button *ngIf="start > 1"
                 type="button"
-                [tabIndex]="-1"
+                kendoTreeListFocusable
                 kendoButton
                 fillMode="flat"
                 themeColor="primary"
@@ -127,7 +130,7 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 (click)="changePage(start - 2)">...</button>
             <button *ngFor="let num of buttons"
                 type="button"
-                [tabIndex]="-1"
+                kendoTreeListFocusable
                 kendoButton
                 fillMode="flat"
                 themeColor="primary"
@@ -142,7 +145,7 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             </button>
             <button *ngIf="end < totalPages"
                 type="button"
-                [tabIndex]="-1"
+                kendoTreeListFocusable
                 kendoButton
                 class="k-pager-nav"
                 fillMode="flat"
@@ -152,7 +155,7 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 [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 });
+    `, 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.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -161,6 +164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     template: `
         <select
             class="k-dropdown-list k-dropdown k-picker k-picker-solid k-picker-md k-rounded-md"
+            kendoTreeListFocusable
             [attr.title]="textFor('selectPage')"
             [attr.aria-label]="textFor('selectPage')"
             (change)="onSelectChange($event)">
@@ -186,7 +190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <div class="k-pager-numbers">
             <button *ngIf="start > 1"
                 type="button"
-                [tabIndex]="-1"
+                kendoTreeListFocusable
                 kendoButton
                 fillMode="flat"
                 themeColor="primary"
@@ -197,7 +201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 (click)="changePage(start - 2)">...</button>
             <button *ngFor="let num of buttons"
                 type="button"
-                [tabIndex]="-1"
+                kendoTreeListFocusable
                 kendoButton
                 fillMode="flat"
                 themeColor="primary"
@@ -212,7 +216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </button>
             <button *ngIf="end < totalPages"
                 type="button"
-                [tabIndex]="-1"
+                kendoTreeListFocusable
                 kendoButton
                 class="k-pager-nav"
                 fillMode="flat"

package/esm2020/pager/pager-page-sizes.component.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 // eslint-disable no-access-missing-member
-import { Component, ChangeDetectorRef, ChangeDetectionStrategy, HostBinding, Input } from '@angular/core';
+import { Component, ChangeDetectorRef, ChangeDetectionStrategy, HostBinding, Input, ElementRef } from '@angular/core';
 import { PagerElementComponent } from './pager-element.component';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PagerContextService } from "./pager-context.service";
@@ -12,12 +12,14 @@ import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./pager-context.service";
 import * as i3 from "@progress/kendo-angular-dropdowns";
 import * as i4 from "@progress/kendo-angular-label";
+import * as i5 from "../navigation/focusable.directive";
 /**
  * Displays a drop-down list for the page size selection ([see example]({% slug paging_treelist %}#toc-pager-templates)).
  */
 export class PagerPageSizesComponent extends PagerElementComponent {
-    constructor(localization, cd, pagerContext) {
+    constructor(elem, localization, cd, pagerContext) {
         super(localization, pagerContext, cd);
+        this.elem = elem;
         this.pagerContext = pagerContext;
         this._pageSizes = [];
     }
@@ -89,7 +91,7 @@ export class PagerPageSizesComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
 PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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
@@ -97,11 +99,13 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [data]="pageSizes"
             textField="text"
             valueField="value"
+            kendoTreeListFocusable
             [valuePrimitive]="true"
             [value]="pageSize"
+            [attr.aria-label]="textFor('pagerItemsPerPage')"
             (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", "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: i4.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i3.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: i4.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }], 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: PagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
@@ -114,13 +118,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [data]="pageSizes"
             textField="text"
             valueField="value"
+            kendoTreeListFocusable
             [valuePrimitive]="true"
             [value]="pageSize"
+            [attr.aria-label]="textFor('pagerItemsPerPage')"
             (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
         <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }]; }, propDecorators: { pageSizes: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }]; }, propDecorators: { pageSizes: [{
                 type: Input
             }], classes: [{
                 type: HostBinding,

package/esm2020/pager/pager-prev-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, } from '@angular/core';
 import { PagerContextService } from "./pager-context.service";
 import { PagerElementComponent } from './pager-element.component';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { caretAltLeftIcon, caretAltToLeftIcon } 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 first and to the previous page ([see example]({% slug paging_treelist %}#toc-pager-templates)).
  */
 export class PagerPrevButtonsComponent extends PagerElementComponent {
-    constructor(localization, pagerContext, cd) {
+    constructor(localization, pagerContext, cd, navigationService) {
         super(localization, pagerContext, cd);
+        this.navigationService = navigationService;
         this.caretAltLeftIcon = caretAltLeftIcon;
         this.caretAltToLeftIcon = caretAltToLeftIcon;
     }
@@ -31,6 +35,15 @@ export class PagerPrevButtonsComponent extends PagerElementComponent {
     get disabled() {
         return this.currentPage === 1 || !this.total;
     }
+    /**
+     * @hidden
+     */
+    onButtonClick(buttonName) {
+        if (this.currentPage !== 1) {
+            const skipToPage = buttonName === 'prevPage' ? this.currentPage - 2 : 0;
+            this.changePage(skipToPage);
+        }
+    }
     onChanges({ total, skip, pageSize }) {
         this.total = total;
         this.skip = skip;
@@ -38,15 +51,16 @@ export class PagerPrevButtonsComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }, { token: i3.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
 PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerPrevButtonsComponent, selector: "kendo-treelist-pager-prev-buttons", usesInheritance: true, ngImport: i0, template: `
         <button
-            [tabIndex]="-1"
             kendoButton
             type="button"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
             [title]="textFor('pagerFirstPage')"
             [attr.aria-label]="textFor('pagerFirstPage')"
-            (click)="currentPage !== 1 ? changePage(0) : false"
+            (click)="onButtonClick('firstPage')"
             role="button"
             icon="caret-alt-to-left"
             [svgIcon]="caretAltToLeftIcon"
@@ -57,8 +71,9 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
         </button>
         <button
             kendoButton
-            [tabIndex]="-1"
             type="button"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
             class="k-pager-nav"
             [disabled]="disabled"
             icon="caret-alt-left"
@@ -67,9 +82,9 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             rounded="none"
             [title]="textFor('pagerPreviousPage')"
             [attr.aria-label]="textFor('pagerPreviousPage')"
-            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
+            (click)="onButtonClick('prevPage')">
         </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: PagerPrevButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -77,12 +92,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-treelist-pager-prev-buttons',
                     template: `
         <button
-            [tabIndex]="-1"
             kendoButton
             type="button"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
             [title]="textFor('pagerFirstPage')"
             [attr.aria-label]="textFor('pagerFirstPage')"
-            (click)="currentPage !== 1 ? changePage(0) : false"
+            (click)="onButtonClick('firstPage')"
             role="button"
             icon="caret-alt-to-left"
             [svgIcon]="caretAltToLeftIcon"
@@ -93,8 +109,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </button>
         <button
             kendoButton
-            [tabIndex]="-1"
             type="button"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
             class="k-pager-nav"
             [disabled]="disabled"
             icon="caret-alt-left"
@@ -103,8 +120,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             rounded="none"
             [title]="textFor('pagerPreviousPage')"
             [attr.aria-label]="textFor('pagerPreviousPage')"
-            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
+            (click)="onButtonClick('prevPage')">
         </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 }]; } });