UNPKG

ng-zorro-antd

Version:

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

16 lines (14 loc) 13.4 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/cdk/bidi"),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/cdk/bidi","@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="undefined"!=typeof globalThis?globalThis:t||self)["ng-zorro-antd"]=t["ng-zorro-antd"]||{},t["ng-zorro-antd"].progress={}),t.ng.cdk.bidi,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,c){"use strict"; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. ***************************************************************************** */function l(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 d(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)}Object.create;Object.create;var h=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+", "+h(a).map((function(t){var e=t.key;return t.value+" "+e+"%"})).join(", ")+")":"linear-gradient("+i+", "+n+", "+s+")"},g=0,f="progress",y=new Map([["success","check"],["exception","close"]]),z=new Map([["normal","#108ee9"],["exception","#ff5500"],["success","#87d068"]]),S=function(t){return t+"%"},m=function(){function t(t,e,n){this.cdr=t,this.nzConfigService=e,this.directionality=n,this._nzModuleName=f,this.nzShowInfo=!0,this.nzWidth=132,this.nzStrokeColor=void 0,this.nzSize="default",this.nzPercent=0,this.nzStrokeWidth=void 0,this.nzGapDegree=void 0,this.nzType="line",this.nzGapPosition="top",this.nzStrokeLinecap="round",this.nzSteps=0,this.steps=[],this.lineGradient=null,this.isGradient=!1,this.isSteps=!1,this.gradientId=g++,this.progressCirclePath=[],this.trailPathStyle=null,this.dir="ltr",this.trackByFn=function(t){return""+t},this.cachedStatus="normal",this.inferredStatus="normal",this.destroy$=new p.Subject}return Object.defineProperty(t.prototype,"formatter",{get:function(){return this.nzFormat||S},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"status",{get:function(){return this.nzStatus||this.inferredStatus},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"strokeWidth",{get:function(){return this.nzStrokeWidth||("line"===this.nzType&&"small"!==this.nzSize?8:6)},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"isCircleStyle",{get:function(){return"circle"===this.nzType||"dashboard"===this.nzType},enumerable:!1,configurable:!0}),t.prototype.ngOnChanges=function(t){var e=t.nzSteps,n=t.nzGapPosition,r=t.nzStrokeLinecap,s=t.nzStrokeColor,o=t.nzGapDegree,i=t.nzType,p=t.nzStatus,c=t.nzPercent,l=t.nzSuccessPercent,d=t.nzStrokeWidth;(p&&(this.cachedStatus=this.nzStatus||this.cachedStatus),c||l)&&(parseInt(this.nzPercent.toString(),10)>=100?(a.isNotNil(this.nzSuccessPercent)&&this.nzSuccessPercent>=100||void 0===this.nzSuccessPercent)&&(this.inferredStatus="success"):this.inferredStatus=this.cachedStatus);(p||c||l||s)&&this.updateIcon(),s&&this.setStrokeColor(),(n||r||o||i||c||s||s)&&this.getCirclePaths(),(c||e||d)&&(this.isSteps=this.nzSteps>0,this.isSteps&&this.getSteps())},t.prototype.ngOnInit=function(){var t,e=this;this.nzConfigService.getConfigChangeEventForComponent(f).pipe(c.takeUntil(this.destroy$)).subscribe((function(){e.updateIcon(),e.setStrokeColor(),e.getCirclePaths()})),null===(t=this.directionality.change)||void 0===t||t.pipe(c.takeUntil(this.destroy$)).subscribe((function(t){e.dir=t,e.cdr.detectChanges()})),this.dir=this.directionality.value},t.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete()},t.prototype.updateIcon=function(){var t=y.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=[],r=0;r<this.nzSteps;r++){var s=void 0;r<=t-1&&(s=this.nzStrokeColor);var o={backgroundColor:""+s,width:e+"px",height:this.strokeWidth+"px"};n.push(o)}this.steps=n},t.prototype.getCirclePaths=function(){var t=this;if(this.isCircleStyle){var e=a.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),i=0,p=-n,c=0,l=-2*n;switch(r){case"left":i=-n,p=0,c=2*n,l=0;break;case"right":i=n,p=0,c=-2*n,l=0;break;case"bottom":p=n,l=2*n}this.pathString="M 50,50 m "+i+","+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?z.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,h(t).map((function(t){return{offset:t.key+"%",color:t.value}}))):(this.lineGradient=null,this.circleGradient=[])},t}();m.decorators=[{type:r.Component,args:[{changeDetection:r.ChangeDetectionStrategy.OnPush,encapsulation:r.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 }; let formatter">\n {{ 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 [class.ant-progress-rtl]="dir === \'rtl\'"\n >\n \x3c!-- line progress --\x3e\n <div *ngIf="nzType === \'line\'">\n \x3c!-- normal line style --\x3e\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 --\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 '}]}],m.ctorParameters=function(){return[{type:r.ChangeDetectorRef},{type:i.NzConfigService},{type:e.Directionality,decorators:[{type:r.Optional}]}]},m.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}],nzSteps:[{type:r.Input}]},l([i.WithConfig(),d("design:type",Boolean)],m.prototype,"nzShowInfo",void 0),l([i.WithConfig(),d("design:type",Object)],m.prototype,"nzStrokeColor",void 0),l([i.WithConfig(),d("design:type",String)],m.prototype,"nzSize",void 0),l([a.InputNumber(),d("design:type",Number)],m.prototype,"nzSuccessPercent",void 0),l([a.InputNumber(),d("design:type",Number)],m.prototype,"nzPercent",void 0),l([i.WithConfig(),a.InputNumber(),d("design:type",Number)],m.prototype,"nzStrokeWidth",void 0),l([i.WithConfig(),a.InputNumber(),d("design:type",Number)],m.prototype,"nzGapDegree",void 0),l([i.WithConfig(),d("design:type",String)],m.prototype,"nzGapPosition",void 0),l([i.WithConfig(),d("design:type",String)],m.prototype,"nzStrokeLinecap",void 0),l([a.InputNumber(),d("design:type",Number)],m.prototype,"nzSteps",void 0);var k=function(){};k.decorators=[{type:r.NgModule,args:[{exports:[m],declarations:[m],imports:[e.BidiModule,n.CommonModule,o.NzIconModule,s.NzOutletModule]}]}],t.NzProgressComponent=m,t.NzProgressModule=k,Object.defineProperty(t,"__esModule",{value:!0})})); //# sourceMappingURL=ng-zorro-antd-progress.umd.min.js.map