@obliczeniowo/elementary
Version:
Library made in Angular version 20
127 lines (121 loc) • 7.85 kB
JavaScript
import * as i1 from '@obliczeniowo/elementary/icons';
import { IconsModule } from '@obliczeniowo/elementary/icons';
import * as i0 from '@angular/core';
import { ViewChild, Component, Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DrawingSvgInterface } from '@obliczeniowo/elementary/drawing';
import { Point2D } from '@obliczeniowo/elementary/classes';
class SpinnerComponent {
renderer;
dc;
time;
svg;
constructor(renderer) {
this.renderer = renderer;
}
ngAfterViewInit() {
this.dc = new DrawingSvgInterface(this.svg.nativeElement, this.renderer);
this.time = setInterval(() => { this.draw(new Date().getTime() / 100); }, 100);
}
draw(dt) {
this.dc.clear();
this.dc.drawArch(new Point2D(5, 5), 4, 4, 0, Math.sin(dt * 4 / 180 * Math.PI) * Math.PI * 0.6 + Math.PI * 1.3, 1.2, 'var(--obl-spinner-color, gold)');
}
ngOnDestroy() {
clearInterval(this.time);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SpinnerComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: SpinnerComponent, isStandalone: false, selector: "obl-spinner", viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true }], ngImport: i0, template: "<svg viewBox=\"0 0 10 10\" #svg></svg>", styles: [":host{display:flex;width:var(--obl-spinner-width)}svg{animation:rotation 1s infinite linear}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(-359deg)}}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SpinnerComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-spinner', standalone: false, template: "<svg viewBox=\"0 0 10 10\" #svg></svg>", styles: [":host{display:flex;width:var(--obl-spinner-width)}svg{animation:rotation 1s infinite linear}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(-359deg)}}\n"] }]
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { svg: [{
type: ViewChild,
args: ['svg']
}] } });
class LoadingStateComponent {
status = 'progress';
highlighted = [];
offset = 0;
ray = 6;
positions = [[0, 2], [0, 1], [0, 0], [1, 0], [1, 1], [1, 2]].map(v => {
return { x: this.ray + this.ray * 3 * (v[0] % 2), y: this.ray + v[1] * 3 * this.ray };
});
time;
ngOnInit() {
this.setTime();
}
ngOnDestroy() {
if (this.time) {
clearInterval(this.time);
}
}
ngOnChanges(changes) {
if (changes.status) {
switch (changes.status.currentValue) {
case 'done':
case 'failure':
case 'waiting': {
if (this.time) {
clearInterval(this.time);
this.time = undefined;
}
break;
}
case 'progress': {
if (!this.time) {
this.setTime();
}
}
}
}
}
setTime() {
if (!this.time) {
this.time = setInterval(() => {
this.offset = (this.offset + 1) % 6;
this.highlighted = [this.offset, (this.offset + 1) % 6, (this.offset + 2) % 6];
}, 100);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: LoadingStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: LoadingStateComponent, isStandalone: false, selector: "obl-loading-state", inputs: { status: "status" }, usesOnChanges: true, ngImport: i0, template: "@if (status === 'progress' || status === 'waiting') {\n <svg width=\"10\" viewBox=\"0 0 30 48\">\n @for (position of positions; track $index) {\n <circle\n [attr.cx]=\"position.x\"\n [attr.cy]=\"position.y\"\n [attr.r]=\"ray\"\n [class]=\"\n status === 'progress'\n ? highlighted.includes($index) && 'highlighted' || ''\n : ''\n \"\n ></circle>\n }\n </svg>\n} @else {\n @if (status === 'failure') {\n <obl-icon [name]=\"'cancel'\" class=\"cancel\" [width]=\"10\"></obl-icon>\n } @else if (status === 'done') {\n <obl-icon [name]=\"'ok'\" class=\"done\" [width]=\"15\"></obl-icon>\n }\n}\n", styles: ["svg circle{fill:#cecccc}svg circle.highlighted{fill:green}obl-icon.cancel{--obl-default-icon-color: var(--obl-default-error-color)}obl-icon.done{--obl-default-icon-color: green}:host{display:flex;width:15px;justify-content:center}\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: LoadingStateComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-loading-state', standalone: false, template: "@if (status === 'progress' || status === 'waiting') {\n <svg width=\"10\" viewBox=\"0 0 30 48\">\n @for (position of positions; track $index) {\n <circle\n [attr.cx]=\"position.x\"\n [attr.cy]=\"position.y\"\n [attr.r]=\"ray\"\n [class]=\"\n status === 'progress'\n ? highlighted.includes($index) && 'highlighted' || ''\n : ''\n \"\n ></circle>\n }\n </svg>\n} @else {\n @if (status === 'failure') {\n <obl-icon [name]=\"'cancel'\" class=\"cancel\" [width]=\"10\"></obl-icon>\n } @else if (status === 'done') {\n <obl-icon [name]=\"'ok'\" class=\"done\" [width]=\"15\"></obl-icon>\n }\n}\n", styles: ["svg circle{fill:#cecccc}svg circle.highlighted{fill:green}obl-icon.cancel{--obl-default-icon-color: var(--obl-default-error-color)}obl-icon.done{--obl-default-icon-color: green}:host{display:flex;width:15px;justify-content:center}\n"] }]
}], propDecorators: { status: [{
type: Input
}] } });
class LoadingModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: LoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: LoadingModule, declarations: [SpinnerComponent,
LoadingStateComponent], imports: [CommonModule,
IconsModule], exports: [SpinnerComponent,
LoadingStateComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: LoadingModule, imports: [CommonModule,
IconsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: LoadingModule, decorators: [{
type: NgModule,
args: [{
declarations: [
SpinnerComponent,
LoadingStateComponent
],
imports: [
CommonModule,
IconsModule
],
exports: [
SpinnerComponent,
LoadingStateComponent
],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { LoadingModule, LoadingStateComponent, SpinnerComponent };
//# sourceMappingURL=obliczeniowo-elementary-loading.mjs.map