ng-cw-v12
Version:
Angular UI Component Library
75 lines • 10.1 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.ncPercent = 0;
/** 宽度 */
this.ncWidth = 132;
/** 边框颜色 */
this.ncBorderColor = '#1890ff';
/** 文字颜色 */
this.ncColor = '#000000d9';
/** 波浪颜色 */
this.ncWaveColor = '#74bcff';
/** 是否显示文字 */
this._showInfo = true;
/** 波浪速度 */
this.ncSpeed = 'default';
this.borderWidth = 5; //计算
this.fontSize = 32; //计算
this.speedType = {
veryFast: 2,
fast: 4,
default: 6,
slow: 8,
verySlow: 10
};
}
set ncShowInfo(value) {
this._showInfo = value !== null && value !== undefined && value !== false && value !== 'false';
}
get ncShowInfo() {
return this._showInfo;
}
ngAfterViewInit() {
this.setTop();
}
ngOnChanges(changes) {
if (changes['ncPercent'] && !changes['ncPercent'].firstChange) {
this.setTop();
}
}
setTop() {
this.eleRef.nativeElement.querySelector('.wave').style.top = `${this.ncWidth * (1 - this.ncPercent / 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" }, usesOnChanges: true, 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=\"ncShowInfo\" [ngStyle]=\"{'color': ncColor, 'fontSize': fontSize + 'px'}\">\r\n {{ncPercent}}%\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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2F2ZS1wcm9ncmVzcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3dhdmUtcHJvZ3Jlc3Mvd2F2ZS1wcm9ncmVzcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3dhdmUtcHJvZ3Jlc3Mvd2F2ZS1wcm9ncmVzcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLEtBQUssRUFBMkMsTUFBTSxlQUFlLENBQUM7OztBQVN0RyxNQUFNLE9BQU8scUJBQXFCO0lBZ0NoQyxZQUFvQixNQUFrQjtRQUFsQixXQUFNLEdBQU4sTUFBTSxDQUFZO1FBL0J0QyxTQUFTO1FBQ0EsY0FBUyxHQUFXLENBQUMsQ0FBQztRQUMvQixTQUFTO1FBQ0EsWUFBTyxHQUFXLEdBQUcsQ0FBQztRQUMvQixXQUFXO1FBQ0Ysa0JBQWEsR0FBVyxTQUFTLENBQUM7UUFDM0MsV0FBVztRQUNGLFlBQU8sR0FBVyxXQUFXLENBQUM7UUFDdkMsV0FBVztRQUNGLGdCQUFXLEdBQVcsU0FBUyxDQUFDO1FBQ3pDLGFBQWE7UUFDTCxjQUFTLEdBQVksSUFBSSxDQUFDO1FBT2xDLFdBQVc7UUFDRixZQUFPLEdBQWdCLFNBQVMsQ0FBQztRQUUxQyxnQkFBVyxHQUFXLENBQUMsQ0FBQyxDQUFBLElBQUk7UUFDNUIsYUFBUSxHQUFXLEVBQUUsQ0FBQyxDQUFBLElBQUk7UUFDMUIsY0FBUyxHQUFRO1lBQ2YsUUFBUSxFQUFFLENBQUM7WUFDWCxJQUFJLEVBQUUsQ0FBQztZQUNQLE9BQU8sRUFBRSxDQUFDO1lBQ1YsSUFBSSxFQUFFLENBQUM7WUFDUCxRQUFRLEVBQUUsRUFBRTtTQUNiLENBQUM7SUFFd0MsQ0FBQztJQW5CM0MsSUFBYSxVQUFVLENBQUMsS0FBdUI7UUFDN0MsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLEtBQUssSUFBSSxJQUFJLEtBQUssS0FBSyxTQUFTLElBQUksS0FBSyxLQUFLLEtBQUssSUFBSSxLQUFLLEtBQUssT0FBTyxDQUFDO0lBQ2pHLENBQUM7SUFDRCxJQUFJLFVBQVU7UUFDWixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUM7SUFDeEIsQ0FBQztJQWdCRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO0lBQ2hCLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsV0FBVyxDQUFDLENBQUMsV0FBVyxFQUFFO1lBQzdELElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztTQUNmO0lBQ0gsQ0FBQztJQUVELE1BQU07UUFDSixJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLENBQUMsS0FBSyxDQUFDLEdBQUcsR0FBRyxHQUFHLElBQUksQ0FBQyxPQUFPLEdBQUcsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLFNBQVMsR0FBRyxHQUFHLENBQUMsSUFBSSxDQUFDO1FBQzlHLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxDQUFDO1FBQ2hELElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQyxDQUFDO0lBQ3RELENBQUM7O2tIQWhEVSxxQkFBcUI7c0dBQXJCLHFCQUFxQixtUUNUbEMsd2ZBUU07MkZEQ08scUJBQXFCO2tCQUxqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxrQkFBa0I7b0JBQzVCLFdBQVcsRUFBRSxnQ0FBZ0M7b0JBQzdDLFNBQVMsRUFBRSxDQUFDLGdDQUFnQyxDQUFDO2lCQUM5QztpR0FHVSxTQUFTO3NCQUFqQixLQUFLO2dCQUVHLE9BQU87c0JBQWYsS0FBSztnQkFFRyxhQUFhO3NCQUFyQixLQUFLO2dCQUVHLE9BQU87c0JBQWYsS0FBSztnQkFFRyxXQUFXO3NCQUFuQixLQUFLO2dCQUdPLFVBQVU7c0JBQXRCLEtBQUs7Z0JBT0csT0FBTztzQkFBZixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBJbnB1dCwgT25DaGFuZ2VzLCBBZnRlclZpZXdJbml0LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5leHBvcnQgdHlwZSBOY1NwZWVkVHlwZSA9ICd2ZXJ5U2xvdycgfCAnc2xvdycgfCAnZGVmYXVsdCcgfCAnZmFzdCcgfCAndmVyeUZhc3QnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICduYy13YXZlLXByb2dyZXNzJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vd2F2ZS1wcm9ncmVzcy5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vd2F2ZS1wcm9ncmVzcy5jb21wb25lbnQubGVzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBXYXZlUHJvZ3Jlc3NDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkNoYW5nZXMge1xyXG4gIC8qKiDov5vluqYgKi9cclxuICBASW5wdXQoKSBuY1BlcmNlbnQ6IG51bWJlciA9IDA7XHJcbiAgLyoqIOWuveW6piAqL1xyXG4gIEBJbnB1dCgpIG5jV2lkdGg6IG51bWJlciA9IDEzMjtcclxuICAvKiog6L655qGG6aKc6ImyICovXHJcbiAgQElucHV0KCkgbmNCb3JkZXJDb2xvcjogc3RyaW5nID0gJyMxODkwZmYnO1xyXG4gIC8qKiDmloflrZfpopzoibIgKi9cclxuICBASW5wdXQoKSBuY0NvbG9yOiBzdHJpbmcgPSAnIzAwMDAwMGQ5JztcclxuICAvKiog5rOi5rWq6aKc6ImyICovXHJcbiAgQElucHV0KCkgbmNXYXZlQ29sb3I6IHN0cmluZyA9ICcjNzRiY2ZmJztcclxuICAvKiog5piv5ZCm5pi+56S65paH5a2XICovXHJcbiAgcHJpdmF0ZSBfc2hvd0luZm86IGJvb2xlYW4gPSB0cnVlO1xyXG4gIEBJbnB1dCgpIHNldCBuY1Nob3dJbmZvKHZhbHVlOiBib29sZWFuIHwgc3RyaW5nKSB7XHJcbiAgICB0aGlzLl9zaG93SW5mbyA9IHZhbHVlICE9PSBudWxsICYmIHZhbHVlICE9PSB1bmRlZmluZWQgJiYgdmFsdWUgIT09IGZhbHNlICYmIHZhbHVlICE9PSAnZmFsc2UnO1xyXG4gIH1cclxuICBnZXQgbmNTaG93SW5mbygpOiBib29sZWFuIHtcclxuICAgIHJldHVybiB0aGlzLl9zaG93SW5mbztcclxuICB9XHJcbiAgLyoqIOazoua1qumAn+W6piAqL1xyXG4gIEBJbnB1dCgpIG5jU3BlZWQ6IE5jU3BlZWRUeXBlID0gJ2RlZmF1bHQnO1xyXG5cclxuICBib3JkZXJXaWR0aDogbnVtYmVyID0gNTsvL+iuoeeul1xyXG4gIGZvbnRTaXplOiBudW1iZXIgPSAzMjsvL+iuoeeul1xyXG4gIHNwZWVkVHlwZTogYW55ID0ge1xyXG4gICAgdmVyeUZhc3Q6IDIsXHJcbiAgICBmYXN0OiA0LFxyXG4gICAgZGVmYXVsdDogNixcclxuICAgIHNsb3c6IDgsXHJcbiAgICB2ZXJ5U2xvdzogMTBcclxuICB9O1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsZVJlZjogRWxlbWVudFJlZikgeyB9XHJcblxyXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMuc2V0VG9wKCk7XHJcbiAgfVxyXG5cclxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XHJcbiAgICBpZiAoY2hhbmdlc1snbmNQZXJjZW50J10gJiYgIWNoYW5nZXNbJ25jUGVyY2VudCddLmZpcnN0Q2hhbmdlKSB7XHJcbiAgICAgIHRoaXMuc2V0VG9wKCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBzZXRUb3AoKSB7XHJcbiAgICB0aGlzLmVsZVJlZi5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3IoJy53YXZlJykuc3R5bGUudG9wID0gYCR7dGhpcy5uY1dpZHRoICogKDEgLSB0aGlzLm5jUGVyY2VudCAvIDEwMCl9cHhgO1xyXG4gICAgdGhpcy5mb250U2l6ZSA9IE1hdGgucm91bmQodGhpcy5uY1dpZHRoICogMC4yNCk7XHJcbiAgICB0aGlzLmJvcmRlcldpZHRoID0gTWF0aC5yb3VuZCh0aGlzLm5jV2lkdGggKiAwLjAzOCk7XHJcbiAgfVxyXG59IiwiPGRpdiBjbGFzcz1cIm1haW5cIlxyXG4gICAgW25nU3R5bGVdPVwieyd3aWR0aCc6IG5jV2lkdGggKyAncHgnLCAnYm9yZGVyLXdpZHRoJzogYm9yZGVyV2lkdGggKyAncHgnLCAnYm9yZGVyLWNvbG9yJzogbmNCb3JkZXJDb2xvcn1cIj5cclxuICAgIDxkaXYgY2xhc3M9XCJtYWluLW51bWJlclwiICpuZ0lmPVwibmNTaG93SW5mb1wiIFtuZ1N0eWxlXT1cInsnY29sb3InOiBuY0NvbG9yLCAnZm9udFNpemUnOiBmb250U2l6ZSArICdweCd9XCI+XHJcbiAgICAgICAge3tuY1BlcmNlbnR9fSVcclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiBjbGFzcz1cIndhdmVcIlxyXG4gICAgICAgIFtuZ1N0eWxlXT1cInsnd2lkdGgnOiBuY1dpZHRoICogMiArICdweCcsICd0b3AnOiBuY1dpZHRoICsgJ3B4JywgJ2JhY2tncm91bmQtY29sb3InOiBuY1dhdmVDb2xvciwgJ2FuaW1hdGlvbi1kdXJhdGlvbic6IHNwZWVkVHlwZVtuY1NwZWVkXSArJ3MnfVwiPlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PiJdfQ==