@obliczeniowo/elementary
Version:
Library made in Angular version 20
84 lines (79 loc) • 13.7 kB
JavaScript
import * as i0 from '@angular/core';
import { model, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
class ChannelVolumeComponent {
/** Volumes value from range 0-1 */
volumes = model({
left: 0, right: 0
});
random;
onChange = (value) => { };
onTouched = () => { };
registerOnValidatorChange(fn) { this.onChange = fn; }
;
writeValue(set) {
if (set) {
this.volumes.set(set);
}
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
constructor() {
while (!this.random || document.querySelector(this.leftId)) {
this.random = Math.ceil(Math.random() * 10000000);
}
}
get leftId() {
return 'channelVolumeLeft' + this.random;
}
get rightId() {
return 'channelVolumeRight' + this.random;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ChannelVolumeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: ChannelVolumeComponent, isStandalone: false, selector: "obl-channel-volume", inputs: { volumes: { classPropertyName: "volumes", publicName: "volumes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { volumes: "volumesChange" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: ChannelVolumeComponent
},
], ngImport: i0, template: "<svg width=\"100%\" viewBox=\"0 0 54.239583 25.135417\">\n <defs>\n <clipPath [attr.id]=\"rightId\">\n <rect\n [attr.width]=\"volumes().right * 30\"\n height=\"10.583344\"\n [attr.x]=\"31.749997 - volumes().right * 30\"\n y=\"273.1875\"\n />\n </clipPath>\n <clipPath [attr.id]=\"leftId\">\n <rect\n [attr.width]=\"volumes().left * 30\"\n height=\"10.583333\"\n [attr.x]=\"22.489584\"\n y=\"285.09375\"\n />\n </clipPath>\n </defs>\n <g transform=\"translate(0,-271.86457)\">\n <path\n class=\"volume-left-background\"\n d=\"m 1.3229167,273.18749 v 10.58333 h 3.9687499 v -10.58333 z m 5.2916666,1.32291 v 9.26042 h 3.9687507 v -9.26042 z m 5.2916667,1.32292 v 7.9375 H 15.875 v -7.9375 z m 5.291667,1.32292 v 6.61458 h 3.96875 v -6.61458 z m 5.291666,2.64583 v 3.96875 h 3.96875 v -3.96875 z m 5.291667,2.64583 v 1.32292 H 31.75 v -1.32292 z\"\n />\n <path\n class=\"volume-right-background\"\n d=\"m 52.916667,295.67707 v -10.58333 h -3.96875 v 10.58333 z m -5.291666,-1.32292 v -9.26041 h -3.96875 v 9.26041 z m -5.291667,-1.32291 v -7.9375 h -3.96875 v 7.9375 z m -5.291666,-1.32292 v -6.61458 h -3.96875 v 6.61458 z m -5.291667,-2.64583 v -3.96875 h -3.96875 v 3.96875 z m -5.291667,-2.64584 v -1.32291 h -3.96875 v 1.32291 z\"\n />\n <g class=\"lines\">\n <path\n d=\"m 20.6375,285.09374 h 0.529166 l 1e-6,10.58333 h -0.529166\"\n style=\"\n fill: none;\n stroke-width: 0.25;\n stroke-linecap: round;\n stroke-linejoin: round;\n \"\n />\n <path\n d=\"M 21.166667,290.3854 H 20.637501\"\n style=\"\n stroke-width: 0.25;\n stroke-linecap: round;\n stroke-linejoin: round;\n \"\n />\n </g>\n <g transform=\"matrix(-1,0,0,1,54.239583,-10.58333)\" class=\"lines\">\n <path\n style=\"\n fill: none;\n stroke-width: 0.25;\n stroke-linecap: round;\n stroke-linejoin: round;\n \"\n d=\"m 20.6375,283.77082 h 0.529166 l 0,10.58333 H 20.6375\"\n />\n <path\n style=\"\n stroke-width: 0.25;\n stroke-linecap: round;\n stroke-linejoin: round;\n \"\n d=\"M 21.166666,289.06248 H 20.6375\"\n />\n </g>\n <path\n d=\"m 1.3229167,273.18749 v 10.58333 h 3.9687499 v -10.58333 z m 5.2916666,1.32291 v 9.26042 h 3.9687507 v -9.26042 z m 5.2916667,1.32292 v 7.9375 H 15.875 v -7.9375 z m 5.291667,1.32292 v 6.61458 h 3.96875 v -6.61458 z m 5.291666,2.64583 v 3.96875 h 3.96875 v -3.96875 z m 5.291667,2.64583 v 1.32292 H 31.75 v -1.32292 z\"\n class=\"volume-left\"\n [attr.clip-path]=\"'url(#' + rightId + ')'\"\n />\n <path\n class=\"volume-right\"\n d=\"m 52.916667,295.67707 v -10.58333 h -3.96875 v 10.58333 z m -5.291666,-1.32292 v -9.26041 h -3.96875 v 9.26041 z m -5.291667,-1.32291 v -7.9375 h -3.96875 v 7.9375 z m -5.291666,-1.32292 v -6.61458 h -3.96875 v 6.61458 z m -5.291667,-2.64583 v -3.96875 h -3.96875 v 3.96875 z m -5.291667,-2.64584 v -1.32291 h -3.96875 v 1.32291 z\"\n [attr.clip-path]=\"'url(#' + leftId + ')'\"\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}.volume-right-background,.volume-left-background{fill:var(--volume-channel-secondary-color)}.volume-left,.volume-right{fill:var(--volume-channel-primary-color)}:host{display:flex;align-items:center}:host svg{width:100px}.lines{stroke:var(--volume-channel-primary-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ChannelVolumeComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-channel-volume', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: ChannelVolumeComponent
},
], standalone: false, template: "<svg width=\"100%\" viewBox=\"0 0 54.239583 25.135417\">\n <defs>\n <clipPath [attr.id]=\"rightId\">\n <rect\n [attr.width]=\"volumes().right * 30\"\n height=\"10.583344\"\n [attr.x]=\"31.749997 - volumes().right * 30\"\n y=\"273.1875\"\n />\n </clipPath>\n <clipPath [attr.id]=\"leftId\">\n <rect\n [attr.width]=\"volumes().left * 30\"\n height=\"10.583333\"\n [attr.x]=\"22.489584\"\n y=\"285.09375\"\n />\n </clipPath>\n </defs>\n <g transform=\"translate(0,-271.86457)\">\n <path\n class=\"volume-left-background\"\n d=\"m 1.3229167,273.18749 v 10.58333 h 3.9687499 v -10.58333 z m 5.2916666,1.32291 v 9.26042 h 3.9687507 v -9.26042 z m 5.2916667,1.32292 v 7.9375 H 15.875 v -7.9375 z m 5.291667,1.32292 v 6.61458 h 3.96875 v -6.61458 z m 5.291666,2.64583 v 3.96875 h 3.96875 v -3.96875 z m 5.291667,2.64583 v 1.32292 H 31.75 v -1.32292 z\"\n />\n <path\n class=\"volume-right-background\"\n d=\"m 52.916667,295.67707 v -10.58333 h -3.96875 v 10.58333 z m -5.291666,-1.32292 v -9.26041 h -3.96875 v 9.26041 z m -5.291667,-1.32291 v -7.9375 h -3.96875 v 7.9375 z m -5.291666,-1.32292 v -6.61458 h -3.96875 v 6.61458 z m -5.291667,-2.64583 v -3.96875 h -3.96875 v 3.96875 z m -5.291667,-2.64584 v -1.32291 h -3.96875 v 1.32291 z\"\n />\n <g class=\"lines\">\n <path\n d=\"m 20.6375,285.09374 h 0.529166 l 1e-6,10.58333 h -0.529166\"\n style=\"\n fill: none;\n stroke-width: 0.25;\n stroke-linecap: round;\n stroke-linejoin: round;\n \"\n />\n <path\n d=\"M 21.166667,290.3854 H 20.637501\"\n style=\"\n stroke-width: 0.25;\n stroke-linecap: round;\n stroke-linejoin: round;\n \"\n />\n </g>\n <g transform=\"matrix(-1,0,0,1,54.239583,-10.58333)\" class=\"lines\">\n <path\n style=\"\n fill: none;\n stroke-width: 0.25;\n stroke-linecap: round;\n stroke-linejoin: round;\n \"\n d=\"m 20.6375,283.77082 h 0.529166 l 0,10.58333 H 20.6375\"\n />\n <path\n style=\"\n stroke-width: 0.25;\n stroke-linecap: round;\n stroke-linejoin: round;\n \"\n d=\"M 21.166666,289.06248 H 20.6375\"\n />\n </g>\n <path\n d=\"m 1.3229167,273.18749 v 10.58333 h 3.9687499 v -10.58333 z m 5.2916666,1.32291 v 9.26042 h 3.9687507 v -9.26042 z m 5.2916667,1.32292 v 7.9375 H 15.875 v -7.9375 z m 5.291667,1.32292 v 6.61458 h 3.96875 v -6.61458 z m 5.291666,2.64583 v 3.96875 h 3.96875 v -3.96875 z m 5.291667,2.64583 v 1.32292 H 31.75 v -1.32292 z\"\n class=\"volume-left\"\n [attr.clip-path]=\"'url(#' + rightId + ')'\"\n />\n <path\n class=\"volume-right\"\n d=\"m 52.916667,295.67707 v -10.58333 h -3.96875 v 10.58333 z m -5.291666,-1.32292 v -9.26041 h -3.96875 v 9.26041 z m -5.291667,-1.32291 v -7.9375 h -3.96875 v 7.9375 z m -5.291666,-1.32292 v -6.61458 h -3.96875 v 6.61458 z m -5.291667,-2.64583 v -3.96875 h -3.96875 v 3.96875 z m -5.291667,-2.64584 v -1.32291 h -3.96875 v 1.32291 z\"\n [attr.clip-path]=\"'url(#' + leftId + ')'\"\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}.volume-right-background,.volume-left-background{fill:var(--volume-channel-secondary-color)}.volume-left,.volume-right{fill:var(--volume-channel-primary-color)}:host{display:flex;align-items:center}:host svg{width:100px}.lines{stroke:var(--volume-channel-primary-color)}\n"] }]
}], ctorParameters: () => [] });
class ChannelVolumeModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ChannelVolumeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: ChannelVolumeModule, declarations: [ChannelVolumeComponent], imports: [CommonModule], exports: [ChannelVolumeComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ChannelVolumeModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ChannelVolumeModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ChannelVolumeComponent
],
imports: [
CommonModule
],
exports: [
ChannelVolumeComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ChannelVolumeComponent, ChannelVolumeModule };
//# sourceMappingURL=obliczeniowo-elementary-channel-volume.mjs.map