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

package/esm2015/toolbar.component.js

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, HostBinding, ViewChild, ContentChildren, Input, ViewChildren, HostListener, Output, EventEmitter, ViewContainerRef } from '@angular/core';
+import { guid } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
@@ -64,6 +65,15 @@ export 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';
     }
@@ -144,9 +154,6 @@ export class ToolBarComponent {
         }
         this.element.nativeElement.setAttribute('tabindex', this.tabindex.toString());
     }
-    get getRole() {
-        return 'toolbar';
-    }
     get getDir() {
         return this.direction;
     }
@@ -193,6 +200,12 @@ export 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;
                 }
@@ -336,6 +349,7 @@ export 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
@@ -350,6 +364,7 @@ export 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';
@@ -467,7 +482,7 @@ export 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: i3.RefreshService }, { token: i4.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,
@@ -496,19 +511,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)"
@@ -558,19 +580,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)"
@@ -634,7 +663,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: [{

package/esm2015/tools/toolbar-buttongroup.component.js

@@ -97,9 +97,10 @@ export 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();
         }
     }
 }
@@ -168,7 +169,7 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 </span>
             </kendo-buttongroup>
         </ng-template>
-    `, isInline: true, components: [{ type: i2.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: i2.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: i2.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: i2.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: [{

package/esm2015/tools/toolbar-dropdownbutton.component.js

@@ -16,11 +16,6 @@ import * as i3 from "@angular/common";
 export 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.
          */
@@ -85,16 +80,21 @@ export 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.
@@ -159,6 +159,9 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         }
         return this._data;
     }
+    ngOnInit() {
+        this.setTextDisplayMode();
+    }
     get overflowButtons() {
         return [...this.overflowDropDownButtonButtonList.buttons.toArray().filter(b => !b.nativeElement.disabled)];
     }
@@ -210,6 +213,10 @@ export 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: `
@@ -259,7 +266,7 @@ ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             >
             </kendo-toolbar-buttonlist>
         </ng-template>
-    `, isInline: true, components: [{ type: i1.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: i2.ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: ["data", "textField", "disabled", "fillMode", "themeColor"], outputs: ["itemClick"] }], directives: [{ type: i1.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.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2.ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: ["data", "textField", "disabled", "fillMode", "themeColor"], outputs: ["itemClick"] }], directives: [{ type: i1.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: [{

package/esm2015/tools/toolbar-splitbutton.component.js

@@ -15,11 +15,6 @@ import * as i3 from "@angular/common";
 export 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
          */
@@ -96,15 +91,21 @@ export 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
@@ -166,6 +167,9 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         }
         return this._data;
     }
+    ngOnInit() {
+        this.setTextDisplayMode();
+    }
     get overflowButtons() {
         return [this.overflowSplitButton, ...this.overflowSplitButtonButtonList.buttons.toArray().filter(b => !b.nativeElement.disabled)];
     }
@@ -222,6 +226,10 @@ export 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: `