ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
239 lines (233 loc) • 10.4 kB
JavaScript
import { CommonModule } from '@angular/common';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { __decorate, __metadata } from 'tslib';
import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, NgModule } from '@angular/core';
import { isNotNil, InputNumber } from 'ng-zorro-antd/core';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzProgressComponent {
constructor() {
this.nzShowInfo = true;
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 {?}
*/
get formatter() {
return this.nzFormat || ((/**
* @param {?} p
* @return {?}
*/
(p) => `${p}%`));
}
/**
* @return {?}
*/
get status() {
return this.nzStatus || this.inferredStatus;
}
/**
* @return {?}
*/
get strokeWidth() {
return this.nzStrokeWidth || this.inferredStrokeWidth;
}
/**
* @return {?}
*/
get isCircleStyle() {
return this.nzType === 'circle' || this.nzType === 'dashboard';
}
/**
* @return {?}
*/
ngOnInit() {
this.updatePathStyles();
this.updateIcon();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
const { nzGapPosition, nzStrokeLinecap, nzGapDegree, nzType, nzSize, nzStatus, nzPercent, nzSuccessPercent } = changes;
if (nzGapPosition || nzStrokeLinecap || nzGapDegree || nzType || nzPercent) {
this.updatePathStyles();
}
if (nzSize) {
if (this.nzSize === 'small') {
this.inferredStrokeWidth = 6;
}
}
if (nzStatus) {
this.cachedStatus = this.nzStatus || this.cachedStatus;
this.updateIcon();
}
if (nzPercent || nzSuccessPercent) {
/** @type {?} */
const fillAll = parseInt(this.nzPercent.toString(), 10) >= 100;
if (fillAll) {
if ((isNotNil(this.nzSuccessPercent) && (/** @type {?} */ (this.nzSuccessPercent)) >= 100) || this.nzSuccessPercent === undefined) {
this.inferredStatus = 'success';
}
}
else {
this.inferredStatus = this.cachedStatus;
}
this.updateIcon();
}
if (nzType) {
if (this.nzType !== 'line') {
this.inferredStrokeWidth = 6;
}
if (this.nzType === 'dashboard') {
this.inferredGapPosition = 'bottom';
this.inferredGapDegree = 75;
}
if (this.nzType === 'circle') {
this.inferredGapDegree = 0;
}
}
}
/**
* @return {?}
*/
updatePathStyles() {
/** @type {?} */
const radius = 50 - this.strokeWidth / 2;
/** @type {?} */
const gapPosition = this.nzGapPosition || this.inferredGapPosition;
/** @type {?} */
let beginPositionX = 0;
/** @type {?} */
let beginPositionY = -radius;
/** @type {?} */
let endPositionX = 0;
/** @type {?} */
let endPositionY = radius * -2;
switch (gapPosition) {
case 'left':
beginPositionX = -radius;
beginPositionY = 0;
endPositionX = radius * 2;
endPositionY = 0;
break;
case 'right':
beginPositionX = radius;
beginPositionY = 0;
endPositionX = radius * -2;
endPositionY = 0;
break;
case 'bottom':
beginPositionY = radius;
endPositionY = radius * 2;
break;
default:
}
this.pathString = `M 50,50 m ${beginPositionX},${beginPositionY}
a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY}
a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
/** @type {?} */
const len = Math.PI * 2 * radius;
/** @type {?} */
const gapDegree = this.nzGapDegree || this.inferredGapDegree;
this.trailPathStyle = {
strokeDasharray: `${len - gapDegree}px ${len}px`,
strokeDashoffset: `-${gapDegree / 2}px`,
transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s'
};
this.strokePathStyle = {
stroke: this.nzStrokeColor || ((/** @type {?} */ (null))),
// tslint:disable-line:no-any
strokeDasharray: `${(this.nzPercent / 100) * (len - gapDegree)}px ${len}px`,
strokeDashoffset: `-${gapDegree / 2}px`,
transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s'
};
}
/**
* @return {?}
*/
updateIcon() {
/** @type {?} */
const isCircle = this.nzType === 'circle' || this.nzType === 'dashboard';
/** @type {?} */
const ret = this.status === 'success' ? 'check' : this.status === 'exception' ? 'close' : '';
this.icon = ret ? ret + (isCircle ? '-o' : '-circle-fill') : '';
}
}
NzProgressComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
selector: 'nz-progress',
exportAs: 'nzProgress',
preserveWhitespaces: false,
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 <!-- Line progress -->\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 <!-- Circle/Dashboard progress -->\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"
}] }
];
NzProgressComponent.propDecorators = {
nzShowInfo: [{ type: Input }],
nzWidth: [{ type: Input }],
nzStrokeColor: [{ type: Input }],
nzSize: [{ type: Input }],
nzFormat: [{ type: Input }],
nzSuccessPercent: [{ type: Input }],
nzPercent: [{ type: Input }],
nzStrokeWidth: [{ type: Input }],
nzGapDegree: [{ type: Input }],
nzStatus: [{ type: Input }],
nzType: [{ type: Input }],
nzGapPosition: [{ type: Input }],
nzStrokeLinecap: [{ type: Input }]
};
__decorate([
InputNumber(),
__metadata("design:type", Number)
], NzProgressComponent.prototype, "nzSuccessPercent", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Number)
], NzProgressComponent.prototype, "nzPercent", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Number)
], NzProgressComponent.prototype, "nzStrokeWidth", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Number)
], NzProgressComponent.prototype, "nzGapDegree", void 0);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzProgressModule {
}
NzProgressModule.decorators = [
{ type: NgModule, args: [{
exports: [NzProgressComponent],
declarations: [NzProgressComponent],
imports: [CommonModule, NzIconModule]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NzProgressModule, NzProgressComponent };
//# sourceMappingURL=ng-zorro-antd-progress.js.map