@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
103 lines • 10.6 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: progress.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, ContentChild, TemplateRef, } from '@angular/core';
export class ProgressComponent {
constructor() {
this.percentage = 0;
this.height = '20px';
this.strokeWidth = 6; // 设置圈形进度条宽度，进度条与画布宽度的百分比
// 设置圈形进度条宽度，进度条与画布宽度的百分比
this.isCircle = false;
}
/**
* @return {?}
*/
ngOnInit() {
if (this.isCircle) {
this.setCircleProgress();
}
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (this.isCircle) {
this.setCircleProgress();
}
}
/**
* @return {?}
*/
setCircleProgress() {
if (!this.isCircle) {
return;
}
/** @type {?} */
const radius = 50 - this.strokeWidth / 2;
/** @type {?} */
const beginPositionY = -radius;
/** @type {?} */
const endPositionY = radius * -2;
this.pathString = `M 50,50 m 0,${beginPositionY}
a ${radius},${radius} 0 1 1 0,${-endPositionY}
a ${radius},${radius} 0 1 1 0,${endPositionY}`;
/** @type {?} */
const len = Math.PI * 2 * radius;
this.trailPath = {
strokeDasharray: `${len}px ${len}px`,
strokeDashoffset: `0`,
transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s'
};
this.strokePath = {
stroke: this.barbgcolor || ((/** @type {?} */ (null))),
strokeDasharray: `${(this.percentage / 100) * len}px ${len}px`,
strokeDashoffset: `0`,
transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s'
};
}
}
ProgressComponent.decorators = [
{ type: Component, args: [{
selector: 'd-progress',
template: "<div *ngIf=\"!isCircle\" class=\"devui-progress\" [ngStyle]=\"{ height: height }\">\r\n <div\r\n class=\"devui-progress-bar\"\r\n role=\"progressbar\"\r\n aria-valuenow=\"60\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n [style.background-color]=\"barbgcolor\"\r\n [style.width]=\"percentage + '%'\"\r\n ></div>\r\n <span [style.line-height]=\"height\">{{ percentageText }}</span>\r\n</div>\r\n<div *ngIf=\"isCircle\" class=\"devui-progress-circle\">\r\n <svg class=\"devui-progress-circle \" viewBox=\"0 0 100 100\">\r\n <path\r\n class=\"devui-progress-circle-trail\"\r\n fill-opacity=\"0\"\r\n [attr.stroke-width]=\"strokeWidth\"\r\n [ngStyle]=\"trailPath\"\r\n [attr.d]=\"pathString\"\r\n ></path>\r\n <path\r\n class=\"devui-progress-circle-path\"\r\n [attr.d]=\"pathString\"\r\n [attr.stroke-linecap]=\"'round'\"\r\n fill-opacity=\"0\"\r\n [attr.stroke]=\"barbgcolor\"\r\n [attr.stroke-width]=\"percentage ? strokeWidth : 0\"\r\n [ngStyle]=\"strokePath\"\r\n ></path>\r\n </svg>\r\n <ng-template\r\n *ngIf=\"customViewTemplate\"\r\n [ngTemplateOutlet]=\"customViewTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: this, percentage:percentage}\"\r\n ></ng-template>\r\n <span *ngIf=\"!customViewTemplate\" class=\"devui-progress-circle-text\">{{ percentage }}%</span>\r\n</div>\r\n",
styles: [":host{display:block}.devui-progress{position:relative;border-radius:100px;background:#dfe1e6}.devui-progress .devui-progress-bar{width:0;height:100%;box-shadow:inset 0 -1px 0 rgba(41,48,64,.2);-webkit-transition:width .6s;transition:width .6s;border-radius:100px;background-color:#5e7ce0}.devui-progress>span{display:block;white-space:nowrap;color:#fff;text-align:center;position:absolute;left:0;top:0;height:100%;width:100%;font-size:12px}.devui-progress-circle{position:relative}.devui-progress-circle-text{position:absolute;top:50%;left:50%;width:100%;margin:0;padding:0;color:#252b3a;line-height:1;white-space:normal;text-align:center;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.devui-progress-circle-trail{stroke:#dfe1e6}.devui-progress-circle-path{stroke:#5e7ce0}"]
}] }
];
/** @nocollapse */
ProgressComponent.ctorParameters = () => [];
ProgressComponent.propDecorators = {
percentage: [{ type: Input }],
percentageText: [{ type: Input }],
barbgcolor: [{ type: Input }],
height: [{ type: Input }],
strokeWidth: [{ type: Input }],
isCircle: [{ type: Input }],
customViewTemplate: [{ type: ContentChild, args: [TemplateRef, { static: false },] }]
};
if (false) {
/** @type {?} */
ProgressComponent.prototype.percentage;
/** @type {?} */
ProgressComponent.prototype.percentageText;
/** @type {?} */
ProgressComponent.prototype.barbgcolor;
/** @type {?} */
ProgressComponent.prototype.height;
/** @type {?} */
ProgressComponent.prototype.strokeWidth;
/** @type {?} */
ProgressComponent.prototype.isCircle;
/** @type {?} */
ProgressComponent.prototype.customViewTemplate;
/** @type {?} */
ProgressComponent.prototype.trailPath;
/** @type {?} */
ProgressComponent.prototype.strokePath;
/** @type {?} */
ProgressComponent.prototype.pathString;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmctZGV2dWkvcHJvZ3Jlc3MvIiwic291cmNlcyI6WyJwcm9ncmVzcy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssRUFFTCxZQUFZLEVBQ1osV0FBVyxHQUdaLE1BQU0sZUFBZSxDQUFDO0FBT3ZCLE1BQU0sT0FBTyxpQkFBaUI7SUFXNUI7UUFWUyxlQUFVLEdBQUcsQ0FBQyxDQUFDO1FBR2YsV0FBTSxHQUFHLE1BQU0sQ0FBQztRQUNoQixnQkFBVyxHQUFHLENBQUMsQ0FBQyxDQUFDLHlCQUF5Qjs7UUFDMUMsYUFBUSxHQUFHLEtBQUssQ0FBQztJQU8xQixDQUFDOzs7O0lBQ0QsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNqQixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztTQUMzQjtJQUNGLENBQUM7Ozs7O0lBQ0QsV0FBVyxDQUFDLE9BQXNCO1FBQ2pDLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNoQixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztTQUMzQjtJQUNGLENBQUM7Ozs7SUFDRCxpQkFBaUI7UUFDZixJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNsQixPQUFPO1NBQ1I7O2NBQ0ssTUFBTSxHQUFHLEVBQUUsR0FBRyxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUM7O2NBQ2xDLGNBQWMsR0FBRyxDQUFDLE1BQU07O2NBQ3hCLFlBQVksR0FBRyxNQUFNLEdBQUcsQ0FBQyxDQUFDO1FBRWhDLElBQUksQ0FBQyxVQUFVLEdBQUcsZUFBZSxjQUFjO1NBQzFDLE1BQU0sSUFBSSxNQUFNLFlBQVksQ0FBQyxZQUFZO1NBQ3pDLE1BQU0sSUFBSSxNQUFNLFlBQVksWUFBWSxFQUFFLENBQUM7O2NBRTFDLEdBQUcsR0FBRyxJQUFJLENBQUMsRUFBRSxHQUFHLENBQUMsR0FBRyxNQUFNO1FBRWhDLElBQUksQ0FBQyxTQUFTLEdBQUc7WUFDZixlQUFlLEVBQUUsR0FBRyxHQUFHLE1BQU0sR0FBRyxJQUFJO1lBQ3BDLGdCQUFnQixFQUFFLEdBQUc7WUFDckIsVUFBVSxFQUFFLHlFQUF5RTtTQUN0RixDQUFDO1FBQ0YsSUFBSSxDQUFDLFVBQVUsR0FBRztZQUNoQixNQUFNLEVBQUUsSUFBSSxDQUFDLFVBQVUsSUFBSSxDQUFDLG1CQUFBLElBQUksRUFBTyxDQUFDO1lBQ3hDLGVBQWUsRUFBRSxHQUFHLENBQUMsSUFBSSxDQUFDLFVBQVUsR0FBRyxHQUFHLENBQUMsR0FBRyxHQUFJLE1BQU0sR0FBRyxJQUFJO1lBQy9ELGdCQUFnQixFQUFFLEdBQUc7WUFDckIsVUFBVSxFQUFFLHFHQUFxRztTQUNsSCxDQUFDO0lBQ0osQ0FBQzs7O1lBdERGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsWUFBWTtnQkFDdEIsODRDQUF3Qzs7YUFFekM7Ozs7O3lCQUVFLEtBQUs7NkJBQ0wsS0FBSzt5QkFDTCxLQUFLO3FCQUNMLEtBQUs7MEJBQ0wsS0FBSzt1QkFDTCxLQUFLO2lDQUNMLFlBQVksU0FBQyxXQUFXLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFOzs7O0lBTjVDLHVDQUF3Qjs7SUFDeEIsMkNBQWdDOztJQUNoQyx1Q0FBNEI7O0lBQzVCLG1DQUF5Qjs7SUFDekIsd0NBQXlCOztJQUN6QixxQ0FBMEI7O0lBQzFCLCtDQUFtRjs7SUFDbkYsc0NBQXFDOztJQUNyQyx1Q0FBc0M7O0lBQ3RDLHVDQUFtQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgQ29tcG9uZW50LFxyXG4gIElucHV0LFxyXG4gIFNpbXBsZUNoYW5nZXMsXHJcbiAgQ29udGVudENoaWxkLFxyXG4gIFRlbXBsYXRlUmVmLFxyXG4gIE9uSW5pdCxcclxuICBPbkNoYW5nZXMsXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2QtcHJvZ3Jlc3MnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9wcm9ncmVzcy5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vcHJvZ3Jlc3MuY29tcG9uZW50LnNjc3MnXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIFByb2dyZXNzQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0ICwgT25DaGFuZ2VzIHtcclxuICBASW5wdXQoKSBwZXJjZW50YWdlID0gMDtcclxuICBASW5wdXQoKSBwZXJjZW50YWdlVGV4dDogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGJhcmJnY29sb3I6IHN0cmluZztcclxuICBASW5wdXQoKSBoZWlnaHQgPSAnMjBweCc7XHJcbiAgQElucHV0KCkgc3Ryb2tlV2lkdGggPSA2OyAvLyDorr7nva7lnIjlvaLov5vluqbmnaHlrr3luqbvvIzov5vluqbmnaHkuI7nlLvluIPlrr3luqbnmoTnmb7liIbmr5RcclxuICBASW5wdXQoKSBpc0NpcmNsZSA9IGZhbHNlO1xyXG4gIEBDb250ZW50Q2hpbGQoVGVtcGxhdGVSZWYsIHsgc3RhdGljOiBmYWxzZSB9KSBjdXN0b21WaWV3VGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XHJcbiAgdHJhaWxQYXRoOiB7IFtrZXk6IHN0cmluZ106IHN0cmluZyB9O1xyXG4gIHN0cm9rZVBhdGg6IHsgW2tleTogc3RyaW5nXTogc3RyaW5nIH07XHJcbiAgcGF0aFN0cmluZzogc3RyaW5nO1xyXG4gIGNvbnN0cnVjdG9yKCkge1xyXG5cclxuICB9XHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5pc0NpcmNsZSkge1xyXG4gICAgICB0aGlzLnNldENpcmNsZVByb2dyZXNzKCk7XHJcbiAgIH1cclxuICB9XHJcbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xyXG4gICBpZiAodGhpcy5pc0NpcmNsZSkge1xyXG4gICAgICB0aGlzLnNldENpcmNsZVByb2dyZXNzKCk7XHJcbiAgIH1cclxuICB9XHJcbiAgc2V0Q2lyY2xlUHJvZ3Jlc3MoKTogdm9pZCB7XHJcbiAgICBpZiAoIXRoaXMuaXNDaXJjbGUpIHtcclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG4gICAgY29uc3QgcmFkaXVzID0gNTAgLSB0aGlzLnN0cm9rZVdpZHRoIC8gMjtcclxuICAgIGNvbnN0IGJlZ2luUG9zaXRpb25ZID0gLXJhZGl1cztcclxuICAgIGNvbnN0IGVuZFBvc2l0aW9uWSA9IHJhZGl1cyAqIC0yO1xyXG5cclxuICAgIHRoaXMucGF0aFN0cmluZyA9IGBNIDUwLDUwIG0gMCwke2JlZ2luUG9zaXRpb25ZfVxyXG4gICAgIGEgJHtyYWRpdXN9LCR7cmFkaXVzfSAwIDEgMSAwLCR7LWVuZFBvc2l0aW9uWX1cclxuICAgICBhICR7cmFkaXVzfSwke3JhZGl1c30gMCAxIDEgMCwke2VuZFBvc2l0aW9uWX1gO1xyXG5cclxuICAgIGNvbnN0IGxlbiA9IE1hdGguUEkgKiAyICogcmFkaXVzO1xyXG5cclxuICAgIHRoaXMudHJhaWxQYXRoID0ge1xyXG4gICAgICBzdHJva2VEYXNoYXJyYXk6IGAke2xlbn1weCAke2xlbn1weGAsXHJcbiAgICAgIHN0cm9rZURhc2hvZmZzZXQ6IGAwYCxcclxuICAgICAgdHJhbnNpdGlvbjogJ3N0cm9rZS1kYXNob2Zmc2V0IC4zcyBlYXNlIDBzLCBzdHJva2UtZGFzaGFycmF5IC4zcyBlYXNlIDBzLCBzdHJva2UgLjNzJ1xyXG4gICAgfTtcclxuICAgIHRoaXMuc3Ryb2tlUGF0aCA9IHtcclxuICAgICAgc3Ryb2tlOiB0aGlzLmJhcmJnY29sb3IgfHwgKG51bGwgYXMgYW55KSxcclxuICAgICAgc3Ryb2tlRGFzaGFycmF5OiBgJHsodGhpcy5wZXJjZW50YWdlIC8gMTAwKSAqIGxlbiB9cHggJHtsZW59cHhgLFxyXG4gICAgICBzdHJva2VEYXNob2Zmc2V0OiBgMGAsXHJcbiAgICAgIHRyYW5zaXRpb246ICdzdHJva2UtZGFzaG9mZnNldCAuM3MgZWFzZSAwcywgc3Ryb2tlLWRhc2hhcnJheSAuM3MgZWFzZSAwcywgc3Ryb2tlIC4zcywgc3Ryb2tlLXdpZHRoIC4wNnMgZWFzZSAuM3MnXHJcbiAgICB9O1xyXG4gIH1cclxufVxyXG4iXX0=