ng-cw-v12
Version:
Angular UI component library
67 lines • 9.14 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class WaveProgressComponent {
constructor(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
};
}
set ncPercent(value) {
this.percent = value;
setTimeout(() => {
//加延迟，防止其他传入参数未获取到
this.setTop();
});
}
;
set ncShowInfo(value) {
this.showInfoMode = value !== null && value !== undefined && value !== false && value !== 'false';
}
ngOnInit() {
}
setTop() {
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);
}
}
WaveProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: WaveProgressComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
WaveProgressComponent.ɵcmp = i0.ɵɵ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, 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: WaveProgressComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-wave-progress',
templateUrl: './wave-progress.component.html',
styleUrls: ['./wave-progress.component.less']
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { ncPercent: [{
type: Input
}], ncWidth: [{
type: Input
}], ncBorderColor: [{
type: Input
}], ncColor: [{
type: Input
}], ncWaveColor: [{
type: Input
}], ncShowInfo: [{
type: Input
}], ncSpeed: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2F2ZS1wcm9ncmVzcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3dhdmUtcHJvZ3Jlc3Mvd2F2ZS1wcm9ncmVzcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3dhdmUtcHJvZ3Jlc3Mvd2F2ZS1wcm9ncmVzcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQzs7O0FBT3JFLE1BQU0sT0FBTyxxQkFBcUI7SUE0QmhDLFlBQW9CLE1BQWtCO1FBQWxCLFdBQU0sR0FBTixNQUFNLENBQVk7UUFwQjdCLFlBQU8sR0FBVyxHQUFHLENBQUM7UUFDdEIsa0JBQWEsR0FBVyxTQUFTLENBQUM7UUFDbEMsWUFBTyxHQUFXLFdBQVcsQ0FBQztRQUM5QixnQkFBVyxHQUFXLFNBQVMsQ0FBQztRQUl6QyxpQkFBWSxHQUFZLElBQUksQ0FBQztRQUNwQixZQUFPLEdBQTBELFNBQVMsQ0FBQztRQUNwRixZQUFPLEdBQVcsQ0FBQyxDQUFDO1FBQ3BCLGdCQUFXLEdBQVcsQ0FBQyxDQUFDLENBQUEsSUFBSTtRQUM1QixhQUFRLEdBQVcsRUFBRSxDQUFDLENBQUEsSUFBSTtRQUMxQixjQUFTLEdBQVE7WUFDZixRQUFRLEVBQUUsQ0FBQztZQUNYLElBQUksRUFBRSxDQUFDO1lBQ1AsT0FBTyxFQUFFLENBQUM7WUFDVixJQUFJLEVBQUUsQ0FBQztZQUNQLFFBQVEsRUFBRSxFQUFFO1NBQ2IsQ0FBQztJQUV3QyxDQUFDO0lBM0IzQyxJQUFhLFNBQVMsQ0FBQyxLQUFhO1FBQ2xDLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO1FBQ3JCLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZCxrQkFBa0I7WUFDbEIsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ2hCLENBQUMsQ0FBQyxDQUFBO0lBQ0osQ0FBQztJQUFBLENBQUM7SUFLRixJQUFhLFVBQVUsQ0FBQyxLQUF1QjtRQUM3QyxJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssS0FBSyxJQUFJLElBQUksS0FBSyxLQUFLLFNBQVMsSUFBSSxLQUFLLEtBQUssS0FBSyxJQUFJLEtBQUssS0FBSyxPQUFPLENBQUM7SUFDcEcsQ0FBQztJQWdCRCxRQUFRO0lBQ1IsQ0FBQztJQUVELE1BQU07UUFDSixJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLENBQUMsS0FBSyxDQUFDLEdBQUcsR0FBRyxHQUFHLElBQUksQ0FBQyxPQUFPLEdBQUcsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLE9BQU8sR0FBRyxHQUFHLENBQUMsSUFBSSxDQUFDO1FBQzVHLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxDQUFDO1FBQ2hELElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQyxDQUFDO0lBQ3RELENBQUM7O2tIQXJDVSxxQkFBcUI7c0dBQXJCLHFCQUFxQiw4T0NQbEMsNGVBT007MkZEQU8scUJBQXFCO2tCQUxqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxrQkFBa0I7b0JBQzVCLFdBQVcsRUFBRSxnQ0FBZ0M7b0JBQzdDLFNBQVMsRUFBRSxDQUFDLGdDQUFnQyxDQUFDO2lCQUM5QztpR0FFYyxTQUFTO3NCQUFyQixLQUFLO2dCQU9HLE9BQU87c0JBQWYsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNPLFVBQVU7c0JBQXRCLEtBQUs7Z0JBSUcsT0FBTztzQkFBZixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25jLXdhdmUtcHJvZ3Jlc3MnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi93YXZlLXByb2dyZXNzLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi93YXZlLXByb2dyZXNzLmNvbXBvbmVudC5sZXNzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFdhdmVQcm9ncmVzc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgQElucHV0KCkgc2V0IG5jUGVyY2VudCh2YWx1ZTogbnVtYmVyKSB7XHJcbiAgICB0aGlzLnBlcmNlbnQgPSB2YWx1ZTtcclxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xyXG4gICAgICAvL+WKoOW7tui/n++8jOmYsuatouWFtuS7luS8oOWFpeWPguaVsOacquiOt+WPluWIsFxyXG4gICAgICB0aGlzLnNldFRvcCgpO1xyXG4gICAgfSlcclxuICB9O1xyXG4gIEBJbnB1dCgpIG5jV2lkdGg6IG51bWJlciA9IDEzMjtcclxuICBASW5wdXQoKSBuY0JvcmRlckNvbG9yOiBzdHJpbmcgPSAnIzE4OTBmZic7XHJcbiAgQElucHV0KCkgbmNDb2xvcjogc3RyaW5nID0gJyMwMDAwMDBkOSc7XHJcbiAgQElucHV0KCkgbmNXYXZlQ29sb3I6IHN0cmluZyA9ICcjNzRiY2ZmJztcclxuICBASW5wdXQoKSBzZXQgbmNTaG93SW5mbyh2YWx1ZTogYm9vbGVhbiB8IHN0cmluZykge1xyXG4gICAgdGhpcy5zaG93SW5mb01vZGUgPSB2YWx1ZSAhPT0gbnVsbCAmJiB2YWx1ZSAhPT0gdW5kZWZpbmVkICYmIHZhbHVlICE9PSBmYWxzZSAmJiB2YWx1ZSAhPT0gJ2ZhbHNlJztcclxuICB9XHJcbiAgc2hvd0luZm9Nb2RlOiBib29sZWFuID0gdHJ1ZTtcclxuICBASW5wdXQoKSBuY1NwZWVkOiAndmVyeVNsb3cnIHwgJ3Nsb3cnIHwgJ2RlZmF1bHQnIHwgJ2Zhc3QnIHwgJ3ZlcnlGYXN0JyA9ICdkZWZhdWx0JztcclxuICBwZXJjZW50OiBudW1iZXIgPSAwO1xyXG4gIGJvcmRlcldpZHRoOiBudW1iZXIgPSA1Oy8v6K6h566XXHJcbiAgZm9udFNpemU6IG51bWJlciA9IDMyOy8v6K6h566XXHJcbiAgc3BlZWRUeXBlOiBhbnkgPSB7XHJcbiAgICB2ZXJ5RmFzdDogMixcclxuICAgIGZhc3Q6IDQsXHJcbiAgICBkZWZhdWx0OiA2LFxyXG4gICAgc2xvdzogOCxcclxuICAgIHZlcnlTbG93OiAxMFxyXG4gIH07XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlUmVmOiBFbGVtZW50UmVmKSB7IH1cclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgfVxyXG5cclxuICBzZXRUb3AoKSB7XHJcbiAgICB0aGlzLmVsZVJlZi5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3IoJy53YXZlJykuc3R5bGUudG9wID0gYCR7dGhpcy5uY1dpZHRoICogKDEgLSB0aGlzLnBlcmNlbnQgLyAxMDApfXB4YDtcclxuICAgIHRoaXMuZm9udFNpemUgPSBNYXRoLnJvdW5kKHRoaXMubmNXaWR0aCAqIDAuMjQpO1xyXG4gICAgdGhpcy5ib3JkZXJXaWR0aCA9IE1hdGgucm91bmQodGhpcy5uY1dpZHRoICogMC4wMzgpO1xyXG4gIH1cclxufSIsIjxkaXYgY2xhc3M9XCJtYWluXCJcclxuICAgIFtuZ1N0eWxlXT1cInsnd2lkdGgnOiBuY1dpZHRoICsgJ3B4JywgJ2JvcmRlci13aWR0aCc6IGJvcmRlcldpZHRoICsgJ3B4JywgJ2JvcmRlci1jb2xvcic6IG5jQm9yZGVyQ29sb3J9XCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwibWFpbi1udW1iZXJcIiAqbmdJZj1cInNob3dJbmZvTW9kZVwiIFtuZ1N0eWxlXT1cInsnY29sb3InOiBuY0NvbG9yLCAnZm9udFNpemUnOiBmb250U2l6ZSArICdweCd9XCI+e3twZXJjZW50fX0lXHJcbiAgICA8L2Rpdj5cclxuICAgIDxkaXYgY2xhc3M9XCJ3YXZlXCJcclxuICAgICAgICBbbmdTdHlsZV09XCJ7J3dpZHRoJzogbmNXaWR0aCAqIDIgKyAncHgnLCAndG9wJzogbmNXaWR0aCArICdweCcsICdiYWNrZ3JvdW5kLWNvbG9yJzogbmNXYXZlQ29sb3IsICdhbmltYXRpb24tZHVyYXRpb24nOiBzcGVlZFR5cGVbbmNTcGVlZF0gKydzJ31cIj5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj4iXX0=