@obliczeniowo/elementary
Version:
Library made in Angular version 20
150 lines (145 loc) • 19.8 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: "20.0.4", ngImport: i0, type: BallProgressBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.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\">\n <defs>\n <clipPath [id]=\"clipEllipse\">\n <rect\n [id]=\"clipId\"\n width=\"30\"\n height=\"30\"\n x=\"7\"\n y=\"7\"\n />\n </clipPath>\n <linearGradient\n [id]=\"arrowsGradientIdA\"\n x1=\"-25\"\n y1=\"82.565887\"\n x2=\"110\"\n y2=\"97.519684\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"matrix(0.26458333,0,0,0.26458333,7.2193457,6.784673)\"\n >\n <stop\n style=\"stop-opacity: 1\"\n [style.stopColor]=\"arrowsColor\"\n offset=\"0\"\n />\n <stop\n style=\"stop-opacity: 0\"\n [style.stopColor]=\"arrowsColor\"\n offset=\"1\"\n />\n </linearGradient>\n <linearGradient\n [id]=\"arrowsGradientIdB\"\n x1=\"135\"\n y1=\"17.519686\"\n x2=\"5\"\n y2=\"2.519685\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"matrix(0.26458333,0,0,0.26458333,7.2193457,6.784673)\"\n >\n <stop\n style=\"stop-opacity: 1\"\n [style.stopColor]=\"arrowsColor\"\n offset=\"0\"\n />\n <stop\n style=\"stop-opacity: 0\"\n [style.stopColor]=\"arrowsColor\"\n offset=\"1\"\n />\n </linearGradient>\n <radialGradient\n [id]=\"radialGradientId\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"matrix(1.1262622,-0.03022646,0.03049644,1.1363218,-40.670291,-60.03214)\"\n cx=\"204.77902\"\n cy=\"485.77628\"\n fx=\"204.77902\"\n fy=\"485.77628\"\n r=\"138.66203\"\n >\n <stop style=\"stop-color: #ffffff; stop-opacity: 0\" offset=\"0\" />\n <stop\n offset=\"0.5\"\n style=\"stop-color: #787878; stop-opacity: 0.09803922\"\n />\n <stop style=\"stop-opacity: 1\" offset=\"1\" class=\"radialEnd\" />\n </radialGradient>\n <radialGradient>\n [id]=\"radialGradientId3\" gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"matrix(0.80638073,0.7197474,-3.3469402,3.7497994,2007.9864,-1714.776)\"\n cx=\"116.00802\" cy=\"593.23584\" fx=\"116.00802\" fy=\"593.23584\" r=\"139.16203\"\n >\n <stop offset=\"0\" style=\"stop-color: #ffffff; stop-opacity: 1\" />\n <stop style=\"stop-color: #000000; stop-opacity: 0\" offset=\"1\" />\n </radialGradient>\n\n <linearGradient\n [id]=\"reflectGradientId\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"293.89664\"\n y1=\"514.65094\"\n x2=\"257.98483\"\n y2=\"984.18085\"\n >\n <stop offset=\"0\" style=\"stop-color: #ffffff; stop-opacity: 1\" />\n <stop offset=\"1\" style=\"stop-color: #ffffff; stop-opacity: 0\" />\n </linearGradient>\n <radialGradient\n [id]=\"radialGradientId2\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"matrix(1.7056945,-0.04577718,0.04618605,1.7209295,-95.609541,-412.17419)\"\n cx=\"204.77902\"\n cy=\"485.77628\"\n fx=\"204.77902\"\n fy=\"485.77628\"\n r=\"138.66203\"\n >\n <stop style=\"stop-color: #ffffff; stop-opacity: 0\" offset=\"0\" />\n <stop\n offset=\"0.5\"\n style=\"stop-color: #787878; stop-opacity: 0.09803922\"\n />\n <stop style=\"stop-color: #000000; stop-opacity: 1\" offset=\"1\" />\n </radialGradient>\n </defs>\n\n <g inkscape:label=\"Layer 1\" inkscape:groupmode=\"layer\" id=\"layer1\">\n <circle\n style=\"fill: #5fbcd3; stroke: #000000; stroke-width: 0.4\"\n id=\"ballValue\"\n cx=\"22\"\n cy=\"22\"\n r=\"15\"\n [attr.clipPath]=\"'url(#' + clipEllipse + ')'\"\n />\n <circle\n style=\"\n opacity: 1;\n fill: none;\n fill-opacity: 1;\n stroke: #216778;\n stroke-width: 0.39687499;\n stroke-linecap: butt;\n stroke-linejoin: miter;\n stroke-miterlimit: 4;\n stroke-dasharray: none;\n stroke-dashoffset: 0;\n stroke-opacity: 1;\n \"\n cx=\"22\"\n cy=\"22\"\n r=\"15\"\n />\n <g [id]=\"spinningElementId\">\n <path\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\"\n [style.fill]=\"'url(#' + arrowsGradientIdA + ')'\"\n style=\"stroke-width: 0.4\"\n />\n <path\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\"\n [style.fill]=\"'url(#' + arrowsGradientIdB + ')'\"\n style=\"stroke-width: 0.4\"\n />\n </g>\n <text\n style=\"\n font-size: 5.3px;\n line-height: 1.25;\n font-family: sans-serif;\n text-align: center;\n text-anchor: middle;\n \"\n x=\"21.857889\"\n y=\"23.926239\"\n >\n <tspan x=\"21.857889\" y=\"23.926239\" style=\"stroke-width: 2\">\n {{ value() }}\n </tspan>\n </text>\n </g>\n <g\n transform=\"matrix(0.07304982,0,0,0.07304982,1.8297037,-8.2746411)\"\n [id]=\"effect3dId\"\n >\n <circle\n r=\"138.66203\"\n cy=\"485.77628\"\n cx=\"204.77902\"\n style=\"stroke: none\"\n [style.fill]=\"'url(#' + radialGradientId + ')'\"\n transform=\"matrix(1.5144737,0,0,1.5144737,-34.015451,-321.25708)\"\n />\n <circle\n r=\"138.66203\"\n cy=\"485.77628\"\n cx=\"204.77902\"\n class=\"frame\"\n transform=\"matrix(1.4188581,0,0,1.4188581,-14.435384,-274.80929)\"\n style=\"fill: none; stroke-width: 7\"\n [style.stroke]=\"'url(#' + radialGradientId3 + ')'\"\n />\n <ellipse\n ry=\"80.654366\"\n rx=\"232.01941\"\n cy=\"836.91559\"\n cx=\"265.16504\"\n style=\"fill-opacity: 1; stroke: none\"\n [style.fill]=\"'url(#' + reflectGradientId + ')'\"\n transform=\"matrix(0.44540226,0.32889474,-0.47439668,0.64244672,634.38064,-320.42106)\"\n />\n </g>\n</svg>\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: "20.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\">\n <defs>\n <clipPath [id]=\"clipEllipse\">\n <rect\n [id]=\"clipId\"\n width=\"30\"\n height=\"30\"\n x=\"7\"\n y=\"7\"\n />\n </clipPath>\n <linearGradient\n [id]=\"arrowsGradientIdA\"\n x1=\"-25\"\n y1=\"82.565887\"\n x2=\"110\"\n y2=\"97.519684\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"matrix(0.26458333,0,0,0.26458333,7.2193457,6.784673)\"\n >\n <stop\n style=\"stop-opacity: 1\"\n [style.stopColor]=\"arrowsColor\"\n offset=\"0\"\n />\n <stop\n style=\"stop-opacity: 0\"\n [style.stopColor]=\"arrowsColor\"\n offset=\"1\"\n />\n </linearGradient>\n <linearGradient\n [id]=\"arrowsGradientIdB\"\n x1=\"135\"\n y1=\"17.519686\"\n x2=\"5\"\n y2=\"2.519685\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"matrix(0.26458333,0,0,0.26458333,7.2193457,6.784673)\"\n >\n <stop\n style=\"stop-opacity: 1\"\n [style.stopColor]=\"arrowsColor\"\n offset=\"0\"\n />\n <stop\n style=\"stop-opacity: 0\"\n [style.stopColor]=\"arrowsColor\"\n offset=\"1\"\n />\n </linearGradient>\n <radialGradient\n [id]=\"radialGradientId\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"matrix(1.1262622,-0.03022646,0.03049644,1.1363218,-40.670291,-60.03214)\"\n cx=\"204.77902\"\n cy=\"485.77628\"\n fx=\"204.77902\"\n fy=\"485.77628\"\n r=\"138.66203\"\n >\n <stop style=\"stop-color: #ffffff; stop-opacity: 0\" offset=\"0\" />\n <stop\n offset=\"0.5\"\n style=\"stop-color: #787878; stop-opacity: 0.09803922\"\n />\n <stop style=\"stop-opacity: 1\" offset=\"1\" class=\"radialEnd\" />\n </radialGradient>\n <radialGradient>\n [id]=\"radialGradientId3\" gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"matrix(0.80638073,0.7197474,-3.3469402,3.7497994,2007.9864,-1714.776)\"\n cx=\"116.00802\" cy=\"593.23584\" fx=\"116.00802\" fy=\"593.23584\" r=\"139.16203\"\n >\n <stop offset=\"0\" style=\"stop-color: #ffffff; stop-opacity: 1\" />\n <stop style=\"stop-color: #000000; stop-opacity: 0\" offset=\"1\" />\n </radialGradient>\n\n <linearGradient\n [id]=\"reflectGradientId\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"293.89664\"\n y1=\"514.65094\"\n x2=\"257.98483\"\n y2=\"984.18085\"\n >\n <stop offset=\"0\" style=\"stop-color: #ffffff; stop-opacity: 1\" />\n <stop offset=\"1\" style=\"stop-color: #ffffff; stop-opacity: 0\" />\n </linearGradient>\n <radialGradient\n [id]=\"radialGradientId2\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"matrix(1.7056945,-0.04577718,0.04618605,1.7209295,-95.609541,-412.17419)\"\n cx=\"204.77902\"\n cy=\"485.77628\"\n fx=\"204.77902\"\n fy=\"485.77628\"\n r=\"138.66203\"\n >\n <stop style=\"stop-color: #ffffff; stop-opacity: 0\" offset=\"0\" />\n <stop\n offset=\"0.5\"\n style=\"stop-color: #787878; stop-opacity: 0.09803922\"\n />\n <stop style=\"stop-color: #000000; stop-opacity: 1\" offset=\"1\" />\n </radialGradient>\n </defs>\n\n <g inkscape:label=\"Layer 1\" inkscape:groupmode=\"layer\" id=\"layer1\">\n <circle\n style=\"fill: #5fbcd3; stroke: #000000; stroke-width: 0.4\"\n id=\"ballValue\"\n cx=\"22\"\n cy=\"22\"\n r=\"15\"\n [attr.clipPath]=\"'url(#' + clipEllipse + ')'\"\n />\n <circle\n style=\"\n opacity: 1;\n fill: none;\n fill-opacity: 1;\n stroke: #216778;\n stroke-width: 0.39687499;\n stroke-linecap: butt;\n stroke-linejoin: miter;\n stroke-miterlimit: 4;\n stroke-dasharray: none;\n stroke-dashoffset: 0;\n stroke-opacity: 1;\n \"\n cx=\"22\"\n cy=\"22\"\n r=\"15\"\n />\n <g [id]=\"spinningElementId\">\n <path\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\"\n [style.fill]=\"'url(#' + arrowsGradientIdA + ')'\"\n style=\"stroke-width: 0.4\"\n />\n <path\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\"\n [style.fill]=\"'url(#' + arrowsGradientIdB + ')'\"\n style=\"stroke-width: 0.4\"\n />\n </g>\n <text\n style=\"\n font-size: 5.3px;\n line-height: 1.25;\n font-family: sans-serif;\n text-align: center;\n text-anchor: middle;\n \"\n x=\"21.857889\"\n y=\"23.926239\"\n >\n <tspan x=\"21.857889\" y=\"23.926239\" style=\"stroke-width: 2\">\n {{ value() }}\n </tspan>\n </text>\n </g>\n <g\n transform=\"matrix(0.07304982,0,0,0.07304982,1.8297037,-8.2746411)\"\n [id]=\"effect3dId\"\n >\n <circle\n r=\"138.66203\"\n cy=\"485.77628\"\n cx=\"204.77902\"\n style=\"stroke: none\"\n [style.fill]=\"'url(#' + radialGradientId + ')'\"\n transform=\"matrix(1.5144737,0,0,1.5144737,-34.015451,-321.25708)\"\n />\n <circle\n r=\"138.66203\"\n cy=\"485.77628\"\n cx=\"204.77902\"\n class=\"frame\"\n transform=\"matrix(1.4188581,0,0,1.4188581,-14.435384,-274.80929)\"\n style=\"fill: none; stroke-width: 7\"\n [style.stroke]=\"'url(#' + radialGradientId3 + ')'\"\n />\n <ellipse\n ry=\"80.654366\"\n rx=\"232.01941\"\n cy=\"836.91559\"\n cx=\"265.16504\"\n style=\"fill-opacity: 1; stroke: none\"\n [style.fill]=\"'url(#' + reflectGradientId + ')'\"\n transform=\"matrix(0.44540226,0.32889474,-0.47439668,0.64244672,634.38064,-320.42106)\"\n />\n </g>\n</svg>\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: "20.0.4", ngImport: i0, type: BallProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: BallProgressBarModule, declarations: [BallProgressBarComponent], imports: [CommonModule], exports: [BallProgressBarComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: BallProgressBarModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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