@progress/kendo-angular-spreadsheet 14.0.0-develop.2 → 14.0.0-develop.3

package/action-bar/namebox.component.d.ts

@@ -5,6 +5,7 @@
 import { ElementRef, NgZone } from '@angular/core';
 import { SpreadsheetWidget } from '@progress/kendo-spreadsheet-common';
 import { Observable } from 'rxjs';
+import { SpreadsheetLocalizationService } from '../localization/spreadsheet-localization.service';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -12,14 +13,16 @@ import * as i0 from "@angular/core";
 export declare class NameBoxComponent {
     private ngZone;
     private host;
+    protected localization: SpreadsheetLocalizationService;
     hostClass: boolean;
     keyDownHandler(): void;
     private combobox;
     data: any[];
     spreadsheetWidget: SpreadsheetWidget;
-    constructor(ngZone: NgZone, host: ElementRef);
+    constructor(ngZone: NgZone, host: ElementRef, localization: SpreadsheetLocalizationService);
     value: any;
     get current(): any;
+    get title(): string;
     onSelectionChange(value: any): void;
     onOpen(): void;
     valueNormalizer: (text: Observable<string>) => Observable<{

package/esm2020/action-bar/namebox.component.mjs

@@ -6,15 +6,18 @@ import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';
 import { Component, ElementRef, HostBinding, HostListener, Input, NgZone, ViewChild } from '@angular/core';
 import { SpreadsheetWidget } from '@progress/kendo-spreadsheet-common';
 import { map } from 'rxjs/operators';
+import { SpreadsheetLocalizationService } from '../localization/spreadsheet-localization.service';
 import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-dropdowns";
+import * as i1 from "../localization/spreadsheet-localization.service";
+import * as i2 from "@progress/kendo-angular-dropdowns";
 /**
  * @hidden
  */
 export class NameBoxComponent {
-    constructor(ngZone, host) {
+    constructor(ngZone, host, localization) {
         this.ngZone = ngZone;
         this.host = host;
+        this.localization = localization;
         this.hostClass = true;
         this.valueNormalizer = (text) => text.pipe(map((content) => ({ name: content })));
     }
@@ -40,6 +43,9 @@ export class NameBoxComponent {
             }
         };
     }
+    get title() {
+        return this.localization.get('nameBox');
+    }
     onSelectionChange(value) {
         const editor = this.spreadsheetWidget.view.nameEditor;
         if (editor && value) {
@@ -58,7 +64,7 @@ export class NameBoxComponent {
     }
     ;
 }
-NameBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NameBoxComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+NameBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NameBoxComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i1.SpreadsheetLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 NameBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: { data: "data", spreadsheetWidget: "spreadsheetWidget" }, host: { listeners: { "keydown.enter": "keyDownHandler()" }, properties: { "class.k-spreadsheet-name-editor": "this.hostClass" } }, viewQueries: [{ propertyName: "combobox", first: true, predicate: ["combobox"], descendants: true }], ngImport: i0, template: `
         <kendo-combobox #combobox
             [popupSettings]="{popupClass: 'k-spreadsheet-names-popup'}"
@@ -72,8 +78,9 @@ NameBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             [value]="value"
             (open)="onOpen()"
             [valueNormalizer]="valueNormalizer"
+            [attr.title]="title"
         ></kendo-combobox>
-    `, isInline: true, components: [{ type: i1.ComboBoxComponent, selector: "kendo-combobox", inputs: ["showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "iconClass", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }] });
+    `, isInline: true, components: [{ type: i2.ComboBoxComponent, selector: "kendo-combobox", inputs: ["showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "iconClass", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NameBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -91,10 +98,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [value]="value"
             (open)="onOpen()"
             [valueNormalizer]="valueNormalizer"
+            [attr.title]="title"
         ></kendo-combobox>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i1.SpreadsheetLocalizationService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-spreadsheet-name-editor']
             }], keyDownHandler: [{

package/esm2020/localization/messages.mjs

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export class MessagesDirective extends ComponentMessages {
 }
 MessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessagesDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-MessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: MessagesDirective, selector: "[kendoSpreadsheetMessages]", inputs: { home: "home", file: "file", insert: "insert", saveFile: "saveFile", loadFile: "loadFile", bold: "bold", italic: "italic", underline: "underline", format: "format", fontFamily: "fontFamily", fontSize: "fontSize", undo: "undo", redo: "redo", background: "background", color: "color", gridLines: "gridLines", addColumnLeft: "addColumnLeft", addColumnRight: "addColumnRight", addRowBelow: "addRowBelow", addRowAbove: "addRowAbove", deleteColumn: "deleteColumn", deleteRow: "deleteRow", wrap: "wrap", align: "align", dialogApply: "dialogApply", dialogCancel: "dialogCancel", dialogDelete: "dialogDelete", dialogRename: "dialogRename", delete: "delete", rename: "rename" }, usesInheritance: true, ngImport: i0 });
+MessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: MessagesDirective, selector: "[kendoSpreadsheetMessages]", inputs: { home: "home", file: "file", insert: "insert", saveFile: "saveFile", loadFile: "loadFile", bold: "bold", italic: "italic", underline: "underline", format: "format", fontFamily: "fontFamily", fontSize: "fontSize", undo: "undo", redo: "redo", background: "background", color: "color", gridLines: "gridLines", addColumnLeft: "addColumnLeft", addColumnRight: "addColumnRight", addRowBelow: "addRowBelow", addRowAbove: "addRowAbove", deleteColumn: "deleteColumn", deleteRow: "deleteRow", wrap: "wrap", align: "align", dialogApply: "dialogApply", dialogCancel: "dialogCancel", dialogDelete: "dialogDelete", dialogRename: "dialogRename", delete: "delete", rename: "rename", nameBox: "nameBox", addSheet: "addSheet", sheetsMenu: "sheetsMenu" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessagesDirective, decorators: [{
             type: Directive,
             args: [{
@@ -77,4 +77,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], rename: [{
                 type: Input
+            }], nameBox: [{
+                type: Input
+            }], addSheet: [{
+                type: Input
+            }], sheetsMenu: [{
+                type: Input
             }] } });

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-spreadsheet',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1695996313,
-    version: '14.0.0-develop.2',
+    publishDate: 1696001484,
+    version: '14.0.0-develop.3',
     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',
 };

package/esm2020/sheets-bar/action-dialog.component.mjs

@@ -29,7 +29,7 @@ ActionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <p>Are you sure you want to proceed?</p>
         </ng-container>
 
-        <form class="k-form k-form-md" *ngIf="commandName === 'rename'">
+        <form class="k-form k-form-md" *ngIf="commandName === 'rename'" method="dialog">
             <div class="k-form-field">
                 <label class="k-label k-form-label">Rename sheet</label>
                 <div class="k-form-field-wrap">
@@ -51,7 +51,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <p>Are you sure you want to proceed?</p>
         </ng-container>
 
-        <form class="k-form k-form-md" *ngIf="commandName === 'rename'">
+        <form class="k-form k-form-md" *ngIf="commandName === 'rename'" method="dialog">
             <div class="k-form-field">
                 <label class="k-label k-form-label">Rename sheet</label>
                 <div class="k-form-field-wrap">

package/esm2020/sheets-bar/sheets-bar.component.mjs

@@ -2,14 +2,16 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, HostBinding, Input, NgZone, Renderer2 } from '@angular/core';
+import { Component, ElementRef, HostBinding, HostListener, Input, NgZone, Renderer2, ViewChild } from '@angular/core';
 import { caretAltDownIcon, menuIcon, plusIcon, caretAltLeftIcon, caretAltRightIcon, eyeIcon } from '@progress/kendo-svg-icons';
 import { SpreadsheetService } from '../common/spreadsheet.service';
-import { isDocumentAvailable, isPresent } from '@progress/kendo-angular-common';
+import { ButtonComponent, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
+import { Keys, isDocumentAvailable, isPresent } from '@progress/kendo-angular-common';
 import { DialogService } from '@progress/kendo-angular-dialog';
 import { SpreadsheetLocalizationService } from '../localization/spreadsheet-localization.service';
 import { take } from 'rxjs/operators';
 import { ActionDialogComponent } from './action-dialog.component';
+import { TabStripComponent } from '@progress/kendo-angular-layout';
 import { mapToSheetDescriptor } from '../utils';
 import { getSheetActions } from './utils';
 import * as i0 from "@angular/core";
@@ -19,7 +21,8 @@ import * as i3 from "@progress/kendo-angular-dialog";
 import * as i4 from "@progress/kendo-angular-buttons";
 import * as i5 from "@progress/kendo-angular-layout";
 import * as i6 from "@progress/kendo-angular-common";
-import * as i7 from "@angular/common";
+import * as i7 from "./spreadsheet-tabstrip.directive";
+import * as i8 from "@angular/common";
 /**
  * @hidden
  */
@@ -40,6 +43,7 @@ export class SheetsBarComponent {
         this.selected = false;
         this.openedDdb = null;
         this.eyeIcon = eyeIcon;
+        this.focusedEl = null;
         this.onAddClick = () => {
             if (this.spreadsheetService.spreadsheet) {
                 this.spreadsheetService.spreadsheet.view.sheetsbar.onAddSelect();
@@ -63,6 +67,14 @@ export class SheetsBarComponent {
             }
         };
     }
+    /**
+     * @hidden
+     */
+    onFocus() {
+        this.renderer.setAttribute(this.element.nativeElement, 'tabindex', '-1');
+        this.addButton.focus();
+        this.focusedEl = this.addButton;
+    }
     get activeSheet() {
         return this.spreadsheetService.spreadsheet?.activeSheet()?.name();
     }
@@ -77,6 +89,23 @@ export class SheetsBarComponent {
         const nextBtn = this.element.nativeElement.querySelector('.k-tabstrip-next');
         this.renderer.addClass(prevBtn, 'k-order-1');
         this.renderer.addClass(nextBtn, 'k-order-2');
+        this.renderer.setAttribute(this.element.nativeElement, 'tabindex', '0');
+        this.hostKeyDownSub = this.renderer.listen(this.element.nativeElement, 'keydown', (ev) => this.onHostKeyDown(ev));
+    }
+    ngOnDestroy() {
+        if (this.hostKeyDownSub) {
+            this.hostKeyDownSub();
+        }
+    }
+    onTabStripNavigationEnd(ev) {
+        if (ev === 'last') {
+            this.addButton.focus();
+            this.focusedEl = this.addButton;
+        }
+        else {
+            this.menuButton.focus();
+            this.focusedEl = this.menuButton;
+        }
     }
     onTabSelect(ev) {
         if (ev.title !== this.activeSheet) {
@@ -107,16 +136,19 @@ export class SheetsBarComponent {
         const sheet = this.sheets.find(s => s.text === item.text);
         this.selectSheet(sheet.text);
     }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
     openDialog(dataItem, sheet) {
         const dialogSettings = {
             appendTo: this.spreadsheetService.dialogContainer,
-            title: this.localization.get(dataItem.commandName),
+            title: this.messageFor(dataItem.commandName),
             content: ActionDialogComponent,
             actions: [{
-                    text: this.localization.get(dataItem.dialogButton),
+                    text: this.messageFor(dataItem.dialogButton),
                     themeColor: 'primary'
                 }, {
-                    text: this.localization.get('dialogCancel')
+                    text: this.messageFor('dialogCancel')
                 }],
             actionsLayout: 'stretched',
             autoFocusedElement: '.k-textbox .k-input-inner, .k-button-solid-primary'
@@ -125,7 +157,7 @@ export class SheetsBarComponent {
         const dialogInstance = dialog.dialog.instance;
         const dialogContent = dialog.content.instance;
         dialogInstance.action.pipe(take(1)).subscribe((event) => {
-            if (event.text === this.localization.get(dataItem.dialogButton)) {
+            if (event.text === this.messageFor(dataItem.dialogButton)) {
                 const sheetsBar = this.spreadsheetService.spreadsheet.view.sheetsbar;
                 if (sheetsBar) {
                     dataItem.commandName === 'delete' ? sheetsBar.onSheetRemove(sheet.text) : sheetsBar.onSheetRename(dialogContent.value, this.sheets.indexOf(sheet));
@@ -150,7 +182,6 @@ export class SheetsBarComponent {
         this.ngZone.run(() => {
             const newSheets = this.spreadsheetService.spreadsheet.sheets();
             const sheetDesc = mapToSheetDescriptor(newSheets);
-            console.log(newSheets, 'new');
             this.sheets = sheetDesc.map((item, index, items) => ({
                 ...item,
                 inEdit: false,
@@ -163,108 +194,161 @@ export class SheetsBarComponent {
             }));
         });
     }
+    onHostKeyDown(ev) {
+        const activeSheetIndex = this.sheets.find(s => s.name === this.activeSheet).index;
+        switch (ev.keyCode) {
+            case Keys.ArrowRight:
+                this.focusNext(activeSheetIndex);
+                break;
+            case Keys.ArrowLeft:
+                this.focusPrev(activeSheetIndex);
+                break;
+            case Keys.Tab:
+                this.resetNavigation();
+                break;
+            default:
+                break;
+        }
+    }
+    focusNext(sheetIndex) {
+        switch (this.focusedEl) {
+            case this.addButton:
+                this.menuButton.focus();
+                this.focusedEl = this.menuButton;
+                break;
+            case this.menuButton:
+                this.tabstrip.selectTab(sheetIndex);
+                this.focusedEl = this.tabstrip;
+                break;
+            default:
+                break;
+        }
+    }
+    focusPrev(sheetIndex) {
+        switch (this.focusedEl) {
+            case this.addButton:
+                this.tabstrip.selectTab(sheetIndex);
+                this.focusedEl = this.tabstrip;
+                break;
+            case this.menuButton:
+                this.addButton.focus();
+                this.focusedEl = this.addButton;
+                break;
+            default:
+                break;
+        }
+    }
+    resetNavigation() {
+        if (this.focusedEl !== this.tabstrip) {
+            this.focusedEl.blur();
+        }
+        this.focusedEl = null;
+        this.renderer.setAttribute(this.element.nativeElement, 'tabindex', '0');
+    }
 }
 SheetsBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SheetsBarComponent, deps: [{ token: i1.SpreadsheetService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.SpreadsheetLocalizationService }, { token: i3.DialogService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: { sheets: "sheets", sheetDescriptors: "sheetDescriptors" }, host: { properties: { "class.k-spreadsheet-sheets-bar": "this.hostClasses" } }, ngImport: i0, template: `
-        <button kendoButton
-            title="Add new sheet"
+SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: { sheets: "sheets", sheetDescriptors: "sheetDescriptors" }, host: { listeners: { "focus": "onFocus()" }, properties: { "class.k-spreadsheet-sheets-bar": "this.hostClasses" } }, viewQueries: [{ propertyName: "addButton", first: true, predicate: ["addButton"], descendants: true }, { propertyName: "menuButton", first: true, predicate: ["menuButton"], descendants: true }, { propertyName: "tabstrip", first: true, predicate: ["tabstrip"], descendants: true }], ngImport: i0, template: `
+        <button kendoButton #addButton
+            [title]="messageFor('addSheet')"
             type="button"
             fillMode="flat"
             class="k-spreadsheet-sheet-add"
             icon="plus"
             [svgIcon]="plusIcon"
-            [kendoEventsOutsideAngular]="{click: onAddClick}">
+            [kendoEventsOutsideAngular]="{click: onAddClick}"
+            [tabIndex]="-1">
         </button>
-        <kendo-dropdownbutton #menuDdb
+        <kendo-dropdownbutton #menuButton
             fillMode="flat"
             buttonClass="k-spreadsheet-sheets-menu"
             icon="menu"
             [svgIcon]="menuIcon"
             [data]="sheetsMenuList"
             (itemClick)="onMenuItemClick($event)"
-            (open)="onOpen(menuDdb)">
+            (open)="onOpen(menuButton)"
+            [buttonAttributes]="{title: messageFor('sheetsMenu')}"
+            [tabIndex]="-1">
         </kendo-dropdownbutton>
-        <kendo-tabstrip
+        <kendo-tabstrip #tabstrip kendoSpreadsheetTabStrip
             [tabPosition]="'bottom'"
             [showContentArea]="false"
             [scrollable]="{prevButtonIcon: 'caret-alt-left', prevSVGButtonIcon: caretAltLeftIcon, nextButtonIcon: 'caret-alt-right', nextSVGButtonIcon: caretAltRightIcon}"
             class="k-spreadsheet-sheets k-overflow-hidden"
             (tabSelect)="onTabSelect($event)"
-            [keepTabContent]="true">
-            <ng-container *ngFor="let sheet of sheets">
-                <kendo-tabstrip-tab
+            (navigationEnd)="onTabStripNavigationEnd($event)">
+            <kendo-tabstrip-tab *ngFor="let sheet of sheets"
                 [title]="sheet.text"
                 [selected]="sheet.text === activeSheet">
-                    <ng-template kendoTabTemplate>
-                        <span class="k-link">{{sheet.text}}</span>
-                        <kendo-dropdownbutton #sheetDdb
-                            fillMode="flat"
-                            icon="caret-alt-down"
-                            [svgIcon]="caretAltDownIcon"
-                            buttonClass="k-menu-button"
-                            [data]="sheet.sheetActions"
-                            [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
-                            (open)="onOpen(sheetDdb)"
-                            (close)="onClose()"
-                            (click)="$event.stopPropagation()"
-                            (itemClick)="onActionClick($event, sheet)">
-                        </kendo-dropdownbutton>
-                    </ng-template>
-                </kendo-tabstrip-tab>
-            </ng-container>
+                <ng-template kendoTabTemplate>
+                    <span class="k-link">{{sheet.text}}</span>
+                    <kendo-dropdownbutton #sheetDdb
+                        fillMode="flat"
+                        icon="caret-alt-down"
+                        [svgIcon]="caretAltDownIcon"
+                        buttonClass="k-menu-button"
+                        [data]="sheet.sheetActions"
+                        [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
+                        (open)="onOpen(sheetDdb)"
+                        (close)="onClose()"
+                        (click)="$event.stopPropagation()"
+                        (itemClick)="onActionClick($event, sheet)">
+                    </kendo-dropdownbutton>
+                </ng-template>
+            </kendo-tabstrip-tab>
         </kendo-tabstrip>
-    `, isInline: true, components: [{ type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i4.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i5.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i5.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }], directives: [{ type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.TabTemplateDirective, selector: "[kendoTabTemplate]" }] });
+    `, isInline: true, components: [{ type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i4.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i5.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i5.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }], directives: [{ type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.SpreadsheetTabStripDirective, selector: "[kendoSpreadsheetTabStrip]", outputs: ["navigationEnd"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.TabTemplateDirective, selector: "[kendoTabTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SheetsBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoSpreadsheetSheetsBar]',
                     template: `
-        <button kendoButton
-            title="Add new sheet"
+        <button kendoButton #addButton
+            [title]="messageFor('addSheet')"
             type="button"
             fillMode="flat"
             class="k-spreadsheet-sheet-add"
             icon="plus"
             [svgIcon]="plusIcon"
-            [kendoEventsOutsideAngular]="{click: onAddClick}">
+            [kendoEventsOutsideAngular]="{click: onAddClick}"
+            [tabIndex]="-1">
         </button>
-        <kendo-dropdownbutton #menuDdb
+        <kendo-dropdownbutton #menuButton
             fillMode="flat"
             buttonClass="k-spreadsheet-sheets-menu"
             icon="menu"
             [svgIcon]="menuIcon"
             [data]="sheetsMenuList"
             (itemClick)="onMenuItemClick($event)"
-            (open)="onOpen(menuDdb)">
+            (open)="onOpen(menuButton)"
+            [buttonAttributes]="{title: messageFor('sheetsMenu')}"
+            [tabIndex]="-1">
         </kendo-dropdownbutton>
-        <kendo-tabstrip
+        <kendo-tabstrip #tabstrip kendoSpreadsheetTabStrip
             [tabPosition]="'bottom'"
             [showContentArea]="false"
             [scrollable]="{prevButtonIcon: 'caret-alt-left', prevSVGButtonIcon: caretAltLeftIcon, nextButtonIcon: 'caret-alt-right', nextSVGButtonIcon: caretAltRightIcon}"
             class="k-spreadsheet-sheets k-overflow-hidden"
             (tabSelect)="onTabSelect($event)"
-            [keepTabContent]="true">
-            <ng-container *ngFor="let sheet of sheets">
-                <kendo-tabstrip-tab
+            (navigationEnd)="onTabStripNavigationEnd($event)">
+            <kendo-tabstrip-tab *ngFor="let sheet of sheets"
                 [title]="sheet.text"
                 [selected]="sheet.text === activeSheet">
-                    <ng-template kendoTabTemplate>
-                        <span class="k-link">{{sheet.text}}</span>
-                        <kendo-dropdownbutton #sheetDdb
-                            fillMode="flat"
-                            icon="caret-alt-down"
-                            [svgIcon]="caretAltDownIcon"
-                            buttonClass="k-menu-button"
-                            [data]="sheet.sheetActions"
-                            [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
-                            (open)="onOpen(sheetDdb)"
-                            (close)="onClose()"
-                            (click)="$event.stopPropagation()"
-                            (itemClick)="onActionClick($event, sheet)">
-                        </kendo-dropdownbutton>
-                    </ng-template>
-                </kendo-tabstrip-tab>
-            </ng-container>
+                <ng-template kendoTabTemplate>
+                    <span class="k-link">{{sheet.text}}</span>
+                    <kendo-dropdownbutton #sheetDdb
+                        fillMode="flat"
+                        icon="caret-alt-down"
+                        [svgIcon]="caretAltDownIcon"
+                        buttonClass="k-menu-button"
+                        [data]="sheet.sheetActions"
+                        [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
+                        (open)="onOpen(sheetDdb)"
+                        (close)="onClose()"
+                        (click)="$event.stopPropagation()"
+                        (itemClick)="onActionClick($event, sheet)">
+                    </kendo-dropdownbutton>
+                </ng-template>
+            </kendo-tabstrip-tab>
         </kendo-tabstrip>
     `
                 }]
@@ -275,4 +359,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], sheetDescriptors: [{
                 type: Input
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], addButton: [{
+                type: ViewChild,
+                args: ['addButton']
+            }], menuButton: [{
+                type: ViewChild,
+                args: ['menuButton']
+            }], tabstrip: [{
+                type: ViewChild,
+                args: ['tabstrip']
             }] } });

package/esm2020/sheets-bar/spreadsheet-tabstrip.directive.mjs

@@ -0,0 +1,59 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, EventEmitter, Output } from '@angular/core';
+import { TabStripComponent } from '@progress/kendo-angular-layout';
+import { Keys } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-layout";
+/**
+ * @hidden
+ */
+export class SpreadsheetTabStripDirective {
+    constructor(host) {
+        this.host = host;
+        this.navigationEnd = new EventEmitter();
+    }
+    ngAfterViewInit() {
+        this.host.tablist.nativeElement.addEventListener('keydown', this.onKeyDown.bind(this), true);
+    }
+    ngOnDestroy() {
+        this.host.tablist.nativeElement.removeEventListener('keydown', this.onKeyDown.bind(this), true);
+    }
+    get isLastActive() {
+        const lastIndex = this.host.tabs.length - 1;
+        return Array.from(this.host.tabs)[lastIndex].selected;
+    }
+    get isFirstActive() {
+        return Array.from(this.host.tabs)[0].selected;
+    }
+    onKeyDown(ev) {
+        switch (ev.keyCode) {
+            case Keys.ArrowLeft:
+                if (this.isFirstActive) {
+                    ev.stopImmediatePropagation();
+                    this.navigationEnd.emit('first');
+                }
+                break;
+            case Keys.ArrowRight:
+                if (this.isLastActive) {
+                    ev.stopImmediatePropagation();
+                    this.navigationEnd.emit('last');
+                }
+                break;
+            default:
+                break;
+        }
+    }
+}
+SpreadsheetTabStripDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetTabStripDirective, deps: [{ token: i1.TabStripComponent }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetTabStripDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetTabStripDirective, selector: "[kendoSpreadsheetTabStrip]", outputs: { navigationEnd: "navigationEnd" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetTabStripDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSpreadsheetTabStrip]',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.TabStripComponent }]; }, propDecorators: { navigationEnd: [{
+                type: Output
+            }] } });