ng-zorro-antd-tabs.mjs 95 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064
  1. import * as i0 from '@angular/core';
  2. import { Input, Component, input, inject, TemplateRef, Directive, ChangeDetectionStrategy, ViewEncapsulation, booleanAttribute, EventEmitter, Output, computed, ContentChildren, ViewChild, InjectionToken, ContentChild, QueryList, contentChildren, forwardRef, NgModule } from '@angular/core';
  3. import * as i1 from 'ng-zorro-antd/core/outlet';
  4. import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
  5. import * as i2 from 'ng-zorro-antd/icon';
  6. import { NzIconModule } from 'ng-zorro-antd/icon';
  7. import { NgTemplateOutlet } from '@angular/common';
  8. import { tabSwitchMotion } from 'ng-zorro-antd/core/animation';
  9. import { RouterLink, Router, NavigationEnd } from '@angular/router';
  10. import * as i3$2 from '@angular/cdk/a11y';
  11. import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
  12. import { coerceNumberProperty } from '@angular/cdk/coercion';
  13. import { hasModifierKey, SPACE, ENTER, DOWN_ARROW, RIGHT_ARROW, UP_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
  14. import { fromEvent, Subscription, animationFrameScheduler, asapScheduler, Subject, of, merge } from 'rxjs';
  15. import { takeUntil, auditTime, startWith, first, filter, delay } from 'rxjs/operators';
  16. import { reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
  17. import { NzDropdownMenuComponent, NzDropDownDirective } from 'ng-zorro-antd/dropdown';
  18. import * as i3 from 'ng-zorro-antd/menu';
  19. import { NzMenuModule } from 'ng-zorro-antd/menu';
  20. import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
  21. import * as i1$1 from '@angular/cdk/overlay';
  22. import * as i2$1 from 'ng-zorro-antd/cdk/resize-observer';
  23. import * as i3$1 from '@angular/cdk/bidi';
  24. import { __esDecorate, __runInitializers } from 'tslib';
  25. import * as i1$2 from 'ng-zorro-antd/core/config';
  26. import { WithConfig } from 'ng-zorro-antd/core/config';
  27. import { PREFIX } from 'ng-zorro-antd/core/logger';
  28. import { wrapIntoObservable } from 'ng-zorro-antd/core/util';
  29. /**
  30. * Use of this source code is governed by an MIT-style license that can be
  31. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  32. */
  33. class NzTabChangeEvent {
  34. index;
  35. tab;
  36. }
  37. /**
  38. * Use of this source code is governed by an MIT-style license that can be
  39. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  40. */
  41. class NzTabAddButtonComponent {
  42. elementRef;
  43. addIcon = 'plus';
  44. element;
  45. constructor(elementRef) {
  46. this.elementRef = elementRef;
  47. this.element = this.elementRef.nativeElement;
  48. }
  49. getElementWidth() {
  50. return this.element?.offsetWidth || 0;
  51. }
  52. getElementHeight() {
  53. return this.element?.offsetHeight || 0;
  54. }
  55. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabAddButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
  56. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", 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: `
  57. <ng-container *nzStringTemplateOutlet="addIcon; let icon">
  58. <nz-icon [nzType]="icon" nzTheme="outline" />
  59. </ng-container>
  60. `, 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"] }] });
  61. }
  62. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabAddButtonComponent, decorators: [{
  63. type: Component,
  64. args: [{
  65. selector: 'nz-tab-add-button, button[nz-tab-add-button]',
  66. template: `
  67. <ng-container *nzStringTemplateOutlet="addIcon; let icon">
  68. <nz-icon [nzType]="icon" nzTheme="outline" />
  69. </ng-container>
  70. `,
  71. host: {
  72. class: 'ant-tabs-nav-add',
  73. 'aria-label': 'Add tab',
  74. type: 'button'
  75. },
  76. imports: [NzOutletModule, NzIconModule]
  77. }]
  78. }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { addIcon: [{
  79. type: Input
  80. }] } });
  81. /**
  82. * Use of this source code is governed by an MIT-style license that can be
  83. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  84. */
  85. class NzTabBarExtraContentDirective {
  86. position = input('end', { alias: 'nzTabBarExtraContent' });
  87. templateRef = inject(TemplateRef);
  88. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabBarExtraContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  89. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.2", type: NzTabBarExtraContentDirective, isStandalone: true, selector: "[nzTabBarExtraContent]:not(nz-tabset)", inputs: { position: { classPropertyName: "position", publicName: "nzTabBarExtraContent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
  90. }
  91. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabBarExtraContentDirective, decorators: [{
  92. type: Directive,
  93. args: [{
  94. selector: '[nzTabBarExtraContent]:not(nz-tabset)'
  95. }]
  96. }] });
  97. /**
  98. * Use of this source code is governed by an MIT-style license that can be
  99. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  100. */
  101. class NzTabBodyComponent {
  102. content = null;
  103. active = false;
  104. animated = true;
  105. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  106. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: NzTabBodyComponent, isStandalone: true, selector: "[nz-tab-body]", inputs: { content: "content", active: "active", animated: "animated" }, host: { properties: { "class.ant-tabs-tabpane-active": "active", "class.ant-tabs-tabpane-hidden": "animated ? null : !active", "attr.tabindex": "active ? 0 : -1", "attr.aria-hidden": "!active", "style.overflow-y": "animated ? active ? null : \"none\" : null", "@tabSwitchMotion": "active ? 'enter' : 'leave'", "@.disabled": "!animated" }, classAttribute: "ant-tabs-tabpane" }, exportAs: ["nzTabBody"], ngImport: i0, template: ` <ng-template [ngTemplateOutlet]="content"></ng-template> `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [tabSwitchMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  107. }
  108. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabBodyComponent, decorators: [{
  109. type: Component,
  110. args: [{
  111. selector: '[nz-tab-body]',
  112. exportAs: 'nzTabBody',
  113. preserveWhitespaces: false,
  114. encapsulation: ViewEncapsulation.None,
  115. changeDetection: ChangeDetectionStrategy.OnPush,
  116. template: ` <ng-template [ngTemplateOutlet]="content"></ng-template> `,
  117. host: {
  118. class: 'ant-tabs-tabpane',
  119. '[class.ant-tabs-tabpane-active]': 'active',
  120. '[class.ant-tabs-tabpane-hidden]': 'animated ? null : !active',
  121. '[attr.tabindex]': 'active ? 0 : -1',
  122. '[attr.aria-hidden]': '!active',
  123. '[style.overflow-y]': 'animated ? active ? null : "none" : null',
  124. '[@tabSwitchMotion]': `active ? 'enter' : 'leave'`,
  125. '[@.disabled]': `!animated`
  126. },
  127. imports: [NgTemplateOutlet],
  128. animations: [tabSwitchMotion]
  129. }]
  130. }], propDecorators: { content: [{
  131. type: Input
  132. }], active: [{
  133. type: Input
  134. }], animated: [{
  135. type: Input
  136. }] } });
  137. /**
  138. * Use of this source code is governed by an MIT-style license that can be
  139. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  140. */
  141. class NzTabCloseButtonComponent {
  142. closeIcon = 'close';
  143. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabCloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  144. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", 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: `
  145. <ng-container *nzStringTemplateOutlet="closeIcon; let icon">
  146. <nz-icon [nzType]="icon" nzTheme="outline" />
  147. </ng-container>
  148. `, 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"] }] });
  149. }
  150. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabCloseButtonComponent, decorators: [{
  151. type: Component,
  152. args: [{
  153. selector: 'nz-tab-close-button, button[nz-tab-close-button]',
  154. template: `
  155. <ng-container *nzStringTemplateOutlet="closeIcon; let icon">
  156. <nz-icon [nzType]="icon" nzTheme="outline" />
  157. </ng-container>
  158. `,
  159. host: {
  160. class: 'ant-tabs-tab-remove',
  161. 'aria-label': 'Close tab',
  162. type: 'button'
  163. },
  164. imports: [NzOutletModule, NzIconModule]
  165. }]
  166. }], propDecorators: { closeIcon: [{
  167. type: Input
  168. }] } });
  169. /**
  170. * Use of this source code is governed by an MIT-style license that can be
  171. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  172. */
  173. /**
  174. * Fix https://github.com/angular/angular/issues/8563
  175. */
  176. class NzTabLinkTemplateDirective {
  177. templateRef = inject(TemplateRef, { host: true });
  178. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabLinkTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  179. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzTabLinkTemplateDirective, isStandalone: true, selector: "ng-template[nzTabLink]", exportAs: ["nzTabLinkTemplate"], ngImport: i0 });
  180. }
  181. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabLinkTemplateDirective, decorators: [{
  182. type: Directive,
  183. args: [{
  184. selector: 'ng-template[nzTabLink]',
  185. exportAs: 'nzTabLinkTemplate'
  186. }]
  187. }] });
  188. /**
  189. * This component is for catching `routerLink` directive.
  190. */
  191. class NzTabLinkDirective {
  192. elementRef;
  193. routerLink = inject(RouterLink, { self: true, optional: true });
  194. constructor(elementRef) {
  195. this.elementRef = elementRef;
  196. }
  197. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabLinkDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
  198. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzTabLinkDirective, isStandalone: true, selector: "a[nz-tab-link]", exportAs: ["nzTabLink"], ngImport: i0 });
  199. }
  200. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabLinkDirective, decorators: [{
  201. type: Directive,
  202. args: [{
  203. selector: 'a[nz-tab-link]',
  204. exportAs: 'nzTabLink'
  205. }]
  206. }], ctorParameters: () => [{ type: i0.ElementRef }] });
  207. class NzTabNavItemDirective {
  208. elementRef;
  209. disabled = false;
  210. tab;
  211. active = false;
  212. el;
  213. parentElement;
  214. constructor(elementRef) {
  215. this.elementRef = elementRef;
  216. this.el = elementRef.nativeElement;
  217. this.parentElement = this.el.parentElement;
  218. }
  219. focus() {
  220. this.el.focus();
  221. }
  222. get width() {
  223. return this.parentElement.offsetWidth;
  224. }
  225. get height() {
  226. return this.parentElement.offsetHeight;
  227. }
  228. get left() {
  229. return this.parentElement.offsetLeft;
  230. }
  231. get top() {
  232. return this.parentElement.offsetTop;
  233. }
  234. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabNavItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
  235. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.2", type: NzTabNavItemDirective, isStandalone: true, selector: "[nzTabNavItem]", inputs: { disabled: ["disabled", "disabled", booleanAttribute], tab: "tab", active: ["active", "active", booleanAttribute] }, ngImport: i0 });
  236. }
  237. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabNavItemDirective, decorators: [{
  238. type: Directive,
  239. args: [{
  240. selector: '[nzTabNavItem]'
  241. }]
  242. }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disabled: [{
  243. type: Input,
  244. args: [{ transform: booleanAttribute }]
  245. }], tab: [{
  246. type: Input
  247. }], active: [{
  248. type: Input,
  249. args: [{ transform: booleanAttribute }]
  250. }] } });
  251. /**
  252. * Use of this source code is governed by an MIT-style license that can be
  253. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  254. */
  255. class NzTabNavOperationComponent {
  256. cdr;
  257. elementRef;
  258. items = [];
  259. addable = false;
  260. addIcon = 'plus';
  261. addClicked = new EventEmitter();
  262. selected = new EventEmitter();
  263. closeAnimationWaitTimeoutId;
  264. menuOpened = false;
  265. element;
  266. constructor(cdr, elementRef) {
  267. this.cdr = cdr;
  268. this.elementRef = elementRef;
  269. this.element = this.elementRef.nativeElement;
  270. }
  271. onSelect(item) {
  272. if (!item.disabled) {
  273. // ignore nzCanDeactivate
  274. item.tab.nzClick.emit();
  275. this.selected.emit(item);
  276. }
  277. }
  278. onContextmenu(item, e) {
  279. if (!item.disabled) {
  280. item.tab.nzContextmenu.emit(e);
  281. }
  282. }
  283. showItems() {
  284. clearTimeout(this.closeAnimationWaitTimeoutId);
  285. this.menuOpened = true;
  286. this.cdr.markForCheck();
  287. }
  288. menuVisChange(visible) {
  289. if (!visible) {
  290. this.closeAnimationWaitTimeoutId = setTimeout(() => {
  291. this.menuOpened = false;
  292. this.cdr.markForCheck();
  293. }, 150);
  294. }
  295. }
  296. getElementWidth() {
  297. return this.element?.offsetWidth || 0;
  298. }
  299. getElementHeight() {
  300. return this.element?.offsetHeight || 0;
  301. }
  302. ngOnDestroy() {
  303. clearTimeout(this.closeAnimationWaitTimeoutId);
  304. }
  305. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabNavOperationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
  306. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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: `
  307. <button
  308. nz-dropdown
  309. class="ant-tabs-nav-more"
  310. type="button"
  311. tabindex="-1"
  312. aria-hidden="true"
  313. nzOverlayClassName="nz-tabs-dropdown"
  314. #dropdownTrigger="nzDropdown"
  315. [nzDropdownMenu]="menu"
  316. [nzOverlayStyle]="{ minWidth: '46px' }"
  317. [nzMatchWidthElement]="null"
  318. (nzVisibleChange)="menuVisChange($event)"
  319. (mouseenter)="showItems()"
  320. >
  321. <nz-icon nzType="ellipsis" />
  322. </button>
  323. <nz-dropdown-menu #menu="nzDropdownMenu">
  324. @if (menuOpened) {
  325. <ul nz-menu>
  326. @for (item of items; track item) {
  327. <li
  328. nz-menu-item
  329. class="ant-tabs-dropdown-menu-item"
  330. [class.ant-tabs-dropdown-menu-item-disabled]="item.disabled"
  331. [nzSelected]="item.active"
  332. [nzDisabled]="item.disabled"
  333. (click)="onSelect(item)"
  334. (contextmenu)="onContextmenu(item, $event)"
  335. >
  336. <ng-container *nzStringTemplateOutlet="item.tab.label; context: { visible: false }">
  337. {{ item.tab.label }}
  338. </ng-container>
  339. </li>
  340. }
  341. </ul>
  342. }
  343. </nz-dropdown-menu>
  344. @if (addable) {
  345. <button nz-tab-add-button [addIcon]="addIcon" (click)="addClicked.emit()"></button>
  346. }
  347. `, isInline: true, dependencies: [{ 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: "component", type: NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "ngmodule", type: NzMenuModule }, { kind: "directive", type: i3.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i3.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  348. }
  349. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabNavOperationComponent, decorators: [{
  350. type: Component,
  351. args: [{
  352. selector: 'nz-tab-nav-operation',
  353. exportAs: 'nzTabNavOperation',
  354. preserveWhitespaces: false,
  355. changeDetection: ChangeDetectionStrategy.OnPush,
  356. encapsulation: ViewEncapsulation.None,
  357. template: `
  358. <button
  359. nz-dropdown
  360. class="ant-tabs-nav-more"
  361. type="button"
  362. tabindex="-1"
  363. aria-hidden="true"
  364. nzOverlayClassName="nz-tabs-dropdown"
  365. #dropdownTrigger="nzDropdown"
  366. [nzDropdownMenu]="menu"
  367. [nzOverlayStyle]="{ minWidth: '46px' }"
  368. [nzMatchWidthElement]="null"
  369. (nzVisibleChange)="menuVisChange($event)"
  370. (mouseenter)="showItems()"
  371. >
  372. <nz-icon nzType="ellipsis" />
  373. </button>
  374. <nz-dropdown-menu #menu="nzDropdownMenu">
  375. @if (menuOpened) {
  376. <ul nz-menu>
  377. @for (item of items; track item) {
  378. <li
  379. nz-menu-item
  380. class="ant-tabs-dropdown-menu-item"
  381. [class.ant-tabs-dropdown-menu-item-disabled]="item.disabled"
  382. [nzSelected]="item.active"
  383. [nzDisabled]="item.disabled"
  384. (click)="onSelect(item)"
  385. (contextmenu)="onContextmenu(item, $event)"
  386. >
  387. <ng-container *nzStringTemplateOutlet="item.tab.label; context: { visible: false }">
  388. {{ item.tab.label }}
  389. </ng-container>
  390. </li>
  391. }
  392. </ul>
  393. }
  394. </nz-dropdown-menu>
  395. @if (addable) {
  396. <button nz-tab-add-button [addIcon]="addIcon" (click)="addClicked.emit()"></button>
  397. }
  398. `,
  399. host: {
  400. class: 'ant-tabs-nav-operations',
  401. '[class.ant-tabs-nav-operations-hidden]': 'items.length === 0'
  402. },
  403. imports: [
  404. NzIconModule,
  405. NzOutletModule,
  406. NzTabAddButtonComponent,
  407. NzDropdownMenuComponent,
  408. NzMenuModule,
  409. NzDropDownDirective
  410. ]
  411. }]
  412. }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { items: [{
  413. type: Input
  414. }], addable: [{
  415. type: Input,
  416. args: [{ transform: booleanAttribute }]
  417. }], addIcon: [{
  418. type: Input
  419. }], addClicked: [{
  420. type: Output
  421. }], selected: [{
  422. type: Output
  423. }] } });
  424. /**
  425. * Use of this source code is governed by an MIT-style license that can be
  426. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  427. */
  428. const MIN_SWIPE_DISTANCE = 0.1;
  429. const STOP_SWIPE_DISTANCE = 0.01;
  430. const REFRESH_INTERVAL = 20;
  431. const SPEED_OFF_MULTIPLE = 0.995 ** REFRESH_INTERVAL;
  432. class NzTabScrollListDirective {
  433. ngZone;
  434. elementRef;
  435. lastWheelDirection = null;
  436. lastWheelTimestamp = 0;
  437. lastTimestamp = 0;
  438. lastTimeDiff = 0;
  439. lastMixedWheel = 0;
  440. lastWheelPrevent = false;
  441. touchPosition = null;
  442. lastOffset = null;
  443. motion = -1;
  444. unsubscribe = () => void 0;
  445. offsetChange = new EventEmitter();
  446. tabScroll = new EventEmitter();
  447. constructor(ngZone, elementRef) {
  448. this.ngZone = ngZone;
  449. this.elementRef = elementRef;
  450. }
  451. ngOnInit() {
  452. this.unsubscribe = this.ngZone.runOutsideAngular(() => {
  453. const el = this.elementRef.nativeElement;
  454. const wheel$ = fromEvent(el, 'wheel');
  455. const touchstart$ = fromEvent(el, 'touchstart');
  456. const touchmove$ = fromEvent(el, 'touchmove');
  457. const touchend$ = fromEvent(el, 'touchend');
  458. const subscription = new Subscription();
  459. subscription.add(this.subscribeWrap('wheel', wheel$, this.onWheel));
  460. subscription.add(this.subscribeWrap('touchstart', touchstart$, this.onTouchStart));
  461. subscription.add(this.subscribeWrap('touchmove', touchmove$, this.onTouchMove));
  462. subscription.add(this.subscribeWrap('touchend', touchend$, this.onTouchEnd));
  463. return () => {
  464. subscription.unsubscribe();
  465. };
  466. });
  467. }
  468. subscribeWrap(type, observable, handler) {
  469. return observable.subscribe(event => {
  470. this.tabScroll.emit({
  471. type,
  472. event
  473. });
  474. if (!event.defaultPrevented) {
  475. handler(event);
  476. }
  477. });
  478. }
  479. onTouchEnd = (e) => {
  480. if (!this.touchPosition) {
  481. return;
  482. }
  483. const lastOffset = this.lastOffset;
  484. const lastTimeDiff = this.lastTimeDiff;
  485. this.lastOffset = this.touchPosition = null;
  486. if (lastOffset) {
  487. const distanceX = lastOffset.x / lastTimeDiff;
  488. const distanceY = lastOffset.y / lastTimeDiff;
  489. const absX = Math.abs(distanceX);
  490. const absY = Math.abs(distanceY);
  491. // Skip swipe if low distance
  492. if (Math.max(absX, absY) < MIN_SWIPE_DISTANCE) {
  493. return;
  494. }
  495. let currentX = distanceX;
  496. let currentY = distanceY;
  497. this.motion = window.setInterval(() => {
  498. if (Math.abs(currentX) < STOP_SWIPE_DISTANCE && Math.abs(currentY) < STOP_SWIPE_DISTANCE) {
  499. window.clearInterval(this.motion);
  500. return;
  501. }
  502. currentX *= SPEED_OFF_MULTIPLE;
  503. currentY *= SPEED_OFF_MULTIPLE;
  504. this.onOffset(currentX * REFRESH_INTERVAL, currentY * REFRESH_INTERVAL, e);
  505. }, REFRESH_INTERVAL);
  506. }
  507. };
  508. onTouchMove = (e) => {
  509. if (!this.touchPosition) {
  510. return;
  511. }
  512. e.preventDefault();
  513. const { screenX, screenY } = e.touches[0];
  514. const offsetX = screenX - this.touchPosition.x;
  515. const offsetY = screenY - this.touchPosition.y;
  516. this.onOffset(offsetX, offsetY, e);
  517. const now = Date.now();
  518. this.lastTimeDiff = now - this.lastTimestamp;
  519. this.lastTimestamp = now;
  520. this.lastOffset = { x: offsetX, y: offsetY };
  521. this.touchPosition = { x: screenX, y: screenY };
  522. };
  523. onTouchStart = (e) => {
  524. const { screenX, screenY } = e.touches[0];
  525. this.touchPosition = { x: screenX, y: screenY };
  526. window.clearInterval(this.motion);
  527. };
  528. onWheel = (e) => {
  529. const { deltaX, deltaY } = e;
  530. let mixed;
  531. const absX = Math.abs(deltaX);
  532. const absY = Math.abs(deltaY);
  533. if (absX === absY) {
  534. mixed = this.lastWheelDirection === 'x' ? deltaX : deltaY;
  535. }
  536. else if (absX > absY) {
  537. mixed = deltaX;
  538. this.lastWheelDirection = 'x';
  539. }
  540. else {
  541. mixed = deltaY;
  542. this.lastWheelDirection = 'y';
  543. }
  544. // Optimize mac touch scroll
  545. const now = Date.now();
  546. const absMixed = Math.abs(mixed);
  547. if (now - this.lastWheelTimestamp > 100 || absMixed - this.lastMixedWheel > 10) {
  548. this.lastWheelPrevent = false;
  549. }
  550. this.onOffset(-mixed, -mixed, e);
  551. if (e.defaultPrevented || this.lastWheelPrevent) {
  552. this.lastWheelPrevent = true;
  553. }
  554. this.lastWheelTimestamp = now;
  555. this.lastMixedWheel = absMixed;
  556. };
  557. onOffset(x, y, event) {
  558. this.ngZone.run(() => {
  559. this.offsetChange.emit({
  560. x,
  561. y,
  562. event
  563. });
  564. });
  565. }
  566. ngOnDestroy() {
  567. this.unsubscribe();
  568. }
  569. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabScrollListDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
  570. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzTabScrollListDirective, isStandalone: true, selector: "[nzTabScrollList]", outputs: { offsetChange: "offsetChange", tabScroll: "tabScroll" }, ngImport: i0 });
  571. }
  572. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabScrollListDirective, decorators: [{
  573. type: Directive,
  574. args: [{
  575. selector: '[nzTabScrollList]'
  576. }]
  577. }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { offsetChange: [{
  578. type: Output
  579. }], tabScroll: [{
  580. type: Output
  581. }] } });
  582. /**
  583. * Use of this source code is governed by an MIT-style license that can be
  584. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  585. */
  586. class NzTabsInkBarDirective {
  587. elementRef;
  588. ngZone;
  589. position = 'horizontal';
  590. animated = true;
  591. animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
  592. get _animated() {
  593. return this.animationMode !== 'NoopAnimations' && this.animated;
  594. }
  595. constructor(elementRef, ngZone) {
  596. this.elementRef = elementRef;
  597. this.ngZone = ngZone;
  598. }
  599. alignToElement(element) {
  600. this.ngZone.runOutsideAngular(() => {
  601. reqAnimFrame(() => this.setStyles(element));
  602. });
  603. }
  604. setStyles(element) {
  605. const inkBar = this.elementRef.nativeElement;
  606. if (this.position === 'horizontal') {
  607. inkBar.style.top = '';
  608. inkBar.style.height = '';
  609. inkBar.style.left = this.getLeftPosition(element);
  610. inkBar.style.width = this.getElementWidth(element);
  611. }
  612. else {
  613. inkBar.style.left = '';
  614. inkBar.style.width = '';
  615. inkBar.style.top = this.getTopPosition(element);
  616. inkBar.style.height = this.getElementHeight(element);
  617. }
  618. }
  619. getLeftPosition(element) {
  620. return element ? `${element.offsetLeft || 0}px` : '0';
  621. }
  622. getElementWidth(element) {
  623. return element ? `${element.offsetWidth || 0}px` : '0';
  624. }
  625. getTopPosition(element) {
  626. return element ? `${element.offsetTop || 0}px` : '0';
  627. }
  628. getElementHeight(element) {
  629. return element ? `${element.offsetHeight || 0}px` : '0';
  630. }
  631. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabsInkBarDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
  632. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzTabsInkBarDirective, isStandalone: true, selector: "nz-tabs-ink-bar, [nz-tabs-ink-bar]", inputs: { position: "position", animated: "animated" }, host: { properties: { "class.ant-tabs-ink-bar-animated": "_animated" }, classAttribute: "ant-tabs-ink-bar" }, ngImport: i0 });
  633. }
  634. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabsInkBarDirective, decorators: [{
  635. type: Directive,
  636. args: [{
  637. selector: 'nz-tabs-ink-bar, [nz-tabs-ink-bar]',
  638. host: {
  639. class: 'ant-tabs-ink-bar',
  640. '[class.ant-tabs-ink-bar-animated]': '_animated'
  641. }
  642. }]
  643. }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { position: [{
  644. type: Input
  645. }], animated: [{
  646. type: Input
  647. }] } });
  648. /**
  649. * Use of this source code is governed by an MIT-style license that can be
  650. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  651. */
  652. const RESIZE_SCHEDULER = typeof requestAnimationFrame !== 'undefined' ? animationFrameScheduler : asapScheduler;
  653. const CSS_TRANSFORM_TIME = 150;
  654. class NzTabNavBarComponent {
  655. cdr;
  656. ngZone;
  657. viewportRuler;
  658. nzResizeObserver;
  659. dir;
  660. indexFocused = new EventEmitter();
  661. selectFocusedIndex = new EventEmitter();
  662. addClicked = new EventEmitter();
  663. tabScroll = new EventEmitter();
  664. position = 'horizontal';
  665. addable = false;
  666. hideBar = false;
  667. addIcon = 'plus';
  668. inkBarAnimated = true;
  669. extraTemplate;
  670. extraContents = input.required();
  671. startExtraContent = computed(() => this.extraContents().find(item => item.position() === 'start'));
  672. endExtraContent = computed(() => this.extraContents().find(item => item.position() === 'end'));
  673. get selectedIndex() {
  674. return this._selectedIndex;
  675. }
  676. set selectedIndex(value) {
  677. const newValue = coerceNumberProperty(value);
  678. if (this._selectedIndex !== newValue) {
  679. this._selectedIndex = value;
  680. this.selectedIndexChanged = true;
  681. if (this.keyManager) {
  682. this.keyManager.updateActiveItem(value);
  683. }
  684. }
  685. }
  686. navWarpRef;
  687. navListRef;
  688. operationRef;
  689. addBtnRef;
  690. inkBar;
  691. items;
  692. /** Tracks which element has focus; used for keyboard navigation */
  693. get focusIndex() {
  694. return this.keyManager ? this.keyManager.activeItemIndex : 0;
  695. }
  696. /** When the focus index is set, we must manually send focus to the correct label */
  697. set focusIndex(value) {
  698. if (!this.isValidIndex(value) || this.focusIndex === value || !this.keyManager) {
  699. return;
  700. }
  701. this.keyManager.setActiveItem(value);
  702. }
  703. get showAddButton() {
  704. return this.hiddenItems.length === 0 && this.addable;
  705. }
  706. translate = null;
  707. transformX = 0;
  708. transformY = 0;
  709. pingLeft = false;
  710. pingRight = false;
  711. pingTop = false;
  712. pingBottom = false;
  713. hiddenItems = [];
  714. keyManager;
  715. destroy$ = new Subject();
  716. _selectedIndex = 0;
  717. wrapperWidth = 0;
  718. wrapperHeight = 0;
  719. scrollListWidth = 0;
  720. scrollListHeight = 0;
  721. operationWidth = 0;
  722. operationHeight = 0;
  723. addButtonWidth = 0;
  724. addButtonHeight = 0;
  725. selectedIndexChanged = false;
  726. lockAnimationTimeoutId;
  727. cssTransformTimeWaitingId;
  728. constructor(cdr, ngZone, viewportRuler, nzResizeObserver, dir) {
  729. this.cdr = cdr;
  730. this.ngZone = ngZone;
  731. this.viewportRuler = viewportRuler;
  732. this.nzResizeObserver = nzResizeObserver;
  733. this.dir = dir;
  734. }
  735. ngAfterViewInit() {
  736. const dirChange = this.dir ? this.dir.change.asObservable() : of(null);
  737. const resize = this.viewportRuler.change(150);
  738. const realign = () => {
  739. this.updateScrollListPosition();
  740. this.alignInkBarToSelectedTab();
  741. };
  742. this.keyManager = new FocusKeyManager(this.items)
  743. .withHorizontalOrientation(this.getLayoutDirection())
  744. .withWrap();
  745. this.keyManager.updateActiveItem(this.selectedIndex);
  746. reqAnimFrame(realign);
  747. merge(this.nzResizeObserver.observe(this.navWarpRef), this.nzResizeObserver.observe(this.navListRef))
  748. .pipe(takeUntil(this.destroy$), auditTime(16, RESIZE_SCHEDULER))
  749. .subscribe(() => {
  750. realign();
  751. });
  752. merge(dirChange, resize, this.items.changes)
  753. .pipe(takeUntil(this.destroy$))
  754. .subscribe(() => {
  755. Promise.resolve().then(realign);
  756. this.keyManager.withHorizontalOrientation(this.getLayoutDirection());
  757. });
  758. this.keyManager.change.pipe(takeUntil(this.destroy$)).subscribe(newFocusIndex => {
  759. this.indexFocused.emit(newFocusIndex);
  760. this.setTabFocus(newFocusIndex);
  761. this.scrollToTab(this.keyManager.activeItem);
  762. });
  763. }
  764. ngAfterContentChecked() {
  765. if (this.selectedIndexChanged) {
  766. this.updateScrollListPosition();
  767. this.alignInkBarToSelectedTab();
  768. this.selectedIndexChanged = false;
  769. this.cdr.markForCheck();
  770. }
  771. }
  772. ngOnDestroy() {
  773. clearTimeout(this.lockAnimationTimeoutId);
  774. clearTimeout(this.cssTransformTimeWaitingId);
  775. this.destroy$.next();
  776. this.destroy$.complete();
  777. }
  778. onSelectedFromMenu(tab) {
  779. const tabIndex = this.items.toArray().findIndex(e => e === tab);
  780. if (tabIndex !== -1) {
  781. this.keyManager.updateActiveItem(tabIndex);
  782. if (this.focusIndex !== this.selectedIndex) {
  783. this.selectFocusedIndex.emit(this.focusIndex);
  784. this.scrollToTab(tab);
  785. }
  786. }
  787. }
  788. onOffsetChange(e) {
  789. if (this.position === 'horizontal') {
  790. if (!this.lockAnimationTimeoutId) {
  791. if (this.transformX >= 0 && e.x > 0) {
  792. return;
  793. }
  794. if (this.transformX <= this.wrapperWidth - this.scrollListWidth && e.x < 0) {
  795. return;
  796. }
  797. }
  798. e.event.preventDefault();
  799. this.transformX = this.clampTransformX(this.transformX + e.x);
  800. this.setTransform(this.transformX, 0);
  801. }
  802. else {
  803. if (!this.lockAnimationTimeoutId) {
  804. if (this.transformY >= 0 && e.y > 0) {
  805. return;
  806. }
  807. if (this.transformY <= this.wrapperHeight - this.scrollListHeight && e.y < 0) {
  808. return;
  809. }
  810. }
  811. e.event.preventDefault();
  812. this.transformY = this.clampTransformY(this.transformY + e.y);
  813. this.setTransform(0, this.transformY);
  814. }
  815. this.lockAnimation();
  816. this.setVisibleRange();
  817. this.setPingStatus();
  818. }
  819. handleKeydown(event) {
  820. const inNavigationList = this.navWarpRef.nativeElement.contains(event.target);
  821. if (hasModifierKey(event) || !inNavigationList) {
  822. return;
  823. }
  824. switch (event.keyCode) {
  825. case LEFT_ARROW:
  826. case UP_ARROW:
  827. case RIGHT_ARROW:
  828. case DOWN_ARROW:
  829. this.lockAnimation();
  830. this.keyManager.onKeydown(event);
  831. break;
  832. case ENTER:
  833. case SPACE:
  834. if (this.focusIndex !== this.selectedIndex) {
  835. this.selectFocusedIndex.emit(this.focusIndex);
  836. }
  837. break;
  838. default:
  839. this.keyManager.onKeydown(event);
  840. }
  841. }
  842. isValidIndex(index) {
  843. if (!this.items) {
  844. return true;
  845. }
  846. const tab = this.items ? this.items.toArray()[index] : null;
  847. return !!tab && !tab.disabled;
  848. }
  849. scrollToTab(tab) {
  850. if (!this.items.find(e => e === tab)) {
  851. return;
  852. }
  853. const tabs = this.items.toArray();
  854. if (this.position === 'horizontal') {
  855. let newTransform = this.transformX;
  856. if (this.getLayoutDirection() === 'rtl') {
  857. const right = tabs[0].left + tabs[0].width - tab.left - tab.width;
  858. if (right < this.transformX) {
  859. newTransform = right;
  860. }
  861. else if (right + tab.width > this.transformX + this.wrapperWidth) {
  862. newTransform = right + tab.width - this.wrapperWidth;
  863. }
  864. }
  865. else if (tab.left < -this.transformX) {
  866. newTransform = -tab.left;
  867. }
  868. else if (tab.left + tab.width > -this.transformX + this.wrapperWidth) {
  869. newTransform = -(tab.left + tab.width - this.wrapperWidth);
  870. }
  871. this.transformX = newTransform;
  872. this.transformY = 0;
  873. this.setTransform(newTransform, 0);
  874. }
  875. else {
  876. let newTransform = this.transformY;
  877. if (tab.top < -this.transformY) {
  878. newTransform = -tab.top;
  879. }
  880. else if (tab.top + tab.height > -this.transformY + this.wrapperHeight) {
  881. newTransform = -(tab.top + tab.height - this.wrapperHeight);
  882. }
  883. this.transformY = newTransform;
  884. this.transformX = 0;
  885. this.setTransform(0, newTransform);
  886. }
  887. clearTimeout(this.cssTransformTimeWaitingId);
  888. this.cssTransformTimeWaitingId = setTimeout(() => {
  889. this.setVisibleRange();
  890. }, CSS_TRANSFORM_TIME);
  891. }
  892. lockAnimation() {
  893. if (!this.lockAnimationTimeoutId) {
  894. this.ngZone.runOutsideAngular(() => {
  895. this.navListRef.nativeElement.style.transition = 'none';
  896. this.lockAnimationTimeoutId = setTimeout(() => {
  897. this.navListRef.nativeElement.style.transition = '';
  898. this.lockAnimationTimeoutId = undefined;
  899. }, CSS_TRANSFORM_TIME);
  900. });
  901. }
  902. }
  903. setTransform(x, y) {
  904. this.navListRef.nativeElement.style.transform = `translate(${x}px, ${y}px)`;
  905. }
  906. clampTransformX(transform) {
  907. const scrollWidth = this.wrapperWidth - this.scrollListWidth;
  908. if (this.getLayoutDirection() === 'rtl') {
  909. return Math.max(Math.min(scrollWidth, transform), 0);
  910. }
  911. else {
  912. return Math.min(Math.max(scrollWidth, transform), 0);
  913. }
  914. }
  915. clampTransformY(transform) {
  916. return Math.min(Math.max(this.wrapperHeight - this.scrollListHeight, transform), 0);
  917. }
  918. updateScrollListPosition() {
  919. this.resetSizes();
  920. this.transformX = this.clampTransformX(this.transformX);
  921. this.transformY = this.clampTransformY(this.transformY);
  922. this.setVisibleRange();
  923. this.setPingStatus();
  924. if (this.keyManager) {
  925. this.keyManager.updateActiveItem(this.keyManager.activeItemIndex);
  926. if (this.keyManager.activeItem) {
  927. this.scrollToTab(this.keyManager.activeItem);
  928. }
  929. }
  930. }
  931. resetSizes() {
  932. this.addButtonWidth = this.addBtnRef ? this.addBtnRef.getElementWidth() : 0;
  933. this.addButtonHeight = this.addBtnRef ? this.addBtnRef.getElementHeight() : 0;
  934. this.operationWidth = this.operationRef.getElementWidth();
  935. this.operationHeight = this.operationRef.getElementHeight();
  936. this.wrapperWidth = this.navWarpRef.nativeElement.offsetWidth || 0;
  937. this.wrapperHeight = this.navWarpRef.nativeElement.offsetHeight || 0;
  938. this.scrollListHeight = this.navListRef.nativeElement.offsetHeight || 0;
  939. this.scrollListWidth = this.navListRef.nativeElement.offsetWidth || 0;
  940. }
  941. alignInkBarToSelectedTab() {
  942. const selectedItem = this.items && this.items.length ? this.items.toArray()[this.selectedIndex] : null;
  943. const selectedItemElement = selectedItem ? selectedItem.elementRef.nativeElement : null;
  944. if (selectedItemElement) {
  945. /**
  946. * .ant-tabs-nav-list - Target offset parent element
  947. * └──.ant-tabs-tab
  948. * └──.ant-tabs-tab-btn - Currently focused element
  949. */
  950. this.inkBar.alignToElement(selectedItemElement.parentElement);
  951. }
  952. }
  953. setPingStatus() {
  954. const ping = {
  955. top: false,
  956. right: false,
  957. bottom: false,
  958. left: false
  959. };
  960. const navWarp = this.navWarpRef.nativeElement;
  961. if (this.position === 'horizontal') {
  962. if (this.getLayoutDirection() === 'rtl') {
  963. ping.right = this.transformX > 0;
  964. ping.left = this.transformX + this.wrapperWidth < this.scrollListWidth;
  965. }
  966. else {
  967. ping.left = this.transformX < 0;
  968. ping.right = -this.transformX + this.wrapperWidth < this.scrollListWidth;
  969. }
  970. }
  971. else {
  972. ping.top = this.transformY < 0;
  973. ping.bottom = -this.transformY + this.wrapperHeight < this.scrollListHeight;
  974. }
  975. Object.keys(ping).forEach(pos => {
  976. const className = `ant-tabs-nav-wrap-ping-${pos}`;
  977. if (ping[pos]) {
  978. navWarp.classList.add(className);
  979. }
  980. else {
  981. navWarp.classList.remove(className);
  982. }
  983. });
  984. }
  985. setVisibleRange() {
  986. let unit;
  987. let position;
  988. let transformSize;
  989. let basicSize;
  990. let tabContentSize;
  991. let addSize;
  992. const tabs = this.items.toArray();
  993. const DEFAULT_SIZE = { width: 0, height: 0, left: 0, top: 0, right: 0 };
  994. const getOffset = (index) => {
  995. let offset;
  996. const size = tabs[index] || DEFAULT_SIZE;
  997. if (position === 'right') {
  998. offset = tabs[0].left + tabs[0].width - tabs[index].left - tabs[index].width;
  999. }
  1000. else {
  1001. offset = size[position];
  1002. }
  1003. return offset;
  1004. };
  1005. if (this.position === 'horizontal') {
  1006. unit = 'width';
  1007. basicSize = this.wrapperWidth;
  1008. tabContentSize = this.scrollListWidth - (this.hiddenItems.length ? this.operationWidth : 0);
  1009. addSize = this.addButtonWidth;
  1010. transformSize = Math.abs(this.transformX);
  1011. if (this.getLayoutDirection() === 'rtl') {
  1012. position = 'right';
  1013. this.pingRight = this.transformX > 0;
  1014. this.pingLeft = this.transformX + this.wrapperWidth < this.scrollListWidth;
  1015. }
  1016. else {
  1017. this.pingLeft = this.transformX < 0;
  1018. this.pingRight = -this.transformX + this.wrapperWidth < this.scrollListWidth;
  1019. position = 'left';
  1020. }
  1021. }
  1022. else {
  1023. unit = 'height';
  1024. basicSize = this.wrapperHeight;
  1025. tabContentSize = this.scrollListHeight - (this.hiddenItems.length ? this.operationHeight : 0);
  1026. addSize = this.addButtonHeight;
  1027. position = 'top';
  1028. transformSize = -this.transformY;
  1029. this.pingTop = this.transformY < 0;
  1030. this.pingBottom = -this.transformY + this.wrapperHeight < this.scrollListHeight;
  1031. }
  1032. let mergedBasicSize = basicSize;
  1033. if (tabContentSize + addSize > basicSize) {
  1034. mergedBasicSize = basicSize - addSize;
  1035. }
  1036. if (!tabs.length) {
  1037. this.hiddenItems = [];
  1038. this.cdr.markForCheck();
  1039. return;
  1040. }
  1041. const len = tabs.length;
  1042. let endIndex = len;
  1043. for (let i = 0; i < len; i += 1) {
  1044. const offset = getOffset(i);
  1045. const size = tabs[i] || DEFAULT_SIZE;
  1046. if (offset + size[unit] > transformSize + mergedBasicSize) {
  1047. endIndex = i - 1;
  1048. break;
  1049. }
  1050. }
  1051. let startIndex = 0;
  1052. for (let i = len - 1; i >= 0; i -= 1) {
  1053. const offset = getOffset(i);
  1054. if (offset < transformSize) {
  1055. startIndex = i + 1;
  1056. break;
  1057. }
  1058. }
  1059. const startHiddenTabs = tabs.slice(0, startIndex);
  1060. const endHiddenTabs = tabs.slice(endIndex + 1);
  1061. this.hiddenItems = [...startHiddenTabs, ...endHiddenTabs];
  1062. this.cdr.markForCheck();
  1063. }
  1064. getLayoutDirection() {
  1065. return this.dir && this.dir.value === 'rtl' ? 'rtl' : 'ltr';
  1066. }
  1067. setTabFocus(_tabIndex) { }
  1068. ngOnChanges(changes) {
  1069. const { position } = changes;
  1070. // The first will be aligning in ngAfterViewInit
  1071. if (position && !position.isFirstChange()) {
  1072. this.alignInkBarToSelectedTab();
  1073. this.lockAnimation();
  1074. this.updateScrollListPosition();
  1075. }
  1076. }
  1077. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabNavBarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.ViewportRuler }, { token: i2$1.NzResizeObserver }, { token: i3$1.Directionality }], target: i0.ɵɵFactoryTarget.Component });
  1078. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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 }, 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: "navWarpRef", first: true, predicate: ["navWarp"], 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: `
  1079. @if (startExtraContent()) {
  1080. <div class="ant-tabs-extra-content">
  1081. <ng-template [ngTemplateOutlet]="startExtraContent()!.templateRef"></ng-template>
  1082. </div>
  1083. }
  1084. <div
  1085. class="ant-tabs-nav-wrap"
  1086. [class.ant-tabs-nav-wrap-ping-left]="pingLeft"
  1087. [class.ant-tabs-nav-wrap-ping-right]="pingRight"
  1088. [class.ant-tabs-nav-wrap-ping-top]="pingTop"
  1089. [class.ant-tabs-nav-wrap-ping-bottom]="pingBottom"
  1090. #navWarp
  1091. >
  1092. <div
  1093. class="ant-tabs-nav-list"
  1094. #navList
  1095. nzTabScrollList
  1096. (offsetChange)="onOffsetChange($event)"
  1097. (tabScroll)="tabScroll.emit($event)"
  1098. role="tablist"
  1099. >
  1100. <ng-content></ng-content>
  1101. @if (showAddButton) {
  1102. <button
  1103. role="tab"
  1104. [attr.tabindex]="-1"
  1105. nz-tab-add-button
  1106. [addIcon]="addIcon"
  1107. (click)="addClicked.emit()"
  1108. ></button>
  1109. }
  1110. <div nz-tabs-ink-bar [hidden]="hideBar" [position]="position" [animated]="inkBarAnimated"></div>
  1111. </div>
  1112. </div>
  1113. <nz-tab-nav-operation
  1114. (addClicked)="addClicked.emit()"
  1115. (selected)="onSelectedFromMenu($event)"
  1116. [addIcon]="addIcon"
  1117. [addable]="addable"
  1118. [items]="hiddenItems"
  1119. ></nz-tab-nav-operation>
  1120. @if (endExtraContent()) {
  1121. <div class="ant-tabs-extra-content">
  1122. <ng-template [ngTemplateOutlet]="endExtraContent()!.templateRef"></ng-template>
  1123. </div>
  1124. } @else if (extraTemplate) {
  1125. <div class="ant-tabs-extra-content">
  1126. <ng-template [ngTemplateOutlet]="extraTemplate"></ng-template>
  1127. </div>
  1128. }
  1129. `, 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"] }, { 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 });
  1130. }
  1131. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabNavBarComponent, decorators: [{
  1132. type: Component,
  1133. args: [{
  1134. selector: 'nz-tabs-nav',
  1135. exportAs: 'nzTabsNav',
  1136. preserveWhitespaces: false,
  1137. changeDetection: ChangeDetectionStrategy.OnPush,
  1138. encapsulation: ViewEncapsulation.None,
  1139. template: `
  1140. @if (startExtraContent()) {
  1141. <div class="ant-tabs-extra-content">
  1142. <ng-template [ngTemplateOutlet]="startExtraContent()!.templateRef"></ng-template>
  1143. </div>
  1144. }
  1145. <div
  1146. class="ant-tabs-nav-wrap"
  1147. [class.ant-tabs-nav-wrap-ping-left]="pingLeft"
  1148. [class.ant-tabs-nav-wrap-ping-right]="pingRight"
  1149. [class.ant-tabs-nav-wrap-ping-top]="pingTop"
  1150. [class.ant-tabs-nav-wrap-ping-bottom]="pingBottom"
  1151. #navWarp
  1152. >
  1153. <div
  1154. class="ant-tabs-nav-list"
  1155. #navList
  1156. nzTabScrollList
  1157. (offsetChange)="onOffsetChange($event)"
  1158. (tabScroll)="tabScroll.emit($event)"
  1159. role="tablist"
  1160. >
  1161. <ng-content></ng-content>
  1162. @if (showAddButton) {
  1163. <button
  1164. role="tab"
  1165. [attr.tabindex]="-1"
  1166. nz-tab-add-button
  1167. [addIcon]="addIcon"
  1168. (click)="addClicked.emit()"
  1169. ></button>
  1170. }
  1171. <div nz-tabs-ink-bar [hidden]="hideBar" [position]="position" [animated]="inkBarAnimated"></div>
  1172. </div>
  1173. </div>
  1174. <nz-tab-nav-operation
  1175. (addClicked)="addClicked.emit()"
  1176. (selected)="onSelectedFromMenu($event)"
  1177. [addIcon]="addIcon"
  1178. [addable]="addable"
  1179. [items]="hiddenItems"
  1180. ></nz-tab-nav-operation>
  1181. @if (endExtraContent()) {
  1182. <div class="ant-tabs-extra-content">
  1183. <ng-template [ngTemplateOutlet]="endExtraContent()!.templateRef"></ng-template>
  1184. </div>
  1185. } @else if (extraTemplate) {
  1186. <div class="ant-tabs-extra-content">
  1187. <ng-template [ngTemplateOutlet]="extraTemplate"></ng-template>
  1188. </div>
  1189. }
  1190. `,
  1191. host: {
  1192. class: 'ant-tabs-nav',
  1193. '(keydown)': 'handleKeydown($event)'
  1194. },
  1195. imports: [
  1196. NzTabScrollListDirective,
  1197. NzTabAddButtonComponent,
  1198. NzTabsInkBarDirective,
  1199. NzTabNavOperationComponent,
  1200. NgTemplateOutlet
  1201. ]
  1202. }]
  1203. }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.ViewportRuler }, { type: i2$1.NzResizeObserver }, { type: i3$1.Directionality }], propDecorators: { indexFocused: [{
  1204. type: Output
  1205. }], selectFocusedIndex: [{
  1206. type: Output
  1207. }], addClicked: [{
  1208. type: Output
  1209. }], tabScroll: [{
  1210. type: Output
  1211. }], position: [{
  1212. type: Input
  1213. }], addable: [{
  1214. type: Input,
  1215. args: [{ transform: booleanAttribute }]
  1216. }], hideBar: [{
  1217. type: Input,
  1218. args: [{ transform: booleanAttribute }]
  1219. }], addIcon: [{
  1220. type: Input
  1221. }], inkBarAnimated: [{
  1222. type: Input
  1223. }], extraTemplate: [{
  1224. type: Input
  1225. }], selectedIndex: [{
  1226. type: Input
  1227. }], navWarpRef: [{
  1228. type: ViewChild,
  1229. args: ['navWarp', { static: true }]
  1230. }], navListRef: [{
  1231. type: ViewChild,
  1232. args: ['navList', { static: true }]
  1233. }], operationRef: [{
  1234. type: ViewChild,
  1235. args: [NzTabNavOperationComponent, { static: true }]
  1236. }], addBtnRef: [{
  1237. type: ViewChild,
  1238. args: [NzTabAddButtonComponent, { static: false }]
  1239. }], inkBar: [{
  1240. type: ViewChild,
  1241. args: [NzTabsInkBarDirective, { static: true }]
  1242. }], items: [{
  1243. type: ContentChildren,
  1244. args: [NzTabNavItemDirective, { descendants: true }]
  1245. }] } });
  1246. /**
  1247. * Use of this source code is governed by an MIT-style license that can be
  1248. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  1249. */
  1250. /** Decorates the `ng-template` tags and reads out the template from it. */
  1251. class NzTabDirective {
  1252. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  1253. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzTabDirective, isStandalone: true, selector: "[nz-tab]", exportAs: ["nzTab"], ngImport: i0 });
  1254. }
  1255. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabDirective, decorators: [{
  1256. type: Directive,
  1257. args: [{
  1258. selector: '[nz-tab]',
  1259. exportAs: 'nzTab'
  1260. }]
  1261. }] });
  1262. /**
  1263. * Use of this source code is governed by an MIT-style license that can be
  1264. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  1265. */
  1266. /**
  1267. * Used to provide a tab set to a tab without causing a circular dependency.
  1268. */
  1269. const NZ_TAB_SET = new InjectionToken('NZ_TAB_SET');
  1270. class NzTabComponent {
  1271. nzTitle = '';
  1272. nzClosable = false;
  1273. nzCloseIcon = 'close';
  1274. nzDisabled = false;
  1275. nzForceRender = false;
  1276. nzSelect = new EventEmitter();
  1277. nzDeselect = new EventEmitter();
  1278. nzClick = new EventEmitter();
  1279. nzContextmenu = new EventEmitter();
  1280. nzTabLinkTemplateDirective;
  1281. template = null;
  1282. linkDirective;
  1283. contentTemplate;
  1284. isActive = false;
  1285. hasBeenActive = false;
  1286. position = null;
  1287. origin = null;
  1288. closestTabSet = inject(NZ_TAB_SET);
  1289. stateChanges = new Subject();
  1290. get content() {
  1291. return this.template || this.contentTemplate;
  1292. }
  1293. get label() {
  1294. return this.nzTitle || this.nzTabLinkTemplateDirective?.templateRef;
  1295. }
  1296. ngOnChanges(changes) {
  1297. const { nzTitle, nzDisabled, nzForceRender } = changes;
  1298. if (nzTitle || nzDisabled || nzForceRender) {
  1299. this.stateChanges.next();
  1300. }
  1301. }
  1302. ngOnDestroy() {
  1303. this.stateChanges.complete();
  1304. }
  1305. setActive(active) {
  1306. this.isActive = active;
  1307. if (active) {
  1308. this.hasBeenActive = true;
  1309. }
  1310. }
  1311. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  1312. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", 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: `
  1313. <ng-template #tabLinkTemplate>
  1314. <ng-content select="[nz-tab-link]"></ng-content>
  1315. </ng-template>
  1316. <ng-template #contentTemplate>
  1317. <ng-content></ng-content>
  1318. </ng-template>
  1319. `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  1320. }
  1321. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabComponent, decorators: [{
  1322. type: Component,
  1323. args: [{
  1324. selector: 'nz-tab',
  1325. exportAs: 'nzTab',
  1326. preserveWhitespaces: false,
  1327. encapsulation: ViewEncapsulation.None,
  1328. changeDetection: ChangeDetectionStrategy.OnPush,
  1329. template: `
  1330. <ng-template #tabLinkTemplate>
  1331. <ng-content select="[nz-tab-link]"></ng-content>
  1332. </ng-template>
  1333. <ng-template #contentTemplate>
  1334. <ng-content></ng-content>
  1335. </ng-template>
  1336. `
  1337. }]
  1338. }], propDecorators: { nzTitle: [{
  1339. type: Input
  1340. }], nzClosable: [{
  1341. type: Input,
  1342. args: [{ transform: booleanAttribute }]
  1343. }], nzCloseIcon: [{
  1344. type: Input
  1345. }], nzDisabled: [{
  1346. type: Input,
  1347. args: [{ transform: booleanAttribute }]
  1348. }], nzForceRender: [{
  1349. type: Input,
  1350. args: [{ transform: booleanAttribute }]
  1351. }], nzSelect: [{
  1352. type: Output
  1353. }], nzDeselect: [{
  1354. type: Output
  1355. }], nzClick: [{
  1356. type: Output
  1357. }], nzContextmenu: [{
  1358. type: Output
  1359. }], nzTabLinkTemplateDirective: [{
  1360. type: ContentChild,
  1361. args: [NzTabLinkTemplateDirective, { static: false }]
  1362. }], template: [{
  1363. type: ContentChild,
  1364. args: [NzTabDirective, { static: false, read: TemplateRef }]
  1365. }], linkDirective: [{
  1366. type: ContentChild,
  1367. args: [NzTabLinkDirective, { static: false }]
  1368. }], contentTemplate: [{
  1369. type: ViewChild,
  1370. args: ['contentTemplate', { static: true }]
  1371. }] } });
  1372. const NZ_CONFIG_MODULE_NAME = 'tabs';
  1373. let nextId = 0;
  1374. let NzTabSetComponent = (() => {
  1375. let _nzType_decorators;
  1376. let _nzType_initializers = [];
  1377. let _nzType_extraInitializers = [];
  1378. let _nzSize_decorators;
  1379. let _nzSize_initializers = [];
  1380. let _nzSize_extraInitializers = [];
  1381. let _nzAnimated_decorators;
  1382. let _nzAnimated_initializers = [];
  1383. let _nzAnimated_extraInitializers = [];
  1384. let _nzTabBarGutter_decorators;
  1385. let _nzTabBarGutter_initializers = [];
  1386. let _nzTabBarGutter_extraInitializers = [];
  1387. return class NzTabSetComponent {
  1388. static {
  1389. const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
  1390. _nzType_decorators = [WithConfig()];
  1391. _nzSize_decorators = [WithConfig()];
  1392. _nzAnimated_decorators = [WithConfig()];
  1393. _nzTabBarGutter_decorators = [WithConfig()];
  1394. __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);
  1395. __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);
  1396. __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);
  1397. __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);
  1398. if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
  1399. }
  1400. nzConfigService;
  1401. ngZone;
  1402. cdr;
  1403. directionality;
  1404. _nzModuleName = NZ_CONFIG_MODULE_NAME;
  1405. get nzSelectedIndex() {
  1406. return this.selectedIndex;
  1407. }
  1408. set nzSelectedIndex(value) {
  1409. this.indexToSelect = coerceNumberProperty(value, null);
  1410. }
  1411. nzTabPosition = 'top';
  1412. nzTabBarExtraContent;
  1413. nzCanDeactivate = null;
  1414. nzAddIcon = 'plus';
  1415. nzTabBarStyle = null;
  1416. nzType = __runInitializers(this, _nzType_initializers, 'line');
  1417. nzSize = (__runInitializers(this, _nzType_extraInitializers), __runInitializers(this, _nzSize_initializers, 'default'));
  1418. nzAnimated = (__runInitializers(this, _nzSize_extraInitializers), __runInitializers(this, _nzAnimated_initializers, true));
  1419. nzTabBarGutter = (__runInitializers(this, _nzAnimated_extraInitializers), __runInitializers(this, _nzTabBarGutter_initializers, undefined));
  1420. nzHideAdd = (__runInitializers(this, _nzTabBarGutter_extraInitializers), false);
  1421. nzCentered = false;
  1422. nzHideAll = false;
  1423. nzLinkRouter = false;
  1424. nzLinkExact = true;
  1425. nzDestroyInactiveTabPane = false;
  1426. nzSelectChange = new EventEmitter(true);
  1427. nzSelectedIndexChange = new EventEmitter();
  1428. nzTabListScroll = new EventEmitter();
  1429. nzClose = new EventEmitter();
  1430. nzAdd = new EventEmitter();
  1431. get position() {
  1432. return ['top', 'bottom'].indexOf(this.nzTabPosition) === -1 ? 'vertical' : 'horizontal';
  1433. }
  1434. get addable() {
  1435. return this.nzType === 'editable-card' && !this.nzHideAdd;
  1436. }
  1437. get closable() {
  1438. return this.nzType === 'editable-card';
  1439. }
  1440. get line() {
  1441. return this.nzType === 'line';
  1442. }
  1443. get inkBarAnimated() {
  1444. return this.line && (typeof this.nzAnimated === 'boolean' ? this.nzAnimated : this.nzAnimated.inkBar);
  1445. }
  1446. get tabPaneAnimated() {
  1447. return typeof this.nzAnimated === 'boolean' ? this.nzAnimated : this.nzAnimated.tabPane;
  1448. }
  1449. // Pick up only direct descendants under ivy rendering engine
  1450. // We filter out only the tabs that belong to this tab set in `tabs`.
  1451. allTabs = new QueryList();
  1452. tabLinks = new QueryList();
  1453. tabNavBarRef;
  1454. // All the direct tabs for this tab set
  1455. tabs = new QueryList();
  1456. extraContents = contentChildren(NzTabBarExtraContentDirective);
  1457. dir = 'ltr';
  1458. tabSetId;
  1459. destroy$ = new Subject();
  1460. indexToSelect = 0;
  1461. selectedIndex = null;
  1462. tabLabelSubscription = Subscription.EMPTY;
  1463. tabsSubscription = Subscription.EMPTY;
  1464. canDeactivateSubscription = Subscription.EMPTY;
  1465. router = inject(Router, { optional: true });
  1466. constructor(nzConfigService, ngZone, cdr, directionality) {
  1467. this.nzConfigService = nzConfigService;
  1468. this.ngZone = ngZone;
  1469. this.cdr = cdr;
  1470. this.directionality = directionality;
  1471. this.tabSetId = nextId++;
  1472. }
  1473. ngOnInit() {
  1474. this.dir = this.directionality.value;
  1475. this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  1476. this.dir = direction;
  1477. this.cdr.detectChanges();
  1478. });
  1479. }
  1480. ngOnDestroy() {
  1481. this.destroy$.next();
  1482. this.destroy$.complete();
  1483. this.tabs.destroy();
  1484. this.tabLabelSubscription.unsubscribe();
  1485. this.tabsSubscription.unsubscribe();
  1486. this.canDeactivateSubscription.unsubscribe();
  1487. }
  1488. ngAfterContentInit() {
  1489. this.ngZone.runOutsideAngular(() => {
  1490. Promise.resolve().then(() => this.setUpRouter());
  1491. });
  1492. this.subscribeToTabLabels();
  1493. this.subscribeToAllTabChanges();
  1494. // Subscribe to changes in the amount of tabs, in order to be
  1495. // able to re-render the content as new tabs are added or removed.
  1496. this.tabsSubscription = this.tabs.changes.subscribe(() => {
  1497. const indexToSelect = this.clampTabIndex(this.indexToSelect);
  1498. // Maintain the previously-selected tab if a new tab is added or removed and there is no
  1499. // explicit change that selects a different tab.
  1500. if (indexToSelect === this.selectedIndex) {
  1501. const tabs = this.tabs.toArray();
  1502. for (let i = 0; i < tabs.length; i++) {
  1503. if (tabs[i].isActive) {
  1504. // Assign both to the `indexToSelect` and `selectedIndex` so we don't fire a changed
  1505. // event, otherwise the consumer may end up in an infinite loop in some edge cases like
  1506. // adding a tab within the `nzSelectedIndexChange` event.
  1507. this.indexToSelect = this.selectedIndex = i;
  1508. break;
  1509. }
  1510. }
  1511. }
  1512. this.subscribeToTabLabels();
  1513. this.cdr.markForCheck();
  1514. });
  1515. }
  1516. ngAfterContentChecked() {
  1517. // Don't clamp the `indexToSelect` immediately in the setter because it can happen that
  1518. // the amount of tabs changes before the actual change detection runs.
  1519. const indexToSelect = (this.indexToSelect = this.clampTabIndex(this.indexToSelect));
  1520. // If there is a change in selected index, emit a change event. Should not trigger if
  1521. // the selected index has not yet been initialized.
  1522. if (this.selectedIndex !== indexToSelect) {
  1523. const isFirstRun = this.selectedIndex == null;
  1524. if (!isFirstRun) {
  1525. this.nzSelectChange.emit(this.createChangeEvent(indexToSelect));
  1526. }
  1527. // Changing these values after change detection has run
  1528. // since the checked content may contain references to them.
  1529. Promise.resolve().then(() => {
  1530. this.tabs.forEach((tab, index) => tab.setActive(index === indexToSelect));
  1531. if (!isFirstRun) {
  1532. this.nzSelectedIndexChange.emit(indexToSelect);
  1533. }
  1534. });
  1535. }
  1536. // Setup the position for each tab and optionally setup an origin on the next selected tab.
  1537. this.tabs.forEach((tab, index) => {
  1538. tab.position = index - indexToSelect;
  1539. // If there is already a selected tab, then set up an origin for the next selected tab
  1540. // if it doesn't have one already.
  1541. if (this.selectedIndex != null && tab.position === 0 && !tab.origin) {
  1542. tab.origin = indexToSelect - this.selectedIndex;
  1543. }
  1544. });
  1545. if (this.selectedIndex !== indexToSelect) {
  1546. this.selectedIndex = indexToSelect;
  1547. this.cdr.markForCheck();
  1548. }
  1549. }
  1550. onClose(index, e) {
  1551. e.preventDefault();
  1552. e.stopPropagation();
  1553. this.nzClose.emit({ index });
  1554. }
  1555. onAdd() {
  1556. this.nzAdd.emit();
  1557. }
  1558. clampTabIndex(index) {
  1559. return Math.min(this.tabs.length - 1, Math.max(index || 0, 0));
  1560. }
  1561. createChangeEvent(index) {
  1562. const event = new NzTabChangeEvent();
  1563. event.index = index;
  1564. if (this.tabs && this.tabs.length) {
  1565. event.tab = this.tabs.toArray()[index];
  1566. this.tabs.forEach((tab, i) => {
  1567. if (i !== index) {
  1568. tab.nzDeselect.emit();
  1569. }
  1570. });
  1571. event.tab.nzSelect.emit();
  1572. }
  1573. return event;
  1574. }
  1575. subscribeToTabLabels() {
  1576. if (this.tabLabelSubscription) {
  1577. this.tabLabelSubscription.unsubscribe();
  1578. }
  1579. this.tabLabelSubscription = merge(...this.tabs.map(tab => tab.stateChanges)).subscribe(() => this.cdr.markForCheck());
  1580. }
  1581. subscribeToAllTabChanges() {
  1582. this.allTabs.changes.pipe(startWith(this.allTabs)).subscribe((tabs) => {
  1583. this.tabs.reset(tabs.filter(tab => tab.closestTabSet === this));
  1584. this.tabs.notifyOnChanges();
  1585. });
  1586. }
  1587. canDeactivateFun(pre, next) {
  1588. if (typeof this.nzCanDeactivate === 'function') {
  1589. const observable = wrapIntoObservable(this.nzCanDeactivate(pre, next));
  1590. return observable.pipe(first(), takeUntil(this.destroy$));
  1591. }
  1592. else {
  1593. return of(true);
  1594. }
  1595. }
  1596. clickNavItem(tab, index, e) {
  1597. if (!tab.nzDisabled) {
  1598. // ignore nzCanDeactivate
  1599. tab.nzClick.emit();
  1600. if (!this.isRouterLinkClickEvent(index, e)) {
  1601. this.setSelectedIndex(index);
  1602. }
  1603. }
  1604. }
  1605. isRouterLinkClickEvent(index, event) {
  1606. const target = event.target;
  1607. if (this.nzLinkRouter) {
  1608. return !!this.tabs.toArray()[index]?.linkDirective?.elementRef.nativeElement.contains(target);
  1609. }
  1610. else {
  1611. return false;
  1612. }
  1613. }
  1614. contextmenuNavItem(tab, e) {
  1615. if (!tab.nzDisabled) {
  1616. // ignore nzCanDeactivate
  1617. tab.nzContextmenu.emit(e);
  1618. }
  1619. }
  1620. setSelectedIndex(index) {
  1621. this.canDeactivateSubscription.unsubscribe();
  1622. this.canDeactivateSubscription = this.canDeactivateFun(this.selectedIndex, index).subscribe(can => {
  1623. if (can) {
  1624. this.nzSelectedIndex = index;
  1625. this.tabNavBarRef.focusIndex = index;
  1626. this.cdr.markForCheck();
  1627. }
  1628. });
  1629. }
  1630. getTabIndex(tab, index) {
  1631. if (tab.nzDisabled) {
  1632. return null;
  1633. }
  1634. return this.selectedIndex === index ? 0 : -1;
  1635. }
  1636. getTabContentId(i) {
  1637. return `nz-tabs-${this.tabSetId}-tab-${i}`;
  1638. }
  1639. setUpRouter() {
  1640. if (this.nzLinkRouter) {
  1641. if (!this.router) {
  1642. throw new Error(`${PREFIX} you should import 'RouterModule' if you want to use 'nzLinkRouter'!`);
  1643. }
  1644. merge(this.router.events.pipe(filter(e => e instanceof NavigationEnd)), this.tabLinks.changes)
  1645. .pipe(delay(0), takeUntil(this.destroy$))
  1646. .subscribe(() => {
  1647. this.updateRouterActive();
  1648. this.cdr.markForCheck();
  1649. });
  1650. }
  1651. }
  1652. updateRouterActive() {
  1653. if (this.router?.navigated) {
  1654. const index = this.findShouldActiveTabIndex();
  1655. if (index !== this.selectedIndex) {
  1656. this.setSelectedIndex(index);
  1657. }
  1658. Promise.resolve().then(() => (this.nzHideAll = index === -1));
  1659. }
  1660. }
  1661. findShouldActiveTabIndex() {
  1662. const tabs = this.tabs.toArray();
  1663. const isActive = this.isLinkActive(this.router);
  1664. return tabs.findIndex(tab => {
  1665. const c = tab.linkDirective;
  1666. return c ? isActive(c.routerLink) : false;
  1667. });
  1668. }
  1669. isLinkActive(router) {
  1670. return (link) => link
  1671. ? !!router?.isActive(link.urlTree || '', {
  1672. paths: this.nzLinkExact ? 'exact' : 'subset',
  1673. queryParams: this.nzLinkExact ? 'exact' : 'subset',
  1674. fragment: 'ignored',
  1675. matrixParams: 'ignored'
  1676. })
  1677. : false;
  1678. }
  1679. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabSetComponent, deps: [{ token: i1$2.NzConfigService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3$1.Directionality }], target: i0.ɵɵFactoryTarget.Component });
  1680. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzTabSetComponent, isStandalone: true, selector: "nz-tabset", inputs: { nzSelectedIndex: "nzSelectedIndex", nzTabPosition: "nzTabPosition", nzTabBarExtraContent: "nzTabBarExtraContent", nzCanDeactivate: "nzCanDeactivate", nzAddIcon: "nzAddIcon", nzTabBarStyle: "nzTabBarStyle", nzType: "nzType", nzSize: "nzSize", nzAnimated: "nzAnimated", nzTabBarGutter: "nzTabBarGutter", nzHideAdd: ["nzHideAdd", "nzHideAdd", booleanAttribute], nzCentered: ["nzCentered", "nzCentered", booleanAttribute], nzHideAll: ["nzHideAll", "nzHideAll", booleanAttribute], nzLinkRouter: ["nzLinkRouter", "nzLinkRouter", booleanAttribute], nzLinkExact: ["nzLinkExact", "nzLinkExact", booleanAttribute], nzDestroyInactiveTabPane: ["nzDestroyInactiveTabPane", "nzDestroyInactiveTabPane", booleanAttribute] }, 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: [
  1681. {
  1682. provide: NZ_TAB_SET,
  1683. useExisting: forwardRef(() => NzTabSetComponent)
  1684. }
  1685. ], 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: ["nzTabset"], ngImport: i0, template: `
  1686. @if (tabs.length || addable) {
  1687. <nz-tabs-nav
  1688. [style]="nzTabBarStyle"
  1689. [selectedIndex]="nzSelectedIndex || 0"
  1690. [inkBarAnimated]="inkBarAnimated"
  1691. [addable]="addable"
  1692. [addIcon]="nzAddIcon"
  1693. [hideBar]="nzHideAll"
  1694. [position]="position"
  1695. [extraTemplate]="nzTabBarExtraContent"
  1696. [extraContents]="extraContents()"
  1697. (tabScroll)="nzTabListScroll.emit($event)"
  1698. (selectFocusedIndex)="setSelectedIndex($event)"
  1699. (addClicked)="onAdd()"
  1700. >
  1701. @for (tab of tabs; track tab; let i = $index) {
  1702. <div
  1703. class="ant-tabs-tab"
  1704. [style.margin-right.px]="position === 'horizontal' ? nzTabBarGutter : null"
  1705. [style.margin-bottom.px]="position === 'vertical' ? nzTabBarGutter : null"
  1706. [class.ant-tabs-tab-active]="nzSelectedIndex === i"
  1707. [class.ant-tabs-tab-disabled]="tab.nzDisabled"
  1708. (click)="clickNavItem(tab, i, $event)"
  1709. (contextmenu)="contextmenuNavItem(tab, $event)"
  1710. >
  1711. <button
  1712. type="button"
  1713. role="tab"
  1714. [id]="getTabContentId(i)"
  1715. [attr.tabIndex]="getTabIndex(tab, i)"
  1716. [attr.aria-disabled]="tab.nzDisabled"
  1717. [attr.aria-selected]="nzSelectedIndex === i && !nzHideAll"
  1718. [attr.aria-controls]="getTabContentId(i)"
  1719. [disabled]="tab.nzDisabled"
  1720. [tab]="tab"
  1721. [active]="nzSelectedIndex === i"
  1722. class="ant-tabs-tab-btn"
  1723. nzTabNavItem
  1724. cdkMonitorElementFocus
  1725. >
  1726. <ng-container *nzStringTemplateOutlet="tab.label; context: { visible: true }">
  1727. {{ tab.label }}
  1728. </ng-container>
  1729. @if (tab.nzClosable && closable && !tab.nzDisabled) {
  1730. <button
  1731. type="button"
  1732. nz-tab-close-button
  1733. [closeIcon]="tab.nzCloseIcon"
  1734. (click)="onClose(i, $event)"
  1735. ></button>
  1736. }
  1737. </button>
  1738. </div>
  1739. }
  1740. </nz-tabs-nav>
  1741. }
  1742. <div class="ant-tabs-content-holder">
  1743. <div
  1744. class="ant-tabs-content"
  1745. [class.ant-tabs-content-top]="nzTabPosition === 'top'"
  1746. [class.ant-tabs-content-bottom]="nzTabPosition === 'bottom'"
  1747. [class.ant-tabs-content-left]="nzTabPosition === 'left'"
  1748. [class.ant-tabs-content-right]="nzTabPosition === 'right'"
  1749. [class.ant-tabs-content-animated]="tabPaneAnimated"
  1750. >
  1751. @if (!nzHideAll) {
  1752. @for (tab of tabs; track tab; let i = $index) {
  1753. @if (tab.nzForceRender) {
  1754. <ng-template [ngTemplateOutlet]="tabpaneTmpl"></ng-template>
  1755. } @else if (nzDestroyInactiveTabPane) {
  1756. @if (nzSelectedIndex === i) {
  1757. <ng-template [ngTemplateOutlet]="tabpaneTmpl"></ng-template>
  1758. }
  1759. } @else {
  1760. @if (nzSelectedIndex === i || tab.hasBeenActive) {
  1761. <ng-template [ngTemplateOutlet]="tabpaneTmpl"></ng-template>
  1762. }
  1763. }
  1764. <ng-template #tabpaneTmpl>
  1765. <div
  1766. role="tabpanel"
  1767. [id]="getTabContentId(i)"
  1768. [attr.aria-labelledby]="getTabContentId(i)"
  1769. nz-tab-body
  1770. [active]="nzSelectedIndex === i"
  1771. [content]="tab.content"
  1772. [animated]="tabPaneAnimated"
  1773. ></div>
  1774. </ng-template>
  1775. }
  1776. }
  1777. </div>
  1778. </div>
  1779. `, isInline: true, dependencies: [{ kind: "component", type: NzTabNavBarComponent, selector: "nz-tabs-nav", inputs: ["position", "addable", "hideBar", "addIcon", "inkBarAnimated", "extraTemplate", "extraContents", "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: i3$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.Default, encapsulation: i0.ViewEncapsulation.None });
  1780. };
  1781. })();
  1782. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabSetComponent, decorators: [{
  1783. type: Component,
  1784. args: [{
  1785. selector: 'nz-tabset',
  1786. exportAs: 'nzTabset',
  1787. preserveWhitespaces: false,
  1788. encapsulation: ViewEncapsulation.None,
  1789. changeDetection: ChangeDetectionStrategy.Default,
  1790. providers: [
  1791. {
  1792. provide: NZ_TAB_SET,
  1793. useExisting: forwardRef(() => NzTabSetComponent)
  1794. }
  1795. ],
  1796. template: `
  1797. @if (tabs.length || addable) {
  1798. <nz-tabs-nav
  1799. [style]="nzTabBarStyle"
  1800. [selectedIndex]="nzSelectedIndex || 0"
  1801. [inkBarAnimated]="inkBarAnimated"
  1802. [addable]="addable"
  1803. [addIcon]="nzAddIcon"
  1804. [hideBar]="nzHideAll"
  1805. [position]="position"
  1806. [extraTemplate]="nzTabBarExtraContent"
  1807. [extraContents]="extraContents()"
  1808. (tabScroll)="nzTabListScroll.emit($event)"
  1809. (selectFocusedIndex)="setSelectedIndex($event)"
  1810. (addClicked)="onAdd()"
  1811. >
  1812. @for (tab of tabs; track tab; let i = $index) {
  1813. <div
  1814. class="ant-tabs-tab"
  1815. [style.margin-right.px]="position === 'horizontal' ? nzTabBarGutter : null"
  1816. [style.margin-bottom.px]="position === 'vertical' ? nzTabBarGutter : null"
  1817. [class.ant-tabs-tab-active]="nzSelectedIndex === i"
  1818. [class.ant-tabs-tab-disabled]="tab.nzDisabled"
  1819. (click)="clickNavItem(tab, i, $event)"
  1820. (contextmenu)="contextmenuNavItem(tab, $event)"
  1821. >
  1822. <button
  1823. type="button"
  1824. role="tab"
  1825. [id]="getTabContentId(i)"
  1826. [attr.tabIndex]="getTabIndex(tab, i)"
  1827. [attr.aria-disabled]="tab.nzDisabled"
  1828. [attr.aria-selected]="nzSelectedIndex === i && !nzHideAll"
  1829. [attr.aria-controls]="getTabContentId(i)"
  1830. [disabled]="tab.nzDisabled"
  1831. [tab]="tab"
  1832. [active]="nzSelectedIndex === i"
  1833. class="ant-tabs-tab-btn"
  1834. nzTabNavItem
  1835. cdkMonitorElementFocus
  1836. >
  1837. <ng-container *nzStringTemplateOutlet="tab.label; context: { visible: true }">
  1838. {{ tab.label }}
  1839. </ng-container>
  1840. @if (tab.nzClosable && closable && !tab.nzDisabled) {
  1841. <button
  1842. type="button"
  1843. nz-tab-close-button
  1844. [closeIcon]="tab.nzCloseIcon"
  1845. (click)="onClose(i, $event)"
  1846. ></button>
  1847. }
  1848. </button>
  1849. </div>
  1850. }
  1851. </nz-tabs-nav>
  1852. }
  1853. <div class="ant-tabs-content-holder">
  1854. <div
  1855. class="ant-tabs-content"
  1856. [class.ant-tabs-content-top]="nzTabPosition === 'top'"
  1857. [class.ant-tabs-content-bottom]="nzTabPosition === 'bottom'"
  1858. [class.ant-tabs-content-left]="nzTabPosition === 'left'"
  1859. [class.ant-tabs-content-right]="nzTabPosition === 'right'"
  1860. [class.ant-tabs-content-animated]="tabPaneAnimated"
  1861. >
  1862. @if (!nzHideAll) {
  1863. @for (tab of tabs; track tab; let i = $index) {
  1864. @if (tab.nzForceRender) {
  1865. <ng-template [ngTemplateOutlet]="tabpaneTmpl"></ng-template>
  1866. } @else if (nzDestroyInactiveTabPane) {
  1867. @if (nzSelectedIndex === i) {
  1868. <ng-template [ngTemplateOutlet]="tabpaneTmpl"></ng-template>
  1869. }
  1870. } @else {
  1871. @if (nzSelectedIndex === i || tab.hasBeenActive) {
  1872. <ng-template [ngTemplateOutlet]="tabpaneTmpl"></ng-template>
  1873. }
  1874. }
  1875. <ng-template #tabpaneTmpl>
  1876. <div
  1877. role="tabpanel"
  1878. [id]="getTabContentId(i)"
  1879. [attr.aria-labelledby]="getTabContentId(i)"
  1880. nz-tab-body
  1881. [active]="nzSelectedIndex === i"
  1882. [content]="tab.content"
  1883. [animated]="tabPaneAnimated"
  1884. ></div>
  1885. </ng-template>
  1886. }
  1887. }
  1888. </div>
  1889. </div>
  1890. `,
  1891. host: {
  1892. class: 'ant-tabs',
  1893. '[class.ant-tabs-card]': `nzType === 'card' || nzType === 'editable-card'`,
  1894. '[class.ant-tabs-editable]': `nzType === 'editable-card'`,
  1895. '[class.ant-tabs-editable-card]': `nzType === 'editable-card'`,
  1896. '[class.ant-tabs-centered]': `nzCentered`,
  1897. '[class.ant-tabs-rtl]': `dir === 'rtl'`,
  1898. '[class.ant-tabs-top]': `nzTabPosition === 'top'`,
  1899. '[class.ant-tabs-bottom]': `nzTabPosition === 'bottom'`,
  1900. '[class.ant-tabs-left]': `nzTabPosition === 'left'`,
  1901. '[class.ant-tabs-right]': `nzTabPosition === 'right'`,
  1902. '[class.ant-tabs-default]': `nzSize === 'default'`,
  1903. '[class.ant-tabs-small]': `nzSize === 'small'`,
  1904. '[class.ant-tabs-large]': `nzSize === 'large'`
  1905. },
  1906. imports: [
  1907. NzTabNavBarComponent,
  1908. NgTemplateOutlet,
  1909. NzTabNavItemDirective,
  1910. A11yModule,
  1911. NzOutletModule,
  1912. NzTabCloseButtonComponent,
  1913. NzTabBodyComponent
  1914. ]
  1915. }]
  1916. }], ctorParameters: () => [{ type: i1$2.NzConfigService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i3$1.Directionality }], propDecorators: { nzSelectedIndex: [{
  1917. type: Input
  1918. }], nzTabPosition: [{
  1919. type: Input
  1920. }], nzTabBarExtraContent: [{
  1921. type: Input
  1922. }], nzCanDeactivate: [{
  1923. type: Input
  1924. }], nzAddIcon: [{
  1925. type: Input
  1926. }], nzTabBarStyle: [{
  1927. type: Input
  1928. }], nzType: [{
  1929. type: Input
  1930. }], nzSize: [{
  1931. type: Input
  1932. }], nzAnimated: [{
  1933. type: Input
  1934. }], nzTabBarGutter: [{
  1935. type: Input
  1936. }], nzHideAdd: [{
  1937. type: Input,
  1938. args: [{ transform: booleanAttribute }]
  1939. }], nzCentered: [{
  1940. type: Input,
  1941. args: [{ transform: booleanAttribute }]
  1942. }], nzHideAll: [{
  1943. type: Input,
  1944. args: [{ transform: booleanAttribute }]
  1945. }], nzLinkRouter: [{
  1946. type: Input,
  1947. args: [{ transform: booleanAttribute }]
  1948. }], nzLinkExact: [{
  1949. type: Input,
  1950. args: [{ transform: booleanAttribute }]
  1951. }], nzDestroyInactiveTabPane: [{
  1952. type: Input,
  1953. args: [{ transform: booleanAttribute }]
  1954. }], nzSelectChange: [{
  1955. type: Output
  1956. }], nzSelectedIndexChange: [{
  1957. type: Output
  1958. }], nzTabListScroll: [{
  1959. type: Output
  1960. }], nzClose: [{
  1961. type: Output
  1962. }], nzAdd: [{
  1963. type: Output
  1964. }], allTabs: [{
  1965. type: ContentChildren,
  1966. args: [NzTabComponent, { descendants: true }]
  1967. }], tabLinks: [{
  1968. type: ContentChildren,
  1969. args: [NzTabLinkDirective, { descendants: true }]
  1970. }], tabNavBarRef: [{
  1971. type: ViewChild,
  1972. args: [NzTabNavBarComponent, { static: false }]
  1973. }] } });
  1974. /**
  1975. * Use of this source code is governed by an MIT-style license that can be
  1976. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  1977. */
  1978. const DIRECTIVES = [
  1979. NzTabSetComponent,
  1980. NzTabComponent,
  1981. NzTabNavBarComponent,
  1982. NzTabNavItemDirective,
  1983. NzTabsInkBarDirective,
  1984. NzTabScrollListDirective,
  1985. NzTabNavOperationComponent,
  1986. NzTabAddButtonComponent,
  1987. NzTabCloseButtonComponent,
  1988. NzTabDirective,
  1989. NzTabBodyComponent,
  1990. NzTabLinkDirective,
  1991. NzTabLinkTemplateDirective,
  1992. NzTabBarExtraContentDirective
  1993. ];
  1994. class NzTabsModule {
  1995. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  1996. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzTabsModule, imports: [NzTabSetComponent,
  1997. NzTabComponent,
  1998. NzTabNavBarComponent,
  1999. NzTabNavItemDirective,
  2000. NzTabsInkBarDirective,
  2001. NzTabScrollListDirective,
  2002. NzTabNavOperationComponent,
  2003. NzTabAddButtonComponent,
  2004. NzTabCloseButtonComponent,
  2005. NzTabDirective,
  2006. NzTabBodyComponent,
  2007. NzTabLinkDirective,
  2008. NzTabLinkTemplateDirective,
  2009. NzTabBarExtraContentDirective], exports: [NzTabSetComponent,
  2010. NzTabComponent,
  2011. NzTabNavBarComponent,
  2012. NzTabNavItemDirective,
  2013. NzTabsInkBarDirective,
  2014. NzTabScrollListDirective,
  2015. NzTabNavOperationComponent,
  2016. NzTabAddButtonComponent,
  2017. NzTabCloseButtonComponent,
  2018. NzTabDirective,
  2019. NzTabBodyComponent,
  2020. NzTabLinkDirective,
  2021. NzTabLinkTemplateDirective,
  2022. NzTabBarExtraContentDirective] });
  2023. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabsModule, imports: [NzTabSetComponent,
  2024. NzTabNavBarComponent,
  2025. NzTabNavOperationComponent,
  2026. NzTabAddButtonComponent,
  2027. NzTabCloseButtonComponent] });
  2028. }
  2029. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTabsModule, decorators: [{
  2030. type: NgModule,
  2031. args: [{
  2032. imports: [DIRECTIVES],
  2033. exports: [DIRECTIVES]
  2034. }]
  2035. }] });
  2036. /**
  2037. * Use of this source code is governed by an MIT-style license that can be
  2038. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  2039. */
  2040. /**
  2041. * Generated bundle index. Do not edit.
  2042. */
  2043. export { NZ_TAB_SET, NzTabBarExtraContentDirective, NzTabChangeEvent, NzTabComponent, NzTabDirective, NzTabLinkDirective, NzTabLinkTemplateDirective, NzTabSetComponent, 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 };
  2044. //# sourceMappingURL=ng-zorro-antd-tabs.mjs.map