ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
427 lines (402 loc) • 21.9 kB
TypeScript
import { Observable, Subject } from 'rxjs';
import { NzSafeAny, NzSizeLDSType } from 'ng-zorro-antd/core/types';
import * as i0 from '@angular/core';
import { TemplateRef, ElementRef, OnChanges, OnDestroy, EventEmitter, SimpleChanges, InjectionToken, AfterViewInit, AfterContentChecked, QueryList, OnInit, AfterContentInit } from '@angular/core';
import { RouterLink } from '@angular/router';
import { FocusableOption } from '@angular/cdk/a11y';
import { Direction } from '@angular/cdk/bidi';
import { NzConfigKey, NzConfigService } from 'ng-zorro-antd/core/config';
/**
* 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
*/
type NzTabPosition = 'top' | 'bottom' | 'left' | 'right';
type NzTabType = 'line' | 'card' | 'editable-card';
type NzTabsCanDeactivateFn = (fromIndex: number, toIndex: number) => Observable<boolean> | Promise<boolean> | boolean;
type NzTabPositionMode = 'horizontal' | 'vertical';
interface NzAnimatedInterface {
inkBar: boolean;
tabPane: boolean;
}
declare class NzTabChangeEvent {
index?: number;
tab: NzSafeAny;
}
interface NzTabScrollListOffset {
x: number;
y: number;
}
type NzTabScrollListOffsetEvent = NzTabScrollListOffset & {
event: Event;
};
interface NzTabWheelScrollEvent {
type: 'wheel';
event: WheelEvent;
}
interface NzTabTouchScrollEvent {
type: 'touchstart' | 'touchmove' | 'touchend';
event: TouchEvent;
}
type NzTabScrollEvent = NzTabTouchScrollEvent | NzTabWheelScrollEvent;
type NzTabScrollEventHandlerFun<T extends NzTabScrollEvent['event']> = (event: T) => void;
interface TabTemplateContext {
visible: boolean;
}
/**
* 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
*/
declare class NzTabAddButtonComponent {
addIcon: string | TemplateRef<NzSafeAny>;
private readonly element;
getElementWidth(): number;
getElementHeight(): number;
static ɵfac: i0.ɵɵFactoryDeclaration<NzTabAddButtonComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NzTabAddButtonComponent, "nz-tab-add-button, button[nz-tab-add-button]", never, { "addIcon": { "alias": "addIcon"; "required": false; }; }, {}, never, never, true, never>;
}
declare class NzTabBarExtraContentDirective {
readonly position: i0.InputSignal<"start" | "end">;
readonly templateRef: TemplateRef<any>;
static ɵfac: i0.ɵɵFactoryDeclaration<NzTabBarExtraContentDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NzTabBarExtraContentDirective, "[nzTabBarExtraContent]:not(nz-tabset):not(nz-tabs)", never, { "position": { "alias": "nzTabBarExtraContent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}
declare class NzTabBodyComponent {
content: TemplateRef<void> | null;
active: boolean;
animated: boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<NzTabBodyComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NzTabBodyComponent, "[nz-tab-body]", ["nzTabBody"], { "content": { "alias": "content"; "required": false; }; "active": { "alias": "active"; "required": false; }; "animated": { "alias": "animated"; "required": false; }; }, {}, never, never, true, never>;
}
/**
* 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
*/
declare class NzTabCloseButtonComponent {
closeIcon: string | TemplateRef<NzSafeAny>;
static ɵfac: i0.ɵɵFactoryDeclaration<NzTabCloseButtonComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NzTabCloseButtonComponent, "nz-tab-close-button, button[nz-tab-close-button]", never, { "closeIcon": { "alias": "closeIcon"; "required": false; }; }, {}, never, never, true, never>;
}
/**
* 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
*/
declare class NzTabLinkTemplateDirective {
templateRef: TemplateRef<TabTemplateContext>;
static ɵfac: i0.ɵɵFactoryDeclaration<NzTabLinkTemplateDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NzTabLinkTemplateDirective, "ng-template[nzTabLink]", ["nzTabLinkTemplate"], {}, {}, never, never, true, never>;
}
/**
* This component is for catching `routerLink` directive.
*/
declare class NzTabLinkDirective {
elementRef: ElementRef<any>;
routerLink: RouterLink | null;
static ɵfac: i0.ɵɵFactoryDeclaration<NzTabLinkDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NzTabLinkDirective, "a[nz-tab-link]", ["nzTabLink"], {}, {}, never, never, true, never>;
}
/**
* 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.
*/
declare const NZ_TAB_SET: InjectionToken<any>;
declare class NzTabComponent implements OnChanges, OnDestroy {
nzTitle: string | TemplateRef<TabTemplateContext>;
nzClosable: boolean;
nzCloseIcon: string | TemplateRef<NzSafeAny>;
nzDisabled: boolean;
nzForceRender: boolean;
readonly nzSelect: EventEmitter<void>;
readonly nzDeselect: EventEmitter<void>;
readonly nzClick: EventEmitter<void>;
readonly nzContextmenu: EventEmitter<MouseEvent>;
nzTabLinkTemplateDirective: NzTabLinkTemplateDirective;
template: TemplateRef<void> | null;
linkDirective: NzTabLinkDirective;
contentTemplate: TemplateRef<NzSafeAny>;
isActive: boolean;
hasBeenActive: boolean;
position: number | null;
origin: number | null;
closestTabSet: any;
readonly stateChanges: Subject<void>;
get content(): TemplateRef<NzSafeAny>;
get label(): string | TemplateRef<NzSafeAny>;
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
setActive(active: boolean): void;
static ɵfac: i0.ɵɵFactoryDeclaration<NzTabComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NzTabComponent, "nz-tab", ["nzTab"], { "nzTitle": { "alias": "nzTitle"; "required": false; }; "nzClosable": { "alias": "nzClosable"; "required": false; }; "nzCloseIcon": { "alias": "nzCloseIcon"; "required": false; }; "nzDisabled": { "alias": "nzDisabled"; "required": false; }; "nzForceRender": { "alias": "nzForceRender"; "required": false; }; }, { "nzSelect": "nzSelect"; "nzDeselect": "nzDeselect"; "nzClick": "nzClick"; "nzContextmenu": "nzContextmenu"; }, ["nzTabLinkTemplateDirective", "template", "linkDirective"], ["[nz-tab-link]", "*"], true, never>;
static ngAcceptInputType_nzClosable: unknown;
static ngAcceptInputType_nzDisabled: unknown;
static ngAcceptInputType_nzForceRender: unknown;
}
/**
* 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
*/
declare class NzTabNavItemDirective implements FocusableOption {
disabled: boolean;
tab: NzTabComponent;
active: boolean;
elementRef: ElementRef<HTMLElement>;
private el;
private parentElement;
focus(): void;
get width(): number;
get height(): number;
get left(): number;
get top(): number;
static ɵfac: i0.ɵɵFactoryDeclaration<NzTabNavItemDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NzTabNavItemDirective, "[nzTabNavItem]", never, { "disabled": { "alias": "disabled"; "required": false; }; "tab": { "alias": "tab"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, {}, never, never, true, never>;
static ngAcceptInputType_disabled: unknown;
static ngAcceptInputType_active: unknown;
}
/**
* 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
*/
declare class NzTabNavOperationComponent implements OnDestroy {
items: NzTabNavItemDirective[];
addable: boolean;
addIcon: string | TemplateRef<NzSafeAny>;
readonly addClicked: EventEmitter<void>;
readonly selected: EventEmitter<NzTabNavItemDirective>;
closeAnimationWaitTimeoutId?: ReturnType<typeof setTimeout>;
menuOpened: boolean;
private cdr;
private readonly element;
onSelect(item: NzTabNavItemDirective): void;
onContextmenu(item: NzTabNavItemDirective, e: MouseEvent): void;
showItems(): void;
menuVisChange(visible: boolean): void;
getElementWidth(): number;
getElementHeight(): number;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<NzTabNavOperationComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NzTabNavOperationComponent, "nz-tab-nav-operation", ["nzTabNavOperation"], { "items": { "alias": "items"; "required": false; }; "addable": { "alias": "addable"; "required": false; }; "addIcon": { "alias": "addIcon"; "required": false; }; }, { "addClicked": "addClicked"; "selected": "selected"; }, never, never, true, never>;
static ngAcceptInputType_addable: unknown;
}
declare class NzTabsInkBarDirective {
private ngZone;
private el;
position: NzTabPositionMode;
animated: boolean;
animationMode: "NoopAnimations" | "BrowserAnimations" | null;
get _animated(): boolean;
alignToElement(element: HTMLElement): void;
setStyles(element: HTMLElement): void;
getLeftPosition(element: HTMLElement): string;
getElementWidth(element: HTMLElement): string;
getTopPosition(element: HTMLElement): string;
getElementHeight(element: HTMLElement): string;
static ɵfac: i0.ɵɵFactoryDeclaration<NzTabsInkBarDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NzTabsInkBarDirective, "nz-tabs-ink-bar, [nz-tabs-ink-bar]", never, { "position": { "alias": "position"; "required": false; }; "animated": { "alias": "animated"; "required": false; }; }, {}, never, never, true, never>;
}
declare class NzTabNavBarComponent implements AfterViewInit, AfterContentChecked, OnChanges {
private cdr;
private ngZone;
private viewportRuler;
private nzResizeObserver;
private dir;
private destroyRef;
readonly indexFocused: EventEmitter<number>;
readonly selectFocusedIndex: EventEmitter<number>;
readonly addClicked: EventEmitter<void>;
readonly tabScroll: EventEmitter<NzTabScrollEvent>;
position: NzTabPositionMode;
addable: boolean;
hideBar: boolean;
addIcon: string | TemplateRef<NzSafeAny>;
inkBarAnimated: boolean;
extraTemplate?: TemplateRef<void>;
readonly extraContents: i0.InputSignal<readonly NzTabBarExtraContentDirective[]>;
readonly startExtraContent: i0.Signal<NzTabBarExtraContentDirective | undefined>;
readonly endExtraContent: i0.Signal<NzTabBarExtraContentDirective | undefined>;
get selectedIndex(): number;
set selectedIndex(value: number);
navWrapRef: ElementRef<HTMLElement>;
navListRef: ElementRef<HTMLElement>;
operationRef: NzTabNavOperationComponent;
addBtnRef: NzTabAddButtonComponent;
inkBar: NzTabsInkBarDirective;
items: QueryList<NzTabNavItemDirective>;
/** Tracks which element has focus; used for keyboard navigation */
get focusIndex(): number;
/** When the focus index is set, we must manually send focus to the correct label */
set focusIndex(value: number);
get showAddButton(): boolean;
translate: null | string;
transformX: number;
transformY: number;
pingLeft: boolean;
pingRight: boolean;
pingTop: boolean;
pingBottom: boolean;
hiddenItems: NzTabNavItemDirective[];
private keyManager;
private _selectedIndex;
private wrapperWidth;
private wrapperHeight;
private scrollListWidth;
private scrollListHeight;
private operationWidth;
private operationHeight;
private addButtonWidth;
private addButtonHeight;
private selectedIndexChanged;
private lockAnimationTimeoutId?;
private cssTransformTimeWaitingId?;
constructor();
ngAfterViewInit(): void;
ngAfterContentChecked(): void;
onSelectedFromMenu(tab: NzTabNavItemDirective): void;
onOffsetChange(e: NzTabScrollListOffsetEvent): void;
handleKeydown(event: KeyboardEvent): void;
private isValidIndex;
private scrollToTab;
private lockAnimation;
private setTransform;
private clampTransformX;
private clampTransformY;
private updateScrollListPosition;
private resetSizes;
private alignInkBarToSelectedTab;
private setPingStatus;
private setVisibleRange;
private getLayoutDirection;
ngOnChanges(changes: SimpleChanges): void;
static ɵfac: i0.ɵɵFactoryDeclaration<NzTabNavBarComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NzTabNavBarComponent, "nz-tabs-nav", ["nzTabsNav"], { "position": { "alias": "position"; "required": false; }; "addable": { "alias": "addable"; "required": false; }; "hideBar": { "alias": "hideBar"; "required": false; }; "addIcon": { "alias": "addIcon"; "required": false; }; "inkBarAnimated": { "alias": "inkBarAnimated"; "required": false; }; "extraTemplate": { "alias": "extraTemplate"; "required": false; }; "extraContents": { "alias": "extraContents"; "required": true; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; }, { "indexFocused": "indexFocused"; "selectFocusedIndex": "selectFocusedIndex"; "addClicked": "addClicked"; "tabScroll": "tabScroll"; }, ["items"], ["*"], true, never>;
static ngAcceptInputType_addable: unknown;
static ngAcceptInputType_hideBar: unknown;
}
/**
* 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
*/
declare class NzTabScrollListDirective implements OnInit {
private ngZone;
private destroyRef;
private el;
lastWheelDirection: 'x' | 'y' | null;
lastWheelTimestamp: number;
lastTimestamp: number;
lastTimeDiff: number;
lastMixedWheel: number;
lastWheelPrevent: boolean;
touchPosition: NzTabScrollListOffset | null;
lastOffset: NzTabScrollListOffset | null;
motion: number;
readonly offsetChange: EventEmitter<NzTabScrollListOffsetEvent>;
readonly tabScroll: EventEmitter<NzTabScrollEvent>;
ngOnInit(): void;
private subscribeWrap;
onTouchEnd: (e: TouchEvent) => void;
onTouchMove: (e: TouchEvent) => void;
onTouchStart: (e: TouchEvent) => void;
onWheel: (e: WheelEvent) => void;
onOffset(x: number, y: number, event: Event): void;
static ɵfac: i0.ɵɵFactoryDeclaration<NzTabScrollListDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NzTabScrollListDirective, "[nzTabScrollList]", never, {}, { "offsetChange": "offsetChange"; "tabScroll": "tabScroll"; }, never, never, true, never>;
}
/** Decorates the `ng-template` tags and reads out the template from it. */
declare class NzTabDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<NzTabDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NzTabDirective, "[nz-tab]", ["nzTab"], {}, {}, never, never, true, never>;
}
declare class NzTabsComponent implements OnInit, AfterContentChecked, AfterContentInit {
readonly _nzModuleName: NzConfigKey;
nzConfigService: NzConfigService;
private ngZone;
private cdr;
private directionality;
private destroyRef;
get nzSelectedIndex(): number | null;
set nzSelectedIndex(value: null | number);
nzTabPosition: NzTabPosition;
nzTabBarExtraContent?: TemplateRef<void>;
nzCanDeactivate: NzTabsCanDeactivateFn | null;
nzAddIcon: string | TemplateRef<NzSafeAny>;
nzTabBarStyle: Record<string, string> | null;
nzType: NzTabType;
nzSize: NzSizeLDSType;
nzAnimated: NzAnimatedInterface | boolean;
nzTabBarGutter?: number;
nzHideAdd: boolean;
nzCentered: boolean;
nzHideAll: boolean;
nzLinkRouter: boolean;
nzLinkExact: boolean;
nzDestroyInactiveTabPane: boolean;
readonly nzSelectChange: EventEmitter<NzTabChangeEvent>;
readonly nzSelectedIndexChange: EventEmitter<number>;
readonly nzTabListScroll: EventEmitter<NzTabScrollEvent>;
readonly nzClose: EventEmitter<{
index: number;
}>;
readonly nzAdd: EventEmitter<void>;
get position(): NzTabPositionMode;
get addable(): boolean;
get closable(): boolean;
get line(): boolean;
get inkBarAnimated(): boolean;
get tabPaneAnimated(): boolean;
allTabs: QueryList<NzTabComponent>;
tabLinks: QueryList<NzTabLinkDirective>;
tabNavBarRef: NzTabNavBarComponent;
tabs: QueryList<NzTabComponent>;
readonly extraContents: i0.Signal<readonly NzTabBarExtraContentDirective[]>;
dir: Direction;
private readonly tabSetId;
private indexToSelect;
private selectedIndex;
private tabLabelSubscription;
private canDeactivateSubscription;
private router;
constructor();
ngOnInit(): void;
ngAfterContentInit(): void;
ngAfterContentChecked(): void;
onClose(index: number, e: MouseEvent): void;
onAdd(): void;
private clampTabIndex;
private createChangeEvent;
private subscribeToTabLabels;
private subscribeToAllTabChanges;
canDeactivateFun(pre: number, next: number): Observable<boolean>;
clickNavItem(tab: NzTabComponent, index: number, e: MouseEvent): void;
private isRouterLinkClickEvent;
contextmenuNavItem(tab: NzTabComponent, e: MouseEvent): void;
setSelectedIndex(index: number): void;
getTabIndex(tab: NzTabComponent, index: number): number | null;
getTabContentId(i: number): string;
private setUpRouter;
private updateRouterActive;
private findShouldActiveTabIndex;
private isLinkActive;
static ɵfac: i0.ɵɵFactoryDeclaration<NzTabsComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NzTabsComponent, "nz-tabs,nz-tabset", ["nzTabs"], { "nzSelectedIndex": { "alias": "nzSelectedIndex"; "required": false; }; "nzTabPosition": { "alias": "nzTabPosition"; "required": false; }; "nzTabBarExtraContent": { "alias": "nzTabBarExtraContent"; "required": false; }; "nzCanDeactivate": { "alias": "nzCanDeactivate"; "required": false; }; "nzAddIcon": { "alias": "nzAddIcon"; "required": false; }; "nzTabBarStyle": { "alias": "nzTabBarStyle"; "required": false; }; "nzType": { "alias": "nzType"; "required": false; }; "nzSize": { "alias": "nzSize"; "required": false; }; "nzAnimated": { "alias": "nzAnimated"; "required": false; }; "nzTabBarGutter": { "alias": "nzTabBarGutter"; "required": false; }; "nzHideAdd": { "alias": "nzHideAdd"; "required": false; }; "nzCentered": { "alias": "nzCentered"; "required": false; }; "nzHideAll": { "alias": "nzHideAll"; "required": false; }; "nzLinkRouter": { "alias": "nzLinkRouter"; "required": false; }; "nzLinkExact": { "alias": "nzLinkExact"; "required": false; }; "nzDestroyInactiveTabPane": { "alias": "nzDestroyInactiveTabPane"; "required": false; }; }, { "nzSelectChange": "nzSelectChange"; "nzSelectedIndexChange": "nzSelectedIndexChange"; "nzTabListScroll": "nzTabListScroll"; "nzClose": "nzClose"; "nzAdd": "nzAdd"; }, ["extraContents", "allTabs", "tabLinks"], never, true, never>;
static ngAcceptInputType_nzHideAdd: unknown;
static ngAcceptInputType_nzCentered: unknown;
static ngAcceptInputType_nzHideAll: unknown;
static ngAcceptInputType_nzLinkRouter: unknown;
static ngAcceptInputType_nzLinkExact: unknown;
static ngAcceptInputType_nzDestroyInactiveTabPane: unknown;
}
/**
* @deprecated Use `NzTabsComponent` instead. This will be removed in 21.0.0.
*/
declare const NzTabSetComponent: typeof NzTabsComponent;
declare class NzTabsModule {
static ɵfac: i0.ɵɵFactoryDeclaration<NzTabsModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<NzTabsModule, never, [typeof NzTabsComponent, typeof NzTabComponent, typeof NzTabNavBarComponent, typeof NzTabNavItemDirective, typeof NzTabsInkBarDirective, typeof NzTabScrollListDirective, typeof NzTabNavOperationComponent, typeof NzTabAddButtonComponent, typeof NzTabCloseButtonComponent, typeof NzTabDirective, typeof NzTabBodyComponent, typeof NzTabLinkDirective, typeof NzTabLinkTemplateDirective, typeof NzTabBarExtraContentDirective], [typeof NzTabsComponent, typeof NzTabComponent, typeof NzTabNavBarComponent, typeof NzTabNavItemDirective, typeof NzTabsInkBarDirective, typeof NzTabScrollListDirective, typeof NzTabNavOperationComponent, typeof NzTabAddButtonComponent, typeof NzTabCloseButtonComponent, typeof NzTabDirective, typeof NzTabBodyComponent, typeof NzTabLinkDirective, typeof NzTabLinkTemplateDirective, typeof NzTabBarExtraContentDirective]>;
static ɵinj: i0.ɵɵInjectorDeclaration<NzTabsModule>;
}
export { NZ_TAB_SET, NzTabBarExtraContentDirective, NzTabChangeEvent, NzTabComponent, NzTabDirective, NzTabLinkDirective, NzTabLinkTemplateDirective, NzTabSetComponent, 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 };
export type { NzAnimatedInterface, NzTabPosition, NzTabPositionMode, NzTabScrollEvent, NzTabScrollEventHandlerFun, NzTabScrollListOffset, NzTabScrollListOffsetEvent, NzTabType, NzTabsCanDeactivateFn, TabTemplateContext };