@progress/kendo-angular-toolbar 6.1.0 → 6.1.1-dev.202210270918

package/fesm2015/kendo-angular-toolbar.js

@@ -4,12 +4,12 @@
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, Component, Input, Output, HostBinding, HostListener, Directive, forwardRef, ViewContainerRef, ContentChildren, ViewChild, ViewChildren, ElementRef, NgModule } from '@angular/core';
+import * as i6 from '@progress/kendo-angular-common';
+import { Keys, guid, isDocumentAvailable, ResizeSensorModule } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { take, filter, takeUntil } from 'rxjs/operators';
-import * as i6 from '@progress/kendo-angular-common';
-import { Keys, isDocumentAvailable, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { Subject, Subscription, merge, fromEvent } from 'rxjs';
 import * as i2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
@@ -25,7 +25,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1662551369,
+    publishDate: 1666862261,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -259,7 +259,11 @@ class NavigationService {
         this.focus();
     }
     focusNext(ev) {
-        if (!this.isOverflowButtonFocused && this.focused.renderedTool && !this.focused.renderedTool.tool.handleKey(ev)) {
+        if (this.isOverflowButtonFocused) {
+            const firstFocusableRT = this.getFocusableTools()[0];
+            this.focus(firstFocusableRT, ev);
+        }
+        else if (!this.isOverflowButtonFocused && this.focused.renderedTool && !this.focused.renderedTool.tool.handleKey(ev)) {
             const nextRT = this.getFocusableTools().slice(this.focused.index + 1)[0];
             if (nextRT) {
                 this.focus(nextRT, ev);
@@ -268,6 +272,10 @@ class NavigationService {
                 if (this.isOverflowButtonVisible() && !this.isPopupFocused) {
                     this.focusOverflowButton();
                 }
+                else {
+                    const firstRT = this.getFocusableTools()[0];
+                    this.focus(firstRT, ev);
+                }
             }
         }
     }
@@ -276,13 +284,22 @@ class NavigationService {
             const lastFocusableRT = this.getFocusableTools().reverse()[0];
             this.focus(lastFocusableRT, ev);
         }
-        else if (this.focused.renderedTool && !this.focused.renderedTool.tool.handleKey(ev)) {
+        else if (!this.isOverflowButtonFocused && this.focused.renderedTool && !this.focused.renderedTool.tool.handleKey(ev)) {
             const prevRT = this.getFocusableTools()
                 .slice(0, this.focused.index)
                 .reverse()[0];
             if (prevRT) {
                 this.focus(prevRT, ev);
             }
+            else {
+                if (this.isOverflowButtonVisible() && !this.isPopupFocused) {
+                    this.focusOverflowButton();
+                }
+                else {
+                    const lastRT = this.getFocusableTools().reverse()[0];
+                    this.focus(lastRT, ev);
+                }
+            }
         }
     }
     resetNavigation() {
@@ -302,6 +319,18 @@ class NavigationService {
             overFlowButton.nativeElement.focus();
         }
     }
+    focusLast(ev) {
+        const lastTool = this.getFocusableTools().reverse()[0];
+        const overFlowButton = this.overflowButton;
+        if (lastTool) {
+            this.focused.renderedTool = lastTool;
+            this.focused.index = this.getFocusableTools().findIndex(rt => rt === lastTool);
+            this.focus(lastTool, ev);
+        }
+        else if (overFlowButton) {
+            overFlowButton.nativeElement.focus();
+        }
+    }
     getFocusableTools() {
         return this.renderedTools.filter(rt => rt.tool.overflows === this.isPopupFocused && rt.tool.canFocus());
     }
@@ -699,6 +728,15 @@ class ToolBarComponent {
         this.cancelRenderedToolsSubscription$ = new Subject();
         this.subscriptions = new Subscription();
         this.popupSubs = new Subscription();
+        this.role = 'toolbar';
+        /**
+         * @hidden
+         */
+        this.overflowBtnId = guid();
+        /**
+         * @hidden
+         */
+        this.popupId = guid();
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
     }
@@ -779,9 +817,6 @@ class ToolBarComponent {
         }
         this.element.nativeElement.setAttribute('tabindex', this.tabindex.toString());
     }
-    get getRole() {
-        return 'toolbar';
-    }
     get getDir() {
         return this.direction;
     }
@@ -828,6 +863,12 @@ class ToolBarComponent {
                     case Keys.Escape:
                         this.zone.run(() => this.toggle(false));
                         break;
+                    case Keys.Home:
+                        this.zone.run(() => this.navigationService.focusFirst(ev));
+                        break;
+                    case Keys.End:
+                        this.zone.run(() => this.navigationService.focusLast(ev));
+                        break;
                     default:
                         break;
                 }
@@ -971,6 +1012,7 @@ class ToolBarComponent {
         this.overflowRenderedTools.changes
             .pipe(takeUntil(this.cancelRenderedToolsSubscription$))
             .subscribe((rts) => this.navigationService.setRenderedTools(rts.toArray()));
+        this.renderer.setAttribute(this.overflowButton.nativeElement, 'aria-controls', this.popupId);
     }
     /**
      * @hidden
@@ -985,6 +1027,7 @@ class ToolBarComponent {
         if (this.overflowKeydownListener) {
             this.overflowKeydownListener();
         }
+        this.renderer.removeAttribute(this.overflowButton.nativeElement, 'aria-controls');
     }
     displayAnchor() {
         const visibility = this.allTools.filter(t => t.overflows && t.responsive).length > 0 ? 'visible' : 'hidden';
@@ -1102,7 +1145,7 @@ class ToolBarComponent {
     }
 }
 ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarComponent, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-widget": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "attr.role": "this.getRole", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
+ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarComponent, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-widget": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
         RefreshService,
         NavigationService,
         LocalizationService,
@@ -1131,19 +1174,26 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             tabindex="-1"
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
+            [attr.aria-expanded]="popupOpen"
+            [id]="overflowBtnId"
+            aria-haspopup="menu"
             *ngIf="overflow"
             [style.visibility]="'hidden'"
             [style.position]="'relative'"
             [style.margin-inline-start]="'auto'"
-            class="k-overflow-anchor k-button"
+            class="k-overflow-anchor k-button k-button-flat"
             (click)="showPopup()"
         >
             <span class="k-icon k-i-more-vertical"></span>
         </button>
         <ng-template #popupTemplate>
-            <ul class="k-overflow-container k-list-container k-reset">
+            <ul
+                class="k-overflow-container k-list-container k-reset"
+                role="menu"
+                [id]="popupId"
+                [attr.aria-labelledby]="overflowBtnId">
                 <ng-container *ngFor="let tool of allTools; let index = index">
-                    <li class="k-item">
+                    <li class="k-item" role="menuitem">
                         <kendo-toolbar-renderer
                             #overflowRenderer
                             (rendererClick)="onRendererClick($event)"
@@ -1193,19 +1243,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             tabindex="-1"
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
+            [attr.aria-expanded]="popupOpen"
+            [id]="overflowBtnId"
+            aria-haspopup="menu"
             *ngIf="overflow"
             [style.visibility]="'hidden'"
             [style.position]="'relative'"
             [style.margin-inline-start]="'auto'"
-            class="k-overflow-anchor k-button"
+            class="k-overflow-anchor k-button k-button-flat"
             (click)="showPopup()"
         >
             <span class="k-icon k-i-more-vertical"></span>
         </button>
         <ng-template #popupTemplate>
-            <ul class="k-overflow-container k-list-container k-reset">
+            <ul
+                class="k-overflow-container k-list-container k-reset"
+                role="menu"
+                [id]="popupId"
+                [attr.aria-labelledby]="overflowBtnId">
                 <ng-container *ngFor="let tool of allTools; let index = index">
-                    <li class="k-item">
+                    <li class="k-item" role="menuitem">
                         <kendo-toolbar-renderer
                             #overflowRenderer
                             (rendererClick)="onRendererClick($event)"
@@ -1269,7 +1326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], onFocusOut: [{
                 type: HostListener,
                 args: ['focusout', ['$event']]
-            }], getRole: [{
+            }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
             }], getDir: [{
@@ -1700,9 +1757,10 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         return this.overflows ? this.overflowButtonGroup : this.toolbarButtonGroup;
     }
     focusButton(index, ev) {
+        var _a;
         // Guard against focusing twice on mousedown.
         if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
-            this.buttonElements[index].focus();
+            (_a = this.buttonElements[index]) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }
 }
@@ -1771,7 +1829,7 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 </span>
             </kendo-buttongroup>
         </ng-template>
-    `, isInline: true, components: [{ type: i1$1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i1$1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -1962,11 +2020,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     constructor() {
         super();
-        // showText and showIcon showIcon should be declared first
-        /**
-         * Defines the location of the button text that will be displayed.
-         */
-        this.showText = 'both';
         /**
          * Defines the location of the button icon that will be displayed.
          */
@@ -2031,16 +2084,21 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         };
         this._popupSettings = { animate: true, popupClass: '' };
         this.focusedIndex = -1;
+        this._showText = 'both';
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
     }
