@obliczeniowo/elementary
Version:
Library made in Angular version 20
93 lines (88 loc) • 9.69 kB
JavaScript
import * as i0 from '@angular/core';
import { Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
/**
* Display table of 20 values
*/
class EqualizerComponent {
change;
/**
* 20 numbers table for equalizer of value from range 0-1
*/
data = new Array(20).fill(0);
random;
onChange = (value) => { };
onTouched = () => { };
registerOnValidatorChange(fn) { this.onChange = fn; }
;
writeValue(set) {
this.data = set?.slice(0, 20) || new Array(20).fill(0);
this.change.detectChanges();
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
ngOnChanges(changes) {
if (changes.data) {
this.writeValue(this.data);
}
}
constructor(change) {
this.change = change;
this.random = Math.ceil(Math.random() * 100000000) + '-' + Math.ceil(Math.random() * 100000000) + '-' + Math.ceil(Math.random() * 100000000);
}
/**
* Return index id of clipBar
*/
getId(index = 0) {
return 'clipBar' + index + this.random;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: EqualizerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: EqualizerComponent, isStandalone: false, selector: "obl-equalizer", inputs: { data: "data" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: EqualizerComponent
},
], usesOnChanges: true, ngImport: i0, template: "<svg width=\"100\" viewBox=\"0 0 52.122915 25.135417\">\n <defs>\n @for (item of data; track $index) {\n <clipPath\n [attr.id]=\"getId($index)\"\n >\n <rect\n width=\"1.3229166\"\n [attr.height]=\"22.489584 * item\"\n [attr.x]=\"1.322917 + $index * 2.5\"\n [attr.y]=\"282.44788 - 11.906257 + 22.489584 * (1 - item)\"\n />\n </clipPath>\n }\n </defs>\n <g\n transform=\"translate(0,-271.86456)\"\n >\n <path\n style=\"\n fill: none;\n stroke: #575656;\n stroke-width: 0.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n \"\n d=\"m 0.52916627,272.9229 4e-7,23.28333 H 51.59375 V 272.9229\"\n />\n @for (items of data; track $index) {\n <rect\n class=\"background-bar\"\n width=\"1.3229166\"\n height=\"22.489584\"\n [attr.x]=\"1.322917 + $index * 2.5\"\n y=\"272.92291\"\n />\n }\n\n @for (items of data; track $index) {\n <rect\n y=\"271.86456\"\n [attr.x]=\"1.322917 + $index * 2.5\"\n height=\"22.489584\"\n width=\"1.3229166\"\n class=\"bar-value\"\n [attr.clip-path]=\"'url(#' + getId($index) + ')'\"\n transform=\"translate(-1.3229163,1.0583333)\"\n />\n }\n </g>\n</svg>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}.background-bar{fill:var(--equalizer-background-bar-color)}.bar-value{fill:var(--equalizer-value-bar-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: EqualizerComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-equalizer', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: EqualizerComponent
},
], standalone: false, template: "<svg width=\"100\" viewBox=\"0 0 52.122915 25.135417\">\n <defs>\n @for (item of data; track $index) {\n <clipPath\n [attr.id]=\"getId($index)\"\n >\n <rect\n width=\"1.3229166\"\n [attr.height]=\"22.489584 * item\"\n [attr.x]=\"1.322917 + $index * 2.5\"\n [attr.y]=\"282.44788 - 11.906257 + 22.489584 * (1 - item)\"\n />\n </clipPath>\n }\n </defs>\n <g\n transform=\"translate(0,-271.86456)\"\n >\n <path\n style=\"\n fill: none;\n stroke: #575656;\n stroke-width: 0.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n \"\n d=\"m 0.52916627,272.9229 4e-7,23.28333 H 51.59375 V 272.9229\"\n />\n @for (items of data; track $index) {\n <rect\n class=\"background-bar\"\n width=\"1.3229166\"\n height=\"22.489584\"\n [attr.x]=\"1.322917 + $index * 2.5\"\n y=\"272.92291\"\n />\n }\n\n @for (items of data; track $index) {\n <rect\n y=\"271.86456\"\n [attr.x]=\"1.322917 + $index * 2.5\"\n height=\"22.489584\"\n width=\"1.3229166\"\n class=\"bar-value\"\n [attr.clip-path]=\"'url(#' + getId($index) + ')'\"\n transform=\"translate(-1.3229163,1.0583333)\"\n />\n }\n </g>\n</svg>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}.background-bar{fill:var(--equalizer-background-bar-color)}.bar-value{fill:var(--equalizer-value-bar-color)}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { data: [{
type: Input
}] } });
class EqualizerModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: EqualizerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: EqualizerModule, declarations: [EqualizerComponent], imports: [CommonModule], exports: [EqualizerComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: EqualizerModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: EqualizerModule, decorators: [{
type: NgModule,
args: [{
declarations: [
EqualizerComponent
],
imports: [
CommonModule
],
exports: [
EqualizerComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { EqualizerComponent, EqualizerModule };
//# sourceMappingURL=obliczeniowo-elementary-equalizer.mjs.map