375 lines
17 KiB
JavaScript
375 lines
17 KiB
JavaScript
import * as i0 from '@angular/core';
|
|
import { Injectable, inject, ChangeDetectorRef, Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, DestroyRef, booleanAttribute, ContentChildren, NgModule } from '@angular/core';
|
|
import * as i1 from 'ng-zorro-antd/core/outlet';
|
|
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
|
|
import { ReplaySubject } from 'rxjs';
|
|
import { Directionality } from '@angular/cdk/bidi';
|
|
import { NgTemplateOutlet } from '@angular/common';
|
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
import * as i2 from 'ng-zorro-antd/icon';
|
|
import { NzIconModule } from 'ng-zorro-antd/icon';
|
|
|
|
/**
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
|
|
*/
|
|
class TimelineService {
|
|
check$ = new ReplaySubject(1);
|
|
markForCheck() {
|
|
this.check$.next();
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TimelineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TimelineService });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TimelineService, decorators: [{
|
|
type: Injectable
|
|
}] });
|
|
|
|
/**
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
|
|
*/
|
|
const TimelineTimeDefaultColors = ['red', 'blue', 'green', 'grey', 'gray'];
|
|
|
|
/**
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
|
|
*/
|
|
function isDefaultColor(color) {
|
|
return TimelineTimeDefaultColors.findIndex(i => i === color) !== -1;
|
|
}
|
|
class NzTimelineItemComponent {
|
|
cdr = inject(ChangeDetectorRef);
|
|
timelineService = inject(TimelineService);
|
|
template;
|
|
nzPosition;
|
|
nzColor = 'blue';
|
|
nzDot;
|
|
nzLabel;
|
|
isLast = false;
|
|
borderColor = null;
|
|
position;
|
|
ngOnChanges(changes) {
|
|
this.timelineService.markForCheck();
|
|
const { nzColor } = changes;
|
|
if (nzColor) {
|
|
this.updateCustomColor();
|
|
}
|
|
}
|
|
detectChanges() {
|
|
this.cdr.detectChanges();
|
|
}
|
|
updateCustomColor() {
|
|
this.borderColor = isDefaultColor(this.nzColor) ? null : this.nzColor;
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzTimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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: `
|
|
<ng-template #template>
|
|
<li
|
|
class="ant-timeline-item"
|
|
[class.ant-timeline-item-right]="(nzPosition || position) === 'right'"
|
|
[class.ant-timeline-item-left]="(nzPosition || position) === 'left'"
|
|
[class.ant-timeline-item-last]="isLast"
|
|
>
|
|
@if (nzLabel) {
|
|
<div class="ant-timeline-item-label">
|
|
<ng-container *nzStringTemplateOutlet="nzLabel">{{ nzLabel }}</ng-container>
|
|
</div>
|
|
}
|
|
<div class="ant-timeline-item-tail"></div>
|
|
<div
|
|
class="ant-timeline-item-head"
|
|
[class.ant-timeline-item-head-red]="nzColor === 'red'"
|
|
[class.ant-timeline-item-head-blue]="nzColor === 'blue'"
|
|
[class.ant-timeline-item-head-green]="nzColor === 'green'"
|
|
[class.ant-timeline-item-head-gray]="nzColor === 'gray'"
|
|
[class.ant-timeline-item-head-custom]="!!nzDot"
|
|
[style.border-color]="borderColor"
|
|
>
|
|
<ng-container *nzStringTemplateOutlet="nzDot">{{ nzDot }}</ng-container>
|
|
</div>
|
|
<div class="ant-timeline-item-content">
|
|
<ng-content></ng-content>
|
|
</div>
|
|
</li>
|
|
</ng-template>
|
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i1.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzTimelineItemComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
selector: 'nz-timeline-item, [nz-timeline-item]',
|
|
exportAs: 'nzTimelineItem',
|
|
template: `
|
|
<ng-template #template>
|
|
<li
|
|
class="ant-timeline-item"
|
|
[class.ant-timeline-item-right]="(nzPosition || position) === 'right'"
|
|
[class.ant-timeline-item-left]="(nzPosition || position) === 'left'"
|
|
[class.ant-timeline-item-last]="isLast"
|
|
>
|
|
@if (nzLabel) {
|
|
<div class="ant-timeline-item-label">
|
|
<ng-container *nzStringTemplateOutlet="nzLabel">{{ nzLabel }}</ng-container>
|
|
</div>
|
|
}
|
|
<div class="ant-timeline-item-tail"></div>
|
|
<div
|
|
class="ant-timeline-item-head"
|
|
[class.ant-timeline-item-head-red]="nzColor === 'red'"
|
|
[class.ant-timeline-item-head-blue]="nzColor === 'blue'"
|
|
[class.ant-timeline-item-head-green]="nzColor === 'green'"
|
|
[class.ant-timeline-item-head-gray]="nzColor === 'gray'"
|
|
[class.ant-timeline-item-head-custom]="!!nzDot"
|
|
[style.border-color]="borderColor"
|
|
>
|
|
<ng-container *nzStringTemplateOutlet="nzDot">{{ nzDot }}</ng-container>
|
|
</div>
|
|
<div class="ant-timeline-item-content">
|
|
<ng-content></ng-content>
|
|
</div>
|
|
</li>
|
|
</ng-template>
|
|
`,
|
|
imports: [NzOutletModule],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
encapsulation: ViewEncapsulation.None
|
|
}]
|
|
}], propDecorators: { template: [{
|
|
type: ViewChild,
|
|
args: ['template', { static: false }]
|
|
}], nzPosition: [{
|
|
type: Input
|
|
}], nzColor: [{
|
|
type: Input
|
|
}], nzDot: [{
|
|
type: Input
|
|
}], nzLabel: [{
|
|
type: Input
|
|
}] } });
|
|
|
|
/**
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
|
|
*/
|
|
class NzTimelineComponent {
|
|
cdr = inject(ChangeDetectorRef);
|
|
timelineService = inject(TimelineService);
|
|
directionality = inject(Directionality);
|
|
destroyRef = inject(DestroyRef);
|
|
listOfItems;
|
|
nzMode = 'left';
|
|
nzPending;
|
|
nzPendingDot;
|
|
nzReverse = false;
|
|
isPendingBoolean = false;
|
|
timelineItems = [];
|
|
dir = 'ltr';
|
|
hasLabelItem = false;
|
|
ngOnChanges(changes) {
|
|
const { nzMode, nzReverse, nzPending } = changes;
|
|
if (simpleChangeActivated(nzMode) || simpleChangeActivated(nzReverse)) {
|
|
this.updateChildren();
|
|
}
|
|
if (nzPending) {
|
|
this.isPendingBoolean = nzPending.currentValue === true;
|
|
}
|
|
}
|
|
ngOnInit() {
|
|
this.timelineService.check$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
this.cdr.markForCheck();
|
|
});
|
|
this.directionality.change?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(direction => {
|
|
this.dir = direction;
|
|
this.cdr.detectChanges();
|
|
});
|
|
this.dir = this.directionality.value;
|
|
}
|
|
ngAfterContentInit() {
|
|
this.updateChildren();
|
|
this.listOfItems.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
this.updateChildren();
|
|
});
|
|
}
|
|
updateChildren() {
|
|
if (this.listOfItems && this.listOfItems.length) {
|
|
const length = this.listOfItems.length;
|
|
let hasLabelItem = false;
|
|
this.listOfItems.forEach((item, index) => {
|
|
item.isLast = !this.nzReverse ? index === length - 1 : index === 0;
|
|
item.position = getInferredTimelineItemPosition(index, this.nzMode);
|
|
if (!hasLabelItem && item.nzLabel) {
|
|
hasLabelItem = true;
|
|
}
|
|
item.detectChanges();
|
|
});
|
|
this.timelineItems = this.nzReverse ? this.listOfItems.toArray().reverse() : this.listOfItems.toArray();
|
|
this.hasLabelItem = hasLabelItem;
|
|
}
|
|
else {
|
|
this.timelineItems = [];
|
|
this.hasLabelItem = false;
|
|
}
|
|
this.cdr.markForCheck();
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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: `
|
|
<ul
|
|
class="ant-timeline"
|
|
[class.ant-timeline-label]="hasLabelItem"
|
|
[class.ant-timeline-right]="!hasLabelItem && nzMode === 'right'"
|
|
[class.ant-timeline-alternate]="nzMode === 'alternate' || nzMode === 'custom'"
|
|
[class.ant-timeline-pending]="!!nzPending"
|
|
[class.ant-timeline-reverse]="nzReverse"
|
|
[class.ant-timeline-rtl]="dir === 'rtl'"
|
|
>
|
|
<!-- pending dot (reversed) -->
|
|
@if (nzReverse) {
|
|
<ng-container [ngTemplateOutlet]="pendingTemplate"></ng-container>
|
|
}
|
|
<!-- timeline items -->
|
|
@for (item of timelineItems; track item) {
|
|
<ng-template [ngTemplateOutlet]="item.template"></ng-template>
|
|
}
|
|
@if (!nzReverse) {
|
|
<ng-container [ngTemplateOutlet]="pendingTemplate"></ng-container>
|
|
}
|
|
<!-- pending dot -->
|
|
</ul>
|
|
<ng-template #pendingTemplate>
|
|
@if (nzPending) {
|
|
<li class="ant-timeline-item ant-timeline-item-pending">
|
|
<div class="ant-timeline-item-tail"></div>
|
|
<div class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue">
|
|
<ng-container *nzStringTemplateOutlet="nzPendingDot">
|
|
{{ nzPendingDot }}
|
|
@if (!nzPendingDot) {
|
|
<nz-icon nzType="loading" />
|
|
}
|
|
</ng-container>
|
|
</div>
|
|
<div class="ant-timeline-item-content">
|
|
<ng-container *nzStringTemplateOutlet="nzPending">
|
|
{{ isPendingBoolean ? '' : nzPending }}
|
|
</ng-container>
|
|
</div>
|
|
</li>
|
|
}
|
|
</ng-template>
|
|
<!-- Grasp items -->
|
|
<ng-content></ng-content>
|
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzTimelineComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
encapsulation: ViewEncapsulation.None,
|
|
selector: 'nz-timeline',
|
|
providers: [TimelineService],
|
|
exportAs: 'nzTimeline',
|
|
template: `
|
|
<ul
|
|
class="ant-timeline"
|
|
[class.ant-timeline-label]="hasLabelItem"
|
|
[class.ant-timeline-right]="!hasLabelItem && nzMode === 'right'"
|
|
[class.ant-timeline-alternate]="nzMode === 'alternate' || nzMode === 'custom'"
|
|
[class.ant-timeline-pending]="!!nzPending"
|
|
[class.ant-timeline-reverse]="nzReverse"
|
|
[class.ant-timeline-rtl]="dir === 'rtl'"
|
|
>
|
|
<!-- pending dot (reversed) -->
|
|
@if (nzReverse) {
|
|
<ng-container [ngTemplateOutlet]="pendingTemplate"></ng-container>
|
|
}
|
|
<!-- timeline items -->
|
|
@for (item of timelineItems; track item) {
|
|
<ng-template [ngTemplateOutlet]="item.template"></ng-template>
|
|
}
|
|
@if (!nzReverse) {
|
|
<ng-container [ngTemplateOutlet]="pendingTemplate"></ng-container>
|
|
}
|
|
<!-- pending dot -->
|
|
</ul>
|
|
<ng-template #pendingTemplate>
|
|
@if (nzPending) {
|
|
<li class="ant-timeline-item ant-timeline-item-pending">
|
|
<div class="ant-timeline-item-tail"></div>
|
|
<div class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue">
|
|
<ng-container *nzStringTemplateOutlet="nzPendingDot">
|
|
{{ nzPendingDot }}
|
|
@if (!nzPendingDot) {
|
|
<nz-icon nzType="loading" />
|
|
}
|
|
</ng-container>
|
|
</div>
|
|
<div class="ant-timeline-item-content">
|
|
<ng-container *nzStringTemplateOutlet="nzPending">
|
|
{{ isPendingBoolean ? '' : nzPending }}
|
|
</ng-container>
|
|
</div>
|
|
</li>
|
|
}
|
|
</ng-template>
|
|
<!-- Grasp items -->
|
|
<ng-content></ng-content>
|
|
`,
|
|
imports: [NgTemplateOutlet, NzOutletModule, NzIconModule]
|
|
}]
|
|
}], propDecorators: { listOfItems: [{
|
|
type: ContentChildren,
|
|
args: [NzTimelineItemComponent]
|
|
}], nzMode: [{
|
|
type: Input
|
|
}], nzPending: [{
|
|
type: Input
|
|
}], nzPendingDot: [{
|
|
type: Input
|
|
}], nzReverse: [{
|
|
type: Input,
|
|
args: [{ transform: booleanAttribute }]
|
|
}] } });
|
|
function simpleChangeActivated(simpleChange) {
|
|
return !!(simpleChange && (simpleChange.previousValue !== simpleChange.currentValue || simpleChange.isFirstChange()));
|
|
}
|
|
function getInferredTimelineItemPosition(index, mode) {
|
|
if (mode === 'custom') {
|
|
return undefined;
|
|
}
|
|
else if (mode === 'left' || mode === 'right') {
|
|
return mode;
|
|
}
|
|
else {
|
|
return mode === 'alternate' && index % 2 === 0 ? 'left' : 'right';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
|
|
*/
|
|
class NzTimelineModule {
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: NzTimelineModule, imports: [NzTimelineItemComponent, NzTimelineComponent], exports: [NzTimelineItemComponent, NzTimelineComponent] });
|
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzTimelineModule, imports: [NzTimelineItemComponent, NzTimelineComponent] });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzTimelineModule, decorators: [{
|
|
type: NgModule,
|
|
args: [{
|
|
imports: [NzTimelineItemComponent, NzTimelineComponent],
|
|
exports: [NzTimelineItemComponent, NzTimelineComponent]
|
|
}]
|
|
}] });
|
|
|
|
/**
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
|
|
*/
|
|
|
|
/**
|
|
* Generated bundle index. Do not edit.
|
|
*/
|
|
|
|
export { NzTimelineComponent, NzTimelineItemComponent, NzTimelineModule, TimelineService };
|
|
//# sourceMappingURL=ng-zorro-antd-timeline.mjs.map
|