ng-cw-v12
Version:
Angular UI component library
138 lines (129 loc) • 7.93 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ng-cw-v12/wave-progress', ['exports', '@angular/core', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["wave-progress"] = {}), global.ng.core, global.ng.common));
})(this, (function (exports, i0, i1) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
var WaveProgressComponent = /** @class */ (function () {
function WaveProgressComponent(eleRef) {
this.eleRef = eleRef;
this.ncWidth = 132;
this.ncBorderColor = '#1890ff';
this.ncColor = '#000000d9';
this.ncWaveColor = '#74bcff';
this.showInfoMode = true;
this.ncSpeed = 'default';
this.percent = 0;
this.borderWidth = 5; //计算
this.fontSize = 32; //计算
this.speedType = {
veryFast: 2,
fast: 4,
default: 6,
slow: 8,
verySlow: 10
};
}
Object.defineProperty(WaveProgressComponent.prototype, "ncPercent", {
set: function (value) {
var _this = this;
this.percent = value;
setTimeout(function () {
//加延迟，防止其他传入参数未获取到
_this.setTop();
});
},
enumerable: false,
configurable: true
});
;
Object.defineProperty(WaveProgressComponent.prototype, "ncShowInfo", {
set: function (value) {
this.showInfoMode = value !== null && value !== undefined && value !== false && value !== 'false';
},
enumerable: false,
configurable: true
});
WaveProgressComponent.prototype.ngOnInit = function () {
};
WaveProgressComponent.prototype.setTop = function () {
this.eleRef.nativeElement.querySelector('.wave').style.top = this.ncWidth * (1 - this.percent / 100) + "px";
this.fontSize = Math.round(this.ncWidth * 0.24);
this.borderWidth = Math.round(this.ncWidth * 0.038);
};
return WaveProgressComponent;
}());
WaveProgressComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: WaveProgressComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
WaveProgressComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: WaveProgressComponent, selector: "nc-wave-progress", inputs: { ncPercent: "ncPercent", ncWidth: "ncWidth", ncBorderColor: "ncBorderColor", ncColor: "ncColor", ncWaveColor: "ncWaveColor", ncShowInfo: "ncShowInfo", ncSpeed: "ncSpeed" }, ngImport: i0__namespace, template: "<div class=\"main\"\r\n [ngStyle]=\"{'width': ncWidth + 'px', 'border-width': borderWidth + 'px', 'border-color': ncBorderColor}\">\r\n <div class=\"main-number\" *ngIf=\"showInfoMode\" [ngStyle]=\"{'color': ncColor, 'fontSize': fontSize + 'px'}\">{{percent}}%\r\n </div>\r\n <div class=\"wave\"\r\n [ngStyle]=\"{'width': ncWidth * 2 + 'px', 'top': ncWidth + 'px', 'background-color': ncWaveColor, 'animation-duration': speedType[ncSpeed] +'s'}\">\r\n </div>\r\n</div>", styles: [".main{position:relative;aspect-ratio:1;border-radius:50%;background:#fff;display:flex;justify-content:center;align-items:center;overflow:hidden;border-style:solid}.main .main-number{z-index:1;-webkit-user-select:none;user-select:none}@keyframes rotateAnimation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.wave{position:absolute;aspect-ratio:1;border-radius:40%;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:rotateAnimation}\n"], directives: [{ type: i1__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: WaveProgressComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-wave-progress',
templateUrl: './wave-progress.component.html',
styleUrls: ['./wave-progress.component.less']
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { ncPercent: [{
type: i0.Input
}], ncWidth: [{
type: i0.Input
}], ncBorderColor: [{
type: i0.Input
}], ncColor: [{
type: i0.Input
}], ncWaveColor: [{
type: i0.Input
}], ncShowInfo: [{
type: i0.Input
}], ncSpeed: [{
type: i0.Input
}] } });
var NcWaveProgressModule = /** @class */ (function () {
function NcWaveProgressModule() {
}
return NcWaveProgressModule;
}());
NcWaveProgressModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcWaveProgressModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcWaveProgressModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcWaveProgressModule, declarations: [WaveProgressComponent], imports: [i1.CommonModule], exports: [WaveProgressComponent] });
NcWaveProgressModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcWaveProgressModule, imports: [[
i1.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcWaveProgressModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
WaveProgressComponent
],
imports: [
i1.CommonModule
],
exports: [
WaveProgressComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.NcWaveProgressModule = NcWaveProgressModule;
exports.WaveProgressComponent = WaveProgressComponent;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-wave-progress.umd.js.map