UNPKG

ng-zorro-antd

Version:

An enterprise-class UI components based on Ant Design and Angular

477 lines (470 loc) 17.7 kB
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