import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { EvoBaseControl } from '../../common/evo-base-control';
import { EvoControlStates } from '../../common/evo-control-state-manager/evo-control-states.enum';
import * as i0 from "@angular/core";
import * as i1 from "../evo-icon/evo-icon.component";
import * as i2 from "../../directives/evo-ui-class.directive";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
export var EvoChipType;
(function (EvoChipType) {
    EvoChipType["radio"] = "radio";
    EvoChipType["checkbox"] = "checkbox";
    EvoChipType["label"] = "label";
})(EvoChipType || (EvoChipType = {}));
export var EvoChipTheme;
(function (EvoChipTheme) {
    EvoChipTheme["grey"] = "grey";
    EvoChipTheme["white"] = "white";
})(EvoChipTheme || (EvoChipTheme = {}));
export class EvoChipComponent extends EvoBaseControl {
    constructor() {
        super(...arguments);
        this.closeTitle = '';
        this.close = new EventEmitter();
        this.templateVariables = {
            chipTypes: EvoChipType,
            chipThemes: EvoChipTheme,
        };
    }
    set setInitialValue(value) {
        this.inheritedValue = value;
    }
    get classes() {
        const states = {
            'touched': this.control?.touched,
            'valid': this.currentState[EvoControlStates.valid],
            'invalid': this.currentState[EvoControlStates.invalid],
            'disabled': this.control?.disabled,
        };
        const result = Object.keys(states)
            .filter((key) => states[key]);
        result.push(`theme-${this.theme || EvoChipTheme.grey}`);
        result.push(`type-${this.type}`);
        return result;
    }
    get value() {
        return this._value;
    }
    set value(value) {
        this._value = value;
        this.onChange(value);
        this.onTouched();
    }
    ngOnInit() {
        this.initDefaultParams();
    }
    ngAfterViewInit() {
        if (this.control) {
            this.control.valueChanges.subscribe(() => {
                this.writeValue(this.control.value);
            });
        }
    }
    writeValue(value) {
        this._value = value;
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    onInputChange(value) {
        this.value = value;
    }
    onCloseClick(e) {
        this.close.emit(e);
    }
    initDefaultParams() {
        if (!this.type) {
            this.type = EvoChipType.radio;
        }
        if (!this.theme) {
            this.theme = EvoChipTheme.grey;
        }
    }
    onChange(value) {
    }
    onTouched() {
    }
}
EvoChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoChipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
EvoChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EvoChipComponent, selector: "evo-chip", inputs: { type: "type", theme: "theme", counter: "counter", disabled: "disabled", name: "name", closable: "closable", closeTitle: "closeTitle", setInitialValue: ["value", "setInitialValue"] }, outputs: { close: "close" }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => EvoChipComponent),
            multi: true,
        },
    ], usesInheritance: true, ngImport: i0, template: "<label class=\"chip\" [evoUiClass]=\"classes\">\n    <ng-container [ngSwitch]=\"type\">\n        <input\n            *ngSwitchCase=\"templateVariables?.chipTypes.checkbox\"\n            type=\"checkbox\"\n            [disabled]=\"disabled\"\n            [ngModel]=\"value\"\n            [value]=\"inheritedValue\"\n            (ngModelChange)=\"onInputChange($event)\"\n            [name]=\"name\"\n        />\n        <input\n            *ngSwitchCase=\"templateVariables?.chipTypes.radio\"\n            type=\"radio\"\n            [disabled]=\"disabled\"\n            [ngModel]=\"value\"\n            [value]=\"inheritedValue\"\n            (ngModelChange)=\"onInputChange($event)\"\n            [name]=\"name\"\n        />\n    </ng-container>\n    <div\n        class=\"chip__label\"\n        [evoUiClass]=\"{'disabled': disabled}\"\n    >\n        <span class=\"chip__text\">\n            <ng-content></ng-content>\n        </span>\n        <div\n            class=\"chip__counter\"\n            *ngIf=\"(type !== templateVariables?.chipTypes.label || !closable) && counter !== undefined\"\n        >\n            <span class=\"chip__counter-value\">\n                {{ counter }}\n            </span>\n        </div>\n        <button\n            class=\"chip__close\"\n            *ngIf=\"closable\"\n            [disabled]=\"disabled\"\n            [title]=\"closeTitle\"\n            (click)=\"onCloseClick($event)\"\n            type=\"button\"\n        >\n            <evo-icon shape=\"decline\"></evo-icon>\n        </button>\n    </div>\n</label>\n", styles: [".chip{position:relative;display:inline-flex;max-width:100%}.chip__label{display:flex;align-items:center;max-width:inherit;height:32px;margin:0;padding:3px 12px;overflow:hidden;color:#0986e2;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:600;background-color:#f4f6f8;border-radius:16px;cursor:pointer;transition:color .3s,background-color .3s;-webkit-user-select:none;user-select:none}.chip input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.chip input:disabled+.chip__label,.chip .chip__label_disabled{color:#fff!important;background-color:#c6c6c6!important}.chip input:checked+.chip__label{color:#fff;background-color:#0986e2}.chip input:checked+.chip__label:focus,.chip input:checked+.chip__label:hover{background-color:#3a9ee8}.chip input:checked+.chip__label:active{background-color:#0879cb}.chip input:not(:checked)+.chip__label{color:#0986e2}.chip_theme-white:not(.chip_type-label) input:not(:checked)+.chip__label{background-color:#fff}.chip_theme-white:not(.chip_type-label) input:not(:checked):focus+.chip__label,.chip_theme-white:not(.chip_type-label) input:not(:checked):hover+.chip__label{background-color:#fdfdfe}.chip_theme-white:not(.chip_type-label) input:not(:checked):active+.chip__label{background-color:#dcdddf}.chip_theme-grey:not(.chip_type-label) input:not(:checked)+.chip__label{background-color:#f4f6f8}.chip_theme-grey:not(.chip_type-label) input:not(:checked):focus+.chip__label,.chip_theme-grey:not(.chip_type-label) input:not(:checked):hover+.chip__label{background-color:#f6f8f9}.chip_theme-grey:not(.chip_type-label) input:not(:checked):active+.chip__label{background-color:#dcdddf}.chip_type-label .chip__label{color:#fff;background-color:#0986e2;cursor:default}.chip__text{display:inline-block;align-items:center;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chip__counter{display:flex;justify-content:center;align-items:center;min-width:18px;min-height:18px;margin-right:-5px;margin-left:8px;overflow:hidden;color:#fff;font-weight:700;font-size:12px;background-color:#f05023;border-radius:9px}.chip__counter-value{margin:0 3px;line-height:16px}.chip__close{position:relative;display:block;width:24px;height:24px;margin:0 -9px 0 8px;padding:0;color:#fff;background:none;border:none;cursor:pointer;transition:opacity .3s}.chip__close:not(:disabled):hover{opacity:.8}.chip__close:not(:disabled):active{opacity:.9}.chip__close evo-icon{z-index:1;display:block;width:100%;height:100%;fill:currentColor}:host{display:inline-block;max-width:100%}\n"], components: [{ type: i1.EvoIconComponent, selector: "evo-icon", inputs: ["shape", "svgWidth", "svgHeight", "svgViewBox"] }], directives: [{ type: i2.EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoChipComponent, decorators: [{
            type: Component,
            args: [{ selector: 'evo-chip', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => EvoChipComponent),
                            multi: true,
                        },
                    ], template: "<label class=\"chip\" [evoUiClass]=\"classes\">\n    <ng-container [ngSwitch]=\"type\">\n        <input\n            *ngSwitchCase=\"templateVariables?.chipTypes.checkbox\"\n            type=\"checkbox\"\n            [disabled]=\"disabled\"\n            [ngModel]=\"value\"\n            [value]=\"inheritedValue\"\n            (ngModelChange)=\"onInputChange($event)\"\n            [name]=\"name\"\n        />\n        <input\n            *ngSwitchCase=\"templateVariables?.chipTypes.radio\"\n            type=\"radio\"\n            [disabled]=\"disabled\"\n            [ngModel]=\"value\"\n            [value]=\"inheritedValue\"\n            (ngModelChange)=\"onInputChange($event)\"\n            [name]=\"name\"\n        />\n    </ng-container>\n    <div\n        class=\"chip__label\"\n        [evoUiClass]=\"{'disabled': disabled}\"\n    >\n        <span class=\"chip__text\">\n            <ng-content></ng-content>\n        </span>\n        <div\n            class=\"chip__counter\"\n            *ngIf=\"(type !== templateVariables?.chipTypes.label || !closable) && counter !== undefined\"\n        >\n            <span class=\"chip__counter-value\">\n                {{ counter }}\n            </span>\n        </div>\n        <button\n            class=\"chip__close\"\n            *ngIf=\"closable\"\n            [disabled]=\"disabled\"\n            [title]=\"closeTitle\"\n            (click)=\"onCloseClick($event)\"\n            type=\"button\"\n        >\n            <evo-icon shape=\"decline\"></evo-icon>\n        </button>\n    </div>\n</label>\n", styles: [".chip{position:relative;display:inline-flex;max-width:100%}.chip__label{display:flex;align-items:center;max-width:inherit;height:32px;margin:0;padding:3px 12px;overflow:hidden;color:#0986e2;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:600;background-color:#f4f6f8;border-radius:16px;cursor:pointer;transition:color .3s,background-color .3s;-webkit-user-select:none;user-select:none}.chip input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.chip input:disabled+.chip__label,.chip .chip__label_disabled{color:#fff!important;background-color:#c6c6c6!important}.chip input:checked+.chip__label{color:#fff;background-color:#0986e2}.chip input:checked+.chip__label:focus,.chip input:checked+.chip__label:hover{background-color:#3a9ee8}.chip input:checked+.chip__label:active{background-color:#0879cb}.chip input:not(:checked)+.chip__label{color:#0986e2}.chip_theme-white:not(.chip_type-label) input:not(:checked)+.chip__label{background-color:#fff}.chip_theme-white:not(.chip_type-label) input:not(:checked):focus+.chip__label,.chip_theme-white:not(.chip_type-label) input:not(:checked):hover+.chip__label{background-color:#fdfdfe}.chip_theme-white:not(.chip_type-label) input:not(:checked):active+.chip__label{background-color:#dcdddf}.chip_theme-grey:not(.chip_type-label) input:not(:checked)+.chip__label{background-color:#f4f6f8}.chip_theme-grey:not(.chip_type-label) input:not(:checked):focus+.chip__label,.chip_theme-grey:not(.chip_type-label) input:not(:checked):hover+.chip__label{background-color:#f6f8f9}.chip_theme-grey:not(.chip_type-label) input:not(:checked):active+.chip__label{background-color:#dcdddf}.chip_type-label .chip__label{color:#fff;background-color:#0986e2;cursor:default}.chip__text{display:inline-block;align-items:center;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chip__counter{display:flex;justify-content:center;align-items:center;min-width:18px;min-height:18px;margin-right:-5px;margin-left:8px;overflow:hidden;color:#fff;font-weight:700;font-size:12px;background-color:#f05023;border-radius:9px}.chip__counter-value{margin:0 3px;line-height:16px}.chip__close{position:relative;display:block;width:24px;height:24px;margin:0 -9px 0 8px;padding:0;color:#fff;background:none;border:none;cursor:pointer;transition:opacity .3s}.chip__close:not(:disabled):hover{opacity:.8}.chip__close:not(:disabled):active{opacity:.9}.chip__close evo-icon{z-index:1;display:block;width:100%;height:100%;fill:currentColor}:host{display:inline-block;max-width:100%}\n"] }]
        }], propDecorators: { type: [{
                type: Input
            }], theme: [{
                type: Input
            }], counter: [{
                type: Input
            }], disabled: [{
                type: Input
            }], name: [{
                type: Input
            }], closable: [{
                type: Input
            }], closeTitle: [{
                type: Input
            }], setInitialValue: [{
                type: Input,
                args: ['value']
            }], close: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 