+    // showText and showIcon showIcon should be declared first
     /**
-     * Sets the text of the DropDownButton
-     * ([see example]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
+     * Defines the location of the button text that will be displayed.
      */
-    set text(text) {
-        this.toolbarOptions.text = getValueForLocation(text, this.showText, false);
-        this.overflowOptions.text = getValueForLocation(text, this.showText, true);
+    set showText(value) {
+        this._showText = value;
+        this.setTextDisplayMode();
+    }
+    ;
+    get showText() {
+        return this._showText;
     }
     /**
      * Defines an icon that will be rendered next to the button text.
@@ -2105,6 +2163,9 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         }
         return this._data;
     }
+    ngOnInit() {
+        this.setTextDisplayMode();
+    }
     get overflowButtons() {
         return [...this.overflowDropDownButtonButtonList.buttons.toArray().filter(b => !b.nativeElement.disabled)];
     }
@@ -2156,6 +2217,10 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             this.overflowButtons[index].nativeElement.focus();
         }
     }
+    setTextDisplayMode() {
+        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
+        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+    }
 }
 ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowDropDownButtonButtonList", first: true, predicate: ["overflowDropDownButtonButtonList"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
@@ -2205,7 +2270,7 @@ ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             >
             </kendo-toolbar-buttonlist>
         </ng-template>
-    `, isInline: true, components: [{ type: i1$1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "popupSettings", "textField", "disabled", "data", "size", "rounded", "fillMode", "themeColor", "buttonClass", "tabIndex"], outputs: ["itemClick", "open", "close", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: ["data", "textField", "disabled", "fillMode", "themeColor"], outputs: ["itemClick"] }], directives: [{ type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i1$1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: ["data", "textField", "disabled", "fillMode", "themeColor"], outputs: ["itemClick"] }], directives: [{ type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -2323,11 +2388,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     constructor() {
         super();
-        // showText and showIcon showIcon should be declared first
-        /**
-         * Specifies where button text should be displayed
-         */
-        this.showText = 'both';
         /**
          * Specifies where button icon should be displayed
          */
@@ -2404,15 +2464,21 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         };
         this._popupSettings = { animate: true, popupClass: '' };
         this.focusedIndex = -1;
