@crediblefinance/credible-ui
Version:
Credible's standard UI library
75 lines • 12 kB
JavaScript
import { Component, Input } from '@angular/core';
import { getDocument } from 'ssr-window';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class CfCircularProgressBarComponent {
progress = 70;
showAnimation = true;
theme = 'dark';
id = 'cf-circular-progress-bar-' + Math.random().toString(36).substring(7);
animationDuration = 10;
animationDelay = 0;
animationStep = 1;
setIntervalId;
startProgress = 0;
endProgress = this.progress;
document = getDocument();
ngOnInit() {
this.start(this.progress, this.showAnimation);
}
ngOnChanges(changes) {
if (changes['showAnimation']) {
const currentValue = changes['showAnimation'].currentValue;
if (currentValue)
setTimeout(() => this.startAnimation(), 200);
}
if (changes['progress']) {
const currentValue = changes['progress'].currentValue;
if (currentValue)
this.start(currentValue, this.showAnimation);
}
}
start(progress, showAnimation) {
if (showAnimation)
setTimeout(() => this.startAnimation(), 200);
else
setTimeout(() => this.setProgress(progress), 100);
}
startAnimation() {
this.startProgress = 0;
this.setIntervalId = setInterval(() => {
// console.log('startProgress', this.startProgress, 'endProgress', this.endProgress);
if (this.startProgress >= this.endProgress)
return clearInterval(this.setIntervalId);
this.setProgress(this.startProgress);
if (this.startProgress + this.animationStep >= this.endProgress)
this.startProgress = this.endProgress;
else
this.startProgress += this.animationStep;
}, this.animationDuration);
}
setProgress(progress) {
const outside_cicle = this.document.getElementById(this.id);
if (outside_cicle) {
const progressAngle = `${progress * 360 / 100}deg`;
console.log('progressAngle', progressAngle);
outside_cicle.style.setProperty('--progress', progressAngle);
}
}
ngOnDestroy() {
clearInterval(this.setIntervalId);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfCircularProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: CfCircularProgressBarComponent, selector: "cf-circular-progress-bar", inputs: { progress: "progress", showAnimation: "showAnimation", theme: "theme" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"outside-circle\" [id]=\"id\" [ngClass]=\"theme\">\n <div class=\"inside-circle\" [ngClass]=\"theme\">\n </div>\n</div>", styles: ["@property --progress{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}.outside-circle{height:25px;width:25px;border-radius:50%;align-items:center;display:grid}.outside-circle.dark{background-image:conic-gradient(#cf0 0deg var(--progress),black var(--progress))}.outside-circle.light{background-image:conic-gradient(#cf0 0deg var(--progress),white var(--progress))}.inside-circle{width:80%;height:80%;border-radius:50%;margin:auto}.inside-circle.dark{background:#17181C}.inside-circle.light{background:white}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfCircularProgressBarComponent, decorators: [{
type: Component,
args: [{ selector: 'cf-circular-progress-bar', template: "<div class=\"outside-circle\" [id]=\"id\" [ngClass]=\"theme\">\n <div class=\"inside-circle\" [ngClass]=\"theme\">\n </div>\n</div>", styles: ["@property --progress{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}.outside-circle{height:25px;width:25px;border-radius:50%;align-items:center;display:grid}.outside-circle.dark{background-image:conic-gradient(#cf0 0deg var(--progress),black var(--progress))}.outside-circle.light{background-image:conic-gradient(#cf0 0deg var(--progress),white var(--progress))}.inside-circle{width:80%;height:80%;border-radius:50%;margin:auto}.inside-circle.dark{background:#17181C}.inside-circle.light{background:white}\n"] }]
}], propDecorators: { progress: [{
type: Input
}], showAnimation: [{
type: Input
}], theme: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2YtY2lyY3VsYXItcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NyZWRpYmxlLXVpL3NyYy9saWIvY2YtY2lyY3VsYXItcHJvZ3Jlc3MtYmFyL2NmLWNpcmN1bGFyLXByb2dyZXNzLWJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jcmVkaWJsZS11aS9zcmMvbGliL2NmLWNpcmN1bGFyLXByb2dyZXNzLWJhci9jZi1jaXJjdWxhci1wcm9ncmVzcy1iYXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILFNBQVMsRUFBRSxLQUFLLEVBS25CLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxZQUFZLENBQUM7OztBQU96QyxNQUFNLE9BQU8sOEJBQThCO0lBQzlCLFFBQVEsR0FBVyxFQUFFLENBQUM7SUFDdEIsYUFBYSxHQUFZLElBQUksQ0FBQztJQUM5QixLQUFLLEdBQVcsTUFBTSxDQUFDO0lBRWhDLEVBQUUsR0FBVywyQkFBMkIsR0FBRyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsUUFBUSxDQUFDLEVBQUUsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUNuRixpQkFBaUIsR0FBVyxFQUFFLENBQUM7SUFDL0IsY0FBYyxHQUFXLENBQUMsQ0FBQztJQUMzQixhQUFhLEdBQVcsQ0FBQyxDQUFDO0lBQzFCLGFBQWEsQ0FBTTtJQUNuQixhQUFhLEdBQVcsQ0FBQyxDQUFDO0lBQzFCLFdBQVcsR0FBVyxJQUFJLENBQUMsUUFBUSxDQUFDO0lBQ3BDLFFBQVEsR0FBRyxXQUFXLEVBQUUsQ0FBQztJQUV6QixRQUFRO1FBQ0osSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUNsRCxDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQzlCLElBQUksT0FBTyxDQUFDLGVBQWUsQ0FBQyxFQUFFO1lBQzFCLE1BQU0sWUFBWSxHQUFHLE9BQU8sQ0FBQyxlQUFlLENBQUMsQ0FBQyxZQUFZLENBQUM7WUFFM0QsSUFBSSxZQUFZO2dCQUNaLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFLEVBQUUsR0FBRyxDQUFDLENBQUM7U0FDcEQ7UUFFRCxJQUFJLE9BQU8sQ0FBQyxVQUFVLENBQUMsRUFBRTtZQUNyQixNQUFNLFlBQVksR0FBRyxPQUFPLENBQUMsVUFBVSxDQUFDLENBQUMsWUFBWSxDQUFDO1lBRXRELElBQUksWUFBWTtnQkFDWixJQUFJLENBQUMsS0FBSyxDQUFDLFlBQVksRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7U0FDcEQ7SUFDTCxDQUFDO0lBRUQsS0FBSyxDQUFDLFFBQWdCLEVBQUUsYUFBc0I7UUFDMUMsSUFBSSxhQUFhO1lBQ2IsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsRUFBRSxHQUFHLENBQUMsQ0FBQzs7WUFHN0MsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7SUFDMUQsQ0FBQztJQUVELGNBQWM7UUFDVixJQUFJLENBQUMsYUFBYSxHQUFHLENBQUMsQ0FBQztRQUV2QixJQUFJLENBQUMsYUFBYSxHQUFHLFdBQVcsQ0FBQyxHQUFHLEVBQUU7WUFDbEMscUZBQXFGO1lBRXJGLElBQUksSUFBSSxDQUFDLGFBQWEsSUFBSSxJQUFJLENBQUMsV0FBVztnQkFDdEMsT0FBTyxhQUFhLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1lBRTdDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1lBRXJDLElBQUksSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxJQUFJLElBQUksQ0FBQyxXQUFXO2dCQUMzRCxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUM7O2dCQUd0QyxJQUFJLENBQUMsYUFBYSxJQUFJLElBQUksQ0FBQyxhQUFhLENBQUM7UUFDakQsQ0FBQyxFQUFFLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO0lBQy9CLENBQUM7SUFFRCxXQUFXLENBQUMsUUFBZ0I7UUFDeEIsTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBRTVELElBQUksYUFBYSxFQUFFO1lBQ2YsTUFBTSxhQUFhLEdBQUcsR0FBRyxRQUFRLEdBQUcsR0FBRyxHQUFHLEdBQUcsS0FBSyxDQUFDO1lBRW5ELE9BQU8sQ0FBQyxHQUFHLENBQUMsZUFBZSxFQUFFLGFBQWEsQ0FBQyxDQUFDO1lBRTVDLGFBQWEsQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLFlBQVksRUFBRSxhQUFhLENBQUMsQ0FBQztTQUNoRTtJQUNMLENBQUM7SUFFRCxXQUFXO1FBQ1AsYUFBYSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUN0QyxDQUFDO3VHQTNFUSw4QkFBOEI7MkZBQTlCLDhCQUE4Qix1S0NkM0MsMklBR007OzJGRFdPLDhCQUE4QjtrQkFMMUMsU0FBUzsrQkFDSSwwQkFBMEI7OEJBSzNCLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIENvbXBvbmVudCwgSW5wdXQsIFxuICAgIE9uQ2hhbmdlcywgXG4gICAgT25EZXN0cm95LCBcbiAgICBPbkluaXQsXG4gICAgU2ltcGxlQ2hhbmdlc1xufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGdldERvY3VtZW50IH0gZnJvbSAnc3NyLXdpbmRvdyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnY2YtY2lyY3VsYXItcHJvZ3Jlc3MtYmFyJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vY2YtY2lyY3VsYXItcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybDogJy4vY2YtY2lyY3VsYXItcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5zY3NzJ1xufSlcbmV4cG9ydCBjbGFzcyBDZkNpcmN1bGFyUHJvZ3Jlc3NCYXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSwgT25DaGFuZ2VzIHtcbiAgICBASW5wdXQoKSBwcm9ncmVzczogbnVtYmVyID0gNzA7XG4gICAgQElucHV0KCkgc2hvd0FuaW1hdGlvbjogYm9vbGVhbiA9IHRydWU7XG4gICAgQElucHV0KCkgdGhlbWU6IHN0cmluZyA9ICdkYXJrJztcbiAgICBcbiAgICBpZDogc3RyaW5nID0gJ2NmLWNpcmN1bGFyLXByb2dyZXNzLWJhci0nICsgTWF0aC5yYW5kb20oKS50b1N0cmluZygzNikuc3Vic3RyaW5nKDcpO1xuICAgIGFuaW1hdGlvbkR1cmF0aW9uOiBudW1iZXIgPSAxMDtcbiAgICBhbmltYXRpb25EZWxheTogbnVtYmVyID0gMDtcbiAgICBhbmltYXRpb25TdGVwOiBudW1iZXIgPSAxO1xuICAgIHNldEludGVydmFsSWQ6IGFueTtcbiAgICBzdGFydFByb2dyZXNzOiBudW1iZXIgPSAwO1xuICAgIGVuZFByb2dyZXNzOiBudW1iZXIgPSB0aGlzLnByb2dyZXNzO1xuICAgIGRvY3VtZW50ID0gZ2V0RG9jdW1lbnQoKTtcblxuICAgIG5nT25Jbml0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLnN0YXJ0KHRoaXMucHJvZ3Jlc3MsIHRoaXMuc2hvd0FuaW1hdGlvbik7XG4gICAgfVxuXG4gICAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgICAgICBpZiAoY2hhbmdlc1snc2hvd0FuaW1hdGlvbiddKSB7XG4gICAgICAgICAgICBjb25zdCBjdXJyZW50VmFsdWUgPSBjaGFuZ2VzWydzaG93QW5pbWF0aW9uJ10uY3VycmVudFZhbHVlO1xuXG4gICAgICAgICAgICBpZiAoY3VycmVudFZhbHVlKVxuICAgICAgICAgICAgICAgIHNldFRpbWVvdXQoKCkgPT4gdGhpcy5zdGFydEFuaW1hdGlvbigpLCAyMDApO1xuICAgICAgICB9XG5cbiAgICAgICAgaWYgKGNoYW5nZXNbJ3Byb2dyZXNzJ10pIHtcbiAgICAgICAgICAgIGNvbnN0IGN1cnJlbnRWYWx1ZSA9IGNoYW5nZXNbJ3Byb2dyZXNzJ10uY3VycmVudFZhbHVlO1xuXG4gICAgICAgICAgICBpZiAoY3VycmVudFZhbHVlKVxuICAgICAgICAgICAgICAgIHRoaXMuc3RhcnQoY3VycmVudFZhbHVlLCB0aGlzLnNob3dBbmltYXRpb24pO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgc3RhcnQocHJvZ3Jlc3M6IG51bWJlciwgc2hvd0FuaW1hdGlvbjogYm9vbGVhbikge1xuICAgICAgICBpZiAoc2hvd0FuaW1hdGlvbilcbiAgICAgICAgICAgIHNldFRpbWVvdXQoKCkgPT4gdGhpcy5zdGFydEFuaW1hdGlvbigpLCAyMDApO1xuXG4gICAgICAgIGVsc2VcbiAgICAgICAgICAgIHNldFRpbWVvdXQoKCkgPT4gdGhpcy5zZXRQcm9ncmVzcyhwcm9ncmVzcyksIDEwMCk7XG4gICAgfVxuXG4gICAgc3RhcnRBbmltYXRpb24oKSB7XG4gICAgICAgIHRoaXMuc3RhcnRQcm9ncmVzcyA9IDA7XG5cbiAgICAgICAgdGhpcy5zZXRJbnRlcnZhbElkID0gc2V0SW50ZXJ2YWwoKCkgPT4ge1xuICAgICAgICAgICAgLy8gY29uc29sZS5sb2coJ3N0YXJ0UHJvZ3Jlc3MnLCB0aGlzLnN0YXJ0UHJvZ3Jlc3MsICdlbmRQcm9ncmVzcycsIHRoaXMuZW5kUHJvZ3Jlc3MpO1xuXG4gICAgICAgICAgICBpZiAodGhpcy5zdGFydFByb2dyZXNzID49IHRoaXMuZW5kUHJvZ3Jlc3MpXG4gICAgICAgICAgICAgICAgcmV0dXJuIGNsZWFySW50ZXJ2YWwodGhpcy5zZXRJbnRlcnZhbElkKTtcblxuICAgICAgICAgICAgdGhpcy5zZXRQcm9ncmVzcyh0aGlzLnN0YXJ0UHJvZ3Jlc3MpO1xuXG4gICAgICAgICAgICBpZiAodGhpcy5zdGFydFByb2dyZXNzICsgdGhpcy5hbmltYXRpb25TdGVwID49IHRoaXMuZW5kUHJvZ3Jlc3MpXG4gICAgICAgICAgICAgICAgdGhpcy5zdGFydFByb2dyZXNzID0gdGhpcy5lbmRQcm9ncmVzcztcbiAgICAgICAgICAgIFxuICAgICAgICAgICAgZWxzZSBcbiAgICAgICAgICAgICAgICB0aGlzLnN0YXJ0UHJvZ3Jlc3MgKz0gdGhpcy5hbmltYXRpb25TdGVwO1xuICAgICAgICB9LCB0aGlzLmFuaW1hdGlvbkR1cmF0aW9uKTtcbiAgICB9XG5cbiAgICBzZXRQcm9ncmVzcyhwcm9ncmVzczogbnVtYmVyKSB7XG4gICAgICAgIGNvbnN0IG91dHNpZGVfY2ljbGUgPSB0aGlzLmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKHRoaXMuaWQpO1xuXG4gICAgICAgIGlmIChvdXRzaWRlX2NpY2xlKSB7XG4gICAgICAgICAgICBjb25zdCBwcm9ncmVzc0FuZ2xlID0gYCR7cHJvZ3Jlc3MgKiAzNjAgLyAxMDB9ZGVnYDtcblxuICAgICAgICAgICAgY29uc29sZS5sb2coJ3Byb2dyZXNzQW5nbGUnLCBwcm9ncmVzc0FuZ2xlKTtcblxuICAgICAgICAgICAgb3V0c2lkZV9jaWNsZS5zdHlsZS5zZXRQcm9wZXJ0eSgnLS1wcm9ncmVzcycsIHByb2dyZXNzQW5nbGUpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgICAgIGNsZWFySW50ZXJ2YWwodGhpcy5zZXRJbnRlcnZhbElkKTtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwib3V0c2lkZS1jaXJjbGVcIiBbaWRdPVwiaWRcIiBbbmdDbGFzc109XCJ0aGVtZVwiPlxuICAgIDxkaXYgY2xhc3M9XCJpbnNpZGUtY2lyY2xlXCIgW25nQ2xhc3NdPVwidGhlbWVcIj5cbiAgICA8L2Rpdj5cbjwvZGl2PiJdfQ==