@obliczeniowo/elementary
Version:
Library made in Angular version 20
159 lines (154 loc) • 10.2 kB
JavaScript
import * as i1 from '@obliczeniowo/elementary/icons';
import { IconsModule } from '@obliczeniowo/elementary/icons';
import * as i0 from '@angular/core';
import { input, model, effect, Input, HostBinding, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DrawingSvgInterface } from '@obliczeniowo/elementary/drawing';
import { ColorHSV, ColorRGB, Point2D } from '@obliczeniowo/elementary/classes';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
class PieProgressComponent {
element;
renderer;
/**
* Progress status
*/
status = input('progress');
/**
* If interactive then let you set value by click by left mouse button inside of
* pie chart
*/
interactive = input(false);
/**
* Size of pie svg part
*/
size = input(30);
colorFn = input((value) => {
return ColorHSV.createColorHSVfromRGB(new ColorRGB(0, 100, 255))
.addHue((150 * this.value()) / 100)
.convertToRGB();
});
/**
* Control displaying description
*/
display = true;
click(event) {
if (this.interactive()) {
const domRect = this.svg.getBoundingClientRect();
const x = event.clientX - domRect.x - this.size() / 2;
const y = event.clientY - domRect.y - this.size() / 2;
let angle = (Math.atan2(y, x) * 180) / Math.PI;
if (angle < 0) {
angle += 360;
}
this.writeValue(Math.round((angle / 360) * 100));
this.onChange(this.value());
}
}
value = model(0);
fontSize = input();
column = false;
svg;
dc;
color = ColorHSV.createColorHSVfromRGB(new ColorRGB(0, 100, 255)).convertToRGB();
write = input((value) => `${value.toFixed()}%`);
constructor(element, renderer) {
this.element = element;
this.renderer = renderer;
effect(() => {
this.color = this.colorFn()(this.value());
this.draw();
});
}
onChange = (value) => { };
onTouched = () => { };
registerOnValidatorChange(fn) {
this.onChange = fn;
}
writeValue(set) {
this.value.set(set || 0);
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
ngAfterViewInit() {
this.draw();
}
ngAfterViewChecked() {
if (!this.svg) {
this.draw();
}
}
markAsTouched() {
this.onTouched();
}
draw() {
if (!this.svg) {
this.svg = this.element.nativeElement.querySelector('svg');
this.dc = new DrawingSvgInterface(this.svg, this.renderer);
}
if (this.dc) {
const center = new Point2D(5, 5);
this.dc.clear();
this.dc.drawCircle(center, 4.5, 0.7, this.color.toString());
this.dc.drawPie(center, 3.2, 3.2, 0, (Math.PI * 2 * this.value()) / 100, 0, undefined, this.color.toString());
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PieProgressComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: PieProgressComponent, isStandalone: false, selector: "obl-pie-progress", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, colorFn: { classPropertyName: "colorFn", publicName: "colorFn", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, fontSize: { classPropertyName: "fontSize", publicName: "fontSize", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: false, isRequired: false, transformFunction: null }, write: { classPropertyName: "write", publicName: "write", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.description": "this.display", "class.column": "this.column" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: PieProgressComponent,
},
], ngImport: i0, template: "<svg\n [attr.width]=\"size()\"\n [attr.height]=\"size()\"\n [style.display]=\"\n status() === 'progress' || status() === 'waiting' ? 'inherit' : 'none'\n \"\n viewBox=\"0 0 10 10\"\n (click)=\"click($event)\"\n></svg>\n@if (status() === 'failure' || status() === 'done') {\n <div\n [style.width.px]=\"size() - (1.84 * 2 * size()) / 20\"\n [style.height.px]=\"size() - (1.84 * 2 * size()) / 20\"\n [style.borderWidth.px]=\"(1.84 * size()) / 20\"\n [class.error]=\"status() === 'failure'\"\n [class.done]=\"status() === 'done'\"\n >\n <obl-icon\n [name]=\"status() === 'failure' ? 'cancel' : 'ok'\"\n [width]=\"status() === 'failure' ? size() * 0.45 : size() * 0.5\"\n ></obl-icon>\n </div>\n}\n@if (display) {\n <span\n [style.color]=\"color.toString()\"\n [style.font-size.px]=\"fontSize() || size() / 2\"\n >{{ write()(value()) }}</span\n >\n}\n", styles: [":host{display:flex;align-items:center}:host.description div,:host.description svg{margin-right:10px}:host div{border-radius:50%;display:flex;justify-content:center;align-items:center}:host div.error{border-style:solid;border-color:var(--obl-default-error-color)}:host div.error obl-icon{--obl-default-icon-color: var(--obl-default-error-color)}:host div.done{--obl-default-icon-color: green;border-style:solid;border-color:var(--obl-default-icon-color)}:host div.done obl-icon{--obl-default-icon-color: green}:host.column{flex-direction:column}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "obl-icon", inputs: ["name", "width"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PieProgressComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-pie-progress', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: PieProgressComponent,
},
], standalone: false, template: "<svg\n [attr.width]=\"size()\"\n [attr.height]=\"size()\"\n [style.display]=\"\n status() === 'progress' || status() === 'waiting' ? 'inherit' : 'none'\n \"\n viewBox=\"0 0 10 10\"\n (click)=\"click($event)\"\n></svg>\n@if (status() === 'failure' || status() === 'done') {\n <div\n [style.width.px]=\"size() - (1.84 * 2 * size()) / 20\"\n [style.height.px]=\"size() - (1.84 * 2 * size()) / 20\"\n [style.borderWidth.px]=\"(1.84 * size()) / 20\"\n [class.error]=\"status() === 'failure'\"\n [class.done]=\"status() === 'done'\"\n >\n <obl-icon\n [name]=\"status() === 'failure' ? 'cancel' : 'ok'\"\n [width]=\"status() === 'failure' ? size() * 0.45 : size() * 0.5\"\n ></obl-icon>\n </div>\n}\n@if (display) {\n <span\n [style.color]=\"color.toString()\"\n [style.font-size.px]=\"fontSize() || size() / 2\"\n >{{ write()(value()) }}</span\n >\n}\n", styles: [":host{display:flex;align-items:center}:host.description div,:host.description svg{margin-right:10px}:host div{border-radius:50%;display:flex;justify-content:center;align-items:center}:host div.error{border-style:solid;border-color:var(--obl-default-error-color)}:host div.error obl-icon{--obl-default-icon-color: var(--obl-default-error-color)}:host div.done{--obl-default-icon-color: green;border-style:solid;border-color:var(--obl-default-icon-color)}:host div.done obl-icon{--obl-default-icon-color: green}:host.column{flex-direction:column}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { display: [{
type: Input
}, {
type: HostBinding,
args: ['class.description']
}], column: [{
type: Input
}, {
type: HostBinding,
args: ['class.column']
}] } });
class PieProgressModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PieProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: PieProgressModule, declarations: [PieProgressComponent], imports: [CommonModule,
IconsModule], exports: [PieProgressComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PieProgressModule, imports: [CommonModule,
IconsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PieProgressModule, decorators: [{
type: NgModule,
args: [{
declarations: [
PieProgressComponent
],
imports: [
CommonModule,
IconsModule
],
exports: [
PieProgressComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PieProgressComponent, PieProgressModule };
//# sourceMappingURL=obliczeniowo-elementary-pie-progress.mjs.map