ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
320 lines (313 loc) • 12 kB
JavaScript
import { TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ViewChild, Input, EventEmitter, Optional, ContentChildren, Output, NgModule } from '@angular/core';
import { InputBoolean, toBoolean } from 'ng-zorro-antd/core/util';
import { Subject, merge } from 'rxjs';
import { takeUntil, startWith } from 'rxjs/operators';
import { Directionality, BidiModule } from '@angular/cdk/bidi';
import { __decorate, __metadata } from 'tslib';
import { CommonModule } from '@angular/common';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
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 NzStepComponent {
constructor(cdr) {
this.cdr = cdr;
this.nzDisabled = false;
this.isCustomStatus = false;
this._status = 'wait';
this.oldAPIIcon = true;
this.direction = 'horizontal';
this.index = 0;
this.last = false;
this.outStatus = 'process';
this.showProcessDot = false;
this.clickable = false;
this.click$ = new Subject();
this._currentIndex = 0;
}
get nzStatus() {
return this._status;
}
set nzStatus(status) {
this._status = status;
this.isCustomStatus = true;
}
get nzIcon() {
return this._icon;
}
set nzIcon(value) {
if (!(value instanceof TemplateRef)) {
this.oldAPIIcon = typeof value === 'string' && value.indexOf('anticon') > -1;
}
else {
}
this._icon = value;
}
get currentIndex() {
return this._currentIndex;
}
set currentIndex(current) {
this._currentIndex = current;
if (!this.isCustomStatus) {
this._status = current > this.index ? 'finish' : current === this.index ? this.outStatus || '' : 'wait';
}
}
onClick() {
if (this.clickable && this.currentIndex !== this.index && !this.nzDisabled) {
this.click$.next(this.index);
}
}
enable() {
this.nzDisabled = false;
this.cdr.markForCheck();
}
disable() {
this.nzDisabled = true;
this.cdr.markForCheck();
}
markForCheck() {
this.cdr.markForCheck();
}
ngOnDestroy() {
this.click$.complete();
}
}
NzStepComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
selector: 'nz-step',
exportAs: 'nzStep',
preserveWhitespaces: false,
template: `
<div
class="ant-steps-item-container"
[attr.role]="clickable && !nzDisabled ? 'button' : null"
[tabindex]="clickable && !nzDisabled ? 0 : null"
(click)="onClick()"
>
<div class="ant-steps-item-tail" *ngIf="last !== true"></div>
<div class="ant-steps-item-icon">
<ng-template [ngIf]="!showProcessDot">
<span class="ant-steps-icon" *ngIf="nzStatus === 'finish' && !nzIcon"><i nz-icon nzType="check"></i></span>
<span class="ant-steps-icon" *ngIf="nzStatus === 'error'"><i nz-icon nzType="close"></i></span>
<span class="ant-steps-icon" *ngIf="(nzStatus === 'process' || nzStatus === 'wait') && !nzIcon">{{ index + 1 }}</span>
<span class="ant-steps-icon" *ngIf="nzIcon">
<ng-container *nzStringTemplateOutlet="nzIcon; let icon">
<i nz-icon [nzType]="!oldAPIIcon && icon" [ngClass]="oldAPIIcon && icon"></i>
</ng-container>
</span>
</ng-template>
<ng-template [ngIf]="showProcessDot">
<span class="ant-steps-icon">
<ng-template #processDotTemplate>
<span class="ant-steps-icon-dot"></span>
</ng-template>
<ng-template
[ngTemplateOutlet]="customProcessTemplate || processDotTemplate"
[ngTemplateOutletContext]="{
$implicit: processDotTemplate,
status: nzStatus,
index: index
}"
></ng-template>
</span>
</ng-template>
</div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">
<ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
<div *ngIf="nzSubtitle" class="ant-steps-item-subtitle">
<ng-container *nzStringTemplateOutlet="nzSubtitle">{{ nzSubtitle }}</ng-container>
</div>
</div>
<div class="ant-steps-item-description">
<ng-container *nzStringTemplateOutlet="nzDescription">{{ nzDescription }}</ng-container>
</div>
</div>
</div>
`,
host: {
class: 'ant-steps-item',
'[class.ant-steps-item-wait]': 'nzStatus === "wait"',
'[class.ant-steps-item-process]': 'nzStatus === "process"',
'[class.ant-steps-item-finish]': 'nzStatus === "finish"',
'[class.ant-steps-item-error]': 'nzStatus === "error"',
'[class.ant-steps-item-active]': 'currentIndex === index',
'[class.ant-steps-item-disabled]': 'nzDisabled',
'[class.ant-steps-item-custom]': '!!nzIcon',
'[class.ant-steps-next-error]': '(outStatus === "error") && (currentIndex === index + 1)'
}
},] }
];
NzStepComponent.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
NzStepComponent.propDecorators = {
processDotTemplate: [{ type: ViewChild, args: ['processDotTemplate', { static: false },] }],
nzTitle: [{ type: Input }],
nzSubtitle: [{ type: Input }],
nzDescription: [{ type: Input }],
nzDisabled: [{ type: Input }],
nzStatus: [{ type: Input }],
nzIcon: [{ type: Input }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzStepComponent.prototype, "nzDisabled", void 0);
/**
* 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 NzStepsComponent {
constructor(cdr, directionality) {
this.cdr = cdr;
this.directionality = directionality;
this.nzCurrent = 0;
this.nzDirection = 'horizontal';
this.nzLabelPlacement = 'horizontal';
this.nzType = 'default';
this.nzSize = 'default';
this.nzStartIndex = 0;
this.nzStatus = 'process';
this.nzIndexChange = new EventEmitter();
this.destroy$ = new Subject();
this.showProcessDot = false;
this.classMap = {};
this.dir = 'ltr';
this.setClassMap();
}
set nzProgressDot(value) {
if (value instanceof TemplateRef) {
this.showProcessDot = true;
this.customProcessDotTemplate = value;
}
else {
this.showProcessDot = toBoolean(value);
}
this.updateChildrenSteps();
}
ngOnChanges(changes) {
if (changes.nzStartIndex || changes.nzDirection || changes.nzStatus || changes.nzCurrent) {
this.updateChildrenSteps();
}
if (changes.nzDirection || changes.nzProgressDot || changes.nzLabelPlacement || changes.nzSize) {
this.setClassMap();
}
}
ngOnInit() {
var _a;
(_a = this.directionality.change) === null || _a === void 0 ? void 0 : _a.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
this.dir = direction;
this.setClassMap();
this.cdr.detectChanges();
});
this.dir = this.directionality.value;
this.setClassMap();
this.updateChildrenSteps();
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
if (this.indexChangeSubscription) {
this.indexChangeSubscription.unsubscribe();
}
}
ngAfterContentInit() {
if (this.steps) {
this.steps.changes.pipe(startWith(null), takeUntil(this.destroy$)).subscribe(() => {
this.updateChildrenSteps();
});
}
}
updateChildrenSteps() {
if (this.steps) {
const length = this.steps.length;
this.steps.toArray().forEach((step, index) => {
Promise.resolve().then(() => {
step.outStatus = this.nzStatus;
step.showProcessDot = this.showProcessDot;
if (this.customProcessDotTemplate) {
step.customProcessTemplate = this.customProcessDotTemplate;
}
step.clickable = this.nzIndexChange.observers.length > 0;
step.direction = this.nzDirection;
step.index = index + this.nzStartIndex;
step.currentIndex = this.nzCurrent;
step.last = length === index + 1;
step.markForCheck();
});
});
if (this.indexChangeSubscription) {
this.indexChangeSubscription.unsubscribe();
}
this.indexChangeSubscription = merge(...this.steps.map(step => step.click$)).subscribe(index => this.nzIndexChange.emit(index));
}
}
setClassMap() {
this.classMap = {
[`ant-steps-${this.nzDirection}`]: true,
[`ant-steps-label-horizontal`]: this.nzDirection === 'horizontal',
[`ant-steps-label-vertical`]: (this.showProcessDot || this.nzLabelPlacement === 'vertical') && this.nzDirection === 'horizontal',
[`ant-steps-dot`]: this.showProcessDot,
['ant-steps-small']: this.nzSize === 'small',
['ant-steps-navigation']: this.nzType === 'navigation',
['ant-steps-rtl']: this.dir === 'rtl'
};
}
}
NzStepsComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
selector: 'nz-steps',
exportAs: 'nzSteps',
template: `
<div class="ant-steps" [ngClass]="classMap">
<ng-content></ng-content>
</div>
`
},] }
];
NzStepsComponent.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: Directionality, decorators: [{ type: Optional }] }
];
NzStepsComponent.propDecorators = {
steps: [{ type: ContentChildren, args: [NzStepComponent,] }],
nzCurrent: [{ type: Input }],
nzDirection: [{ type: Input }],
nzLabelPlacement: [{ type: Input }],
nzType: [{ type: Input }],
nzSize: [{ type: Input }],
nzStartIndex: [{ type: Input }],
nzStatus: [{ type: Input }],
nzProgressDot: [{ type: Input }],
nzIndexChange: [{ type: Output }]
};
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
class NzStepsModule {
}
NzStepsModule.decorators = [
{ type: NgModule, args: [{
imports: [BidiModule, CommonModule, NzIconModule, NzOutletModule],
exports: [NzStepsComponent, NzStepComponent],
declarations: [NzStepsComponent, NzStepComponent]
},] }
];
/**
* 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 { NzStepComponent, NzStepsComponent, NzStepsModule };
//# sourceMappingURL=ng-zorro-antd-steps.js.map