@obliczeniowo/elementary/fesm2022/obliczeniowo-elementary-horizontal-progress-bar.mjs

Library made in Angular version 19

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: "19.0.4", ngImport: i0, type: HorizontalProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.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>\r\n  <defs>\r\n    <pattern\r\n      [id]=\"valuePatternId\"\r\n      height=\"20px\"\r\n      width=\"40px\"\r\n      patternUnits=\"userSpaceOnUse\"\r\n      [attr.patternTransform]=\"'matrix(1,0,0,1,' + (svg.clientWidth / 2 - 20) + ',0)'\"\r\n    >\r\n      <path\r\n        style=\"stroke-linecap: round; stroke-linejoin: round\"\r\n        d=\"M 0,20 4,0 H 40 L 36,20 Z\"\r\n        id=\"value-pattern\"\r\n        inkscape:connector-curvature=\"0\"\r\n      />\r\n    </pattern>\r\n    <pattern\r\n      patternUnits=\"userSpaceOnUse\"\r\n      width=\"40px\"\r\n      height=\"20px\"\r\n      [id]=\"backgroundPatternId\"\r\n      [attr.patternTransform]=\"'matrix(1,0,0,1,' + (svg.clientWidth / 2 - 20) + ',0)'\"\r\n    >\r\n      <path\r\n        inkscape:connector-curvature=\"0\"\r\n        id=\"background-pattern\"\r\n        d=\"M 0,20 4,0 H 40 L 36,20 Z\"\r\n        style=\"stroke-linecap: round; stroke-linejoin: round\"\r\n      />\r\n    </pattern>\r\n  </defs>\r\n\r\n  <rect\r\n    [style.fill]=\"'url(#' + backgroundPatternId + ')'\"\r\n    width=\"calc(100% - 8px)\"\r\n    height=\"10px\"\r\n    x=\"4px\"\r\n    y=\"4px\"\r\n  />\r\n  <rect\r\n    style=\"\r\n      fill: none;\r\n      stroke-width: 4;\r\n      stroke-linecap: round;\r\n      stroke-linejoin: round;\r\n    \"\r\n    id=\"border-rect\"\r\n    width=\"100%\"\r\n    height=\"18px\"\r\n    ry=\"0.23623513\"\r\n  />\r\n  <rect\r\n    [style.fill]=\"'url(#' + backgroundPatternId + ')'\"\r\n    height=\"10px\"\r\n    y=\"4px\"\r\n  />\r\n  <rect\r\n    height=\"10px\"\r\n    id=\"progresValue\"\r\n    y=\"4px\"\r\n    x=\"4px\"\r\n    [style.width]=\"'calc(' + value() + '% - 8px)'\"\r\n    [style.fill]=\"'url(#' + valuePatternId + ')'\"\r\n  />\r\n  <text\r\n    style=\"\r\n      font-weight: bold;\r\n      font-size: 12px;\r\n      font-family: sans-serif;\r\n      text-align: center;\r\n      text-anchor: middle;\r\n      fill: #808080;\r\n      stroke: none;\r\n    \"\r\n  >\r\n    <tspan\r\n      sodipodi:role=\"line\"\r\n      id=\"value\"\r\n      x=\"50%\"\r\n      y=\"14px\"\r\n      style=\"text-align: center; text-anchor: middle; stroke: none\"\r\n    >\r\n      {{ value() }}\r\n    </tspan>\r\n  </text>\r\n</svg>\r\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: "19.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>\r\n  <defs>\r\n    <pattern\r\n      [id]=\"valuePatternId\"\r\n      height=\"20px\"\r\n      width=\"40px\"\r\n      patternUnits=\"userSpaceOnUse\"\r\n      [attr.patternTransform]=\"'matrix(1,0,0,1,' + (svg.clientWidth / 2 - 20) + ',0)'\"\r\n    >\r\n      <path\r\n        style=\"stroke-linecap: round; stroke-linejoin: round\"\r\n        d=\"M 0,20 4,0 H 40 L 36,20 Z\"\r\n        id=\"value-pattern\"\r\n        inkscape:connector-curvature=\"0\"\r\n      />\r\n    </pattern>\r\n    <pattern\r\n      patternUnits=\"userSpaceOnUse\"\r\n      width=\"40px\"\r\n      height=\"20px\"\r\n      [id]=\"backgroundPatternId\"\r\n      [attr.patternTransform]=\"'matrix(1,0,0,1,' + (svg.clientWidth / 2 - 20) + ',0)'\"\r\n    >\r\n      <path\r\n        inkscape:connector-curvature=\"0\"\r\n        id=\"background-pattern\"\r\n        d=\"M 0,20 4,0 H 40 L 36,20 Z\"\r\n        style=\"stroke-linecap: round; stroke-linejoin: round\"\r\n      />\r\n    </pattern>\r\n  </defs>\r\n\r\n  <rect\r\n    [style.fill]=\"'url(#' + backgroundPatternId + ')'\"\r\n    width=\"calc(100% - 8px)\"\r\n    height=\"10px\"\r\n    x=\"4px\"\r\n    y=\"4px\"\r\n  />\r\n  <rect\r\n    style=\"\r\n      fill: none;\r\n      stroke-width: 4;\r\n      stroke-linecap: round;\r\n      stroke-linejoin: round;\r\n    \"\r\n    id=\"border-rect\"\r\n    width=\"100%\"\r\n    height=\"18px\"\r\n    ry=\"0.23623513\"\r\n  />\r\n  <rect\r\n    [style.fill]=\"'url(#' + backgroundPatternId + ')'\"\r\n    height=\"10px\"\r\n    y=\"4px\"\r\n  />\r\n  <rect\r\n    height=\"10px\"\r\n    id=\"progresValue\"\r\n    y=\"4px\"\r\n    x=\"4px\"\r\n    [style.width]=\"'calc(' + value() + '% - 8px)'\"\r\n    [style.fill]=\"'url(#' + valuePatternId + ')'\"\r\n  />\r\n  <text\r\n    style=\"\r\n      font-weight: bold;\r\n      font-size: 12px;\r\n      font-family: sans-serif;\r\n      text-align: center;\r\n      text-anchor: middle;\r\n      fill: #808080;\r\n      stroke: none;\r\n    \"\r\n  >\r\n    <tspan\r\n      sodipodi:role=\"line\"\r\n      id=\"value\"\r\n      x=\"50%\"\r\n      y=\"14px\"\r\n      style=\"text-align: center; text-anchor: middle; stroke: none\"\r\n    >\r\n      {{ value() }}\r\n    </tspan>\r\n  </text>\r\n</svg>\r\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: "19.0.4", ngImport: i0, type: HorizontalProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: HorizontalProgressBarModule, declarations: [HorizontalProgressBarComponent], imports: [CommonModule], exports: [HorizontalProgressBarComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HorizontalProgressBarModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.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