ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
23 lines (21 loc) • 13 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/common"),require("@angular/core"),require("ng-zorro-antd/core/outlet"),require("ng-zorro-antd/icon"),require("ng-zorro-antd/core/config"),require("ng-zorro-antd/core/util"),require("rxjs"),require("rxjs/operators")):"function"==typeof define&&define.amd?define("ng-zorro-antd/progress",["exports","@angular/common","@angular/core","ng-zorro-antd/core/outlet","ng-zorro-antd/icon","ng-zorro-antd/core/config","ng-zorro-antd/core/util","rxjs","rxjs/operators"],e):e(((t=t||self)["ng-zorro-antd"]=t["ng-zorro-antd"]||{},t["ng-zorro-antd"].progress={}),t.ng.common,t.ng.core,t["ng-zorro-antd"].core.outlet,t["ng-zorro-antd"].icon,t["ng-zorro-antd"].core.config,t["ng-zorro-antd"].core.util,t.rxjs,t.rxjs.operators)}(this,(function(t,e,n,r,s,o,i,a,p){"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,e,n,r){var s,o=arguments.length,i=o<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(t,e,n,r);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(i=(o<3?s(i):o>3?s(e,n,i):s(e,n))||i);return o>3&&i&&Object.defineProperty(e,n,i),i}function l(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)}var g=function(t){var e=[];return Object.keys(t).forEach((function(n){var r=t[n],s=+n.replace("%","");isNaN(s)||e.push({key:s,value:r})})),e=e.sort((function(t,e){return t.key-e.key}))},u=function(t){var e=t.from,n=void 0===e?"#1890ff":e,r=t.to,s=void 0===r?"#1890ff":r,o=t.direction,i=void 0===o?"to right":o,a=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(r=Object.getOwnPropertySymbols(t);s<r.length;s++)e.indexOf(r[s])<0&&Object.prototype.propertyIsEnumerable.call(t,r[s])&&(n[r[s]]=t[r[s]])}return n}(t,["from","to","direction"]);return 0!==Object.keys(a).length?"linear-gradient("+i+", "+g(a).map((function(t){var e=t.key;return t.value+" "+e+"%"})).join(", ")+")":"linear-gradient("+i+", "+n+", "+s+")"},d=0,h=new Map([["success","check"],["exception","close"]]),f=new Map([["normal","#108ee9"],["exception","#ff5500"],["success","#87d068"]]),y=function(t){return t+"%"},z=function(){function t(t){this.nzConfigService=t,this.nzWidth=132,this.nzPercent=0,this.nzType="line",this.steps=[],this.lineGradient=null,this.isGradient=!1,this.isSteps=!1,this.gradientId=d++,this.progressCirclePath=[],this.trackByFn=function(t){return""+t},this.cachedStatus="normal",this.inferredStatus="normal",this.destroy$=new a.Subject}return Object.defineProperty(t.prototype,"formatter",{get:function(){return this.nzFormat||y},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"status",{get:function(){return this.nzStatus||this.inferredStatus},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"strokeWidth",{get:function(){return this.nzStrokeWidth||("line"===this.nzType&&"small"!==this.nzSize?8:6)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"isCircleStyle",{get:function(){return"circle"===this.nzType||"dashboard"===this.nzType},enumerable:!0,configurable:!0}),t.prototype.ngOnChanges=function(t){var e=t.nzSteps,n=t.nzGapPosition,r=t.nzStrokeLinecap,s=t.nzStrokeColor,o=t.nzGapDegree,a=t.nzType,p=t.nzStatus,c=t.nzPercent,l=t.nzSuccessPercent;(p&&(this.cachedStatus=this.nzStatus||this.cachedStatus),c||l)&&(parseInt(this.nzPercent.toString(),10)>=100?(i.isNotNil(this.nzSuccessPercent)&&this.nzSuccessPercent>=100||void 0===this.nzSuccessPercent)&&(this.inferredStatus="success"):this.inferredStatus=this.cachedStatus);(p||c||l)&&this.updateIcon(),s&&this.setStrokeColor(),(n||r||o||a||c||s)&&this.getCirclePaths(),e&&(this.isSteps=i.isNotNil(e.currentValue),this.getSteps())},t.prototype.ngOnInit=function(){var t=this;this.nzConfigService.getConfigChangeEventForComponent("progress").pipe(p.takeUntil(this.destroy$)).subscribe((function(){t.updateIcon(),t.setStrokeColor(),t.getCirclePaths()}))},t.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete()},t.prototype.updateIcon=function(){var t=h.get(this.status);this.icon=t?t+(this.isCircleStyle?"-o":"-circle-fill"):""},t.prototype.getSteps=function(){for(var t=Math.floor(this.nzSteps*(this.nzPercent/100)),e="small"===this.nzSize?2:14,n=0;n<this.nzSteps;n++){var r=void 0;n<=t-1&&(r=this.nzStrokeColor);var s={backgroundColor:""+r,width:e+"px",height:this.strokeWidth+"px"};this.steps.push(s)}},t.prototype.getCirclePaths=function(){var t=this;if(this.isCircleStyle){var e=i.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,o=this.nzGapDegree||("circle"===this.nzType?0:75),a=0,p=-n,c=0,l=-2*n;switch(r){case"left":a=-n,p=0,c=2*n,l=0;break;case"right":a=n,p=0,c=-2*n,l=0;break;case"bottom":p=n,l=2*n}this.pathString="M 50,50 m "+a+","+p+"\n a "+n+","+n+" 0 1 1 "+c+","+-l+"\n a "+n+","+n+" 0 1 1 "+-c+","+l,this.trailPathStyle={strokeDasharray:s-o+"px "+s+"px",strokeDashoffset:"-"+o/2+"px",transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"},this.progressCirclePath=e.map((function(n,r){var i=2===e.length&&0===r;return{stroke:t.isGradient&&!i?"url(#gradient-"+t.gradientId+")":null,strokePathStyle:{stroke:t.isGradient?null:i?f.get("success"):t.nzStrokeColor,transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",strokeDasharray:(n||0)/100*(s-o)+"px "+s+"px",strokeDashoffset:"-"+o/2+"px"}}})).reverse()}},t.prototype.setStrokeColor=function(){var t,e=this.nzStrokeColor,n=this.isGradient=!!e&&"string"!=typeof e;n&&!this.isCircleStyle?this.lineGradient=u(e):n&&this.isCircleStyle?this.circleGradient=(t=this.nzStrokeColor,g(t).map((function(t){return{offset:t.key+"%",color:t.value}}))):(this.lineGradient=null,this.circleGradient=[])},t.decorators=[{type:n.Component,args:[{changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None,selector:"nz-progress",exportAs:"nzProgress",preserveWhitespaces:!1,template:'\n <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 <ng-container *nzStringTemplateOutlet="formatter; context: { $implicit: nzPercent }">\n {{ $any(formatter)(nzPercent) }}\n </ng-container>\n </ng-template>\n </span>\n </ng-template>\n\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 [class.ant-progress-steps]="isSteps"\n >\n \x3c!-- line progress --\x3e\n <div *ngIf="nzType === \'line\'">\n <ng-container *ngIf="!isSteps">\n <div class="ant-progress-outer" *ngIf="!isSteps">\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]="!isGradient ? nzStrokeColor : null"\n [style.background-image]="isGradient ? lineGradient : null"\n [style.height.px]="strokeWidth"\n ></div>\n <div\n *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"\n ></div>\n </div>\n </div>\n <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>\n </ng-container>\n \x3c!-- Step style progress --\x3e\n <div class="ant-progress-steps-outer" *ngIf="isSteps">\n <div *ngFor="let step of steps; let i = index" class="ant-progress-steps-item" [ngStyle]="step"></div>\n <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>\n </div>\n </div>\n\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 [class.ant-progress-circle-gradient]="isGradient"\n *ngIf="isCircleStyle"\n >\n <svg class="ant-progress-circle " viewBox="0 0 100 100">\n <defs *ngIf="isGradient">\n <linearGradient [id]="\'gradient-\' + gradientId" x1="100%" y1="0%" x2="0%" y2="0%">\n <stop *ngFor="let i of circleGradient" [attr.offset]="i.offset" [attr.stop-color]="i.color"></stop>\n </linearGradient>\n </defs>\n <path\n class="ant-progress-circle-trail"\n stroke="#f3f3f3"\n fill-opacity="0"\n [attr.stroke-width]="strokeWidth"\n [attr.d]="pathString"\n [ngStyle]="trailPathStyle"\n ></path>\n <path\n *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 '}]}],t.ctorParameters=function(){return[{type:o.NzConfigService}]},t.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}],nzSteps:[{type:n.Input}]},c([o.WithConfig("progress",!0),l("design:type",Boolean)],t.prototype,"nzShowInfo",void 0),c([o.WithConfig("progress"),l("design:type",Object)],t.prototype,"nzStrokeColor",void 0),c([o.WithConfig("progress","default"),l("design:type",String)],t.prototype,"nzSize",void 0),c([i.InputNumber(),l("design:type",Number)],t.prototype,"nzSuccessPercent",void 0),c([i.InputNumber(),l("design:type",Number)],t.prototype,"nzPercent",void 0),c([o.WithConfig("progress"),i.InputNumber(),l("design:type",Number)],t.prototype,"nzStrokeWidth",void 0),c([o.WithConfig("progress"),i.InputNumber(),l("design:type",Number)],t.prototype,"nzGapDegree",void 0),c([o.WithConfig("progress","top"),l("design:type",String)],t.prototype,"nzGapPosition",void 0),c([o.WithConfig("progress","round"),l("design:type",String)],t.prototype,"nzStrokeLinecap",void 0),c([i.InputNumber(),l("design:type",Number)],t.prototype,"nzSteps",void 0),t}();var S=function(){function t(){}return t.decorators=[{type:n.NgModule,args:[{exports:[z],declarations:[z],imports:[e.CommonModule,s.NzIconModule,r.NzOutletModule]}]}],t}();
/**
* @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
*/t.NzProgressComponent=z,t.NzProgressModule=S,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-zorro-antd-progress.umd.min.js.map