import { Component, forwardRef, Input } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { EvoBaseControl } from '../../../common/evo-base-control';
import * as i0 from "@angular/core";
import * as i1 from "../../../directives/evo-ui-class.directive";
/**
 * @deprecated use `EvoChipComponent`
 */
export class EvoSegmentedBarButtonComponent extends EvoBaseControl {
    constructor() {
        super(...arguments);
        this.color = 'white';
        this.disabled = false;
        this.onChange = (_) => { };
        this.onTouched = () => { };
    }
    get selectedValue() {
        return this._selectedValue;
    }
    ngAfterViewChecked() {
        if (this.control) {
            this.control.valueChanges.subscribe(() => {
                this.writeValue(this.control.value);
            });
        }
    }
    writeValue(value) {
        this._selectedValue = value;
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    onInputChange(value) {
        this._selectedValue = value;
        this.onChange(value);
    }
    get totalClasses() {
        const classes = [];
        if (this.color) {
            classes.push(this.color);
        }
        if (this.disabled) {
            classes.push('disabled');
        }
        return classes;
    }
}
EvoSegmentedBarButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoSegmentedBarButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
EvoSegmentedBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoSegmentedBarButtonComponent, selector: "evo-segmented-bar-button", inputs: { name: "name", value: "value", color: "color", disabled: "disabled" }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => EvoSegmentedBarButtonComponent),
            multi: true,
        },
    ], usesInheritance: true, ngImport: i0, template: "<label class=\"segmented-button\" [evoUiClass]=\"totalClasses\">\n    <input class=\"segmented-button__input\"\n           type=\"radio\"\n           [name]=\"name\"\n           [value]=\"value\"\n           [checked]=\"value === selectedValue\"\n           (change)=\"onInputChange(value)\"\n           [disabled]=\"disabled\"\n    />\n    <span class=\"segmented-button__view\">\n        <span class=\"segmented-button__view-text\">\n            <ng-content></ng-content>\n        </span>\n    </span>\n</label>\n", styles: [".segmented-button{display:inline-block}.segmented-button__view{display:inline-block;padding:0 20px;color:#0986e2;line-height:30px;background-color:transparent;border-radius:15px;-webkit-user-select:none;user-select:none}.segmented-button__view-text{position:relative;z-index:1;display:flex;flex-wrap:nowrap;align-items:center;white-space:nowrap}.segmented-button__view-text ::ng-deep [data-type=counter]{position:relative;display:flex;justify-content:center;align-items:center;min-width:20px;margin-left:10px;padding:0 4px;color:#fff;font-weight:bold;font-size:10px;line-height:10px}.segmented-button__view-text ::ng-deep [data-type=counter]:after{position:absolute;top:46%;left:0;z-index:-1;display:block;box-sizing:border-box;width:100%;height:20px;text-align:center;background-color:#f05023;border-radius:10px;transform:translateY(-48%);content:\"\"}.segmented-button__input{position:absolute;display:none}.segmented-button__view,.segmented-button__view-counter{transition:background-color .15s,color .15s,padding .15s}.segmented-button__input:checked+.segmented-button__view{padding:0 20px;color:#fff;background-color:#0986e2}.segmented-button__input:checked+.segmented-button__view .segmented-button__view-text ::ng-deep [data-type=counter]{color:#f05023}.segmented-button__input:checked+.segmented-button__view .segmented-button__view-text ::ng-deep [data-type=counter]:after{background-color:#fff}.segmented-button__input:disabled+.segmented-button__view{color:#fff;background-color:#c6c6c6;cursor:default}.segmented-button_grey .segmented-button__view{background-color:#f4f6f8}.segmented-button_grey .segmented-button__input:not(:disabled)+.segmented-button__view:hover{background-color:#f6f8f9}.segmented-button_grey .segmented-button__input:not(:disabled)+.segmented-button__view:active{background-color:#dcdddf}.segmented-button_grey .segmented-button__input:checked:not(:disabled)+.segmented-button__view:hover{background-color:#3a9ee8}.segmented-button_grey .segmented-button__input:checked:not(:disabled)+.segmented-button__view:active{background-color:#0879cb}.segmented-button_white .segmented-button__view{background-color:#fff}.segmented-button_white .segmented-button__input:not(:disabled)+.segmented-button__view:hover{background-color:#fdfdfe}.segmented-button_white .segmented-button__input:not(:disabled)+.segmented-button__view:active{background-color:#dcdddf}.segmented-button_white .segmented-button__input:checked:not(:disabled)+.segmented-button__view:hover{background-color:#3a9ee8}.segmented-button_white .segmented-button__input:checked:not(:disabled)+.segmented-button__view:active{background-color:#0879cb}\n"], directives: [{ type: i1.EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoSegmentedBarButtonComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'evo-segmented-bar-button',
                    templateUrl: './evo-segmented-bar-button.component.html',
                    styleUrls: ['./evo-segmented-bar-button.component.scss'],
                    providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => EvoSegmentedBarButtonComponent),
                            multi: true,
                        },
                    ],
                }]
        }], propDecorators: { name: [{
                type: Input
            }], value: [{
                type: Input
            }], color: [{
                type: Input
            }], disabled: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 