ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
9 lines • 10.6 kB
JavaScript
!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"),require("rxjs"),require("rxjs/operators")):"function"==typeof define&&define.amd?define("ng-zorro-antd/progress",["exports","@angular/common","@angular/core","ng-zorro-antd/icon","ng-zorro-antd/core","rxjs","rxjs/operators"],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,e.rxjs,e.rxjs.operators)}(this,function(e,t,n,r,o,s,i){"use strict";function a(e,t,n,r){var o,s=arguments.length,i=s<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--)(o=e[a])&&(i=(s<3?o(i):s>3?o(t,n,i):o(t,n))||i);return s>3&&i&&Object.defineProperty(t,n,i),i}function c(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}var p=function(e){var t=[];return Object.keys(e).forEach(function(n){var r=e[n],o=+n.replace("%","");if(isNaN(o))return{};t.push({key:o,value:r})}),t=t.sort(function(e,t){return e.key-t.key})},l=function(e){var t=e.from,n=void 0===t?"#1890ff":t,r=e.to,o=void 0===r?"#1890ff":r,s=e.direction,i=void 0===s?"to right":s,a=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n}(e,["from","to","direction"]);return 0!==Object.keys(a).length?"linear-gradient("+i+", "+p(a).map(function(e){var t=e.key;return e.value+" "+t+"%"}).join(", ")+")":"linear-gradient("+i+", "+n+", "+o+")"},u=0,d=new Map([["success","check"],["exception","close"]]),h=new Map([["normal","#108ee9"],["exception","#ff5500"],["success","#87d068"]]),g=function(e){return e+"%"},f=function(){function e(e){this.nzConfigService=e,this.nzWidth=132,this.nzPercent=0,this.nzType="line",this.lineGradient=null,this.isGradient=!1,this.gradientId=u++,this.progressCirclePath=[],this.trackByFn=function(e){return""+e},this.cachedStatus="normal",this.inferredStatus="normal",this.destroy$=new s.Subject}return Object.defineProperty(e.prototype,"formatter",{get:function(){return this.nzFormat||g},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||("line"===this.nzType&&"small"!==this.nzSize?8:6)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"isCircleStyle",{get:function(){return"circle"===this.nzType||"dashboard"===this.nzType},enumerable:!0,configurable:!0}),e.prototype.ngOnChanges=function(e){var t=e.nzGapPosition,n=e.nzStrokeLinecap,r=e.nzStrokeColor,s=e.nzGapDegree,i=e.nzType,a=e.nzStatus,c=e.nzPercent,p=e.nzSuccessPercent;(a&&(this.cachedStatus=this.nzStatus||this.cachedStatus),c||p)&&(parseInt(this.nzPercent.toString(),10)>=100?(o.isNotNil(this.nzSuccessPercent)&&this.nzSuccessPercent>=100||void 0===this.nzSuccessPercent)&&(this.inferredStatus="success"):this.inferredStatus=this.cachedStatus);(a||c||p)&&this.updateIcon(),r&&this.setStrokeColor(),(t||n||s||i||c||r)&&this.getCirclePaths()},e.prototype.ngOnInit=function(){var e=this;this.nzConfigService.getConfigChangeEventForComponent(o.trimComponentName(this.constructor.name)).pipe(i.takeUntil(this.destroy$)).subscribe(function(){e.updateIcon(),e.setStrokeColor(),e.getCirclePaths()})},e.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete()},e.prototype.updateIcon=function(){var e=d.get(this.status);this.icon=e?e+(this.isCircleStyle?"-o":"-circle-fill"):""},e.prototype.getCirclePaths=function(){var e=this;if(this.isCircleStyle){var t=o.isNotNil(this.nzSuccessPercent)?[this.nzSuccessPercent,this.nzPercent]:[this.nzPercent],n=50-this.strokeWidth/2,r=this.nzGapPosition||("circle"===this.nzType?"top":"bottom"),s=2*Math.PI*n,i=this.nzGapDegree||("circle"===this.nzType?0:75),a=0,c=-n,p=0,l=-2*n;switch(r){case"left":a=-n,c=0,p=2*n,l=0;break;case"right":a=n,c=0,p=-2*n,l=0;break;case"bottom":c=n,l=2*n}this.pathString="M 50,50 m "+a+","+c+"\n a "+n+","+n+" 0 1 1 "+p+","+-l+"\n a "+n+","+n+" 0 1 1 "+-p+","+l,this.trailPathStyle={strokeDasharray:s-i+"px "+s+"px",strokeDashoffset:"-"+i/2+"px",transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"},this.progressCirclePath=t.map(function(n,r){var o=2===t.length&&0===r;return{stroke:e.isGradient&&!o?"url(#gradient-"+e.gradientId+")":null,strokePathStyle:{stroke:e.isGradient?null:o?h.get("success"):e.nzStrokeColor,transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",strokeDasharray:(n||0)/100*(s-i)+"px "+s+"px",strokeDashoffset:"-"+i/2+"px"}}}).reverse()}},e.prototype.setStrokeColor=function(){var e,t=this.nzStrokeColor,n=this.isGradient=!!t&&"string"!=typeof t;n&&!this.isCircleStyle?this.lineGradient=l(t):n&&this.isCircleStyle?this.circleGradient=(e=this.nzStrokeColor,p(e).map(function(e){return{offset:e.key+"%",color:e.value}})):(this.lineGradient=null,this.circleGradient=[])},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"\n *ngIf="nzShowInfo">\n <ng-container *ngIf="status === \'exception\' || (status === \'success\' && !nzFormat); else formatTemplate">\n <i nz-icon\n [nzType]="icon"></i>\n </ng-container>\n <ng-template #formatTemplate>\n {{ formatter(nzPercent) }}\n </ng-template>\n </span>\n</ng-template>\n\n<div [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 \x3c!-- line progress --\x3e\n <div *ngIf="nzType === \'line\'">\n <div class="ant-progress-outer">\n <div class="ant-progress-inner">\n <div class="ant-progress-bg"\n [style.width.%]="nzPercent"\n [style.border-radius]="nzStrokeLinecap === \'round\' ? \'100px\' : \'0\'"\n [style.background]="!isGradient ? nzStrokeColor : null"\n [style.background-image]="isGradient ? lineGradient : null"\n [style.height.px]="strokeWidth"></div>\n <div *ngIf="nzSuccessPercent || nzSuccessPercent === 0"\n class="ant-progress-success-bg"\n [style.width.%]="nzSuccessPercent"\n [style.border-radius]="nzStrokeLinecap === \'round\' ? \'100px\' : \'0\'"\n [style.height.px]="strokeWidth"></div>\n </div>\n </div>\n <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>\n </div>\n\n \x3c!-- circle / dashboard progress --\x3e\n <div [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 [class.ant-progress-circle-gradient]="isGradient"\n *ngIf="isCircleStyle">\n <svg class="ant-progress-circle "\n viewBox="0 0 100 100">\n <defs *ngIf="isGradient">\n <linearGradient [id]="\'gradient-\' + gradientId"\n x1="100%"\n y1="0%"\n x2="0%"\n y2="0%">\n <stop *ngFor="let i of circleGradient;"\n [attr.offset]="i.offset"\n [attr.stop-color]="i.color"></stop>\n </linearGradient>\n </defs>\n <path class="ant-progress-circle-trail"\n stroke="#f3f3f3"\n fill-opacity="0"\n [attr.stroke-width]="strokeWidth"\n [attr.d]="pathString"\n [ngStyle]="trailPathStyle"></path>\n <path *ngFor="let p of progressCirclePath; trackBy: trackByFn"\n class="ant-progress-circle-path"\n fill-opacity="0"\n [attr.d]="pathString"\n [attr.stroke-linecap]="nzStrokeLinecap"\n [attr.stroke]="p.stroke"\n [attr.stroke-width]="nzPercent ? strokeWidth : 0"\n [ngStyle]="p.strokePathStyle">\n </path>\n </svg>\n <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>\n </div>\n</div>\n'}]}],e.ctorParameters=function(){return[{type:o.NzConfigService}]},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}]},a([o.WithConfig(!0),c("design:type",Boolean)],e.prototype,"nzShowInfo",void 0),a([o.WithConfig(),c("design:type",Object)],e.prototype,"nzStrokeColor",void 0),a([o.WithConfig("default"),c("design:type",String)],e.prototype,"nzSize",void 0),a([o.InputNumber(),c("design:type",Number)],e.prototype,"nzSuccessPercent",void 0),a([o.InputNumber(),c("design:type",Number)],e.prototype,"nzPercent",void 0),a([o.WithConfig(),o.InputNumber(),c("design:type",Number)],e.prototype,"nzStrokeWidth",void 0),a([o.WithConfig(),o.InputNumber(),c("design:type",Number)],e.prototype,"nzGapDegree",void 0),a([o.WithConfig("top"),c("design:type",String)],e.prototype,"nzGapPosition",void 0),a([o.WithConfig("round"),c("design:type",String)],e.prototype,"nzStrokeLinecap",void 0),e}();var y=function(){function e(){}return e.decorators=[{type:n.NgModule,args:[{exports:[f],declarations:[f],imports:[t.CommonModule,r.NzIconModule]}]}],e}();
/**
* @license
* Copyright Alibaba.com All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/e.NzProgressComponent=f,e.NzProgressModule=y,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ng-zorro-antd-progress.umd.min.js.map