@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
155 lines (154 loc) • 5.89 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Injectable, NgZone } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { Keys } from '@progress/kendo-angular-common';
import { isArrowKey, isHorizontalArrowKey, isNavigationKey, isVerticalArrowKey } from '../common/util';
import { SelectEvent } from './events';
import { isTabClosable, getActiveTab, isTabElement, isTablistHorizontal, getTabByIndex, getTabHeaderByIndex, resetTabSelection } from './util';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
/**
* @hidden
*/
export class TabStripService {
localization;
ngZone;
owner;
constructor(localization, ngZone) {
this.localization = localization;
this.ngZone = ngZone;
}
onKeyDown(event) {
if (!isTabElement(event.target)) {
return;
}
const key = event.keyCode;
if (this.shouldHandleKey(key)) {
event.preventDefault();
}
else {
return;
}
if (isNavigationKey(key) || isArrowKey(key)) {
this.onNavigate(key);
}
else if (key === Keys.Delete || key === Keys.Backspace) {
this.onDelete();
}
}
onTabSelect(tab, index) {
const selectArgs = new SelectEvent(index, tab.title);
this.owner.tabSelect.emit(selectArgs);
if (!selectArgs.isDefaultPrevented()) {
if (tab.selected) {
this.focusTabHeader(index);
return;
}
this.selectTab(tab, index);
}
}
selectTab(tab, index) {
resetTabSelection(this.owner.tabs);
this.focusTabHeader(index);
tab.selected = true;
if (this.owner.isScrollable) {
this.owner.scrollToSelectedTab();
}
}
onNavigate(keyCode) {
const { tab: activeTab, index: activeIndex } = getActiveTab(this.owner.tabs);
if (!NgZone.isInAngularZone()) {
this.ngZone.run(() => {
if (activeIndex < 0) {
this.owner.selectTab(this.firstNavigableIndex());
return;
}
activeTab.focused = false;
const nextIndex = this.computeNextIndex(activeIndex, keyCode);
this.activateTab(nextIndex);
});
}
}
onDelete() {
const { tab: activeTab, index: activeTabIndex } = getActiveTab(this.owner.tabs);
if (isTabClosable(activeTab, this.owner.closable) && !activeTab.disabled) {
this.ngZone.run(() => {
this.owner.tabClose.emit({ tab: activeTab, index: activeTabIndex });
});
}
}
activateTab(index) {
const tab = getTabByIndex(this.owner.tabs, index);
if (tab.disabled) {
this.focusTabHeader(index);
tab.focused = true;
}
else {
this.onTabSelect(tab, index);
}
}
focusTabHeader(index) {
const tabHeader = getTabHeaderByIndex(this.owner.tabHeaderContainers, index);
tabHeader.nativeElement.focus();
}
shouldHandleKey(keyCode) {
if (isNavigationKey(keyCode)) {
return true;
}
if (isTablistHorizontal(this.owner.tabPosition) && isHorizontalArrowKey(keyCode)) {
return true;
}
if (!isTablistHorizontal(this.owner.tabPosition) && isVerticalArrowKey(keyCode)) {
return true;
}
if (keyCode === Keys.Delete || keyCode === Keys.Backspace) {
return true;
}
return false;
}
computeNextIndex(activeIndex, keyCode) {
switch (keyCode) {
case this.invertKeys(Keys.ArrowLeft, Keys.ArrowRight):
case this.invertKeys(Keys.ArrowUp, Keys.ArrowDown):
return this.prevNavigableIndex(activeIndex);
case this.invertKeys(Keys.ArrowRight, Keys.ArrowLeft):
case this.invertKeys(Keys.ArrowDown, Keys.ArrowUp):
return this.nextNavigableIndex(activeIndex);
case Keys.Home:
return this.firstNavigableIndex();
case Keys.End:
return this.lastNavigableIndex();
default:
return;
}
}
invertKeys(original, inverted) {
return this.localization.rtl ? inverted : original;
}
firstNavigableIndex() {
return 0;
}
lastNavigableIndex() {
return this.owner.tabs.length - 1;
}
prevNavigableIndex(selectedIndex) {
if (selectedIndex - 1 < 0) {
return this.lastNavigableIndex();
}
return selectedIndex - 1;
}
nextNavigableIndex(selectedIndex) {
if (selectedIndex + 1 >= this.owner.tabs.length) {
return this.firstNavigableIndex();
}
return selectedIndex + 1;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripService, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripService, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.NgZone }]; } });