UNPKG

ng-zorro-antd

Version:

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

2 lines 7.38 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/common"),require("@angular/core"),require("ng-zorro-antd/icon"),require("ng-zorro-antd/core")):"function"==typeof define&&define.amd?define("ng-zorro-antd/progress",["exports","@angular/common","@angular/core","ng-zorro-antd/icon","ng-zorro-antd/core"],t):t(((e=e||self)["ng-zorro-antd"]=e["ng-zorro-antd"]||{},e["ng-zorro-antd"].progress={}),e.ng.common,e.ng.core,e["ng-zorro-antd"].icon,e["ng-zorro-antd"].core)}(this,function(e,t,n,r,s){"use strict";function o(e,t,n,r){var s,o=arguments.length,i=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,n,r);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(i=(o<3?s(i):o>3?s(t,n,i):s(t,n))||i);return o>3&&i&&Object.defineProperty(t,n,i),i}function i(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}var a=function(){function e(){this.nzShowInfo=!0,this.nzWidth=132,this.nzType="line",this.nzStrokeLinecap="round",this.statusColorMap={normal:"#108ee9",exception:"#ff5500",success:"#87d068"},this.cachedStatus="normal",this.inferredStatus="normal",this.inferredStrokeWidth=8}return Object.defineProperty(e.prototype,"formatter",{get:function(){return this.nzFormat||function(e){return e+"%"}},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"status",{get:function(){return this.nzStatus||this.inferredStatus},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"strokeWidth",{get:function(){return this.nzStrokeWidth||this.inferredStrokeWidth},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"isCircleStyle",{get:function(){return"circle"===this.nzType||"dashboard"===this.nzType},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.updatePathStyles(),this.updateIcon()},e.prototype.ngOnChanges=function(e){var t=e.nzGapPosition,n=e.nzStrokeLinecap,r=e.nzGapDegree,o=e.nzType,i=e.nzSize,a=e.nzStatus,p=e.nzPercent,c=e.nzSuccessPercent;((t||n||r||o||p)&&this.updatePathStyles(),i&&"small"===this.nzSize&&(this.inferredStrokeWidth=6),a&&(this.cachedStatus=this.nzStatus||this.cachedStatus,this.updateIcon()),p||c)&&(parseInt(this.nzPercent.toString(),10)>=100?(s.isNotNil(this.nzSuccessPercent)&&this.nzSuccessPercent>=100||this.nzSuccessPercent===undefined)&&(this.inferredStatus="success"):this.inferredStatus=this.cachedStatus,this.updateIcon());o&&("line"!==this.nzType&&(this.inferredStrokeWidth=6),"dashboard"===this.nzType&&(this.inferredGapPosition="bottom",this.inferredGapDegree=75),"circle"===this.nzType&&(this.inferredGapDegree=0))},e.prototype.updatePathStyles=function(){var e=50-this.strokeWidth/2,t=0,n=-e,r=0,s=-2*e;switch(this.nzGapPosition||this.inferredGapPosition){case"left":t=-e,n=0,r=2*e,s=0;break;case"right":t=e,n=0,r=-2*e,s=0;break;case"bottom":n=e,s=2*e}this.pathString="M 50,50 m "+t+","+n+"\n a "+e+","+e+" 0 1 1 "+r+","+-s+"\n a "+e+","+e+" 0 1 1 "+-r+","+s;var o=2*Math.PI*e,i=this.nzGapDegree||this.inferredGapDegree;this.trailPathStyle={strokeDasharray:o-i+"px "+o+"px",strokeDashoffset:"-"+i/2+"px",transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"},this.strokePathStyle={stroke:this.nzStrokeColor||null,strokeDasharray:this.nzPercent/100*(o-i)+"px "+o+"px",strokeDashoffset:"-"+i/2+"px",transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"}},e.prototype.updateIcon=function(){var e="circle"===this.nzType||"dashboard"===this.nzType,t="success"===this.status?"check":"exception"===this.status?"close":"";this.icon=t?t+(e?"-o":"-circle-fill"):""},e.decorators=[{type:n.Component,args:[{changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None,selector:"nz-progress",exportAs:"nzProgress",preserveWhitespaces:!1,template:'<ng-template #progressInfoTemplate>\n <span class="ant-progress-text" *ngIf="nzShowInfo">\n <ng-container *ngIf="status === \'exception\' || (status === \'success\' && !nzFormat); else formatTemplate">\n <i nz-icon [nzType]="icon"></i>\n </ng-container>\n <ng-template #formatTemplate>\n {{ formatter(nzPercent) }}\n </ng-template>\n </span>\n</ng-template>\n<div\n [ngClass]="\'ant-progress ant-progress-status-\' + status"\n [class.ant-progress-line]="nzType == \'line\'"\n [class.ant-progress-small]="nzSize == \'small\'"\n [class.ant-progress-show-info]="nzShowInfo"\n [class.ant-progress-circle]="isCircleStyle"\n>\n \x3c!-- Line progress --\x3e\n <div *ngIf="nzType === \'line\'">\n <div class="ant-progress-outer">\n <div class="ant-progress-inner">\n <div\n class="ant-progress-bg"\n [style.width.%]="nzPercent"\n [style.border-radius]="nzStrokeLinecap === \'round\' ? \'100px\' : \'0\'"\n [style.background]="nzStrokeColor"\n [style.height.px]="strokeWidth"\n ></div>\n <div\n class="ant-progress-success-bg"\n [style.width.%]="nzSuccessPercent"\n [style.border-radius]="nzStrokeLinecap === \'round\' ? \'100px\' : \'0\'"\n [style.height.px]="strokeWidth"\n ></div>\n </div>\n </div>\n <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>\n </div>\n \x3c!-- Circle/Dashboard progress --\x3e\n <div\n [style.width.px]="this.nzWidth"\n [style.height.px]="this.nzWidth"\n [style.fontSize.px]="this.nzWidth * 0.15 + 6"\n class="ant-progress-inner"\n *ngIf="isCircleStyle"\n >\n <svg class="ant-progress-circle " viewBox="0 0 100 100">\n <path\n class="ant-progress-circle-trail"\n stroke="#f3f3f3"\n fill-opacity="0"\n [attr.stroke-width]="strokeWidth"\n [ngStyle]="trailPathStyle"\n [attr.d]="pathString"\n ></path>\n <path\n class="ant-progress-circle-path"\n [attr.d]="pathString"\n [attr.stroke-linecap]="nzStrokeLinecap"\n fill-opacity="0"\n [attr.stroke]="nzStrokeColor || statusColorMap[status]"\n [attr.stroke-width]="nzPercent ? strokeWidth : 0"\n [ngStyle]="strokePathStyle"\n ></path>\n </svg>\n <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>\n </div>\n</div>\n'}]}],e.propDecorators={nzShowInfo:[{type:n.Input}],nzWidth:[{type:n.Input}],nzStrokeColor:[{type:n.Input}],nzSize:[{type:n.Input}],nzFormat:[{type:n.Input}],nzSuccessPercent:[{type:n.Input}],nzPercent:[{type:n.Input}],nzStrokeWidth:[{type:n.Input}],nzGapDegree:[{type:n.Input}],nzStatus:[{type:n.Input}],nzType:[{type:n.Input}],nzGapPosition:[{type:n.Input}],nzStrokeLinecap:[{type:n.Input}]},o([s.InputNumber(),i("design:type",Number)],e.prototype,"nzSuccessPercent",void 0),o([s.InputNumber(),i("design:type",Number)],e.prototype,"nzPercent",void 0),o([s.InputNumber(),i("design:type",Number)],e.prototype,"nzStrokeWidth",void 0),o([s.InputNumber(),i("design:type",Number)],e.prototype,"nzGapDegree",void 0),e}(),p=function(){function e(){}return e.decorators=[{type:n.NgModule,args:[{exports:[a],declarations:[a],imports:[t.CommonModule,r.NzIconModule]}]}],e}();e.NzProgressComponent=a,e.NzProgressModule=p,Object.defineProperty(e,"__esModule",{value:!0})}); //# sourceMappingURL=ng-zorro-antd-progress.umd.min.js.map