@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
113 lines • 11.1 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';
var ProgressComponent = /** @class */ (function () {
function ProgressComponent() {
this.percentage = 0;
this.height = '20px';
this.strokeWidth = 6; // 设置圈形进度条宽度，进度条与画布宽度的百分比
// 设置圈形进度条宽度，进度条与画布宽度的百分比
this.isCircle = false;
}
/**
* @return {?}
*/
ProgressComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.isCircle) {
this.setCircleProgress();
}
};
/**
* @param {?} changes
* @return {?}
*/
ProgressComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (this.isCircle) {
this.setCircleProgress();
}
};
/**
* @return {?}
*/
ProgressComponent.prototype.setCircleProgress = /**
* @return {?}
*/
function () {
if (!this.isCircle) {
return;
}
/** @type {?} */
var radius = 50 - this.strokeWidth / 2;
/** @type {?} */
var beginPositionY = -radius;
/** @type {?} */
var endPositionY = radius * -2;
this.pathString = "M 50,50 m 0," + beginPositionY + "\n a " + radius + "," + radius + " 0 1 1 0," + -endPositionY + "\n a " + radius + "," + radius + " 0 1 1 0," + endPositionY;
/** @type {?} */
var 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 = function () { return []; };
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 },] }]
};
return ProgressComponent;
}());
export { ProgressComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmctZGV2dWkvcHJvZ3Jlc3MvIiwic291cmNlcyI6WyJwcm9ncmVzcy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssRUFFTCxZQUFZLEVBQ1osV0FBVyxHQUdaLE1BQU0sZUFBZSxDQUFDO0FBRXZCO0lBZ0JFO1FBVlMsZUFBVSxHQUFHLENBQUMsQ0FBQztRQUdmLFdBQU0sR0FBRyxNQUFNLENBQUM7UUFDaEIsZ0JBQVcsR0FBRyxDQUFDLENBQUMsQ0FBQyx5QkFBeUI7O1FBQzFDLGFBQVEsR0FBRyxLQUFLLENBQUM7SUFPMUIsQ0FBQzs7OztJQUNELG9DQUFROzs7SUFBUjtRQUNFLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNqQixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztTQUMzQjtJQUNGLENBQUM7Ozs7O0lBQ0QsdUNBQVc7Ozs7SUFBWCxVQUFZLE9BQXNCO1FBQ2pDLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNoQixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztTQUMzQjtJQUNGLENBQUM7Ozs7SUFDRCw2Q0FBaUI7OztJQUFqQjtRQUNFLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2xCLE9BQU87U0FDUjs7WUFDSyxNQUFNLEdBQUcsRUFBRSxHQUFHLElBQUksQ0FBQyxXQUFXLEdBQUcsQ0FBQzs7WUFDbEMsY0FBYyxHQUFHLENBQUMsTUFBTTs7WUFDeEIsWUFBWSxHQUFHLE1BQU0sR0FBRyxDQUFDLENBQUM7UUFFaEMsSUFBSSxDQUFDLFVBQVUsR0FBRyxpQkFBZSxjQUFjLGlCQUMxQyxNQUFNLFNBQUksTUFBTSxpQkFBWSxDQUFDLFlBQVksaUJBQ3pDLE1BQU0sU0FBSSxNQUFNLGlCQUFZLFlBQWMsQ0FBQzs7WUFFMUMsR0FBRyxHQUFHLElBQUksQ0FBQyxFQUFFLEdBQUcsQ0FBQyxHQUFHLE1BQU07UUFFaEMsSUFBSSxDQUFDLFNBQVMsR0FBRztZQUNmLGVBQWUsRUFBSyxHQUFHLFdBQU0sR0FBRyxPQUFJO1lBQ3BDLGdCQUFnQixFQUFFLEdBQUc7WUFDckIsVUFBVSxFQUFFLHlFQUF5RTtTQUN0RixDQUFDO1FBQ0YsSUFBSSxDQUFDLFVBQVUsR0FBRztZQUNoQixNQUFNLEVBQUUsSUFBSSxDQUFDLFVBQVUsSUFBSSxDQUFDLG1CQUFBLElBQUksRUFBTyxDQUFDO1lBQ3hDLGVBQWUsRUFBSyxDQUFDLElBQUksQ0FBQyxVQUFVLEdBQUcsR0FBRyxDQUFDLEdBQUcsR0FBRyxXQUFPLEdBQUcsT0FBSTtZQUMvRCxnQkFBZ0IsRUFBRSxHQUFHO1lBQ3JCLFVBQVUsRUFBRSxxR0FBcUc7U0FDbEgsQ0FBQztJQUNKLENBQUM7O2dCQXRERixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLFlBQVk7b0JBQ3RCLDg0Q0FBd0M7O2lCQUV6Qzs7Ozs7NkJBRUUsS0FBSztpQ0FDTCxLQUFLOzZCQUNMLEtBQUs7eUJBQ0wsS0FBSzs4QkFDTCxLQUFLOzJCQUNMLEtBQUs7cUNBQ0wsWUFBWSxTQUFDLFdBQVcsRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUU7O0lBMkM5Qyx3QkFBQztDQUFBLEFBdkRELElBdURDO1NBbERZLGlCQUFpQjs7O0lBQzVCLHVDQUF3Qjs7SUFDeEIsMkNBQWdDOztJQUNoQyx1Q0FBNEI7O0lBQzVCLG1DQUF5Qjs7SUFDekIsd0NBQXlCOztJQUN6QixxQ0FBMEI7O0lBQzFCLCtDQUFtRjs7SUFDbkYsc0NBQXFDOztJQUNyQyx1Q0FBc0M7O0lBQ3RDLHVDQUFtQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgQ29tcG9uZW50LFxyXG4gIElucHV0LFxyXG4gIFNpbXBsZUNoYW5nZXMsXHJcbiAgQ29udGVudENoaWxkLFxyXG4gIFRlbXBsYXRlUmVmLFxyXG4gIE9uSW5pdCxcclxuICBPbkNoYW5nZXMsXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2QtcHJvZ3Jlc3MnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9wcm9ncmVzcy5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vcHJvZ3Jlc3MuY29tcG9uZW50LnNjc3MnXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIFByb2dyZXNzQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0ICwgT25DaGFuZ2VzIHtcclxuICBASW5wdXQoKSBwZXJjZW50YWdlID0gMDtcclxuICBASW5wdXQoKSBwZXJjZW50YWdlVGV4dDogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGJhcmJnY29sb3I6IHN0cmluZztcclxuICBASW5wdXQoKSBoZWlnaHQgPSAnMjBweCc7XHJcbiAgQElucHV0KCkgc3Ryb2tlV2lkdGggPSA2OyAvLyDorr7nva7lnIjlvaLov5vluqbmnaHlrr3luqbvvIzov5vluqbmnaHkuI7nlLvluIPlrr3luqbnmoTnmb7liIbmr5RcclxuICBASW5wdXQoKSBpc0NpcmNsZSA9IGZhbHNlO1xyXG4gIEBDb250ZW50Q2hpbGQoVGVtcGxhdGVSZWYsIHsgc3RhdGljOiBmYWxzZSB9KSBjdXN0b21WaWV3VGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XHJcbiAgdHJhaWxQYXRoOiB7IFtrZXk6IHN0cmluZ106IHN0cmluZyB9O1xyXG4gIHN0cm9rZVBhdGg6IHsgW2tleTogc3RyaW5nXTogc3RyaW5nIH07XHJcbiAgcGF0aFN0cmluZzogc3RyaW5nO1xyXG4gIGNvbnN0cnVjdG9yKCkge1xyXG5cclxuICB9XHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5pc0NpcmNsZSkge1xyXG4gICAgICB0aGlzLnNldENpcmNsZVByb2dyZXNzKCk7XHJcbiAgIH1cclxuICB9XHJcbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xyXG4gICBpZiAodGhpcy5pc0NpcmNsZSkge1xyXG4gICAgICB0aGlzLnNldENpcmNsZVByb2dyZXNzKCk7XHJcbiAgIH1cclxuICB9XHJcbiAgc2V0Q2lyY2xlUHJvZ3Jlc3MoKTogdm9pZCB7XHJcbiAgICBpZiAoIXRoaXMuaXNDaXJjbGUpIHtcclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG4gICAgY29uc3QgcmFkaXVzID0gNTAgLSB0aGlzLnN0cm9rZVdpZHRoIC8gMjtcclxuICAgIGNvbnN0IGJlZ2luUG9zaXRpb25ZID0gLXJhZGl1cztcclxuICAgIGNvbnN0IGVuZFBvc2l0aW9uWSA9IHJhZGl1cyAqIC0yO1xyXG5cclxuICAgIHRoaXMucGF0aFN0cmluZyA9IGBNIDUwLDUwIG0gMCwke2JlZ2luUG9zaXRpb25ZfVxyXG4gICAgIGEgJHtyYWRpdXN9LCR7cmFkaXVzfSAwIDEgMSAwLCR7LWVuZFBvc2l0aW9uWX1cclxuICAgICBhICR7cmFkaXVzfSwke3JhZGl1c30gMCAxIDEgMCwke2VuZFBvc2l0aW9uWX1gO1xyXG5cclxuICAgIGNvbnN0IGxlbiA9IE1hdGguUEkgKiAyICogcmFkaXVzO1xyXG5cclxuICAgIHRoaXMudHJhaWxQYXRoID0ge1xyXG4gICAgICBzdHJva2VEYXNoYXJyYXk6IGAke2xlbn1weCAke2xlbn1weGAsXHJcbiAgICAgIHN0cm9rZURhc2hvZmZzZXQ6IGAwYCxcclxuICAgICAgdHJhbnNpdGlvbjogJ3N0cm9rZS1kYXNob2Zmc2V0IC4zcyBlYXNlIDBzLCBzdHJva2UtZGFzaGFycmF5IC4zcyBlYXNlIDBzLCBzdHJva2UgLjNzJ1xyXG4gICAgfTtcclxuICAgIHRoaXMuc3Ryb2tlUGF0aCA9IHtcclxuICAgICAgc3Ryb2tlOiB0aGlzLmJhcmJnY29sb3IgfHwgKG51bGwgYXMgYW55KSxcclxuICAgICAgc3Ryb2tlRGFzaGFycmF5OiBgJHsodGhpcy5wZXJjZW50YWdlIC8gMTAwKSAqIGxlbiB9cHggJHtsZW59cHhgLFxyXG4gICAgICBzdHJva2VEYXNob2Zmc2V0OiBgMGAsXHJcbiAgICAgIHRyYW5zaXRpb246ICdzdHJva2UtZGFzaG9mZnNldCAuM3MgZWFzZSAwcywgc3Ryb2tlLWRhc2hhcnJheSAuM3MgZWFzZSAwcywgc3Ryb2tlIC4zcywgc3Ryb2tlLXdpZHRoIC4wNnMgZWFzZSAuM3MnXHJcbiAgICB9O1xyXG4gIH1cclxufVxyXG4iXX0=