ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
2 lines • 7.33 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/common"),require("ng-zorro-antd/icon"),require("@angular/core"),require("ng-zorro-antd/core")):"function"==typeof define&&define.amd?define("ng-zorro-antd/progress",["exports","@angular/common","ng-zorro-antd/icon","@angular/core","ng-zorro-antd/core"],t):t((e["ng-zorro-antd"]=e["ng-zorro-antd"]||{},e["ng-zorro-antd"].progress={}),e.ng.common,e["ng-zorro-antd"].icon,e.ng.core,e["ng-zorro-antd"].core)}(this,function(e,t,n,r,c){"use strict";function s(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;0<=a;a--)(s=e[a])&&(i=(o<3?s(i):3<o?s(t,n,i):s(t,n))||i);return 3<o&&i&&Object.defineProperty(t,n,i),i}function o(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}var i=(Object.defineProperty(a.prototype,"formatter",{get:function(){return this.nzFormat||function(e){return e+"%"}},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"status",{get:function(){return this.nzStatus||this.inferredStatus},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"strokeWidth",{get:function(){return this.nzStrokeWidth||this.inferredStrokeWidth},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"isCircleStyle",{get:function(){return"circle"===this.nzType||"dashboard"===this.nzType},enumerable:!0,configurable:!0}),a.prototype.ngOnInit=function(){this.updatePathStyles(),this.updateIcon()},a.prototype.ngOnChanges=function(e){var t=e.nzGapPosition,n=e.nzStrokeLinecap,r=e.nzGapDegree,s=e.nzType,o=e.nzSize,i=e.nzStatus,a=e.nzPercent,p=e.nzSuccessPercent;(t||n||r||s||a)&&this.updatePathStyles(),o&&"small"===this.nzSize&&(this.inferredStrokeWidth=6),i&&(this.cachedStatus=this.nzStatus||this.cachedStatus,this.updateIcon()),(a||p)&&(100<=parseInt(this.nzPercent.toString(),10)?(c.isNotNil(this.nzSuccessPercent)&&100<=this.nzSuccessPercent||this.nzSuccessPercent===undefined)&&(this.inferredStatus="success"):this.inferredStatus=this.cachedStatus,this.updateIcon()),s&&("line"!==this.nzType&&(this.inferredStrokeWidth=6),"dashboard"===this.nzType&&(this.inferredGapPosition="bottom",this.inferredGapDegree=75),"circle"===this.nzType&&(this.inferredGapDegree=0))},a.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,r=2*e,s=n=0;break;case"right":r=-2*(t=e),s=n=0;break;case"bottom":s=2*(n=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"}},a.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"):""},a.decorators=[{type:r.Component,args:[{changeDetection:r.ChangeDetectionStrategy.OnPush,encapsulation:r.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'}]}],a.propDecorators={nzShowInfo:[{type:r.Input}],nzWidth:[{type:r.Input}],nzStrokeColor:[{type:r.Input}],nzSize:[{type:r.Input}],nzFormat:[{type:r.Input}],nzSuccessPercent:[{type:r.Input}],nzPercent:[{type:r.Input}],nzStrokeWidth:[{type:r.Input}],nzGapDegree:[{type:r.Input}],nzStatus:[{type:r.Input}],nzType:[{type:r.Input}],nzGapPosition:[{type:r.Input}],nzStrokeLinecap:[{type:r.Input}]},s([c.InputNumber(),o("design:type",Number)],a.prototype,"nzSuccessPercent",void 0),s([c.InputNumber(),o("design:type",Number)],a.prototype,"nzPercent",void 0),s([c.InputNumber(),o("design:type",Number)],a.prototype,"nzStrokeWidth",void 0),s([c.InputNumber(),o("design:type",Number)],a.prototype,"nzGapDegree",void 0),a);function a(){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}var p=(l.decorators=[{type:r.NgModule,args:[{exports:[i],declarations:[i],imports:[t.CommonModule,n.NzIconModule]}]}],l);function l(){}e.NzProgressModule=p,e.NzProgressComponent=i,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ng-zorro-antd-progress.umd.min.js.map