@obliczeniowo/elementary
Version:
Library made in Angular version 19
150 lines (145 loc) • 20.6 kB
JavaScript
import * as i0 from '@angular/core';
import { model, input, effect, Component, NgModule } from '@angular/core';
import { interval } from 'rxjs';
import { ColorRGB } from '@obliczeniowo/elementary/classes';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { CommonModule } from '@angular/common';
class BallProgressBarComponent {
elementRef;
spinnerTimer;
angle = 0;
pStartColor = new ColorRGB(255, 200, 0);
pEndColor = new ColorRGB(0, 200, 255);
/** id suffix */
suffix = Math.floor(Math.random() * 10000000);
clipId = 'ClipEllipseRect' + this.suffix;
clipEllipse = 'ClipEllipse' + this.suffix;
arrowsGradientIdA = 'arrowsGradientA' + this.suffix;
arrowsGradientIdB = 'arrowsGradientB' + this.suffix;
effect3dId = 'effect3did' + this.suffix;
radialGradientId = 'radialGradientId' + this.suffix;
radialGradientId2 = 'radialGradientId2' + this.suffix;
radialGradientId3 = 'radialGradientId3' + this.suffix;
effect3dClipPathId = 'effect3dClipPathId' + this.suffix;
reflectGradientId = 'reflectGradientId' + this.suffix;
radialGradientSubId3 = 'radialGradientSubId3' + this.suffix;
spinningElementId = 'spinningElementId' + this.suffix;
arrowsColor = 'white';
touched = false;
onChange = (value) => { };
onTouched = () => { };
writeValue(value) {
this.value.set(value);
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
registerOnValidatorChange(fn) {
this.onChange = fn;
}
markAsTouched() {
if (!this.touched) {
this.onTouched();
this.touched = true;
}
}
value = model(100);
effect3d = input(true);
set ballFillColor(color) {
if (this.elementRef) {
this.elementRef.nativeElement.querySelector('#ballValue').style.fill = color;
}
}
constructor(elementRef) {
this.elementRef = elementRef;
effect(() => {
this.set();
});
effect(() => {
this.setEffect();
});
}
setEffect() {
if (this.elementRef) {
const effect = this.elementRef.nativeElement.querySelector('#' + this.effect3dId);
if (effect) {
effect.style.display = this.effect3d() ? 'initial' : 'none';
}
}
}
set() {
const value = this.value();
this.markAsTouched();
this.onChange(value);
if (!this.elementRef) {
return;
}
this.elementRef.nativeElement.querySelector(`#${this.clipId}`)?.setAttribute('height', ((30 * value) / 100).toString());
this.elementRef.nativeElement.querySelector(`#${this.clipId}`)?.setAttribute('y', (37 - (30 * value) / 100).toString());
const color = ColorRGB.proportionalColor(this.pStartColor, this.pEndColor, value / 100).toString();
this.arrowsColor = color;
this.ballFillColor = color;
}
ngAfterViewInit() {
this.elementRef.nativeElement
.querySelector('#ballValue')
?.setAttribute('clip-path', `url(#${this.clipEllipse})`);
this.set();
this.setEffect();
this.spinnerTimer = interval(100).subscribe(() => {
this.angle = (this.angle + 15) % 360;
const spinner = this.elementRef.nativeElement.querySelector('#' + this.spinningElementId);
if (spinner) {
spinner.setAttribute('transform', `rotate(${this.angle}, 22, 22)`);
}
});
}
ngOnDestroy() {
this.spinnerTimer.unsubscribe();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BallProgressBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: BallProgressBarComponent, isStandalone: false, selector: "obl-ball-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, effect3d: { classPropertyName: "effect3d", publicName: "effect3d", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: BallProgressBarComponent,
},
], ngImport: i0, template: "<svg width=\"100%\" viewBox=\"0 0 44 44\">\r\n <defs>\r\n <clipPath [id]=\"clipEllipse\">\r\n <rect\r\n [id]=\"clipId\"\r\n width=\"30\"\r\n height=\"30\"\r\n x=\"7\"\r\n y=\"7\"\r\n />\r\n </clipPath>\r\n <linearGradient\r\n [id]=\"arrowsGradientIdA\"\r\n x1=\"-25\"\r\n y1=\"82.565887\"\r\n x2=\"110\"\r\n y2=\"97.519684\"\r\n gradientUnits=\"userSpaceOnUse\"\r\n gradientTransform=\"matrix(0.26458333,0,0,0.26458333,7.2193457,6.784673)\"\r\n >\r\n <stop\r\n style=\"stop-opacity: 1\"\r\n [style.stopColor]=\"arrowsColor\"\r\n offset=\"0\"\r\n />\r\n <stop\r\n style=\"stop-opacity: 0\"\r\n [style.stopColor]=\"arrowsColor\"\r\n offset=\"1\"\r\n />\r\n </linearGradient>\r\n <linearGradient\r\n [id]=\"arrowsGradientIdB\"\r\n x1=\"135\"\r\n y1=\"17.519686\"\r\n x2=\"5\"\r\n y2=\"2.519685\"\r\n gradientUnits=\"userSpaceOnUse\"\r\n gradientTransform=\"matrix(0.26458333,0,0,0.26458333,7.2193457,6.784673)\"\r\n >\r\n <stop\r\n style=\"stop-opacity: 1\"\r\n [style.stopColor]=\"arrowsColor\"\r\n offset=\"0\"\r\n />\r\n <stop\r\n style=\"stop-opacity: 0\"\r\n [style.stopColor]=\"arrowsColor\"\r\n offset=\"1\"\r\n />\r\n </linearGradient>\r\n <radialGradient\r\n [id]=\"radialGradientId\"\r\n gradientUnits=\"userSpaceOnUse\"\r\n gradientTransform=\"matrix(1.1262622,-0.03022646,0.03049644,1.1363218,-40.670291,-60.03214)\"\r\n cx=\"204.77902\"\r\n cy=\"485.77628\"\r\n fx=\"204.77902\"\r\n fy=\"485.77628\"\r\n r=\"138.66203\"\r\n >\r\n <stop style=\"stop-color: #ffffff; stop-opacity: 0\" offset=\"0\" />\r\n <stop\r\n offset=\"0.5\"\r\n style=\"stop-color: #787878; stop-opacity: 0.09803922\"\r\n />\r\n <stop style=\"stop-opacity: 1\" offset=\"1\" class=\"radialEnd\" />\r\n </radialGradient>\r\n <radialGradient>\r\n [id]=\"radialGradientId3\" gradientUnits=\"userSpaceOnUse\"\r\n gradientTransform=\"matrix(0.80638073,0.7197474,-3.3469402,3.7497994,2007.9864,-1714.776)\"\r\n cx=\"116.00802\" cy=\"593.23584\" fx=\"116.00802\" fy=\"593.23584\" r=\"139.16203\"\r\n >\r\n <stop offset=\"0\" style=\"stop-color: #ffffff; stop-opacity: 1\" />\r\n <stop style=\"stop-color: #000000; stop-opacity: 0\" offset=\"1\" />\r\n </radialGradient>\r\n\r\n <linearGradient\r\n [id]=\"reflectGradientId\"\r\n gradientUnits=\"userSpaceOnUse\"\r\n x1=\"293.89664\"\r\n y1=\"514.65094\"\r\n x2=\"257.98483\"\r\n y2=\"984.18085\"\r\n >\r\n <stop offset=\"0\" style=\"stop-color: #ffffff; stop-opacity: 1\" />\r\n <stop offset=\"1\" style=\"stop-color: #ffffff; stop-opacity: 0\" />\r\n </linearGradient>\r\n <radialGradient\r\n [id]=\"radialGradientId2\"\r\n gradientUnits=\"userSpaceOnUse\"\r\n gradientTransform=\"matrix(1.7056945,-0.04577718,0.04618605,1.7209295,-95.609541,-412.17419)\"\r\n cx=\"204.77902\"\r\n cy=\"485.77628\"\r\n fx=\"204.77902\"\r\n fy=\"485.77628\"\r\n r=\"138.66203\"\r\n >\r\n <stop style=\"stop-color: #ffffff; stop-opacity: 0\" offset=\"0\" />\r\n <stop\r\n offset=\"0.5\"\r\n style=\"stop-color: #787878; stop-opacity: 0.09803922\"\r\n />\r\n <stop style=\"stop-color: #000000; stop-opacity: 1\" offset=\"1\" />\r\n </radialGradient>\r\n </defs>\r\n\r\n <g inkscape:label=\"Layer 1\" inkscape:groupmode=\"layer\" id=\"layer1\">\r\n <circle\r\n style=\"fill: #5fbcd3; stroke: #000000; stroke-width: 0.4\"\r\n id=\"ballValue\"\r\n cx=\"22\"\r\n cy=\"22\"\r\n r=\"15\"\r\n [attr.clipPath]=\"'url(#' + clipEllipse + ')'\"\r\n />\r\n <circle\r\n style=\"\r\n opacity: 1;\r\n fill: none;\r\n fill-opacity: 1;\r\n stroke: #216778;\r\n stroke-width: 0.39687499;\r\n stroke-linecap: butt;\r\n stroke-linejoin: miter;\r\n stroke-miterlimit: 4;\r\n stroke-dasharray: none;\r\n stroke-dashoffset: 0;\r\n stroke-opacity: 1;\r\n \"\r\n cx=\"22\"\r\n cy=\"22\"\r\n r=\"15\"\r\n />\r\n <g [id]=\"spinningElementId\">\r\n <path\r\n d=\"M 3.2505956,15.388802 0.60476228,22.003386 H 2.1354182 C 2.2384003,31.823541 9.4801153,40.20366 19.278045,41.653865 27.741221,42.906514 35.876479,38.657621 39.833378,31.438986 L 37.689324,30.882947 C 34.067131,37.052777 26.982536,40.630531 19.592238,39.536683 10.82957,38.239709 4.3762188,30.781912 4.2748226,22.003386 H 5.896429 Z\"\r\n [style.fill]=\"'url(#' + arrowsGradientIdA + ')'\"\r\n style=\"stroke-width: 0.4\"\r\n />\r\n <path\r\n d=\"M 24.793987,2.3529021 C 34.591913,3.8031069 41.833628,12.18323 41.936609,22.003386 h 1.530657 l -2.645833,6.614583 -2.645834,-6.614583 h 1.621608 C 39.69581,13.224859 33.242458,5.7670596 24.479795,4.4700855 17.18015,3.3896542 10.17831,6.8670082 6.517063,12.897996 L 4.3580216,12.358494 C 7.9057261,6.0680237 14.64666,2.0866527 21.975555,2.1353442 c 0.931868,0.00619 1.873063,0.077632 2.818432,0.2175579 z\"\r\n [style.fill]=\"'url(#' + arrowsGradientIdB + ')'\"\r\n style=\"stroke-width: 0.4\"\r\n />\r\n </g>\r\n <text\r\n style=\"\r\n font-size: 5.3px;\r\n line-height: 1.25;\r\n font-family: sans-serif;\r\n text-align: center;\r\n text-anchor: middle;\r\n \"\r\n x=\"21.857889\"\r\n y=\"23.926239\"\r\n >\r\n <tspan x=\"21.857889\" y=\"23.926239\" style=\"stroke-width: 2\">\r\n {{ value() }}\r\n </tspan>\r\n </text>\r\n </g>\r\n <g\r\n transform=\"matrix(0.07304982,0,0,0.07304982,1.8297037,-8.2746411)\"\r\n [id]=\"effect3dId\"\r\n >\r\n <circle\r\n r=\"138.66203\"\r\n cy=\"485.77628\"\r\n cx=\"204.77902\"\r\n style=\"stroke: none\"\r\n [style.fill]=\"'url(#' + radialGradientId + ')'\"\r\n transform=\"matrix(1.5144737,0,0,1.5144737,-34.015451,-321.25708)\"\r\n />\r\n <circle\r\n r=\"138.66203\"\r\n cy=\"485.77628\"\r\n cx=\"204.77902\"\r\n class=\"frame\"\r\n transform=\"matrix(1.4188581,0,0,1.4188581,-14.435384,-274.80929)\"\r\n style=\"fill: none; stroke-width: 7\"\r\n [style.stroke]=\"'url(#' + radialGradientId3 + ')'\"\r\n />\r\n <ellipse\r\n ry=\"80.654366\"\r\n rx=\"232.01941\"\r\n cy=\"836.91559\"\r\n cx=\"265.16504\"\r\n style=\"fill-opacity: 1; stroke: none\"\r\n [style.fill]=\"'url(#' + reflectGradientId + ')'\"\r\n transform=\"matrix(0.44540226,0.32889474,-0.47439668,0.64244672,634.38064,-320.42106)\"\r\n />\r\n </g>\r\n</svg>\r\n", styles: [":host{display:flex}:host text{fill:var(--default-text-color)}:host .frame{stroke:var(--default-text-color)}:host .radialEnd{stop-color:var(--default-text-color)}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BallProgressBarComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-ball-progress-bar', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: BallProgressBarComponent,
},
], standalone: false, template: "<svg width=\"100%\" viewBox=\"0 0 44 44\">\r\n <defs>\r\n <clipPath [id]=\"clipEllipse\">\r\n <rect\r\n [id]=\"clipId\"\r\n width=\"30\"\r\n height=\"30\"\r\n x=\"7\"\r\n y=\"7\"\r\n />\r\n </clipPath>\r\n <linearGradient\r\n [id]=\"arrowsGradientIdA\"\r\n x1=\"-25\"\r\n y1=\"82.565887\"\r\n x2=\"110\"\r\n y2=\"97.519684\"\r\n gradientUnits=\"userSpaceOnUse\"\r\n gradientTransform=\"matrix(0.26458333,0,0,0.26458333,7.2193457,6.784673)\"\r\n >\r\n <stop\r\n style=\"stop-opacity: 1\"\r\n [style.stopColor]=\"arrowsColor\"\r\n offset=\"0\"\r\n />\r\n <stop\r\n style=\"stop-opacity: 0\"\r\n [style.stopColor]=\"arrowsColor\"\r\n offset=\"1\"\r\n />\r\n </linearGradient>\r\n <linearGradient\r\n [id]=\"arrowsGradientIdB\"\r\n x1=\"135\"\r\n y1=\"17.519686\"\r\n x2=\"5\"\r\n y2=\"2.519685\"\r\n gradientUnits=\"userSpaceOnUse\"\r\n gradientTransform=\"matrix(0.26458333,0,0,0.26458333,7.2193457,6.784673)\"\r\n >\r\n <stop\r\n style=\"stop-opacity: 1\"\r\n [style.stopColor]=\"arrowsColor\"\r\n offset=\"0\"\r\n />\r\n <stop\r\n style=\"stop-opacity: 0\"\r\n [style.stopColor]=\"arrowsColor\"\r\n offset=\"1\"\r\n />\r\n </linearGradient>\r\n <radialGradient\r\n [id]=\"radialGradientId\"\r\n gradientUnits=\"userSpaceOnUse\"\r\n gradientTransform=\"matrix(1.1262622,-0.03022646,0.03049644,1.1363218,-40.670291,-60.03214)\"\r\n cx=\"204.77902\"\r\n cy=\"485.77628\"\r\n fx=\"204.77902\"\r\n fy=\"485.77628\"\r\n r=\"138.66203\"\r\n >\r\n <stop style=\"stop-color: #ffffff; stop-opacity: 0\" offset=\"0\" />\r\n <stop\r\n offset=\"0.5\"\r\n style=\"stop-color: #787878; stop-opacity: 0.09803922\"\r\n />\r\n <stop style=\"stop-opacity: 1\" offset=\"1\" class=\"radialEnd\" />\r\n </radialGradient>\r\n <radialGradient>\r\n [id]=\"radialGradientId3\" gradientUnits=\"userSpaceOnUse\"\r\n gradientTransform=\"matrix(0.80638073,0.7197474,-3.3469402,3.7497994,2007.9864,-1714.776)\"\r\n cx=\"116.00802\" cy=\"593.23584\" fx=\"116.00802\" fy=\"593.23584\" r=\"139.16203\"\r\n >\r\n <stop offset=\"0\" style=\"stop-color: #ffffff; stop-opacity: 1\" />\r\n <stop style=\"stop-color: #000000; stop-opacity: 0\" offset=\"1\" />\r\n </radialGradient>\r\n\r\n <linearGradient\r\n [id]=\"reflectGradientId\"\r\n gradientUnits=\"userSpaceOnUse\"\r\n x1=\"293.89664\"\r\n y1=\"514.65094\"\r\n x2=\"257.98483\"\r\n y2=\"984.18085\"\r\n >\r\n <stop offset=\"0\" style=\"stop-color: #ffffff; stop-opacity: 1\" />\r\n <stop offset=\"1\" style=\"stop-color: #ffffff; stop-opacity: 0\" />\r\n </linearGradient>\r\n <radialGradient\r\n [id]=\"radialGradientId2\"\r\n gradientUnits=\"userSpaceOnUse\"\r\n gradientTransform=\"matrix(1.7056945,-0.04577718,0.04618605,1.7209295,-95.609541,-412.17419)\"\r\n cx=\"204.77902\"\r\n cy=\"485.77628\"\r\n fx=\"204.77902\"\r\n fy=\"485.77628\"\r\n r=\"138.66203\"\r\n >\r\n <stop style=\"stop-color: #ffffff; stop-opacity: 0\" offset=\"0\" />\r\n <stop\r\n offset=\"0.5\"\r\n style=\"stop-color: #787878; stop-opacity: 0.09803922\"\r\n />\r\n <stop style=\"stop-color: #000000; stop-opacity: 1\" offset=\"1\" />\r\n </radialGradient>\r\n </defs>\r\n\r\n <g inkscape:label=\"Layer 1\" inkscape:groupmode=\"layer\" id=\"layer1\">\r\n <circle\r\n style=\"fill: #5fbcd3; stroke: #000000; stroke-width: 0.4\"\r\n id=\"ballValue\"\r\n cx=\"22\"\r\n cy=\"22\"\r\n r=\"15\"\r\n [attr.clipPath]=\"'url(#' + clipEllipse + ')'\"\r\n />\r\n <circle\r\n style=\"\r\n opacity: 1;\r\n fill: none;\r\n fill-opacity: 1;\r\n stroke: #216778;\r\n stroke-width: 0.39687499;\r\n stroke-linecap: butt;\r\n stroke-linejoin: miter;\r\n stroke-miterlimit: 4;\r\n stroke-dasharray: none;\r\n stroke-dashoffset: 0;\r\n stroke-opacity: 1;\r\n \"\r\n cx=\"22\"\r\n cy=\"22\"\r\n r=\"15\"\r\n />\r\n <g [id]=\"spinningElementId\">\r\n <path\r\n d=\"M 3.2505956,15.388802 0.60476228,22.003386 H 2.1354182 C 2.2384003,31.823541 9.4801153,40.20366 19.278045,41.653865 27.741221,42.906514 35.876479,38.657621 39.833378,31.438986 L 37.689324,30.882947 C 34.067131,37.052777 26.982536,40.630531 19.592238,39.536683 10.82957,38.239709 4.3762188,30.781912 4.2748226,22.003386 H 5.896429 Z\"\r\n [style.fill]=\"'url(#' + arrowsGradientIdA + ')'\"\r\n style=\"stroke-width: 0.4\"\r\n />\r\n <path\r\n d=\"M 24.793987,2.3529021 C 34.591913,3.8031069 41.833628,12.18323 41.936609,22.003386 h 1.530657 l -2.645833,6.614583 -2.645834,-6.614583 h 1.621608 C 39.69581,13.224859 33.242458,5.7670596 24.479795,4.4700855 17.18015,3.3896542 10.17831,6.8670082 6.517063,12.897996 L 4.3580216,12.358494 C 7.9057261,6.0680237 14.64666,2.0866527 21.975555,2.1353442 c 0.931868,0.00619 1.873063,0.077632 2.818432,0.2175579 z\"\r\n [style.fill]=\"'url(#' + arrowsGradientIdB + ')'\"\r\n style=\"stroke-width: 0.4\"\r\n />\r\n </g>\r\n <text\r\n style=\"\r\n font-size: 5.3px;\r\n line-height: 1.25;\r\n font-family: sans-serif;\r\n text-align: center;\r\n text-anchor: middle;\r\n \"\r\n x=\"21.857889\"\r\n y=\"23.926239\"\r\n >\r\n <tspan x=\"21.857889\" y=\"23.926239\" style=\"stroke-width: 2\">\r\n {{ value() }}\r\n </tspan>\r\n </text>\r\n </g>\r\n <g\r\n transform=\"matrix(0.07304982,0,0,0.07304982,1.8297037,-8.2746411)\"\r\n [id]=\"effect3dId\"\r\n >\r\n <circle\r\n r=\"138.66203\"\r\n cy=\"485.77628\"\r\n cx=\"204.77902\"\r\n style=\"stroke: none\"\r\n [style.fill]=\"'url(#' + radialGradientId + ')'\"\r\n transform=\"matrix(1.5144737,0,0,1.5144737,-34.015451,-321.25708)\"\r\n />\r\n <circle\r\n r=\"138.66203\"\r\n cy=\"485.77628\"\r\n cx=\"204.77902\"\r\n class=\"frame\"\r\n transform=\"matrix(1.4188581,0,0,1.4188581,-14.435384,-274.80929)\"\r\n style=\"fill: none; stroke-width: 7\"\r\n [style.stroke]=\"'url(#' + radialGradientId3 + ')'\"\r\n />\r\n <ellipse\r\n ry=\"80.654366\"\r\n rx=\"232.01941\"\r\n cy=\"836.91559\"\r\n cx=\"265.16504\"\r\n style=\"fill-opacity: 1; stroke: none\"\r\n [style.fill]=\"'url(#' + reflectGradientId + ')'\"\r\n transform=\"matrix(0.44540226,0.32889474,-0.47439668,0.64244672,634.38064,-320.42106)\"\r\n />\r\n </g>\r\n</svg>\r\n", styles: [":host{display:flex}:host text{fill:var(--default-text-color)}:host .frame{stroke:var(--default-text-color)}:host .radialEnd{stop-color:var(--default-text-color)}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }] });
class BallProgressBarModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BallProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: BallProgressBarModule, declarations: [BallProgressBarComponent], imports: [CommonModule], exports: [BallProgressBarComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BallProgressBarModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BallProgressBarModule, decorators: [{
type: NgModule,
args: [{
declarations: [
BallProgressBarComponent
],
imports: [
CommonModule
],
exports: [
BallProgressBarComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { BallProgressBarComponent, BallProgressBarModule };
//# sourceMappingURL=obliczeniowo-elementary-ball-progress-bar.mjs.map