+        this._showText = 'both';
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
     }
+    // showText and showIcon showIcon should be declared first
     /**
-     * Sets the text of the SplitButton ([see example]({% slug controltypes_toolbar %}#toc-splitbuttons).
+     * Specifies where button text should be displayed
      */
-    set text(text) {
-        this.toolbarOptions.text = getValueForLocation(text, this.showText, false);
-        this.overflowOptions.text = getValueForLocation(text, this.showText, true);
+    set showText(value) {
+        this._showText = value;
+        this.setTextDisplayMode();
+    }
+    ;
+    get showText() {
+        return this._showText;
     }
     /**
      * Defines the icon that will be rendered next to the button text
@@ -2474,6 +2540,9 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         }
         return this._data;
     }
+    ngOnInit() {
+        this.setTextDisplayMode();
+    }
     get overflowButtons() {
         return [this.overflowSplitButton, ...this.overflowSplitButtonButtonList.buttons.toArray().filter(b => !b.nativeElement.disabled)];
     }
@@ -2530,6 +2599,10 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
             this.overflowButtons[index].nativeElement.focus();
         }
     }
+    setTextDisplayMode() {
+        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
+        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+    }
 }
 ToolBarSplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarSplitButtonComponent, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "overflowSplitButton", first: true, predicate: ["overflowSplitButton"], descendants: true, read: ElementRef }, { propertyName: "overflowSplitButtonButtonList", first: true, predicate: ["overflowSplitButtonButtonList"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `

package/navigation.service.d.ts

@@ -25,6 +25,7 @@ export declare class NavigationService {
     focusPrev(ev: KeyboardEvent): void;
     resetNavigation(): void;
     focusFirst(ev: Event): void;
+    focusLast(ev: Event): void;
     private getFocusableTools;
     private focus;
     private blurOverflowButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-toolbar",
-  "version": "6.1.0",
+  "version": "6.1.1-dev.202210270918",
   "description": "Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",

package/toolbar.component.d.ts

@@ -92,7 +92,7 @@ export declare class ToolBarComponent {
      * @hidden
      */
     onFocusOut(event: any): void;
-    get getRole(): string;
+    role: string;
     get getDir(): string;
     get resizableClass(): boolean;
     constructor(localization: LocalizationService, popupService: PopupService, refreshService: RefreshService, navigationService: NavigationService, element: ElementRef, zone: NgZone, renderer: Renderer2, _cdr: ChangeDetectorRef);
@@ -132,6 +132,14 @@ export declare class ToolBarComponent {
      * @hidden
      */
     onPopupClose(): void;
+    /**
+     * @hidden
+     */
+    overflowBtnId: string;
+    /**
+     * @hidden
+     */
+    popupId: string;
     private displayAnchor;
     private get popupWidth();
     private get popupHeight();

package/tools/toolbar-dropdownbutton.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, TemplateRef, EventEmitter } from '@angular/core';
+import { ElementRef, TemplateRef, EventEmitter, OnInit } from '@angular/core';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { PopupSettings } from '../popup-settings';
 import { ButtonFillMode, ButtonThemeColor, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
@@ -13,11 +13,12 @@ import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
  */
-export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
+export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent implements OnInit {
     /**
      * Defines the location of the button text that will be displayed.
      */
-    showText: DisplayMode;
+    set showText(value: DisplayMode);
+    get showText(): DisplayMode;
     /**
      * Defines the location of the button icon that will be displayed.
      */
@@ -26,7 +27,7 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
      * Sets the text of the DropDownButton
      * ([see example]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
      */
-    set text(text: string);
+    text: string;
     /**
      * Defines an icon that will be rendered next to the button text.
      */
@@ -130,12 +131,14 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
     dropDownButtonComponent: DropDownButtonComponent;
     toolbarOptions: ToolOptions;
     overflowOptions: ToolOptions;
+    ngOnInit(): void;
     private get overflowButtons();
     private toolbarDropDownButton;
     private overflowDropDownButtonButtonList;
     private _data;
     private _popupSettings;
     private focusedIndex;
+    private _showText;
     private getNextKey;
     private getPrevKey;
     constructor();
@@ -156,6 +159,7 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
      */
     handleKey(ev: any): boolean;
     private focusButton;
+    private setTextDisplayMode;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarDropDownButtonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarDropDownButtonComponent, "kendo-toolbar-dropdownbutton", ["kendoToolBarDropDownButton"], { "showText": "showText"; "showIcon": "showIcon"; "text": "text"; "icon": "icon"; "iconClass": "iconClass"; "imageUrl": "imageUrl"; "popupSettings": "popupSettings"; "look": "look"; "primary": "primary"; "fillMode": "fillMode"; "themeColor": "themeColor"; "buttonClass": "buttonClass"; "textField": "textField"; "disabled": "disabled"; "data": "data"; }, { "itemClick": "itemClick"; "open": "open"; "close": "close"; }, never, never>;
 }

package/tools/toolbar-splitbutton.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { TemplateRef, EventEmitter } from '@angular/core';
+import { TemplateRef, EventEmitter, OnInit } from '@angular/core';
 import { ButtonFillMode, ButtonThemeColor } from '@progress/kendo-angular-buttons';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { PopupSettings } from '../popup-settings';
@@ -13,11 +13,12 @@ import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI ToolBar SplitButton for Angular]({% slug controltypes_toolbar %}#toc-splitbuttons).
  */
-export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent {
+export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent implements OnInit {
     /**
      * Specifies where button text should be displayed
      */
-    showText: DisplayMode;
+    set showText(value: DisplayMode);
+    get showText(): DisplayMode;
     /**
      * Specifies where button icon should be displayed
      */
@@ -25,7 +26,7 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     /**
      * Sets the text of the SplitButton ([see example]({% slug controltypes_toolbar %}#toc-splitbuttons).
      */
-    set text(text: string);
+    text: string;
     /**
      * Defines the icon that will be rendered next to the button text
      * ([see example]({% slug controltypes_toolbar %}#toc-splitbuttons)).
@@ -135,10 +136,12 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     popupTemplate: TemplateRef<any>;
     toolbarOptions: ToolOptions;
     overflowOptions: ToolOptions;
+    ngOnInit(): void;
     private get overflowButtons();
     private _data;
     private _popupSettings;
     private focusedIndex;
+    private _showText;
     private getNextKey;
     private getPrevKey;
     private toolbarSplitButton;
@@ -166,6 +169,7 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent {
      */
     handleKey(ev: any): boolean;
     private focusButton;
+    private setTextDisplayMode;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarSplitButtonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarSplitButtonComponent, "kendo-toolbar-splitbutton", ["kendoToolBarSplitButton"], { "showText": "showText"; "showIcon": "showIcon"; "text": "text"; "icon": "icon"; "iconClass": "iconClass"; "imageUrl": "imageUrl"; "disabled": "disabled"; "popupSettings": "popupSettings"; "fillMode": "fillMode"; "themeColor": "themeColor"; "look": "look"; "buttonClass": "buttonClass"; "arrowButtonClass": "arrowButtonClass"; "arrowButtonIcon": "arrowButtonIcon"; "textField": "textField"; "data": "data"; }, { "buttonClick": "buttonClick"; "itemClick": "itemClick"; "open": "open"; "close": "close"; }, never, never>;
 }