ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
16 lines (14 loc) • 10.4 kB
JavaScript
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("ng-zorro-antd/core/util"),require("rxjs"),require("rxjs/operators"),require("@angular/common"),require("ng-zorro-antd/core/outlet"),require("ng-zorro-antd/icon")):"function"==typeof define&&define.amd?define("ng-zorro-antd/steps",["exports","@angular/core","ng-zorro-antd/core/util","rxjs","rxjs/operators","@angular/common","ng-zorro-antd/core/outlet","ng-zorro-antd/icon"],n):n(((t=t||self)["ng-zorro-antd"]=t["ng-zorro-antd"]||{},t["ng-zorro-antd"].steps={}),t.ng.core,t["ng-zorro-antd"].core.util,t.rxjs,t.rxjs.operators,t.ng.common,t["ng-zorro-antd"].core.outlet,t["ng-zorro-antd"].icon)}(this,(function(t,n,e,s,o,i,r,a){"use strict";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */function c(t,n){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,n)}function p(t,n){var e="function"==typeof Symbol&&t[Symbol.iterator];if(!e)return t;var s,o,i=e.call(t),r=[];try{for(;(void 0===n||n-- >0)&&!(s=i.next()).done;)r.push(s.value)}catch(t){o={error:t}}finally{try{s&&!s.done&&(e=i.return)&&e.call(i)}finally{if(o)throw o.error}}return r}var l=function(){function t(t){this.cdr=t,this.nzDisabled=!1,this.isCustomStatus=!1,this._status="wait",this.oldAPIIcon=!0,this.isIconString=!0,this.direction="horizontal",this.index=0,this.last=!1,this.outStatus="process",this.showProcessDot=!1,this.clickable=!1,this.click$=new s.Subject,this._currentIndex=0}return Object.defineProperty(t.prototype,"nzStatus",{get:function(){return this._status},set:function(t){this._status=t,this.isCustomStatus=!0},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"nzIcon",{get:function(){return this._icon},set:function(t){t instanceof n.TemplateRef?this.isIconString=!1:(this.isIconString=!0,this.oldAPIIcon="string"==typeof t&&t.indexOf("anticon")>-1),this._icon=t},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"currentIndex",{get:function(){return this._currentIndex},set:function(t){this._currentIndex=t,this.isCustomStatus||(this._status=t>this.index?"finish":t===this.index?this.outStatus||"":"wait")},enumerable:!0,configurable:!0}),t.prototype.onClick=function(){this.clickable&&this.currentIndex!==this.index&&!this.nzDisabled&&this.click$.next(this.index)},t.prototype.markForCheck=function(){this.cdr.markForCheck()},t.prototype.ngOnDestroy=function(){this.click$.complete()},t.decorators=[{type:n.Component,args:[{changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None,selector:"nz-step",exportAs:"nzStep",preserveWhitespaces:!1,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)'}}]}],t.ctorParameters=function(){return[{type:n.ChangeDetectorRef}]},t.propDecorators={processDotTemplate:[{type:n.ViewChild,args:["processDotTemplate",{static:!1}]}],nzTitle:[{type:n.Input}],nzSubtitle:[{type:n.Input}],nzDescription:[{type:n.Input}],nzDisabled:[{type:n.Input}],nzStatus:[{type:n.Input}],nzIcon:[{type:n.Input}]},function(t,n,e,s){var o,i=arguments.length,r=i<3?n:null===s?s=Object.getOwnPropertyDescriptor(n,e):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,n,e,s);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(i<3?o(r):i>3?o(n,e,r):o(n,e))||r);i>3&&r&&Object.defineProperty(n,e,r)}([e.InputBoolean(),c("design:type",Object)],t.prototype,"nzDisabled",void 0),t}();var u=function(){function t(){this.nzCurrent=0,this.nzDirection="horizontal",this.nzLabelPlacement="horizontal",this.nzType="default",this.nzSize="default",this.nzStartIndex=0,this.nzStatus="process",this.nzIndexChange=new n.EventEmitter,this.destroy$=new s.Subject,this.showProcessDot=!1}return Object.defineProperty(t.prototype,"nzProgressDot",{set:function(t){t instanceof n.TemplateRef?(this.showProcessDot=!0,this.customProcessDotTemplate=t):this.showProcessDot=e.toBoolean(t),this.updateChildrenSteps()},enumerable:!0,configurable:!0}),t.prototype.ngOnChanges=function(t){(t.nzStartIndex||t.nzDirection||t.nzStatus||t.nzCurrent)&&this.updateChildrenSteps(),(t.nzDirection||t.nzProgressDot||t.nzLabelPlacement||t.nzSize)&&this.setClassMap()},t.prototype.ngOnInit=function(){this.setClassMap(),this.updateChildrenSteps()},t.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete(),this.indexChangeSubscription&&this.indexChangeSubscription.unsubscribe()},t.prototype.ngAfterContentInit=function(){var t=this;this.steps&&this.steps.changes.pipe(o.startWith(null),o.takeUntil(this.destroy$)).subscribe((function(){t.updateChildrenSteps()}))},t.prototype.updateChildrenSteps=function(){var t=this;if(this.steps){var n=this.steps.length;this.steps.toArray().forEach((function(e,s){Promise.resolve().then((function(){e.outStatus=t.nzStatus,e.showProcessDot=t.showProcessDot,t.customProcessDotTemplate&&(e.customProcessTemplate=t.customProcessDotTemplate),e.clickable=t.nzIndexChange.observers.length>0,e.direction=t.nzDirection,e.index=s+t.nzStartIndex,e.currentIndex=t.nzCurrent,e.last=n===s+1,e.markForCheck()}))})),this.indexChangeSubscription&&this.indexChangeSubscription.unsubscribe(),this.indexChangeSubscription=s.merge.apply(void 0,function(){for(var t=[],n=0;n<arguments.length;n++)t=t.concat(p(arguments[n]));return t}(this.steps.map((function(t){return t.click$})))).subscribe((function(n){return t.nzIndexChange.emit(n)}))}},t.prototype.setClassMap=function(){var t;this.classMap=((t={})["ant-steps-"+this.nzDirection]=!0,t["ant-steps-label-horizontal"]="horizontal"===this.nzDirection,t["ant-steps-label-vertical"]=(this.showProcessDot||"vertical"===this.nzLabelPlacement)&&"horizontal"===this.nzDirection,t["ant-steps-dot"]=this.showProcessDot,t["ant-steps-small"]="small"===this.nzSize,t["ant-steps-navigation"]="navigation"===this.nzType,t)},t.decorators=[{type:n.Component,args:[{changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None,preserveWhitespaces:!1,selector:"nz-steps",exportAs:"nzSteps",template:'\n <div class="ant-steps" [ngClass]="classMap">\n <ng-content></ng-content>\n </div>\n '}]}],t.propDecorators={steps:[{type:n.ContentChildren,args:[l]}],nzCurrent:[{type:n.Input}],nzDirection:[{type:n.Input}],nzLabelPlacement:[{type:n.Input}],nzType:[{type:n.Input}],nzSize:[{type:n.Input}],nzStartIndex:[{type:n.Input}],nzStatus:[{type:n.Input}],nzProgressDot:[{type:n.Input}],nzIndexChange:[{type:n.Output}]},t}();var h=function(){function t(){}return t.decorators=[{type:n.NgModule,args:[{imports:[i.CommonModule,a.NzIconModule,r.NzOutletModule],exports:[u,l],declarations:[u,l]}]}],t}();t.NzStepComponent=l,t.NzStepsComponent=u,t.NzStepsModule=h,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-zorro-antd-steps.umd.min.js.map