import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../evo-loader/evo-circular-loader.component";
import * as i2 from "@angular/common";
// TODO: replace color to string literal type based on a `EvoColor` type
export var EvoIconButtonColor;
(function (EvoIconButtonColor) {
    EvoIconButtonColor["link"] = "link";
    EvoIconButtonColor["danger"] = "danger";
    EvoIconButtonColor["success"] = "success";
})(EvoIconButtonColor || (EvoIconButtonColor = {}));
const wrapperSelector = 'evo-icon-button';
export class EvoIconButtonComponent {
    constructor() {
        this.color = EvoIconButtonColor.link;
        /**
         * @deprecated instead of rectangle theme use `EvoNavigationButtonComponent`
         */
        this.theme = 'default';
        this.notificationDot = false;
        this.classes = [];
    }
    get isDisabled() {
        return this.disabled || this.loading;
    }
    ngOnInit() {
        this.updateClassesList();
    }
    ngOnChanges(changes) {
        if (changes.color !== undefined || changes.theme !== undefined || changes.notificationDot) {
            this.updateClassesList();
        }
    }
    updateClassesList() {
        this.classes = [];
        // TODO in new version UI-kit rename classes modifier name (like size_normal)
        if (this.size) {
            this.classes.push(`${wrapperSelector}_size-${this.size}`);
        }
        if (this.color && EvoIconButtonColor[this.color]) {
            this.classes.push(`${wrapperSelector}_color-${EvoIconButtonColor[this.color]}`);
        }
        if (this.theme) {
            this.classes.push(`${wrapperSelector}_theme-${this.theme}`);
        }
        if (this.notificationDot) {
            this.classes.push(`${wrapperSelector}_notification-dot`);
        }
    }
}
EvoIconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
EvoIconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoIconButtonComponent, selector: "button[evo-icon-button], a[evo-icon-button]", inputs: { disabled: "disabled", loading: "loading", color: "color", theme: "theme", size: "size", notificationDot: "notificationDot" }, host: { properties: { "disabled": "this.isDisabled" } }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"classes\" class=\"evo-icon-button\">\n    <div *ngIf=\"!loading else loaderTemplate\" class=\"evo-icon-button__icon-wrapper\">\n        <ng-content select=\"evo-icon\"></ng-content>\n    </div>\n    <span class=\"evo-icon-button__label\"><ng-content></ng-content></span>\n</div>\n\n<ng-template #loaderTemplate>\n    <evo-circular-loader class=\"evo-icon-button__loader\"></evo-circular-loader>\n</ng-template>\n", styles: ["@keyframes evo-fx-blink{50%{transform:scale(1);opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:50vw 50%}to{background-position:100vw 50%}}@keyframes evo-ellipsis-animation{0%{content:\"\"}25%{content:\".\"}50%{content:\"..\"}75%{content:\"...\"}to{content:\"\"}}:host{display:inline-block;padding:0;background:none;border:none;cursor:pointer;--evo-icon-button-background: #F4F6F8;--evo-icon-button-notification-dot-background: #F05023;--evo-icon-button-notification-dot-outline: #FFFFFF}.evo-icon-button{--inner-icon-size: 24px;display:flex;flex-flow:row nowrap;align-items:center;margin:0;padding:0;background:none;border:none;outline:none;transition:color .3s}.evo-icon-button_theme-rectangle{padding:16px 16px 16px 8px;background:var(--evo-icon-button-background);border-radius:8px;cursor:pointer}.evo-icon-button_color-link{color:#0986e2}.evo-icon-button_color-link:hover{color:#3a9ee8}.evo-icon-button_color-link:active{color:#0879cb}.evo-icon-button_color-danger{color:#ff1817}.evo-icon-button_color-danger:hover{color:#ff4645}.evo-icon-button_color-danger:active{color:#e51715}.evo-icon-button_color-success{color:#21c68b}.evo-icon-button_color-success:hover{color:#4dd1a2}.evo-icon-button_color-success:active{color:#1eb27d}.evo-icon-button_size-small{--inner-icon-size: 16px}.evo-icon-button_size-small .evo-icon-button__label{font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:22px;font-weight:600}.evo-icon-button .evo-icon-button__icon-wrapper,.evo-icon-button .evo-icon-button__loader{flex:0 0 var(--inner-icon-size);height:var(--inner-icon-size)}.evo-icon-button__icon-wrapper{--evo-icon-button-notification-dot-size: 12px;position:relative}.evo-icon-button_size-small .evo-icon-button__icon-wrapper{--evo-icon-button-notification-dot-size: 8px}:host:disabled .evo-icon-button_notification-dot .evo-icon-button__icon-wrapper:before{display:none}.evo-icon-button_notification-dot .evo-icon-button__icon-wrapper:not(:empty):before{position:absolute;content:\"\";display:block;box-sizing:border-box;width:var(--evo-icon-button-notification-dot-size);height:var(--evo-icon-button-notification-dot-size);top:0;right:0;border-width:calc(var(--evo-icon-button-notification-dot-size) * 1 / 6);border-color:var(--evo-icon-button-notification-dot-outline);border-style:solid;background-color:var(--evo-icon-button-notification-dot-background);border-radius:50%}.evo-icon-button ::ng-deep evo-icon{fill:currentColor}.evo-icon-button__label{margin-left:8px;white-space:nowrap;font-family:var(--evo-font);font-style:normal;font-size:16px;line-height:24px;font-weight:600}.evo-icon-button__label:empty{display:none}:host:disabled .evo-icon-button{color:#c6c6c6!important}\n"], components: [{ type: i1.EvoCircularLoaderComponent, selector: "evo-circular-loader" }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoIconButtonComponent, decorators: [{
            type: Component,
            args: [{
                    // tslint:disable-next-line:component-selector
                    selector: 'button[evo-icon-button], a[evo-icon-button]',
                    templateUrl: './evo-icon-button.component.html',
                    styleUrls: ['./evo-icon-button.component.scss'],
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }], propDecorators: { disabled: [{
                type: Input
            }], loading: [{
                type: Input
            }], color: [{
                type: Input
            }], theme: [{
                type: Input
            }], size: [{
                type: Input
            }], notificationDot: [{
                type: Input
            }], isDisabled: [{
                type: HostBinding,
                args: ['disabled']
            }] } });
//# sourceMappingURL=data:application/json;base64, 