ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
2,068 lines • 102 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ElementRef, Input, Component, input, TemplateRef, Directive, signal, computed, effect, untracked, ChangeDetectionStrategy, ViewEncapsulation, booleanAttribute, EventEmitter, ChangeDetectorRef, Output, NgZone, DestroyRef, ContentChildren, ViewChild, InjectionToken, ContentChild, QueryList, contentChildren, forwardRef, NgModule } from '@angular/core';
import * as i1 from 'ng-zorro-antd/core/outlet';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
import * as i2 from 'ng-zorro-antd/icon';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NgTemplateOutlet } from '@angular/common';
import { isAnimationEnabled } from 'ng-zorro-antd/core/animation';
import { requestAnimationFrame } from 'ng-zorro-antd/core/polyfill';
import { generateClassName, fromEventOutsideAngular, isNil, wrapIntoObservable } from 'ng-zorro-antd/core/util';
import { RouterLink, Router, NavigationEnd } from '@angular/router';
import * as i1$2 from '@angular/cdk/a11y';
import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
import { Directionality } from '@angular/cdk/bidi';
import { coerceCssPixelValue, coerceNumberProperty } from '@angular/cdk/coercion';
import { hasModifierKey, SPACE, ENTER, DOWN_ARROW, RIGHT_ARROW, UP_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
import { ViewportRuler } from '@angular/cdk/overlay';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { animationFrameScheduler, asapScheduler, of, merge, Subject, Subscription } from 'rxjs';
import { auditTime, startWith, first, filter, delay } from 'rxjs/operators';
import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
import * as i2$1 from 'ng-zorro-antd/dropdown';
import { NzDropdownModule } from 'ng-zorro-antd/dropdown';
import * as i1$1 from 'ng-zorro-antd/menu';
import { NzMenuModule } from 'ng-zorro-antd/menu';
import { __esDecorate, __runInitializers } from 'tslib';
import { WithConfig, NzConfigService } from 'ng-zorro-antd/core/config';
import { PREFIX } from 'ng-zorro-antd/core/logger';
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
class NzTabChangeEvent {
index;
tab;
}
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
class NzTabAddButtonComponent {
addIcon = 'plus';
element = inject((ElementRef)).nativeElement;
getElementWidth() {
return this.element?.offsetWidth || 0;
}
getElementHeight() {
return this.element?.offsetHeight || 0;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabAddButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: NzTabAddButtonComponent, isStandalone: true, selector: "nz-tab-add-button, button[nz-tab-add-button]", inputs: { addIcon: "addIcon" }, host: { attributes: { "aria-label": "Add tab", "type": "button" }, classAttribute: "ant-tabs-nav-add" }, ngImport: i0, template: `
<ng-container *nzStringTemplateOutlet="addIcon; let icon">
<nz-icon [nzType]="icon" nzTheme="outline" />
</ng-container>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i1.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabAddButtonComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-tab-add-button, button[nz-tab-add-button]',
template: `
<ng-container *nzStringTemplateOutlet="addIcon; let icon">
<nz-icon [nzType]="icon" nzTheme="outline" />
</ng-container>
`,
host: {
class: 'ant-tabs-nav-add',
'aria-label': 'Add tab',
type: 'button'
},
imports: [NzOutletModule, NzIconModule]
}]
}], propDecorators: { addIcon: [{
type: Input
}] } });
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
class NzTabBarExtraContentDirective {
position = input('end', { ...(ngDevMode ? { debugName: "position" } : {}), alias: 'nzTabBarExtraContent' });
templateRef = inject(TemplateRef);
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabBarExtraContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: NzTabBarExtraContentDirective, isStandalone: true, selector: "[nzTabBarExtraContent]:not(nz-tabs)", inputs: { position: { classPropertyName: "position", publicName: "nzTabBarExtraContent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabBarExtraContentDirective, decorators: [{
type: Directive,
args: [{
selector: '[nzTabBarExtraContent]:not(nz-tabs)'
}]
}], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzTabBarExtraContent", required: false }] }] } });
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
const CLASS_NAME = 'ant-tabs-tabpane';
const ANIMATION_PREFIX = 'ant-tabs-switch';
const ANIMATION_CLASS_MAP = {
'enter-start': [generateClassName(ANIMATION_PREFIX, 'enter'), generateClassName(ANIMATION_PREFIX, 'enter-start')],
'enter-active': [generateClassName(ANIMATION_PREFIX, 'enter'), generateClassName(ANIMATION_PREFIX, 'enter-active')],
'leave-start': [generateClassName(ANIMATION_PREFIX, 'leave'), generateClassName(ANIMATION_PREFIX, 'leave-start')],
'leave-active': [generateClassName(ANIMATION_PREFIX, 'leave'), generateClassName(ANIMATION_PREFIX, 'leave-active')],
// If animation is enabled, we should hide the tabpane after the leave animation is done
hidden: [generateClassName(CLASS_NAME, 'hidden')],
void: []
};
class NzTabBodyComponent {
elementRef = inject(ElementRef);
content = input(null, ...(ngDevMode ? [{ debugName: "content" }] : []));
active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
animated = input(true, ...(ngDevMode ? [{ debugName: "animated" }] : []));
_animationState = signal('void', ...(ngDevMode ? [{ debugName: "_animationState" }] : []));
_animationEnabled = isAnimationEnabled(() => this.animated());
class = computed(() => {
const cls = [CLASS_NAME];
if (this._animationEnabled()) {
cls.push(...ANIMATION_CLASS_MAP[this._animationState()]);
}
else if (!this.active()) {
cls.push(generateClassName(CLASS_NAME, 'hidden'));
}
return cls;
}, ...(ngDevMode ? [{ debugName: "class" }] : []));
constructor() {
effect(() => {
if (!this._animationEnabled()) {
return;
}
if (!this.active()) {
untracked(() => this._animationState.set('leave-start'));
requestAnimationFrame(() => {
this._animationState.set('leave-active');
});
}
else {
untracked(() => this._animationState.set('enter-start'));
requestAnimationFrame(() => {
this._animationState.set('enter-active');
});
}
});
}
_onTransitionEnd(event) {
// avoid event bubbling from child elements
if (event.target !== this.elementRef.nativeElement) {
return;
}
const currentState = this._animationState();
if (currentState === 'enter-active') {
this._animationState.set('void');
}
else if (currentState === 'leave-active') {
this._animationState.set('hidden');
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NzTabBodyComponent, isStandalone: true, selector: "[nz-tab-body]", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "transitionend": "_onTransitionEnd($event)" }, properties: { "class": "class()", "class.ant-tabs-tabpane-active": "active()", "attr.tabindex": "active() ? 0 : -1", "attr.aria-hidden": "!active()" } }, exportAs: ["nzTabBody"], ngImport: i0, template: `<ng-template [ngTemplateOutlet]="content()" />`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabBodyComponent, decorators: [{
type: Component,
args: [{
selector: '[nz-tab-body]',
exportAs: 'nzTabBody',
imports: [NgTemplateOutlet],
template: `<ng-template [ngTemplateOutlet]="content()" />`,
host: {
'[class]': 'class()',
'[class.ant-tabs-tabpane-active]': 'active()',
'[attr.tabindex]': 'active() ? 0 : -1',
'[attr.aria-hidden]': '!active()',
'(transitionend)': '_onTransitionEnd($event)'
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }] } });
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
class NzTabCloseButtonComponent {
closeIcon = 'close';
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabCloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: NzTabCloseButtonComponent, isStandalone: true, selector: "nz-tab-close-button, button[nz-tab-close-button]", inputs: { closeIcon: "closeIcon" }, host: { attributes: { "aria-label": "Close tab", "type": "button" }, classAttribute: "ant-tabs-tab-remove" }, ngImport: i0, template: `
<ng-container *nzStringTemplateOutlet="closeIcon; let icon">
<nz-icon [nzType]="icon" nzTheme="outline" />
</ng-container>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i1.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabCloseButtonComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-tab-close-button, button[nz-tab-close-button]',
template: `
<ng-container *nzStringTemplateOutlet="closeIcon; let icon">
<nz-icon [nzType]="icon" nzTheme="outline" />
</ng-container>
`,
host: {
class: 'ant-tabs-tab-remove',
'aria-label': 'Close tab',
type: 'button'
},
imports: [NzOutletModule, NzIconModule]
}]
}], propDecorators: { closeIcon: [{
type: Input
}] } });
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
/**
* Fix https://github.com/angular/angular/issues/8563
*/
class NzTabLinkTemplateDirective {
templateRef = inject(TemplateRef, { host: true });
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabLinkTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: NzTabLinkTemplateDirective, isStandalone: true, selector: "ng-template[nzTabLink]", exportAs: ["nzTabLinkTemplate"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabLinkTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: 'ng-template[nzTabLink]',
exportAs: 'nzTabLinkTemplate'
}]
}] });
/**
* This component is for catching `routerLink` directive.
*/
class NzTabLinkDirective {
elementRef = inject((ElementRef));
routerLink = inject(RouterLink, { self: true, optional: true });
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: NzTabLinkDirective, isStandalone: true, selector: "a[nz-tab-link]", exportAs: ["nzTabLink"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabLinkDirective, decorators: [{
type: Directive,
args: [{
selector: 'a[nz-tab-link]',
exportAs: 'nzTabLink'
}]
}] });
class NzTabNavItemDirective {
disabled = false;
tab;
active = false;
elementRef = inject((ElementRef));
el = this.elementRef.nativeElement;
parentElement = this.el.parentElement;
focus() {
this.el.focus({ preventScroll: true });
}
get width() {
return this.parentElement.offsetWidth;
}
get height() {
return this.parentElement.offsetHeight;
}
get left() {
return this.parentElement.offsetLeft;
}
get top() {
return this.parentElement.offsetTop;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabNavItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.0", type: NzTabNavItemDirective, isStandalone: true, selector: "[nzTabNavItem]", inputs: { disabled: ["disabled", "disabled", booleanAttribute], tab: "tab", active: ["active", "active", booleanAttribute] }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabNavItemDirective, decorators: [{
type: Directive,
args: [{
selector: '[nzTabNavItem]'
}]
}], propDecorators: { disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], tab: [{
type: Input
}], active: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
class NzTabNavOperationComponent {
items = [];
addable = false;
addIcon = 'plus';
addClicked = new EventEmitter();
selected = new EventEmitter();
closeAnimationWaitTimeoutId;
menuOpened = false;
cdr = inject(ChangeDetectorRef);
element = inject((ElementRef)).nativeElement;
onSelect(item) {
if (!item.disabled) {
// ignore nzCanDeactivate
item.tab.nzClick.emit();
this.selected.emit(item);
}
}
onContextmenu(item, e) {
if (!item.disabled) {
item.tab.nzContextmenu.emit(e);
}
}
showItems() {
clearTimeout(this.closeAnimationWaitTimeoutId);
this.menuOpened = true;
this.cdr.markForCheck();
}
menuVisChange(visible) {
if (!visible) {
this.closeAnimationWaitTimeoutId = setTimeout(() => {
this.menuOpened = false;
this.cdr.markForCheck();
}, 150);
}
}
getElementWidth() {
return this.element?.offsetWidth || 0;
}
getElementHeight() {
return this.element?.offsetHeight || 0;
}
ngOnDestroy() {
clearTimeout(this.closeAnimationWaitTimeoutId);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabNavOperationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NzTabNavOperationComponent, isStandalone: true, selector: "nz-tab-nav-operation", inputs: { items: "items", addable: ["addable", "addable", booleanAttribute], addIcon: "addIcon" }, outputs: { addClicked: "addClicked", selected: "selected" }, host: { properties: { "class.ant-tabs-nav-operations-hidden": "items.length === 0" }, classAttribute: "ant-tabs-nav-operations" }, exportAs: ["nzTabNavOperation"], ngImport: i0, template: `
<button
nz-dropdown
class="ant-tabs-nav-more"
type="button"
tabindex="-1"
aria-hidden="true"
nzOverlayClassName="nz-tabs-dropdown"
#dropdownTrigger="nzDropdown"
[nzDropdownMenu]="menu"
[nzOverlayStyle]="{ minWidth: '46px' }"
[nzMatchWidthElement]="null"
(nzVisibleChange)="menuVisChange($event)"
(mouseenter)="showItems()"
>
<nz-icon nzType="ellipsis" />
</button>
<nz-dropdown-menu #menu="nzDropdownMenu">
@if (menuOpened) {
<ul nz-menu>
@for (item of items; track item) {
<li
nz-menu-item
class="ant-tabs-dropdown-menu-item"
[class.ant-tabs-dropdown-menu-item-disabled]="item.disabled"
[nzSelected]="item.active"
[nzDisabled]="item.disabled"
(click)="onSelect(item)"
(contextmenu)="onContextmenu(item, $event)"
>
<ng-container *nzStringTemplateOutlet="item.tab.label; context: { visible: false }">
{{ item.tab.label }}
</ng-container>
</li>
}
</ul>
}
</nz-dropdown-menu>
@if (addable) {
<button nz-tab-add-button [addIcon]="addIcon" (click)="addClicked.emit()"></button>
}
`, isInline: true, dependencies: [{ kind: "ngmodule", type: NzDropdownModule }, { kind: "directive", type: i1$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i1$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i2$1.NzDropdownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzArrow", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i2$1.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i1.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { kind: "component", type: NzTabAddButtonComponent, selector: "nz-tab-add-button, button[nz-tab-add-button]", inputs: ["addIcon"] }, { kind: "ngmodule", type: NzMenuModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabNavOperationComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-tab-nav-operation',
exportAs: 'nzTabNavOperation',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: `
<button
nz-dropdown
class="ant-tabs-nav-more"
type="button"
tabindex="-1"
aria-hidden="true"
nzOverlayClassName="nz-tabs-dropdown"
#dropdownTrigger="nzDropdown"
[nzDropdownMenu]="menu"
[nzOverlayStyle]="{ minWidth: '46px' }"
[nzMatchWidthElement]="null"
(nzVisibleChange)="menuVisChange($event)"
(mouseenter)="showItems()"
>
<nz-icon nzType="ellipsis" />
</button>
<nz-dropdown-menu #menu="nzDropdownMenu">
@if (menuOpened) {
<ul nz-menu>
@for (item of items; track item) {
<li
nz-menu-item
class="ant-tabs-dropdown-menu-item"
[class.ant-tabs-dropdown-menu-item-disabled]="item.disabled"
[nzSelected]="item.active"
[nzDisabled]="item.disabled"
(click)="onSelect(item)"
(contextmenu)="onContextmenu(item, $event)"
>
<ng-container *nzStringTemplateOutlet="item.tab.label; context: { visible: false }">
{{ item.tab.label }}
</ng-container>
</li>
}
</ul>
}
</nz-dropdown-menu>
@if (addable) {
<button nz-tab-add-button [addIcon]="addIcon" (click)="addClicked.emit()"></button>
}
`,
host: {
class: 'ant-tabs-nav-operations',
'[class.ant-tabs-nav-operations-hidden]': 'items.length === 0'
},
imports: [NzDropdownModule, NzIconModule, NzOutletModule, NzTabAddButtonComponent, NzMenuModule]
}]
}], propDecorators: { items: [{
type: Input
}], addable: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], addIcon: [{
type: Input
}], addClicked: [{
type: Output
}], selected: [{
type: Output
}] } });
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
const MIN_SWIPE_DISTANCE = 0.1;
const STOP_SWIPE_DISTANCE = 0.01;
const REFRESH_INTERVAL = 20;
const SPEED_OFF_MULTIPLE = 0.995 ** REFRESH_INTERVAL;
class NzTabScrollListDirective {
ngZone = inject(NgZone);
destroyRef = inject(DestroyRef);
el = inject((ElementRef)).nativeElement;
lastWheelDirection = null;
lastWheelTimestamp = 0;
lastTimestamp = 0;
lastTimeDiff = 0;
lastMixedWheel = 0;
lastWheelPrevent = false;
touchPosition = null;
lastOffset = null;
motion = -1;
offsetChange = new EventEmitter();
tabScroll = new EventEmitter();
ngOnInit() {
const wheel$ = fromEventOutsideAngular(this.el, 'wheel');
const touchstart$ = fromEventOutsideAngular(this.el, 'touchstart');
const touchmove$ = fromEventOutsideAngular(this.el, 'touchmove');
const touchend$ = fromEventOutsideAngular(this.el, 'touchend');
this.subscribeWrap('wheel', wheel$, this.onWheel);
this.subscribeWrap('touchstart', touchstart$, this.onTouchStart);
this.subscribeWrap('touchmove', touchmove$, this.onTouchMove);
this.subscribeWrap('touchend', touchend$, this.onTouchEnd);
}
subscribeWrap(type, observable, handler) {
return observable.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(event => {
this.tabScroll.emit({
type,
event
});
if (!event.defaultPrevented) {
handler(event);
}
});
}
onTouchEnd = (e) => {
if (!this.touchPosition) {
return;
}
const lastOffset = this.lastOffset;
const lastTimeDiff = this.lastTimeDiff;
this.lastOffset = this.touchPosition = null;
if (lastOffset) {
const distanceX = lastOffset.x / lastTimeDiff;
const distanceY = lastOffset.y / lastTimeDiff;
const absX = Math.abs(distanceX);
const absY = Math.abs(distanceY);
// Skip swipe if low distance
if (Math.max(absX, absY) < MIN_SWIPE_DISTANCE) {
return;
}
let currentX = distanceX;
let currentY = distanceY;
this.motion = window.setInterval(() => {
if (Math.abs(currentX) < STOP_SWIPE_DISTANCE && Math.abs(currentY) < STOP_SWIPE_DISTANCE) {
window.clearInterval(this.motion);
return;
}
currentX *= SPEED_OFF_MULTIPLE;
currentY *= SPEED_OFF_MULTIPLE;
this.onOffset(currentX * REFRESH_INTERVAL, currentY * REFRESH_INTERVAL, e);
}, REFRESH_INTERVAL);
}
};
onTouchMove = (e) => {
if (!this.touchPosition) {
return;
}
e.preventDefault();
const { screenX, screenY } = e.touches[0];
const offsetX = screenX - this.touchPosition.x;
const offsetY = screenY - this.touchPosition.y;
this.onOffset(offsetX, offsetY, e);
const now = Date.now();
this.lastTimeDiff = now - this.lastTimestamp;
this.lastTimestamp = now;
this.lastOffset = { x: offsetX, y: offsetY };
this.touchPosition = { x: screenX, y: screenY };
};
onTouchStart = (e) => {
const { screenX, screenY } = e.touches[0];
this.touchPosition = { x: screenX, y: screenY };
window.clearInterval(this.motion);
};
onWheel = (e) => {
const { deltaX, deltaY } = e;
let mixed;
const absX = Math.abs(deltaX);
const absY = Math.abs(deltaY);
if (absX === absY) {
mixed = this.lastWheelDirection === 'x' ? deltaX : deltaY;
}
else if (absX > absY) {
mixed = deltaX;
this.lastWheelDirection = 'x';
}
else {
mixed = deltaY;
this.lastWheelDirection = 'y';
}
// Optimize mac touch scroll
const now = Date.now();
const absMixed = Math.abs(mixed);
if (now - this.lastWheelTimestamp > 100 || absMixed - this.lastMixedWheel > 10) {
this.lastWheelPrevent = false;
}
this.onOffset(-mixed, -mixed, e);
if (e.defaultPrevented || this.lastWheelPrevent) {
this.lastWheelPrevent = true;
}
this.lastWheelTimestamp = now;
this.lastMixedWheel = absMixed;
};
onOffset(x, y, event) {
if (this.offsetChange.observers.length) {
this.ngZone.run(() => {
this.offsetChange.emit({
x,
y,
event
});
});
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabScrollListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: NzTabScrollListDirective, isStandalone: true, selector: "[nzTabScrollList]", outputs: { offsetChange: "offsetChange", tabScroll: "tabScroll" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabScrollListDirective, decorators: [{
type: Directive,
args: [{
selector: '[nzTabScrollList]'
}]
}], propDecorators: { offsetChange: [{
type: Output
}], tabScroll: [{
type: Output
}] } });
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
class NzTabsInkBarDirective {
ngZone = inject(NgZone);
el = inject(ElementRef).nativeElement;
directionality = inject(Directionality).valueSignal;
position = input('horizontal', ...(ngDevMode ? [{ debugName: "position" }] : []));
animated = input(true, ...(ngDevMode ? [{ debugName: "animated" }] : []));
indicator = input(...(ngDevMode ? [undefined, { debugName: "indicator" }] : []));
animationEnabled = isAnimationEnabled(() => this.animated());
alignToElement(element) {
this.ngZone.runOutsideAngular(() => {
requestAnimationFrame(() => this.setStyles(element));
});
}
setStyles(element) {
const { size, align } = this.indicator() || {};
if (this.position() === 'horizontal') {
this.el.style.top = '';
this.el.style.height = '';
this.el.style.width = coerceCssPixelValue(size ? (typeof size === 'number' ? size : size(element?.offsetWidth ?? 0)) : (element?.offsetWidth ?? 0));
this.el.style.left = this.setIndicatorPosition(element, align);
}
else {
this.el.style.left = '';
this.el.style.width = '';
this.el.style.height = coerceCssPixelValue(!isNil(size)
? typeof size === 'number'
? size
: size(element?.offsetHeight ?? 0)
: (element?.offsetHeight ?? 0));
this.el.style.top = this.setIndicatorPosition(element, align);
}
}
setIndicatorPosition(element, align = 'start') {
const isHorizontal = this.position() === 'horizontal';
const itemOffset = isHorizontal ? (element?.offsetLeft ?? 0) : (element?.offsetTop ?? 0);
const itemSize = isHorizontal ? (element?.offsetWidth ?? 0) : (element?.offsetHeight ?? 0);
const indicatorSize = isHorizontal ? this.el.offsetWidth : this.el.offsetHeight;
const isRtl = isHorizontal && this.directionality() === 'rtl';
const resolvedAlign = isRtl && align !== 'center' ? (align === 'start' ? 'end' : 'start') : align;
switch (resolvedAlign) {
case 'start':
return coerceCssPixelValue(itemOffset);
case 'end':
return coerceCssPixelValue(itemOffset + itemSize - (indicatorSize || 0));
case 'center':
return coerceCssPixelValue(itemOffset + (itemSize - (indicatorSize || 0)) / 2);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabsInkBarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: NzTabsInkBarDirective, isStandalone: true, selector: "nz-tabs-ink-bar, [nz-tabs-ink-bar]", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ant-tabs-ink-bar-animated": "animationEnabled()" }, classAttribute: "ant-tabs-ink-bar" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabsInkBarDirective, decorators: [{
type: Directive,
args: [{
selector: 'nz-tabs-ink-bar, [nz-tabs-ink-bar]',
host: {
class: 'ant-tabs-ink-bar',
'[class.ant-tabs-ink-bar-animated]': 'animationEnabled()'
}
}]
}], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }] } });
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
const RESIZE_SCHEDULER = typeof requestAnimationFrame !== 'undefined' ? animationFrameScheduler : asapScheduler;
const CSS_TRANSFORM_TIME = 150;
class NzTabNavBarComponent {
cdr = inject(ChangeDetectorRef);
ngZone = inject(NgZone);
viewportRuler = inject(ViewportRuler);
nzResizeObserver = inject(NzResizeObserver);
dir = inject(Directionality);
destroyRef = inject(DestroyRef);
indexFocused = new EventEmitter();
selectFocusedIndex = new EventEmitter();
addClicked = new EventEmitter();
tabScroll = new EventEmitter();
position = 'horizontal';
addable = false;
hideBar = false;
addIcon = 'plus';
inkBarAnimated = true;
extraTemplate;
extraContents = input.required(...(ngDevMode ? [{ debugName: "extraContents" }] : []));
indicator = input(...(ngDevMode ? [undefined, { debugName: "indicator" }] : []));
startExtraContent = computed(() => this.extraContents().find(item => item.position() === 'start'), ...(ngDevMode ? [{ debugName: "startExtraContent" }] : []));
endExtraContent = computed(() => this.extraContents().find(item => item.position() === 'end'), ...(ngDevMode ? [{ debugName: "endExtraContent" }] : []));
get selectedIndex() {
return this._selectedIndex;
}
set selectedIndex(value) {
const newValue = coerceNumberProperty(value);
if (this._selectedIndex !== newValue) {
this._selectedIndex = value;
this.selectedIndexChanged = true;
if (this.keyManager) {
this.keyManager.updateActiveItem(value);
}
}
}
navWrapRef;
navListRef;
operationRef;
addBtnRef;
inkBar;
items;
/** Tracks which element has focus; used for keyboard navigation */
get focusIndex() {
return this.keyManager ? this.keyManager.activeItemIndex : 0;
}
/** When the focus index is set, we must manually send focus to the correct label */
set focusIndex(value) {
if (!this.isValidIndex(value) || this.focusIndex === value || !this.keyManager) {
return;
}
this.keyManager.setActiveItem(value);
}
get showAddButton() {
return this.hiddenItems.length === 0 && this.addable;
}
translate = null;
transformX = 0;
transformY = 0;
pingLeft = false;
pingRight = false;
pingTop = false;
pingBottom = false;
hiddenItems = [];
keyManager;
_selectedIndex = 0;
wrapperWidth = 0;
wrapperHeight = 0;
scrollListWidth = 0;
scrollListHeight = 0;
operationWidth = 0;
operationHeight = 0;
addButtonWidth = 0;
addButtonHeight = 0;
selectedIndexChanged = false;
lockAnimationTimeoutId;
cssTransformTimeWaitingId;
constructor() {
this.destroyRef.onDestroy(() => {
clearTimeout(this.lockAnimationTimeoutId);
clearTimeout(this.cssTransformTimeWaitingId);
});
}
ngAfterViewInit() {
const dirChange = this.dir ? this.dir.change.asObservable() : of(null);
const resize = this.viewportRuler.change(150);
const realign = () => {
this.updateScrollListPosition();
this.alignInkBarToSelectedTab();
};
this.keyManager = new FocusKeyManager(this.items)
.withHorizontalOrientation(this.getLayoutDirection())
.withWrap();
this.keyManager.updateActiveItem(this.selectedIndex);
requestAnimationFrame(realign);
merge(this.nzResizeObserver.observe(this.navWrapRef), this.nzResizeObserver.observe(this.navListRef))
.pipe(takeUntilDestroyed(this.destroyRef), auditTime(16, RESIZE_SCHEDULER))
.subscribe(() => {
realign();
});
merge(dirChange, resize, this.items.changes)
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(() => {
Promise.resolve().then(realign);
this.keyManager.withHorizontalOrientation(this.getLayoutDirection());
});
this.keyManager.change.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(newFocusIndex => {
this.indexFocused.emit(newFocusIndex);
this.scrollToTab(this.keyManager.activeItem);
});
}
ngAfterContentChecked() {
if (this.selectedIndexChanged) {
this.updateScrollListPosition();
this.alignInkBarToSelectedTab();
this.selectedIndexChanged = false;
this.cdr.markForCheck();
}
}
onSelectedFromMenu(tab) {
const tabIndex = this.items.toArray().findIndex(e => e === tab);
if (tabIndex !== -1) {
this.keyManager.updateActiveItem(tabIndex);
if (this.focusIndex !== this.selectedIndex) {
this.selectFocusedIndex.emit(this.focusIndex);
this.scrollToTab(tab);
}
}
}
onOffsetChange(e) {
if (this.position === 'horizontal') {
if (!this.lockAnimationTimeoutId) {
if (this.transformX >= 0 && e.x > 0) {
return;
}
if (this.transformX <= this.wrapperWidth - this.scrollListWidth && e.x < 0) {
return;
}
}
e.event.preventDefault();
this.transformX = this.clampTransformX(this.transformX + e.x);
this.setTransform(this.transformX, 0);
}
else {
if (!this.lockAnimationTimeoutId) {
if (this.transformY >= 0 && e.y > 0) {
return;
}
if (this.transformY <= this.wrapperHeight - this.scrollListHeight && e.y < 0) {
return;
}
}
e.event.preventDefault();
this.transformY = this.clampTransformY(this.transformY + e.y);
this.setTransform(0, this.transformY);
}
this.lockAnimation();
this.setVisibleRange();
this.setPingStatus();
}
handleKeydown(event) {
const inNavigationList = this.navWrapRef.nativeElement.contains(event.target);
if (hasModifierKey(event) || !inNavigationList) {
return;
}
switch (event.keyCode) {
case LEFT_ARROW:
case UP_ARROW:
case RIGHT_ARROW:
case DOWN_ARROW:
this.lockAnimation();
this.keyManager.onKeydown(event);
break;
case ENTER:
case SPACE:
if (this.focusIndex !== this.selectedIndex) {
this.selectFocusedIndex.emit(this.focusIndex);
}
break;
default:
this.keyManager.onKeydown(event);
}
}
isValidIndex(index) {
if (!this.items) {
return true;
}
const tab = this.items ? this.items.toArray()[index] : null;
return !!tab && !tab.disabled;
}
scrollToTab(tab) {
if (!this.items.find(e => e === tab)) {
return;
}
const tabs = this.items.toArray();
if (this.position === 'horizontal') {
let newTransform = this.transformX;
if (this.getLayoutDirection() === 'rtl') {
const right = tabs[0].left + tabs[0].width - tab.left - tab.width;
if (right < this.transformX) {
newTransform = right;
}
else if (right + tab.width > this.transformX + this.wrapperWidth) {
newTransform = right + tab.width - this.wrapperWidth;
}
}
else if (tab.left < -this.transformX) {
newTransform = -tab.left;
}
else if (tab.left + tab.width > -this.transformX + this.wrapperWidth) {
newTransform = -(tab.left + tab.width - this.wrapperWidth);
}
this.transformX = newTransform;
this.transformY = 0;
this.setTransform(newTransform, 0);
}
else {
let newTransform = this.transformY;
if (tab.top < -this.transformY) {
newTransform = -tab.top;
}
else if (tab.top + tab.height > -this.transformY + this.wrapperHeight) {
newTransform = -(tab.top + tab.height - this.wrapperHeight);
}
this.transformY = newTransform;
this.transformX = 0;
this.setTransform(0, newTransform);
}
clearTimeout(this.cssTransformTimeWaitingId);
this.cssTransformTimeWaitingId = setTimeout(() => {
this.setVisibleRange();
}, CSS_TRANSFORM_TIME);
}
lockAnimation() {
if (!this.lockAnimationTimeoutId) {
this.ngZone.runOutsideAngular(() => {
this.navListRef.nativeElement.style.transition = 'none';
this.lockAnimationTimeoutId = setTimeout(() => {
this.navListRef.nativeElement.style.transition = '';
this.lockAnimationTimeoutId = undefined;
}, CSS_TRANSFORM_TIME);
});
}
}
setTransform(x, y) {
this.navListRef.nativeElement.style.transform = `translate(${x}px, ${y}px)`;
}
clampTransformX(transform) {
const scrollWidth = this.wrapperWidth - this.scrollListWidth;
if (this.getLayoutDirection() === 'rtl') {
return Math.max(Math.min(scrollWidth, transform), 0);
}
else {
return Math.min(Math.max(scrollWidth, transform), 0);
}
}
clampTransformY(transform) {
return Math.min(Math.max(this.wrapperHeight - this.scrollListHeight, transform), 0);
}
updateScrollListPosition() {
this.resetSizes();
this.transformX = this.clampTransformX(this.transformX);
this.transformY = this.clampTransformY(this.transformY);
this.setVisibleRange();
this.setPingStatus();
if (this.keyManager) {
this.keyManager.updateActiveItem(this.keyManager.activeItemIndex);
if (this.keyManager.activeItem) {
this.scrollToTab(this.keyManager.activeItem);
}
}
}
resetSizes() {
this.addButtonWidth = this.addBtnRef ? this.addBtnRef.getElementWidth() : 0;
this.addButtonHeight = this.addBtnRef ? this.addBtnRef.getElementHeight() : 0;
this.operationWidth = this.operationRef.getElementWidth();
this.operationHeight = this.operationRef.getElementHeight();
this.wrapperWidth = this.navWrapRef.nativeElement.offsetWidth || 0;
this.wrapperHeight = this.navWrapRef.nativeElement.offsetHeight || 0;
this.scrollListHeight = this.navListRef.nativeElement.offsetHeight || 0;
this.scrollListWidth = this.navListRef.nativeElement.offsetWidth || 0;
}
alignInkBarToSelectedTab() {
const selectedItem = this.items && this.items.length ? this.items.toArray()[this.selectedIndex] : null;
const selectedItemElement = selectedItem ? selectedItem.elementRef.nativeElement : null;
if (selectedItemElement) {
/**
* .ant-tabs-nav-list - Target offset parent element
* └──.ant-tabs-tab
* └──.ant-tabs-tab-btn - Currently focused element
*/
this.inkBar.alignToElement(selectedItemElement.parentElement);
}
}
setPingStatus() {
const ping = {
top: false,
right: false,
bottom: false,
left: false
};
const navWrap = this.navWrapRef.nativeElement;
if (this.position === 'horizontal') {
if (this.getLayoutDirection() === 'rtl') {
ping.right = this.transformX > 0;
ping.left = this.transformX + this.wrapperWidth < this.scrollListWidth;
}
else {
ping.left = this.transformX < 0;
ping.right = -this.transformX + this.wrapperWidth < this.scrollListWidth;
}
}
else {
ping.top = this.transformY < 0;
ping.bottom = -this.transformY + this.wrapperHeight < this.scrollListHeight;
}
Object.keys(ping).forEach(pos => {
const className = `ant-tabs-nav-wrap-ping-${pos}`;
if (ping[pos]) {
navWrap.classList.add(className);
}
else {
navWrap.classList.remove(className);
}
});
}
setVisibleRange() {
let unit;
let position;
let transformSize;
let basicSize;
let tabContentSize;
let addSize;
const tabs = this.items.toArray();
const DEFAULT_SIZE = { width: 0, height: 0, left: 0, top: 0, right: 0 };
const getOffset = (index) => {
let offset;
const size = tabs[index] || DEFAULT_SIZE;
if (position === 'right') {
offset = tabs[0].left + tabs[0].width - tabs[index].left - tabs[index].width;
}
else {
offset = size[position];
}
return offset;
};
if (this.position === 'horizontal') {
unit = 'width';
basicSize = this.wrapperWidth;
tabContentSize = this.scrollListWidth - (this.hiddenItems.length ? this.operationWidth : 0);
addSize = this.addButtonWidth;
transformSize = Math.abs(this.transformX);
if (this.getLayoutDirection() === 'rtl') {
position = 'right';
this.pingRight = this.transformX > 0;
this.pingLeft = this.transformX + this.wrapperWidth < this.scrollListWidth;
}
else {
this.pingLeft = this.transformX < 0;
this.pingRight = -this.transformX + this.wrapperWidth < this.scrollListWidth;
position = 'left';
}
}
else {
unit = 'height';
basicSize = this.wrapperHeight;
tabContentSize = this.scrollListHeight - (this.hiddenItems.length ? this.operationHeight : 0);
addSize = this.addButtonHeight;
position = 'top';
transformSize = -this.transformY;
this.pingTop = this.transformY < 0;
this.pingBottom = -this.transformY + this.wrapperHeight < this.scrollListHeight;
}
let mergedBasicSize = basicSize;
if (tabContentSize + addSize > basicSize) {
mergedBasicSize = basicSize - addSize;
}
if (!tabs.length) {
this.hiddenItems = [];
this.cdr.markForCheck();
return;
}
const len = tabs.length;
let endIndex = len;
for (let i = 0; i < len; i += 1) {
const offset = getOffset(i);
const size = tabs[i] || DEFAULT_SIZE;
if (offset + size[unit] > transformSize + mergedBasicSize) {
endIndex = i - 1;
break;
}
}
let startIndex = 0;
for (let i = len - 1; i >= 0; i -= 1) {
const offset = getOffset(i);
if (offset < transformSize) {
startIndex = i + 1;
break;
}
}
const startHiddenTabs = tabs.slice(0, startIndex);
const endHiddenTabs = tabs.slice(endIndex + 1);
this.hiddenItems = [...startHiddenTabs, ...endHiddenTabs];
this.cdr.markForCheck();
}
getLayoutDirection() {
return this.dir && this.dir.value === 'rtl' ? 'rtl' : 'ltr';
}
ngOnChanges(changes) {
// The first will be aligning in ngAfterViewInit
const { position, indicator } = changes;
if (position && !position.isFirstChange()) {
this.updateScrollListPosition();
}
if ((position && !position.isFirstChange()) || (indicator && !indicator.isFirstChange())) {
this.alignInkBarToSelectedTab();
this.lockAnimation();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabNavBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NzTabNavBarComponent, isStandalone: true, selector: "nz-tabs-nav", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, addable: { classPropertyName: "addable", publicName: "addable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hideBar: { classPropertyName: "hideBar", publicName: "hideBar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, addIcon: { classPropertyName: "addIcon", publicName: "addIcon", isSignal: false, isRequired: false, transformFunction: null }, inkBarAnimated: { classPropertyName: "inkBarAnimated", publicName: "inkBarAnimated", isSignal: false, isRequired: false, transformFunction: null }, extraTemplate: { classPropertyName: "extraTemplate", publicName: "extraTemplate", isSignal: false, isRequired: false, transformFunction: null }, extraContents: { classPropertyName: "extraContents", publicName: "extraContents", isSignal: true, isRequired: true, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { indexFocused: "indexFocused", selectFocusedIndex: "selectFocusedIndex", addClicked: "addClicked", tabScroll: "tabScroll" }, host: { listeners: { "keydown": "handleKeydown($event)" }, classAttribute: "ant-tabs-nav" }, queries: [{ propertyName: "items", predicate: NzTabNavItemDirective, descendants: true }], viewQueries: [{ propertyName: "navWrapRef", first: true, predicate: ["navWrap"], descendants: true, static: true }, { propertyName: "navListRef", first: true, predicate: ["navList"], descendants: true, static: true }, { propertyName: "operationRef", first: true, predicate: NzTabNavOperationComponent, descendants: true, static: true }, { propertyName: "addBtnRef", first: true, predicate: NzTabAddButtonComponent, descendants: true }, { propertyName: "inkBar", first: true, predicate: NzTabsInkBarDirective, descendants: true, static: true }], exportAs: ["nzTabsNav"], usesOnChanges: true, ngImport: i0, template: `
@if (startExtraContent()) {
<div class="ant-tabs-extra-content">
<ng-template [ngTemplateOutlet]="startExtraContent()!.templateRef" />
</div>
}
<div
class="ant-tabs-nav-wrap"
[class.ant-tabs-nav-wrap-ping-left]="pingLeft"
[class.ant-tabs-nav-wrap-ping-right]="pingRight"
[class.ant-tabs-nav-wrap-ping-top]="pingTop"
[class.ant-tabs-nav-wrap-ping-bottom]="pingBottom"
#navWrap
>
<div
class="ant-tabs-nav-list"
#navList
nzTabScrollList
(offsetChange)="onOffsetChange($event)"
(tabScroll)="tabScroll.emit($event)"
role="tablist"
>
<ng-content />
@if (showAddButton) {
<button
role="tab"
[attr.tabindex]="-1"
nz-tab-add-button
[addIcon]="addIcon"
(click)="addClicked.emit()"
></button>
}
<div
nz-tabs-ink-bar
[hidden]="hideBar"
[position]="position"
[animated]="inkBarAnimated"
[indicator]="indicator()"
></div>
</div>
</div>
<nz-tab-nav-operation
(addClicked)="addClicked.emit()"
(selected)="onSelectedFromMenu($event)"
[addIcon]="addIcon"
[addable]="addable"
[items]="hiddenItems"
/>
@if (endExtraContent()) {
<div class="ant-tabs-extra-content">
<ng-template [ngTemplateOutlet]="endExtraContent()!.templateRef" />
</div>
} @else if (extraTemplate) {
<div class="ant-tabs-extra-content">
<ng-template [ngTemplateOutlet]="extraTemplate" />
</div>
}
`, isInline: true, dependencies: [{ kind: "directive", type: NzTabScrollListDirective, selector: "[nzTabScrollList]", outputs: ["offsetChange", "tabScroll"] }, { kind: "component", type: NzTabAddButtonComponent, selector: "nz-tab-add-button, button[nz-tab-add-button]", inputs: ["addIcon"] }, { kind: "directive", type: NzTabsInkBarDirective, selector: "nz-tabs-ink-bar, [nz-tabs-ink-bar]", inputs: ["position", "animated", "indicator"] }, { kind: "component", type: NzTabNavOperationComponent, selector: "nz-tab-nav-operation", inputs: ["items", "addable", "addIcon"], outputs: ["addClicked", "selected"], exportAs: ["nzTabNavOperation"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabNavBarComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-tabs-nav',
exportAs: 'nzTabsNav',
imports: [
NzTabScrollListDirective,
NzTabAddButtonComponent,
NzTabsInkBarDirective,
NzTabNavOperationComponent,
NgTemplateOutlet
],
template: `
@if (startExtraContent()) {
<div class="ant-tabs-extra-content">
<ng-template [ngTemplateOutlet]="startExtraContent()!.templateRef" />
</div>
}
<div
class="ant-tabs-nav-wrap"
[class.ant-tabs-nav-wrap-ping-left]="pingLeft"
[class.ant-tabs-nav-wrap-ping-right]="pingRight"
[class.ant-tabs-nav-wrap-ping-top]="pingTop"
[class.ant-tabs-nav-wrap-ping-bottom]="pingBottom"
#navWrap
>
<div
class="ant-tabs-nav-list"
#navList
nzTabScrollList
(offsetChange)="onOffsetChange($event)"
(tabScroll)="tabScroll.emit($event)"
role="tablist"
>
<ng-content />
@if (showAddButton) {
<button
role="tab"
[attr.tabindex]="-1"
nz-tab-add-button
[addIcon]="addIcon"
(click)="addClicked.emit()"
></button>
}
<div
nz-tabs-ink-bar
[hidden]="hideBar"
[position]="position"
[animated]="inkBarAnimated"
[indicator]="indicator()"
></div>
</div>
</div>
<nz-tab-nav-operation
(addClicked)="addClicked.emit()"
(selected)="onSelectedFromMenu($event)"
[addIcon]="addIcon"
[addable]="addable"
[items]="hiddenItems"
/>
@if (endExtraContent()) {
<div class="ant-tabs-extra-content">
<ng-template [ngTemplateOutlet]="endExtraContent()!.templateRef" />
</div>
} @else if (extraTemplate) {
<div class="ant-tabs-extra-content">
<ng-template [ngTemplateOutlet]="extraTemplate" />
</div>
}
`,
host: {
class: 'ant-tabs-nav',
'(keydown)': 'handleKeydown($event)'
},
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}]
}], ctorParameters: () => [], propDecorators: { indexFocused: [{
type: Output
}], selectFocusedIndex: [{
type: Output
}], addClicked: [{
type: Output
}], tabScroll: [{
type: Output
}], position: [{
type: Input
}], addable: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], hideBar: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], addIcon: [{
type: Input
}], inkBarAnimated: [{
type: Input
}], extraTemplate: [{
type: Input
}], extraContents: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraContents", required: true }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], selectedIndex: [{
type: Input
}], navWrapRef: [{
type: ViewChild,
args: ['navWrap', { static: true }]
}], navListRef: [{
type: ViewChild,
args: ['navList', { static: true }]
}], operationRef: [{
type: ViewChild,
args: [NzTabNavOperationComponent, { static: true }]
}], addBtnRef: [{
type: ViewChild,
args: [NzTabAddButtonComponent, { static: false }]
}], inkBar: [{
type: ViewChild,
args: [NzTabsInkBarDirective, { static: true }]
}], items: [{
type: ContentChildren,
args: [NzTabNavItemDirective, { descendants: true }]
}] } });
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
/** Decorates the `ng-template` tags and reads out the template from it. */
class NzTabDirective {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: NzTabDirective, isStandalone: true, selector: "[nz-tab]", exportAs: ["nzTab"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabDirective, decorators: [{
type: Directive,
args: [{
selector: '[nz-tab]',
exportAs: 'nzTab'
}]
}] });
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
/**
* Used to provide a tab set to a tab without causing a circular dependency.
*/
const NZ_TAB_SET = new InjectionToken(typeof ngDevMode !== 'undefined' && ngDevMode ? 'nz-tabs' : '');
class NzTabComponent {
nzTitle = '';
nzClosable = false;
nzCloseIcon = 'close';
nzDisabled = false;
nzForceRender = false;
nzSelect = new EventEmitter();
nzDeselect = new EventEmitter();
nzClick = new EventEmitter();
nzContextmenu = new EventEmitter();
nzTabLinkTemplateDirective;
template = null;
linkDirective;
contentTemplate;
isActive = false;
hasBeenActive = false;
position = null;
origin = null;
closestTabSet = inject(NZ_TAB_SET);
stateChanges = new Subject();
get content() {
return this.template || this.contentTemplate;
}
get label() {
return this.nzTitle || this.nzTabLinkTemplateDirective?.templateRef;
}
ngOnChanges(changes) {
const { nzTitle, nzDisabled, nzForceRender } = changes;
if (nzTitle || nzDisabled || nzForceRender) {
this.stateChanges.next();
}
}
ngOnDestroy() {
this.stateChanges.complete();
}
setActive(active) {
this.isActive = active;
if (active) {
this.hasBeenActive = true;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.0", type: NzTabComponent, isStandalone: true, selector: "nz-tab", inputs: { nzTitle: "nzTitle", nzClosable: ["nzClosable", "nzClosable", booleanAttribute], nzCloseIcon: "nzCloseIcon", nzDisabled: ["nzDisabled", "nzDisabled", booleanAttribute], nzForceRender: ["nzForceRender", "nzForceRender", booleanAttribute] }, outputs: { nzSelect: "nzSelect", nzDeselect: "nzDeselect", nzClick: "nzClick", nzContextmenu: "nzContextmenu" }, queries: [{ propertyName: "nzTabLinkTemplateDirective", first: true, predicate: NzTabLinkTemplateDirective, descendants: true }, { propertyName: "template", first: true, predicate: NzTabDirective, descendants: true, read: TemplateRef }, { propertyName: "linkDirective", first: true, predicate: NzTabLinkDirective, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], exportAs: ["nzTab"], usesOnChanges: true, ngImport: i0, template: `
<ng-template #tabLinkTemplate>
<ng-content select="[nz-tab-link]" />
</ng-template>
<ng-template #contentTemplate>
<ng-content />
</ng-template>
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-tab',
exportAs: 'nzTab',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-template #tabLinkTemplate>
<ng-content select="[nz-tab-link]" />
</ng-template>
<ng-template #contentTemplate>
<ng-content />
</ng-template>
`
}]
}], propDecorators: { nzTitle: [{
type: Input
}], nzClosable: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], nzCloseIcon: [{
type: Input
}], nzDisabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], nzForceRender: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], nzSelect: [{
type: Output
}], nzDeselect: [{
type: Output
}], nzClick: [{
type: Output
}], nzContextmenu: [{
type: Output
}], nzTabLinkTemplateDirective: [{
type: ContentChild,
args: [NzTabLinkTemplateDirective, { static: false }]
}], template: [{
type: ContentChild,
args: [NzTabDirective, { static: false, read: TemplateRef }]
}], linkDirective: [{
type: ContentChild,
args: [NzTabLinkDirective, { static: false }]
}], contentTemplate: [{
type: ViewChild,
args: ['contentTemplate', { static: true }]
}] } });
const NZ_CONFIG_MODULE_NAME = 'tabs';
let nextId = 0;
let NzTabsComponent = (() => {
let _nzType_decorators;
let _nzType_initializers = [];
let _nzType_extraInitializers = [];
let _nzSize_decorators;
let _nzSize_initializers = [];
let _nzSize_extraInitializers = [];
let _nzAnimated_decorators;
let _nzAnimated_initializers = [];
let _nzAnimated_extraInitializers = [];
let _nzTabBarGutter_decorators;
let _nzTabBarGutter_initializers = [];
let _nzTabBarGutter_extraInitializers = [];
return class NzTabsComponent {
static {
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
_nzType_decorators = [WithConfig()];
_nzSize_decorators = [WithConfig()];
_nzAnimated_decorators = [WithConfig()];
_nzTabBarGutter_decorators = [WithConfig()];
__esDecorate(null, null, _nzType_decorators, { kind: "field", name: "nzType", static: false, private: false, access: { has: obj => "nzType" in obj, get: obj => obj.nzType, set: (obj, value) => { obj.nzType = value; } }, metadata: _metadata }, _nzType_initializers, _nzType_extraInitializers);
__esDecorate(null, null, _nzSize_decorators, { kind: "field", name: "nzSize", static: false, private: false, access: { has: obj => "nzSize" in obj, get: obj => obj.nzSize, set: (obj, value) => { obj.nzSize = value; } }, metadata: _metadata }, _nzSize_initializers, _nzSize_extraInitializers);
__esDecorate(null, null, _nzAnimated_decorators, { kind: "field", name: "nzAnimated", static: false, private: false, access: { has: obj => "nzAnimated" in obj, get: obj => obj.nzAnimated, set: (obj, value) => { obj.nzAnimated = value; } }, metadata: _metadata }, _nzAnimated_initializers, _nzAnimated_extraInitializers);
__esDecorate(null, null, _nzTabBarGutter_decorators, { kind: "field", name: "nzTabBarGutter", static: false, private: false, access: { has: obj => "nzTabBarGutter" in obj, get: obj => obj.nzTabBarGutter, set: (obj, value) => { obj.nzTabBarGutter = value; } }, metadata: _metadata }, _nzTabBarGutter_initializers, _nzTabBarGutter_extraInitializers);
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
}
_nzModuleName = NZ_CONFIG_MODULE_NAME;
nzConfigService = inject(NzConfigService);
ngZone = inject(NgZone);
cdr = inject(ChangeDetectorRef);
directionality = inject(Directionality);
destroyRef = inject(DestroyRef);
get nzSelectedIndex() {
return this.selectedIndex;
}
set nzSelectedIndex(value) {
this.indexToSelect = coerceNumberProperty(value, null);
}
nzTabPosition = 'top';
nzTabBarExtraContent;
nzCanDeactivate = null;
nzAddIcon = 'plus';
nzTabBarStyle = null;
nzType = __runInitializers(this, _nzType_initializers, 'line');
nzSize = (__runInitializers(this, _nzType_extraInitializers), __runInitializers(this, _nzSize_initializers, 'default'));
nzAnimated = (__runInitializers(this, _nzSize_extraInitializers), __runInitializers(this, _nzAnimated_initializers, true));
nzTabBarGutter = (__runInitializers(this, _nzAnimated_extraInitializers), __runInitializers(this, _nzTabBarGutter_initializers, undefined));
nzHideAdd = (__runInitializers(this, _nzTabBarGutter_extraInitializers), false);
nzCentered = false;
nzHideAll = false;
nzLinkRouter = false;
nzLinkExact = true;
nzDestroyInactiveTabPane = false;
nzIndicator = input(...(ngDevMode ? [undefined, { debugName: "nzIndicator" }] : []));
nzSelectChange = new EventEmitter(true);
nzSelectedIndexChange = new EventEmitter();
nzTabListScroll = new EventEmitter();
nzClose = new EventEmitter();
nzAdd = new EventEmitter();
get position() {
return ['top', 'bottom'].indexOf(this.nzTabPosition) === -1 ? 'vertical' : 'horizontal';
}
get addable() {
return this.nzType === 'editable-card' && !this.nzHideAdd;
}
get closable() {
return this.nzType === 'editable-card';
}
get line() {
return this.nzType === 'line';
}
get inkBarAnimated() {
return this.line && (typeof this.nzAnimated === 'boolean' ? this.nzAnimated : this.nzAnimated.inkBar);
}
get tabPaneAnimated() {
return typeof this.nzAnimated === 'boolean' ? this.nzAnimated : this.nzAnimated.tabPane;
}
// Pick up only direct descendants under ivy rendering engine
// We filter out only the tabs that belong to this tab set in `tabs`.
allTabs = new QueryList();
tabLinks = new QueryList();
tabNavBarRef;
// All the direct tabs for this tab set
tabs = new QueryList();
extraContents = contentChildren(NzTabBarExtraContentDirective, ...(ngDevMode ? [{ debugName: "extraContents" }] : []));
dir = 'ltr';
tabSetId;
indexToSelect = 0;
selectedIndex = null;
tabLabelSubscription = Subscription.EMPTY;
canDeactivateSubscription = Subscription.EMPTY;
router = inject(Router, { optional: true });
constructor() {
this.tabSetId = nextId++;
this.destroyRef.onDestroy(() => {
this.tabs.destroy();
this.tabLabelSubscription.unsubscribe();
this.canDeactivateSubscription.unsubscribe();
});
}
ngOnInit() {
this.dir = this.directionality.value;
this.directionality.change?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(direction => {
this.dir = direction;
this.cdr.detectChanges();
});
}
ngAfterContentInit() {
this.ngZone.runOutsideAngular(() => {
Promise.resolve().then(() => this.setUpRouter());
});
this.subscribeToTabLabels();
this.subscribeToAllTabChanges();
// Subscribe to changes of the number of tabs, to be
// able to re-render the content as new tabs are added or removed.
this.tabs.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
const indexToSelect = this.clampTabIndex(this.indexToSelect);
// Maintain the previously selected tab if a new tab is added or removed, and there is no
// explicit change that selects a different tab.
if (indexToSelect === this.selectedIndex) {
const tabs = this.tabs.toArray();
for (let i = 0; i < tabs.length; i++) {
if (tabs[i].isActive) {
// Assign both to the `indexToSelect` and `selectedIndex` so we don't fire a changed
// event, otherwise the consumer may end up in an infinite loop in some edge cases like
// adding a tab within the `nzSelectedIndexChange` event.
this.indexToSelect = this.selectedIndex = i;
break;
}
}
}
this.subscribeToTabLabels();
this.cdr.markForCheck();
});
}
ngAfterContentChecked() {
// Don't clamp the `indexToSelect` immediately in the setter because it can happen that
// the amount of tabs changes before the actual change detection runs.
const indexToSelect = (this.indexToSelect = this.clampTabIndex(this.indexToSelect));
// If there is a change in the selected index, emit a change event. Should not trigger if
// the selected index has not yet been initialized.
if (this.selectedIndex !== indexToSelect) {
const isFirstRun = this.selectedIndex == null;
if (!isFirstRun) {
this.nzSelectChange.emit(this.createChangeEvent(indexToSelect));
}
// Changing these values after change detection has run
// since the checked content may contain references to them.
Promise.resolve().then(() => {
this.tabs.forEach((tab, index) => tab.setActive(index === indexToSelect));
if (!isFirstRun) {
this.nzSelectedIndexChange.emit(indexToSelect);
}
});
}
// Set up the position for each tab and optionally set up an origin on the next selected tab.
this.tabs.forEach((tab, index) => {
tab.position = index - indexToSelect;
// If there is already a selected tab, then set up an origin for the next selected tab
// if it doesn't have one already.
if (this.selectedIndex != null && tab.position === 0 && !tab.origin) {
tab.origin = indexToSelect - this.selectedIndex;
}
});
if (this.selectedIndex !== indexToSelect) {
this.selectedIndex = indexToSelect;
this.cdr.markForCheck();
}
}
onClose(index, e) {
e.preventDefault();
e.stopPropagation();
this.nzClose.emit({ index });
}
onAdd() {
this.nzAdd.emit();
}
clampTabIndex(index) {
return Math.min(this.tabs.length - 1, Math.max(index || 0, 0));
}
createChangeEvent(index) {
const event = new NzTabChangeEvent();
event.index = index;
if (this.tabs && this.tabs.length) {
event.tab = this.tabs.toArray()[index];
this.tabs.forEach((tab, i) => {
if (i !== index) {
tab.nzDeselect.emit();
}
});
event.tab.nzSelect.emit();
}
return event;
}
subscribeToTabLabels() {
if (this.tabLabelSubscription) {
this.tabLabelSubscription.unsubscribe();
}
this.tabLabelSubscription = merge(...this.tabs.map(tab => tab.stateChanges)).subscribe(() => this.cdr.markForCheck());
}
subscribeToAllTabChanges() {
this.allTabs.changes.pipe(startWith(this.allTabs)).subscribe((tabs) => {
this.tabs.reset(tabs.filter(tab => tab.closestTabSet === this));
this.tabs.notifyOnChanges();
});
}
canDeactivateFun(pre, next) {
if (typeof this.nzCanDeactivate === 'function') {
const observable = wrapIntoObservable(this.nzCanDeactivate(pre, next));
return observable.pipe(first(), takeUntilDestroyed(this.destroyRef));
}
else {
return of(true);
}
}
clickNavItem(tab, index, e) {
if (!tab.nzDisabled) {
// ignore nzCanDeactivate
tab.nzClick.emit();
if (!this.isRouterLinkClickEvent(index, e)) {
this.setSelectedIndex(index);
}
}
}
isRouterLinkClickEvent(index, event) {
const target = event.target;
if (this.nzLinkRouter) {
return !!this.tabs.toArray()[index]?.linkDirective?.elementRef.nativeElement.contains(target);
}
else {
return false;
}
}
contextmenuNavItem(tab, e) {
if (!tab.nzDisabled) {
// ignore nzCanDeactivate
tab.nzContextmenu.emit(e);
}
}
setSelectedIndex(index) {
this.canDeactivateSubscription.unsubscribe();
this.canDeactivateSubscription = this.canDeactivateFun(this.selectedIndex, index).subscribe(can => {
if (can) {
this.nzSelectedIndex = index;
this.tabNavBarRef.focusIndex = index;
this.cdr.markForCheck();
}
});
}
getTabIndex(tab, index) {
if (tab.nzDisabled) {
return null;
}
return this.selectedIndex === index ? 0 : -1;
}
getTabContentId(i) {
return `nz-tabs-${this.tabSetId}-tab-${i}`;
}
setUpRouter() {
if (this.nzLinkRouter) {
if (!this.router) {
throw new Error(`${PREFIX} you should import 'RouterModule' if you want to use 'nzLinkRouter'!`);
}
merge(this.router.events.pipe(filter(e => e instanceof NavigationEnd)), this.tabLinks.changes)
.pipe(startWith(true), delay(0), takeUntilDestroyed(this.destroyRef))
.subscribe(() => {
this.updateRouterActive();
this.cdr.markForCheck();
});
}
}
updateRouterActive() {
if (this.router?.navigated) {
const index = this.findShouldActiveTabIndex();
if (index !== this.selectedIndex) {
this.setSelectedIndex(index);
}
Promise.resolve().then(() => (this.nzHideAll = index === -1));
}
}
findShouldActiveTabIndex() {
const tabs = this.tabs.toArray();
const isActive = this.isLinkActive(this.router);
return tabs.findIndex(tab => {
const c = tab.linkDirective;
return c ? isActive(c.routerLink) : false;
});
}
isLinkActive(router) {
return (link) => link
? !!router?.isActive(link.urlTree || '', {
paths: this.nzLinkExact ? 'exact' : 'subset',
queryParams: this.nzLinkExact ? 'exact' : 'subset',
fragment: 'ignored',
matrixParams: 'ignored'
})
: false;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NzTabsComponent, isStandalone: true, selector: "nz-tabs", inputs: { nzSelectedIndex: { classPropertyName: "nzSelectedIndex", publicName: "nzSelectedIndex", isSignal: false, isRequired: false, transformFunction: null }, nzTabPosition: { classPropertyName: "nzTabPosition", publicName: "nzTabPosition", isSignal: false, isRequired: false, transformFunction: null }, nzTabBarExtraContent: { classPropertyName: "nzTabBarExtraContent", publicName: "nzTabBarExtraContent", isSignal: false, isRequired: false, transformFunction: null }, nzCanDeactivate: { classPropertyName: "nzCanDeactivate", publicName: "nzCanDeactivate", isSignal: false, isRequired: false, transformFunction: null }, nzAddIcon: { classPropertyName: "nzAddIcon", publicName: "nzAddIcon", isSignal: false, isRequired: false, transformFunction: null }, nzTabBarStyle: { classPropertyName: "nzTabBarStyle", publicName: "nzTabBarStyle", isSignal: false, isRequired: false, transformFunction: null }, nzType: { classPropertyName: "nzType", publicName: "nzType", isSignal: false, isRequired: false, transformFunction: null }, nzSize: { classPropertyName: "nzSize", publicName: "nzSize", isSignal: false, isRequired: false, transformFunction: null }, nzAnimated: { classPropertyName: "nzAnimated", publicName: "nzAnimated", isSignal: false, isRequired: false, transformFunction: null }, nzTabBarGutter: { classPropertyName: "nzTabBarGutter", publicName: "nzTabBarGutter", isSignal: false, isRequired: false, transformFunction: null }, nzHideAdd: { classPropertyName: "nzHideAdd", publicName: "nzHideAdd", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, nzCentered: { classPropertyName: "nzCentered", publicName: "nzCentered", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, nzHideAll: { classPropertyName: "nzHideAll", publicName: "nzHideAll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, nzLinkRouter: { classPropertyName: "nzLinkRouter", publicName: "nzLinkRouter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, nzLinkExact: { classPropertyName: "nzLinkExact", publicName: "nzLinkExact", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, nzDestroyInactiveTabPane: { classPropertyName: "nzDestroyInactiveTabPane", publicName: "nzDestroyInactiveTabPane", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, nzIndicator: { classPropertyName: "nzIndicator", publicName: "nzIndicator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nzSelectChange: "nzSelectChange", nzSelectedIndexChange: "nzSelectedIndexChange", nzTabListScroll: "nzTabListScroll", nzClose: "nzClose", nzAdd: "nzAdd" }, host: { properties: { "class.ant-tabs-card": "nzType === 'card' || nzType === 'editable-card'", "class.ant-tabs-editable": "nzType === 'editable-card'", "class.ant-tabs-editable-card": "nzType === 'editable-card'", "class.ant-tabs-centered": "nzCentered", "class.ant-tabs-rtl": "dir === 'rtl'", "class.ant-tabs-top": "nzTabPosition === 'top'", "class.ant-tabs-bottom": "nzTabPosition === 'bottom'", "class.ant-tabs-left": "nzTabPosition === 'left'", "class.ant-tabs-right": "nzTabPosition === 'right'", "class.ant-tabs-default": "nzSize === 'default'", "class.ant-tabs-small": "nzSize === 'small'", "class.ant-tabs-large": "nzSize === 'large'" }, classAttribute: "ant-tabs" }, providers: [
{
provide: NZ_TAB_SET,
useExisting: forwardRef(() => NzTabsComponent)
}
], queries: [{ propertyName: "extraContents", predicate: NzTabBarExtraContentDirective, isSignal: true }, { propertyName: "allTabs", predicate: NzTabComponent, descendants: true }, { propertyName: "tabLinks", predicate: NzTabLinkDirective, descendants: true }], viewQueries: [{ propertyName: "tabNavBarRef", first: true, predicate: NzTabNavBarComponent, descendants: true }], exportAs: ["nzTabs"], ngImport: i0, template: `
@if (tabs.length || addable) {
<nz-tabs-nav
[style]="nzTabBarStyle"
[selectedIndex]="nzSelectedIndex || 0"
[inkBarAnimated]="inkBarAnimated"
[addable]="addable"
[addIcon]="nzAddIcon"
[hideBar]="nzHideAll"
[position]="position"
[extraTemplate]="nzTabBarExtraContent"
[extraContents]="extraContents()"
[indicator]="nzIndicator()"
(tabScroll)="nzTabListScroll.emit($event)"
(selectFocusedIndex)="setSelectedIndex($event)"
(addClicked)="onAdd()"
>
@for (tab of tabs; track tab) {
<div
class="ant-tabs-tab"
[style.margin-right.px]="position === 'horizontal' ? nzTabBarGutter : null"
[style.margin-bottom.px]="position === 'vertical' ? nzTabBarGutter : null"
[class.ant-tabs-tab-active]="nzSelectedIndex === $index"
[class.ant-tabs-tab-disabled]="tab.nzDisabled"
(click)="clickNavItem(tab, $index, $event)"
(contextmenu)="contextmenuNavItem(tab, $event)"
>
<button
type="button"
role="tab"
[id]="getTabContentId($index)"
[attr.tabIndex]="getTabIndex(tab, $index)"
[attr.aria-disabled]="tab.nzDisabled"
[attr.aria-selected]="nzSelectedIndex === $index && !nzHideAll"
[attr.aria-controls]="getTabContentId($index)"
[disabled]="tab.nzDisabled"
[tab]="tab"
[active]="nzSelectedIndex === $index"
class="ant-tabs-tab-btn"
nzTabNavItem
cdkMonitorElementFocus
>
<ng-container *nzStringTemplateOutlet="tab.label; context: { visible: true }">
{{ tab.label }}
</ng-container>
@if (tab.nzClosable && closable && !tab.nzDisabled) {
<button
type="button"
nz-tab-close-button
[closeIcon]="tab.nzCloseIcon"
(click)="onClose($index, $event)"
></button>
}
</button>
</div>
}
</nz-tabs-nav>
}
<div class="ant-tabs-content-holder">
<div
class="ant-tabs-content"
[class.ant-tabs-content-top]="nzTabPosition === 'top'"
[class.ant-tabs-content-bottom]="nzTabPosition === 'bottom'"
[class.ant-tabs-content-left]="nzTabPosition === 'left'"
[class.ant-tabs-content-right]="nzTabPosition === 'right'"
[class.ant-tabs-content-animated]="tabPaneAnimated"
>
@if (!nzHideAll) {
@for (tab of tabs; track tab) {
@if (tab.nzForceRender) {
<ng-template [ngTemplateOutlet]="tabpaneTmpl" />
} @else if (nzDestroyInactiveTabPane) {
@if (nzSelectedIndex === $index) {
<ng-template [ngTemplateOutlet]="tabpaneTmpl" />
}
} @else {
@if (nzSelectedIndex === $index || tab.hasBeenActive) {
<ng-template [ngTemplateOutlet]="tabpaneTmpl" />
}
}
<ng-template #tabpaneTmpl>
<div
role="tabpanel"
[id]="getTabContentId($index)"
[attr.aria-labelledby]="getTabContentId($index)"
nz-tab-body
[active]="nzSelectedIndex === $index"
[content]="tab.content"
[animated]="tabPaneAnimated"
></div>
</ng-template>
}
}
</div>
</div>
`, isInline: true, dependencies: [{ kind: "component", type: NzTabNavBarComponent, selector: "nz-tabs-nav", inputs: ["position", "addable", "hideBar", "addIcon", "inkBarAnimated", "extraTemplate", "extraContents", "indicator", "selectedIndex"], outputs: ["indexFocused", "selectFocusedIndex", "addClicked", "tabScroll"], exportAs: ["nzTabsNav"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NzTabNavItemDirective, selector: "[nzTabNavItem]", inputs: ["disabled", "tab", "active"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i1.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { kind: "component", type: NzTabCloseButtonComponent, selector: "nz-tab-close-button, button[nz-tab-close-button]", inputs: ["closeIcon"] }, { kind: "component", type: NzTabBodyComponent, selector: "[nz-tab-body]", inputs: ["content", "active", "animated"], exportAs: ["nzTabBody"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
};
})();
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabsComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-tabs',
exportAs: 'nzTabs',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.Default,
providers: [
{
provide: NZ_TAB_SET,
useExisting: forwardRef(() => NzTabsComponent)
}
],
template: `
@if (tabs.length || addable) {
<nz-tabs-nav
[style]="nzTabBarStyle"
[selectedIndex]="nzSelectedIndex || 0"
[inkBarAnimated]="inkBarAnimated"
[addable]="addable"
[addIcon]="nzAddIcon"
[hideBar]="nzHideAll"
[position]="position"
[extraTemplate]="nzTabBarExtraContent"
[extraContents]="extraContents()"
[indicator]="nzIndicator()"
(tabScroll)="nzTabListScroll.emit($event)"
(selectFocusedIndex)="setSelectedIndex($event)"
(addClicked)="onAdd()"
>
@for (tab of tabs; track tab) {
<div
class="ant-tabs-tab"
[style.margin-right.px]="position === 'horizontal' ? nzTabBarGutter : null"
[style.margin-bottom.px]="position === 'vertical' ? nzTabBarGutter : null"
[class.ant-tabs-tab-active]="nzSelectedIndex === $index"
[class.ant-tabs-tab-disabled]="tab.nzDisabled"
(click)="clickNavItem(tab, $index, $event)"
(contextmenu)="contextmenuNavItem(tab, $event)"
>
<button
type="button"
role="tab"
[id]="getTabContentId($index)"
[attr.tabIndex]="getTabIndex(tab, $index)"
[attr.aria-disabled]="tab.nzDisabled"
[attr.aria-selected]="nzSelectedIndex === $index && !nzHideAll"
[attr.aria-controls]="getTabContentId($index)"
[disabled]="tab.nzDisabled"
[tab]="tab"
[active]="nzSelectedIndex === $index"
class="ant-tabs-tab-btn"
nzTabNavItem
cdkMonitorElementFocus
>
<ng-container *nzStringTemplateOutlet="tab.label; context: { visible: true }">
{{ tab.label }}
</ng-container>
@if (tab.nzClosable && closable && !tab.nzDisabled) {
<button
type="button"
nz-tab-close-button
[closeIcon]="tab.nzCloseIcon"
(click)="onClose($index, $event)"
></button>
}
</button>
</div>
}
</nz-tabs-nav>
}
<div class="ant-tabs-content-holder">
<div
class="ant-tabs-content"
[class.ant-tabs-content-top]="nzTabPosition === 'top'"
[class.ant-tabs-content-bottom]="nzTabPosition === 'bottom'"
[class.ant-tabs-content-left]="nzTabPosition === 'left'"
[class.ant-tabs-content-right]="nzTabPosition === 'right'"
[class.ant-tabs-content-animated]="tabPaneAnimated"
>
@if (!nzHideAll) {
@for (tab of tabs; track tab) {
@if (tab.nzForceRender) {
<ng-template [ngTemplateOutlet]="tabpaneTmpl" />
} @else if (nzDestroyInactiveTabPane) {
@if (nzSelectedIndex === $index) {
<ng-template [ngTemplateOutlet]="tabpaneTmpl" />
}
} @else {
@if (nzSelectedIndex === $index || tab.hasBeenActive) {
<ng-template [ngTemplateOutlet]="tabpaneTmpl" />
}
}
<ng-template #tabpaneTmpl>
<div
role="tabpanel"
[id]="getTabContentId($index)"
[attr.aria-labelledby]="getTabContentId($index)"
nz-tab-body
[active]="nzSelectedIndex === $index"
[content]="tab.content"
[animated]="tabPaneAnimated"
></div>
</ng-template>
}
}
</div>
</div>
`,
host: {
class: 'ant-tabs',
'[class.ant-tabs-card]': `nzType === 'card' || nzType === 'editable-card'`,
'[class.ant-tabs-editable]': `nzType === 'editable-card'`,
'[class.ant-tabs-editable-card]': `nzType === 'editable-card'`,
'[class.ant-tabs-centered]': `nzCentered`,
'[class.ant-tabs-rtl]': `dir === 'rtl'`,
'[class.ant-tabs-top]': `nzTabPosition === 'top'`,
'[class.ant-tabs-bottom]': `nzTabPosition === 'bottom'`,
'[class.ant-tabs-left]': `nzTabPosition === 'left'`,
'[class.ant-tabs-right]': `nzTabPosition === 'right'`,
'[class.ant-tabs-default]': `nzSize === 'default'`,
'[class.ant-tabs-small]': `nzSize === 'small'`,
'[class.ant-tabs-large]': `nzSize === 'large'`
},
imports: [
NzTabNavBarComponent,
NgTemplateOutlet,
NzTabNavItemDirective,
A11yModule,
NzOutletModule,
NzTabCloseButtonComponent,
NzTabBodyComponent
]
}]
}], ctorParameters: () => [], propDecorators: { nzSelectedIndex: [{
type: Input
}], nzTabPosition: [{
type: Input
}], nzTabBarExtraContent: [{
type: Input
}], nzCanDeactivate: [{
type: Input
}], nzAddIcon: [{
type: Input
}], nzTabBarStyle: [{
type: Input
}], nzType: [{
type: Input
}], nzSize: [{
type: Input
}], nzAnimated: [{
type: Input
}], nzTabBarGutter: [{
type: Input
}], nzHideAdd: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], nzCentered: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], nzHideAll: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], nzLinkRouter: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], nzLinkExact: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], nzDestroyInactiveTabPane: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], nzIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzIndicator", required: false }] }], nzSelectChange: [{
type: Output
}], nzSelectedIndexChange: [{
type: Output
}], nzTabListScroll: [{
type: Output
}], nzClose: [{
type: Output
}], nzAdd: [{
type: Output
}], allTabs: [{
type: ContentChildren,
args: [NzTabComponent, { descendants: true }]
}], tabLinks: [{
type: ContentChildren,
args: [NzTabLinkDirective, { descendants: true }]
}], tabNavBarRef: [{
type: ViewChild,
args: [NzTabNavBarComponent, { static: false }]
}], extraContents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NzTabBarExtraContentDirective), { isSignal: true }] }] } });
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
const DIRECTIVES = [
NzTabsComponent,
NzTabComponent,
NzTabNavBarComponent,
NzTabNavItemDirective,
NzTabsInkBarDirective,
NzTabScrollListDirective,
NzTabNavOperationComponent,
NzTabAddButtonComponent,
NzTabCloseButtonComponent,
NzTabDirective,
NzTabBodyComponent,
NzTabLinkDirective,
NzTabLinkTemplateDirective,
NzTabBarExtraContentDirective
];
class NzTabsModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: NzTabsModule, imports: [NzTabsComponent,
NzTabComponent,
NzTabNavBarComponent,
NzTabNavItemDirective,
NzTabsInkBarDirective,
NzTabScrollListDirective,
NzTabNavOperationComponent,
NzTabAddButtonComponent,
NzTabCloseButtonComponent,
NzTabDirective,
NzTabBodyComponent,
NzTabLinkDirective,
NzTabLinkTemplateDirective,
NzTabBarExtraContentDirective], exports: [NzTabsComponent,
NzTabComponent,
NzTabNavBarComponent,
NzTabNavItemDirective,
NzTabsInkBarDirective,
NzTabScrollListDirective,
NzTabNavOperationComponent,
NzTabAddButtonComponent,
NzTabCloseButtonComponent,
NzTabDirective,
NzTabBodyComponent,
NzTabLinkDirective,
NzTabLinkTemplateDirective,
NzTabBarExtraContentDirective] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabsModule, imports: [NzTabsComponent,
NzTabNavBarComponent,
NzTabNavOperationComponent,
NzTabAddButtonComponent,
NzTabCloseButtonComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NzTabsModule, decorators: [{
type: NgModule,
args: [{
imports: [DIRECTIVES],
exports: [DIRECTIVES]
}]
}] });
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
/**
* Generated bundle index. Do not edit.
*/
export { NZ_TAB_SET, NzTabBarExtraContentDirective, NzTabChangeEvent, NzTabComponent, NzTabDirective, NzTabLinkDirective, NzTabLinkTemplateDirective, NzTabsComponent, NzTabsModule, NzTabAddButtonComponent as ɵNzTabAddButtonComponent, NzTabBodyComponent as ɵNzTabBodyComponent, NzTabCloseButtonComponent as ɵNzTabCloseButtonComponent, NzTabNavBarComponent as ɵNzTabNavBarComponent, NzTabNavItemDirective as ɵNzTabNavItemDirective, NzTabNavOperationComponent as ɵNzTabNavOperationComponent, NzTabScrollListDirective as ɵNzTabScrollListDirective, NzTabsInkBarDirective as ɵNzTabsInkBarDirective };
//# sourceMappingURL=ng-zorro-antd-tabs.mjs.map