ng-zorro-antd-timeline.mjs 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
  1. import * as i0 from '@angular/core';
  2. import { Injectable, Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, ContentChildren, NgModule } from '@angular/core';
  3. import * as i2 from 'ng-zorro-antd/core/outlet';
  4. import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
  5. import { ReplaySubject, Subject } from 'rxjs';
  6. import { NgTemplateOutlet } from '@angular/common';
  7. import { takeUntil } from 'rxjs/operators';
  8. import * as i4 from 'ng-zorro-antd/icon';
  9. import { NzIconModule } from 'ng-zorro-antd/icon';
  10. import * as i2$1 from '@angular/cdk/bidi';
  11. /**
  12. * Use of this source code is governed by an MIT-style license that can be
  13. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  14. */
  15. const TimelineTimeDefaultColors = ['red', 'blue', 'green', 'grey', 'gray'];
  16. /**
  17. * Use of this source code is governed by an MIT-style license that can be
  18. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  19. */
  20. class TimelineService {
  21. check$ = new ReplaySubject(1);
  22. markForCheck() {
  23. this.check$.next();
  24. }
  25. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TimelineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
  26. static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TimelineService });
  27. }
  28. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TimelineService, decorators: [{
  29. type: Injectable
  30. }] });
  31. /**
  32. * Use of this source code is governed by an MIT-style license that can be
  33. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  34. */
  35. function isDefaultColor(color) {
  36. return TimelineTimeDefaultColors.findIndex(i => i === color) !== -1;
  37. }
  38. class NzTimelineItemComponent {
  39. cdr;
  40. timelineService;
  41. template;
  42. nzPosition;
  43. nzColor = 'blue';
  44. nzDot;
  45. nzLabel;
  46. isLast = false;
  47. borderColor = null;
  48. position;
  49. constructor(cdr, timelineService) {
  50. this.cdr = cdr;
  51. this.timelineService = timelineService;
  52. }
  53. ngOnChanges(changes) {
  54. this.timelineService.markForCheck();
  55. if (changes.nzColor) {
  56. this.updateCustomColor();
  57. }
  58. }
  59. detectChanges() {
  60. this.cdr.detectChanges();
  61. }
  62. updateCustomColor() {
  63. this.borderColor = isDefaultColor(this.nzColor) ? null : this.nzColor;
  64. }
  65. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTimelineItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TimelineService }], target: i0.ɵɵFactoryTarget.Component });
  66. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzTimelineItemComponent, isStandalone: true, selector: "nz-timeline-item, [nz-timeline-item]", inputs: { nzPosition: "nzPosition", nzColor: "nzColor", nzDot: "nzDot", nzLabel: "nzLabel" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true }], exportAs: ["nzTimelineItem"], usesOnChanges: true, ngImport: i0, template: `
  67. <ng-template #template>
  68. <li
  69. class="ant-timeline-item"
  70. [class.ant-timeline-item-right]="(nzPosition || position) === 'right'"
  71. [class.ant-timeline-item-left]="(nzPosition || position) === 'left'"
  72. [class.ant-timeline-item-last]="isLast"
  73. >
  74. @if (nzLabel) {
  75. <div class="ant-timeline-item-label">
  76. <ng-container *nzStringTemplateOutlet="nzLabel">{{ nzLabel }}</ng-container>
  77. </div>
  78. }
  79. <div class="ant-timeline-item-tail"></div>
  80. <div
  81. class="ant-timeline-item-head"
  82. [class.ant-timeline-item-head-red]="nzColor === 'red'"
  83. [class.ant-timeline-item-head-blue]="nzColor === 'blue'"
  84. [class.ant-timeline-item-head-green]="nzColor === 'green'"
  85. [class.ant-timeline-item-head-gray]="nzColor === 'gray'"
  86. [class.ant-timeline-item-head-custom]="!!nzDot"
  87. [style.border-color]="borderColor"
  88. >
  89. <ng-container *nzStringTemplateOutlet="nzDot">{{ nzDot }}</ng-container>
  90. </div>
  91. <div class="ant-timeline-item-content">
  92. <ng-content></ng-content>
  93. </div>
  94. </li>
  95. </ng-template>
  96. `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i2.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  97. }
  98. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTimelineItemComponent, decorators: [{
  99. type: Component,
  100. args: [{
  101. changeDetection: ChangeDetectionStrategy.OnPush,
  102. encapsulation: ViewEncapsulation.None,
  103. preserveWhitespaces: false,
  104. selector: 'nz-timeline-item, [nz-timeline-item]',
  105. exportAs: 'nzTimelineItem',
  106. template: `
  107. <ng-template #template>
  108. <li
  109. class="ant-timeline-item"
  110. [class.ant-timeline-item-right]="(nzPosition || position) === 'right'"
  111. [class.ant-timeline-item-left]="(nzPosition || position) === 'left'"
  112. [class.ant-timeline-item-last]="isLast"
  113. >
  114. @if (nzLabel) {
  115. <div class="ant-timeline-item-label">
  116. <ng-container *nzStringTemplateOutlet="nzLabel">{{ nzLabel }}</ng-container>
  117. </div>
  118. }
  119. <div class="ant-timeline-item-tail"></div>
  120. <div
  121. class="ant-timeline-item-head"
  122. [class.ant-timeline-item-head-red]="nzColor === 'red'"
  123. [class.ant-timeline-item-head-blue]="nzColor === 'blue'"
  124. [class.ant-timeline-item-head-green]="nzColor === 'green'"
  125. [class.ant-timeline-item-head-gray]="nzColor === 'gray'"
  126. [class.ant-timeline-item-head-custom]="!!nzDot"
  127. [style.border-color]="borderColor"
  128. >
  129. <ng-container *nzStringTemplateOutlet="nzDot">{{ nzDot }}</ng-container>
  130. </div>
  131. <div class="ant-timeline-item-content">
  132. <ng-content></ng-content>
  133. </div>
  134. </li>
  135. </ng-template>
  136. `,
  137. imports: [NzOutletModule]
  138. }]
  139. }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TimelineService }], propDecorators: { template: [{
  140. type: ViewChild,
  141. args: ['template', { static: false }]
  142. }], nzPosition: [{
  143. type: Input
  144. }], nzColor: [{
  145. type: Input
  146. }], nzDot: [{
  147. type: Input
  148. }], nzLabel: [{
  149. type: Input
  150. }] } });
  151. class NzTimelineComponent {
  152. cdr;
  153. timelineService;
  154. directionality;
  155. listOfItems;
  156. nzMode = 'left';
  157. nzPending;
  158. nzPendingDot;
  159. nzReverse = false;
  160. isPendingBoolean = false;
  161. timelineItems = [];
  162. dir = 'ltr';
  163. hasLabelItem = false;
  164. destroy$ = new Subject();
  165. constructor(cdr, timelineService, directionality) {
  166. this.cdr = cdr;
  167. this.timelineService = timelineService;
  168. this.directionality = directionality;
  169. }
  170. ngOnChanges(changes) {
  171. const { nzMode, nzReverse, nzPending } = changes;
  172. if (simpleChangeActivated(nzMode) || simpleChangeActivated(nzReverse)) {
  173. this.updateChildren();
  174. }
  175. if (nzPending) {
  176. this.isPendingBoolean = nzPending.currentValue === true;
  177. }
  178. }
  179. ngOnInit() {
  180. this.timelineService.check$.pipe(takeUntil(this.destroy$)).subscribe(() => {
  181. this.cdr.markForCheck();
  182. });
  183. this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  184. this.dir = direction;
  185. this.cdr.detectChanges();
  186. });
  187. this.dir = this.directionality.value;
  188. }
  189. ngAfterContentInit() {
  190. this.updateChildren();
  191. this.listOfItems.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
  192. this.updateChildren();
  193. });
  194. }
  195. ngOnDestroy() {
  196. this.destroy$.next();
  197. this.destroy$.complete();
  198. }
  199. updateChildren() {
  200. if (this.listOfItems && this.listOfItems.length) {
  201. const length = this.listOfItems.length;
  202. let hasLabelItem = false;
  203. this.listOfItems.forEach((item, index) => {
  204. item.isLast = !this.nzReverse ? index === length - 1 : index === 0;
  205. item.position = getInferredTimelineItemPosition(index, this.nzMode);
  206. if (!hasLabelItem && item.nzLabel) {
  207. hasLabelItem = true;
  208. }
  209. item.detectChanges();
  210. });
  211. this.timelineItems = this.nzReverse ? this.listOfItems.toArray().reverse() : this.listOfItems.toArray();
  212. this.hasLabelItem = hasLabelItem;
  213. }
  214. else {
  215. this.timelineItems = [];
  216. this.hasLabelItem = false;
  217. }
  218. this.cdr.markForCheck();
  219. }
  220. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTimelineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TimelineService }, { token: i2$1.Directionality }], target: i0.ɵɵFactoryTarget.Component });
  221. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzTimelineComponent, isStandalone: true, selector: "nz-timeline", inputs: { nzMode: "nzMode", nzPending: "nzPending", nzPendingDot: "nzPendingDot", nzReverse: ["nzReverse", "nzReverse", booleanAttribute] }, providers: [TimelineService], queries: [{ propertyName: "listOfItems", predicate: NzTimelineItemComponent }], exportAs: ["nzTimeline"], usesOnChanges: true, ngImport: i0, template: `
  222. <ul
  223. class="ant-timeline"
  224. [class.ant-timeline-label]="hasLabelItem"
  225. [class.ant-timeline-right]="!hasLabelItem && nzMode === 'right'"
  226. [class.ant-timeline-alternate]="nzMode === 'alternate' || nzMode === 'custom'"
  227. [class.ant-timeline-pending]="!!nzPending"
  228. [class.ant-timeline-reverse]="nzReverse"
  229. [class.ant-timeline-rtl]="dir === 'rtl'"
  230. >
  231. <!-- pending dot (reversed) -->
  232. @if (nzReverse) {
  233. <ng-container [ngTemplateOutlet]="pendingTemplate"></ng-container>
  234. }
  235. <!-- timeline items -->
  236. @for (item of timelineItems; track item) {
  237. <ng-template [ngTemplateOutlet]="item.template"></ng-template>
  238. }
  239. @if (!nzReverse) {
  240. <ng-container [ngTemplateOutlet]="pendingTemplate"></ng-container>
  241. }
  242. <!-- pending dot -->
  243. </ul>
  244. <ng-template #pendingTemplate>
  245. @if (nzPending) {
  246. <li class="ant-timeline-item ant-timeline-item-pending">
  247. <div class="ant-timeline-item-tail"></div>
  248. <div class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue">
  249. <ng-container *nzStringTemplateOutlet="nzPendingDot">
  250. {{ nzPendingDot }}
  251. @if (!nzPendingDot) {
  252. <nz-icon nzType="loading" />
  253. }
  254. </ng-container>
  255. </div>
  256. <div class="ant-timeline-item-content">
  257. <ng-container *nzStringTemplateOutlet="nzPending">
  258. {{ isPendingBoolean ? '' : nzPending }}
  259. </ng-container>
  260. </div>
  261. </li>
  262. }
  263. </ng-template>
  264. <!-- Grasp items -->
  265. <ng-content></ng-content>
  266. `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i2.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i4.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  267. }
  268. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTimelineComponent, decorators: [{
  269. type: Component,
  270. args: [{
  271. changeDetection: ChangeDetectionStrategy.OnPush,
  272. encapsulation: ViewEncapsulation.None,
  273. preserveWhitespaces: false,
  274. selector: 'nz-timeline',
  275. providers: [TimelineService],
  276. exportAs: 'nzTimeline',
  277. template: `
  278. <ul
  279. class="ant-timeline"
  280. [class.ant-timeline-label]="hasLabelItem"
  281. [class.ant-timeline-right]="!hasLabelItem && nzMode === 'right'"
  282. [class.ant-timeline-alternate]="nzMode === 'alternate' || nzMode === 'custom'"
  283. [class.ant-timeline-pending]="!!nzPending"
  284. [class.ant-timeline-reverse]="nzReverse"
  285. [class.ant-timeline-rtl]="dir === 'rtl'"
  286. >
  287. <!-- pending dot (reversed) -->
  288. @if (nzReverse) {
  289. <ng-container [ngTemplateOutlet]="pendingTemplate"></ng-container>
  290. }
  291. <!-- timeline items -->
  292. @for (item of timelineItems; track item) {
  293. <ng-template [ngTemplateOutlet]="item.template"></ng-template>
  294. }
  295. @if (!nzReverse) {
  296. <ng-container [ngTemplateOutlet]="pendingTemplate"></ng-container>
  297. }
  298. <!-- pending dot -->
  299. </ul>
  300. <ng-template #pendingTemplate>
  301. @if (nzPending) {
  302. <li class="ant-timeline-item ant-timeline-item-pending">
  303. <div class="ant-timeline-item-tail"></div>
  304. <div class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue">
  305. <ng-container *nzStringTemplateOutlet="nzPendingDot">
  306. {{ nzPendingDot }}
  307. @if (!nzPendingDot) {
  308. <nz-icon nzType="loading" />
  309. }
  310. </ng-container>
  311. </div>
  312. <div class="ant-timeline-item-content">
  313. <ng-container *nzStringTemplateOutlet="nzPending">
  314. {{ isPendingBoolean ? '' : nzPending }}
  315. </ng-container>
  316. </div>
  317. </li>
  318. }
  319. </ng-template>
  320. <!-- Grasp items -->
  321. <ng-content></ng-content>
  322. `,
  323. imports: [NgTemplateOutlet, NzOutletModule, NzIconModule]
  324. }]
  325. }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TimelineService }, { type: i2$1.Directionality }], propDecorators: { listOfItems: [{
  326. type: ContentChildren,
  327. args: [NzTimelineItemComponent]
  328. }], nzMode: [{
  329. type: Input
  330. }], nzPending: [{
  331. type: Input
  332. }], nzPendingDot: [{
  333. type: Input
  334. }], nzReverse: [{
  335. type: Input,
  336. args: [{ transform: booleanAttribute }]
  337. }] } });
  338. function simpleChangeActivated(simpleChange) {
  339. return !!(simpleChange && (simpleChange.previousValue !== simpleChange.currentValue || simpleChange.isFirstChange()));
  340. }
  341. function getInferredTimelineItemPosition(index, mode) {
  342. return mode === 'custom'
  343. ? undefined
  344. : mode === 'left'
  345. ? 'left'
  346. : mode === 'right'
  347. ? 'right'
  348. : mode === 'alternate' && index % 2 === 0
  349. ? 'left'
  350. : 'right';
  351. }
  352. /**
  353. * Use of this source code is governed by an MIT-style license that can be
  354. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  355. */
  356. class NzTimelineModule {
  357. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  358. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzTimelineModule, imports: [NzTimelineItemComponent, NzTimelineComponent], exports: [NzTimelineItemComponent, NzTimelineComponent] });
  359. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTimelineModule, imports: [NzTimelineItemComponent, NzTimelineComponent] });
  360. }
  361. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTimelineModule, decorators: [{
  362. type: NgModule,
  363. args: [{
  364. imports: [NzTimelineItemComponent, NzTimelineComponent],
  365. exports: [NzTimelineItemComponent, NzTimelineComponent]
  366. }]
  367. }] });
  368. /**
  369. * Use of this source code is governed by an MIT-style license that can be
  370. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  371. */
  372. /**
  373. * Generated bundle index. Do not edit.
  374. */
  375. export { NzTimelineComponent, NzTimelineItemComponent, NzTimelineModule, TimelineService };
  376. //# sourceMappingURL=ng-zorro-antd-timeline.mjs.map