import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@seniorsistemas/angular-components/locale";
import * as i2 from "@angular/common";
export class ProgressBarDeterminateComponent {
    localeService;
    value;
    activeColor;
    numberFormatOptions;
    targetValue;
    targetLabel;
    showValue = true;
    numberFormat = new Intl.NumberFormat('pt-BR');
    constructor(localeService) {
        this.localeService = localeService;
    }
    ngOnInit() {
        this.validateValues();
        this.onGetLocale();
    }
    onGetLocale() {
        this.localeService.getLocale().subscribe({
            next: (locale) => {
                this.numberFormat = new Intl.NumberFormat(locale ?? 'pt-BR', this.numberFormatOptions);
            },
            error: () => {
                this.numberFormat = new Intl.NumberFormat('pt-BR', this.numberFormatOptions);
            },
        });
    }
    validateValues() {
        if (this.value < 0 || this.value > 100) {
            throw new Error('Invalid value for value');
        }
        if (this.targetValue && (this.targetValue < 0 || this.targetValue > 100)) {
            throw new Error('Invalid value for targetValue');
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarDeterminateComponent, deps: [{ token: i1.LocaleService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ProgressBarDeterminateComponent, selector: "s-progressbar-determinate", inputs: { value: "value", activeColor: "activeColor", numberFormatOptions: "numberFormatOptions", targetValue: "targetValue", targetLabel: "targetLabel", showValue: "showValue" }, ngImport: i0, template: "<div class=\"progressbar-determinate\">\n    <div class=\"progressbar-container\">\n        <div\n            class=\"progressbar-active\"\n            [ngClass]=\"{\n                'progressbar-active--blue': activeColor === 'blue',\n                'progressbar-active--green': activeColor === 'green',\n                'progressbar-active--red': activeColor === 'red',\n                'progressbar-active--yellow': activeColor === 'yellow',\n            }\"\n            [ngStyle]=\"{ width: value + '%' }\"\n        >\n            {{ showValue && value ? numberFormat?.format(value) + '%' : '' }}\n        </div>\n    </div>\n    @if (targetValue) {\n        <div\n            class=\"target\"\n            [ngStyle]=\"{\n                left: targetValue <= 50 ? targetValue + '%' : 'unset',\n                right: targetValue > 50 ? 100 - targetValue + '%' : 'unset',\n                'align-items': targetValue > 50 ? 'flex-end' : 'flex-start',\n            }\"\n        >\n            <span class=\"target-line\"></span>\n            <span class=\"target-label\">\n                {{ targetLabel || numberFormat?.format(value) + '%' }}\n            </span>\n        </div>\n    }\n</div>\n", styles: [".progressbar-determinate{position:relative}.progressbar-determinate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progressbar-determinate .progressbar-container .progressbar-active{align-items:center;color:#fff;display:flex;font-family:Open Sans,sans-serif;font-size:14px;height:100%;justify-content:center;line-height:150%;-webkit-user-select:none;user-select:none;width:80%}.progressbar-determinate .progressbar-container .progressbar-active--blue{background-color:#428bca}.progressbar-determinate .progressbar-container .progressbar-active--green{background-color:#0c9348}.progressbar-determinate .progressbar-container .progressbar-active--red{background-color:#c13018}.progressbar-determinate .progressbar-container .progressbar-active--yellow{background-color:#fcbf10;color:#212533}.progressbar-determinate .target{align-items:flex-start;bottom:-38px;display:flex;flex-direction:column;position:absolute}.progressbar-determinate .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progressbar-determinate .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:Open Sans,sans-serif;font-size:12px;line-height:150%;padding:2px 12px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarDeterminateComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-progressbar-determinate', template: "<div class=\"progressbar-determinate\">\n    <div class=\"progressbar-container\">\n        <div\n            class=\"progressbar-active\"\n            [ngClass]=\"{\n                'progressbar-active--blue': activeColor === 'blue',\n                'progressbar-active--green': activeColor === 'green',\n                'progressbar-active--red': activeColor === 'red',\n                'progressbar-active--yellow': activeColor === 'yellow',\n            }\"\n            [ngStyle]=\"{ width: value + '%' }\"\n        >\n            {{ showValue && value ? numberFormat?.format(value) + '%' : '' }}\n        </div>\n    </div>\n    @if (targetValue) {\n        <div\n            class=\"target\"\n            [ngStyle]=\"{\n                left: targetValue <= 50 ? targetValue + '%' : 'unset',\n                right: targetValue > 50 ? 100 - targetValue + '%' : 'unset',\n                'align-items': targetValue > 50 ? 'flex-end' : 'flex-start',\n            }\"\n        >\n            <span class=\"target-line\"></span>\n            <span class=\"target-label\">\n                {{ targetLabel || numberFormat?.format(value) + '%' }}\n            </span>\n        </div>\n    }\n</div>\n", styles: [".progressbar-determinate{position:relative}.progressbar-determinate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progressbar-determinate .progressbar-container .progressbar-active{align-items:center;color:#fff;display:flex;font-family:Open Sans,sans-serif;font-size:14px;height:100%;justify-content:center;line-height:150%;-webkit-user-select:none;user-select:none;width:80%}.progressbar-determinate .progressbar-container .progressbar-active--blue{background-color:#428bca}.progressbar-determinate .progressbar-container .progressbar-active--green{background-color:#0c9348}.progressbar-determinate .progressbar-container .progressbar-active--red{background-color:#c13018}.progressbar-determinate .progressbar-container .progressbar-active--yellow{background-color:#fcbf10;color:#212533}.progressbar-determinate .target{align-items:flex-start;bottom:-38px;display:flex;flex-direction:column;position:absolute}.progressbar-determinate .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progressbar-determinate .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:Open Sans,sans-serif;font-size:12px;line-height:150%;padding:2px 12px}\n"] }]
        }], ctorParameters: () => [{ type: i1.LocaleService }], propDecorators: { value: [{
                type: Input,
                args: [{ required: true }]
            }], activeColor: [{
                type: Input,
                args: [{ required: true }]
            }], numberFormatOptions: [{
                type: Input
            }], targetValue: [{
                type: Input
            }], targetLabel: [{
                type: Input
            }], showValue: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 