@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
144 lines (138 loc) • 7.95 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ng-devui/progress', ['exports', '@angular/core', '@angular/common'], factory) :
(global = global || self, factory((global['ng-devui'] = global['ng-devui'] || {}, global['ng-devui'].progress = {}), global.ng.core, global.ng.common));
}(this, (function (exports, core, common) { 'use strict';
/**
* added by tsickle
* Generated from: progress.component.ts
* {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
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: core.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: core.Input }],
percentageText: [{ type: core.Input }],
barbgcolor: [{ type: core.Input }],
height: [{ type: core.Input }],
strokeWidth: [{ type: core.Input }],
isCircle: [{ type: core.Input }],
customViewTemplate: [{ type: core.ContentChild, args: [core.TemplateRef, { static: false },] }]
};
return 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;
}
/**
* @fileoverview added by tsickle
* Generated from: progress.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ProgressModule = /** @class */ (function () {
function ProgressModule() {
}
ProgressModule.decorators = [
{ type: core.NgModule, args: [{
imports: [common.CommonModule],
exports: [ProgressComponent],
declarations: [ProgressComponent],
providers: [],
},] }
];
return ProgressModule;
}());
exports.ProgressComponent = ProgressComponent;
exports.ProgressModule = ProgressModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-devui-progress.umd.js.map