ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
477 lines (470 loc) • 17.7 kB
JavaScript
import { __decorate, __metadata, __spread } from 'tslib';
import { TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ViewChild, Input, EventEmitter, ContentChildren, Output, NgModule } from '@angular/core';
import { InputBoolean, toBoolean } from 'ng-zorro-antd/core/util';
import { Subject, merge } from 'rxjs';
import { startWith, takeUntil } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
import { NzIconModule } from 'ng-zorro-antd/icon';
/**
* @fileoverview added by tsickle
* Generated from: step.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzStepComponent = /** @class */ (function () {
function NzStepComponent(cdr) {
this.cdr = cdr;
this.nzDisabled = false;
this.isCustomStatus = false;
this._status = 'wait';
this.oldAPIIcon = true;
this.isIconString = true;
// Set by parent.
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;
}
Object.defineProperty(NzStepComponent.prototype, "nzStatus", {
get: /**
* @return {?}
*/
function () {
return this._status;
},
set: /**
* @param {?} status
* @return {?}
*/
function (status) {
this._status = status;
this.isCustomStatus = true;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NzStepComponent.prototype, "nzIcon", {
get: /**
* @return {?}
*/
function () {
return this._icon;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (!(value instanceof TemplateRef)) {
this.isIconString = true;
this.oldAPIIcon = typeof value === 'string' && value.indexOf('anticon') > -1;
}
else {
this.isIconString = false;
}
this._icon = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NzStepComponent.prototype, "currentIndex", {
get: /**
* @return {?}
*/
function () {
return this._currentIndex;
},
set: /**
* @param {?} current
* @return {?}
*/
function (current) {
this._currentIndex = current;
if (!this.isCustomStatus) {
this._status = current > this.index ? 'finish' : current === this.index ? this.outStatus || '' : 'wait';
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
NzStepComponent.prototype.onClick = /**
* @return {?}
*/
function () {
if (this.clickable && this.currentIndex !== this.index && !this.nzDisabled) {
this.click$.next(this.index);
}
};
/**
* @return {?}
*/
NzStepComponent.prototype.markForCheck = /**
* @return {?}
*/
function () {
this.cdr.markForCheck();
};
/**
* @return {?}
*/
NzStepComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.click$.complete();
};
NzStepComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
selector: 'nz-step',
exportAs: 'nzStep',
preserveWhitespaces: false,
template: "\n <div\n class=\"ant-steps-item-container\"\n [attr.role]=\"clickable && !nzDisabled ? 'button' : null\"\n [tabindex]=\"clickable && !nzDisabled ? 0 : null\"\n (click)=\"onClick()\"\n >\n <div class=\"ant-steps-item-tail\" *ngIf=\"last !== true\"></div>\n <div class=\"ant-steps-item-icon\">\n <ng-template [ngIf]=\"!showProcessDot\">\n <span class=\"ant-steps-icon\" *ngIf=\"nzStatus === 'finish' && !nzIcon\"><i nz-icon nzType=\"check\"></i></span>\n <span class=\"ant-steps-icon\" *ngIf=\"nzStatus === 'error'\"><i nz-icon nzType=\"close\"></i></span>\n <span class=\"ant-steps-icon\" *ngIf=\"(nzStatus === 'process' || nzStatus === 'wait') && !nzIcon\">{{ index + 1 }}</span>\n <span class=\"ant-steps-icon\" *ngIf=\"nzIcon\">\n <ng-container *ngIf=\"isIconString; else iconTemplate\">\n <i nz-icon [nzType]=\"!oldAPIIcon && nzIcon\" [ngClass]=\"oldAPIIcon && nzIcon\"></i>\n </ng-container>\n <ng-template #iconTemplate>\n <ng-template [ngTemplateOutlet]=\"nzIcon\"></ng-template>\n </ng-template>\n </span>\n </ng-template>\n <ng-template [ngIf]=\"showProcessDot\">\n <span class=\"ant-steps-icon\">\n <ng-template #processDotTemplate>\n <span class=\"ant-steps-icon-dot\"></span>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"customProcessTemplate || processDotTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: processDotTemplate,\n status: nzStatus,\n index: index\n }\"\n >\n </ng-template>\n </span>\n </ng-template>\n </div>\n <div class=\"ant-steps-item-content\">\n <div class=\"ant-steps-item-title\">\n <ng-container *nzStringTemplateOutlet=\"nzTitle\">{{ nzTitle }}</ng-container>\n <div *ngIf=\"nzSubtitle\" class=\"ant-steps-item-subtitle\">\n <ng-container *nzStringTemplateOutlet=\"nzSubtitle\">{{ nzSubtitle }}</ng-container>\n </div>\n </div>\n <div class=\"ant-steps-item-description\">\n <ng-container *nzStringTemplateOutlet=\"nzDescription\">{{ nzDescription }}</ng-container>\n </div>\n </div>\n </div>\n ",
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)'
}
}] }
];
/** @nocollapse */
NzStepComponent.ctorParameters = function () { return [
{ 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);
return NzStepComponent;
}());
if (false) {
/** @type {?} */
NzStepComponent.ngAcceptInputType_nzDisabled;
/** @type {?} */
NzStepComponent.prototype.processDotTemplate;
/** @type {?} */
NzStepComponent.prototype.nzTitle;
/** @type {?} */
NzStepComponent.prototype.nzSubtitle;
/** @type {?} */
NzStepComponent.prototype.nzDescription;
/** @type {?} */
NzStepComponent.prototype.nzDisabled;
/** @type {?} */
NzStepComponent.prototype.isCustomStatus;
/**
* @type {?}
* @private
*/
NzStepComponent.prototype._status;
/** @type {?} */
NzStepComponent.prototype.oldAPIIcon;
/** @type {?} */
NzStepComponent.prototype.isIconString;
/**
* @type {?}
* @private
*/
NzStepComponent.prototype._icon;
/** @type {?} */
NzStepComponent.prototype.customProcessTemplate;
/** @type {?} */
NzStepComponent.prototype.direction;
/** @type {?} */
NzStepComponent.prototype.index;
/** @type {?} */
NzStepComponent.prototype.last;
/** @type {?} */
NzStepComponent.prototype.outStatus;
/** @type {?} */
NzStepComponent.prototype.showProcessDot;
/** @type {?} */
NzStepComponent.prototype.clickable;
/** @type {?} */
NzStepComponent.prototype.click$;
/**
* @type {?}
* @private
*/
NzStepComponent.prototype._currentIndex;
/**
* @type {?}
* @private
*/
NzStepComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* Generated from: steps.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzStepsComponent = /** @class */ (function () {
function NzStepsComponent() {
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;
}
Object.defineProperty(NzStepsComponent.prototype, "nzProgressDot", {
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (value instanceof TemplateRef) {
this.showProcessDot = true;
this.customProcessDotTemplate = value;
}
else {
this.showProcessDot = toBoolean(value);
}
this.updateChildrenSteps();
},
enumerable: true,
configurable: true
});
/**
* @param {?} changes
* @return {?}
*/
NzStepsComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes.nzStartIndex || changes.nzDirection || changes.nzStatus || changes.nzCurrent) {
this.updateChildrenSteps();
}
if (changes.nzDirection || changes.nzProgressDot || changes.nzLabelPlacement || changes.nzSize) {
this.setClassMap();
}
};
/**
* @return {?}
*/
NzStepsComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.setClassMap();
this.updateChildrenSteps();
};
/**
* @return {?}
*/
NzStepsComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy$.next();
this.destroy$.complete();
if (this.indexChangeSubscription) {
this.indexChangeSubscription.unsubscribe();
}
};
/**
* @return {?}
*/
NzStepsComponent.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this.steps) {
this.steps.changes.pipe(startWith(null), takeUntil(this.destroy$)).subscribe((/**
* @return {?}
*/
function () {
_this.updateChildrenSteps();
}));
}
};
/**
* @private
* @return {?}
*/
NzStepsComponent.prototype.updateChildrenSteps = /**
* @private
* @return {?}
*/
function () {
var _this = this;
if (this.steps) {
/** @type {?} */
var length_1 = this.steps.length;
this.steps.toArray().forEach((/**
* @param {?} step
* @param {?} index
* @return {?}
*/
function (step, index) {
Promise.resolve().then((/**
* @return {?}
*/
function () {
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_1 === index + 1;
step.markForCheck();
}));
}));
if (this.indexChangeSubscription) {
this.indexChangeSubscription.unsubscribe();
}
this.indexChangeSubscription = merge.apply(void 0, __spread(this.steps.map((/**
* @param {?} step
* @return {?}
*/
function (step) { return step.click$; })))).subscribe((/**
* @param {?} index
* @return {?}
*/
function (index) { return _this.nzIndexChange.emit(index); }));
}
};
/**
* @private
* @return {?}
*/
NzStepsComponent.prototype.setClassMap = /**
* @private
* @return {?}
*/
function () {
var _a;
this.classMap = (_a = {},
_a["ant-steps-" + this.nzDirection] = true,
_a["ant-steps-label-horizontal"] = this.nzDirection === 'horizontal',
_a["ant-steps-label-vertical"] = (this.showProcessDot || this.nzLabelPlacement === 'vertical') && this.nzDirection === 'horizontal',
_a["ant-steps-dot"] = this.showProcessDot,
_a['ant-steps-small'] = this.nzSize === 'small',
_a['ant-steps-navigation'] = this.nzType === 'navigation',
_a);
};
NzStepsComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
selector: 'nz-steps',
exportAs: 'nzSteps',
template: "\n <div class=\"ant-steps\" [ngClass]=\"classMap\">\n <ng-content></ng-content>\n </div>\n "
}] }
];
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 }]
};
return NzStepsComponent;
}());
if (false) {
/** @type {?} */
NzStepsComponent.ngAcceptInputType_nzProgressDot;
/** @type {?} */
NzStepsComponent.prototype.steps;
/** @type {?} */
NzStepsComponent.prototype.nzCurrent;
/** @type {?} */
NzStepsComponent.prototype.nzDirection;
/** @type {?} */
NzStepsComponent.prototype.nzLabelPlacement;
/** @type {?} */
NzStepsComponent.prototype.nzType;
/** @type {?} */
NzStepsComponent.prototype.nzSize;
/** @type {?} */
NzStepsComponent.prototype.nzStartIndex;
/** @type {?} */
NzStepsComponent.prototype.nzStatus;
/** @type {?} */
NzStepsComponent.prototype.nzIndexChange;
/**
* @type {?}
* @private
*/
NzStepsComponent.prototype.destroy$;
/**
* @type {?}
* @private
*/
NzStepsComponent.prototype.indexChangeSubscription;
/** @type {?} */
NzStepsComponent.prototype.showProcessDot;
/** @type {?} */
NzStepsComponent.prototype.customProcessDotTemplate;
/** @type {?} */
NzStepsComponent.prototype.classMap;
}
/**
* @fileoverview added by tsickle
* Generated from: steps.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzStepsModule = /** @class */ (function () {
function NzStepsModule() {
}
NzStepsModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, NzIconModule, NzOutletModule],
exports: [NzStepsComponent, NzStepComponent],
declarations: [NzStepsComponent, NzStepComponent]
},] }
];
return NzStepsModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-zorro-antd-steps.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NzStepComponent, NzStepsComponent, NzStepsModule };
//# sourceMappingURL=ng-zorro-antd-steps.js.map