@obliczeniowo/elementary
Version:
Library made in Angular version 20
76 lines (71 loc) • 11.3 kB
JavaScript
import * as i0 from '@angular/core';
import { model, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
class HorizontalProgressBarComponent {
static index = 0;
idIndex;
value = model(30);
get backgroundPatternId() {
return `background-pattern-${this.idIndex}`;
}
get valuePatternId() {
return `value-pattern-${this.idIndex}`;
}
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;
}
constructor() {
this.idIndex = HorizontalProgressBarComponent.index;
HorizontalProgressBarComponent.index += 1;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HorizontalProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: HorizontalProgressBarComponent, isStandalone: false, selector: "obl-horizontal-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: HorizontalProgressBarComponent
},
], ngImport: i0, template: "<svg height=\"18px\" width=\"100%\" #svg>\n <defs>\n <pattern\n [id]=\"valuePatternId\"\n height=\"20px\"\n width=\"40px\"\n patternUnits=\"userSpaceOnUse\"\n [attr.patternTransform]=\"'matrix(1,0,0,1,' + (svg.clientWidth / 2 - 20) + ',0)'\"\n >\n <path\n style=\"stroke-linecap: round; stroke-linejoin: round\"\n d=\"M 0,20 4,0 H 40 L 36,20 Z\"\n id=\"value-pattern\"\n inkscape:connector-curvature=\"0\"\n />\n </pattern>\n <pattern\n patternUnits=\"userSpaceOnUse\"\n width=\"40px\"\n height=\"20px\"\n [id]=\"backgroundPatternId\"\n [attr.patternTransform]=\"'matrix(1,0,0,1,' + (svg.clientWidth / 2 - 20) + ',0)'\"\n >\n <path\n inkscape:connector-curvature=\"0\"\n id=\"background-pattern\"\n d=\"M 0,20 4,0 H 40 L 36,20 Z\"\n style=\"stroke-linecap: round; stroke-linejoin: round\"\n />\n </pattern>\n </defs>\n\n <rect\n [style.fill]=\"'url(#' + backgroundPatternId + ')'\"\n width=\"calc(100% - 8px)\"\n height=\"10px\"\n x=\"4px\"\n y=\"4px\"\n />\n <rect\n style=\"\n fill: none;\n stroke-width: 4;\n stroke-linecap: round;\n stroke-linejoin: round;\n \"\n id=\"border-rect\"\n width=\"100%\"\n height=\"18px\"\n ry=\"0.23623513\"\n />\n <rect\n [style.fill]=\"'url(#' + backgroundPatternId + ')'\"\n height=\"10px\"\n y=\"4px\"\n />\n <rect\n height=\"10px\"\n id=\"progresValue\"\n y=\"4px\"\n x=\"4px\"\n [style.width]=\"'calc(' + value() + '% - 8px)'\"\n [style.fill]=\"'url(#' + valuePatternId + ')'\"\n />\n <text\n style=\"\n font-weight: bold;\n font-size: 12px;\n font-family: sans-serif;\n text-align: center;\n text-anchor: middle;\n fill: #808080;\n stroke: none;\n \"\n >\n <tspan\n sodipodi:role=\"line\"\n id=\"value\"\n x=\"50%\"\n y=\"14px\"\n style=\"text-align: center; text-anchor: middle; stroke: none\"\n >\n {{ value() }}\n </tspan>\n </text>\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}#value{fill:var(--horizontal-progress-bar-value-color)}#background-pattern{fill:var(--horizontal-progress-bar-background-pattern-color)}#value-pattern{fill:var(--horizontal-progress-bar-value-pattern-color)}#border-rect{stroke:var(--horizontal-progress-bar-border-rect-color)}:host{width:100%}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HorizontalProgressBarComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-horizontal-progress-bar', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: HorizontalProgressBarComponent
},
], standalone: false, template: "<svg height=\"18px\" width=\"100%\" #svg>\n <defs>\n <pattern\n [id]=\"valuePatternId\"\n height=\"20px\"\n width=\"40px\"\n patternUnits=\"userSpaceOnUse\"\n [attr.patternTransform]=\"'matrix(1,0,0,1,' + (svg.clientWidth / 2 - 20) + ',0)'\"\n >\n <path\n style=\"stroke-linecap: round; stroke-linejoin: round\"\n d=\"M 0,20 4,0 H 40 L 36,20 Z\"\n id=\"value-pattern\"\n inkscape:connector-curvature=\"0\"\n />\n </pattern>\n <pattern\n patternUnits=\"userSpaceOnUse\"\n width=\"40px\"\n height=\"20px\"\n [id]=\"backgroundPatternId\"\n [attr.patternTransform]=\"'matrix(1,0,0,1,' + (svg.clientWidth / 2 - 20) + ',0)'\"\n >\n <path\n inkscape:connector-curvature=\"0\"\n id=\"background-pattern\"\n d=\"M 0,20 4,0 H 40 L 36,20 Z\"\n style=\"stroke-linecap: round; stroke-linejoin: round\"\n />\n </pattern>\n </defs>\n\n <rect\n [style.fill]=\"'url(#' + backgroundPatternId + ')'\"\n width=\"calc(100% - 8px)\"\n height=\"10px\"\n x=\"4px\"\n y=\"4px\"\n />\n <rect\n style=\"\n fill: none;\n stroke-width: 4;\n stroke-linecap: round;\n stroke-linejoin: round;\n \"\n id=\"border-rect\"\n width=\"100%\"\n height=\"18px\"\n ry=\"0.23623513\"\n />\n <rect\n [style.fill]=\"'url(#' + backgroundPatternId + ')'\"\n height=\"10px\"\n y=\"4px\"\n />\n <rect\n height=\"10px\"\n id=\"progresValue\"\n y=\"4px\"\n x=\"4px\"\n [style.width]=\"'calc(' + value() + '% - 8px)'\"\n [style.fill]=\"'url(#' + valuePatternId + ')'\"\n />\n <text\n style=\"\n font-weight: bold;\n font-size: 12px;\n font-family: sans-serif;\n text-align: center;\n text-anchor: middle;\n fill: #808080;\n stroke: none;\n \"\n >\n <tspan\n sodipodi:role=\"line\"\n id=\"value\"\n x=\"50%\"\n y=\"14px\"\n style=\"text-align: center; text-anchor: middle; stroke: none\"\n >\n {{ value() }}\n </tspan>\n </text>\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}#value{fill:var(--horizontal-progress-bar-value-color)}#background-pattern{fill:var(--horizontal-progress-bar-background-pattern-color)}#value-pattern{fill:var(--horizontal-progress-bar-value-pattern-color)}#border-rect{stroke:var(--horizontal-progress-bar-border-rect-color)}:host{width:100%}\n"] }]
}], ctorParameters: () => [] });
class HorizontalProgressBarModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HorizontalProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: HorizontalProgressBarModule, declarations: [HorizontalProgressBarComponent], imports: [CommonModule], exports: [HorizontalProgressBarComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HorizontalProgressBarModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HorizontalProgressBarModule, decorators: [{
type: NgModule,
args: [{
declarations: [HorizontalProgressBarComponent],
imports: [
CommonModule
],
exports: [
HorizontalProgressBarComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { HorizontalProgressBarComponent, HorizontalProgressBarModule };
//# sourceMappingURL=obliczeniowo-elementary-horizontal-progress-bar.mjs.map