import { Component, HostBinding, HostListener, Input, Optional } from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import * as i0 from "@angular/core";
import * as i1 from "../form-disabled.directive";
import * as i2 from "../../icon/icon.component";
export const buttonIconSizes = ['l', 'm', 's', 'xs'];
export class ButtonIconComponent {
    constructor(formDisabled) {
        this.formDisabled = formDisabled;
        this.size = 'l';
        this.labelPosition = 'right';
        this.labelSize = 'medium';
        this.staticLabel = false;
    }
    set setStaticLabel(value) {
        this.staticLabel = coerceBooleanProperty(value);
    }
    set setDisabled(value) {
        this.disabled = coerceBooleanProperty(value);
    }
    ngOnInit() {
    }
    get viewDisabled() {
        return this.disabled || this.formDisabled?.disabled || null;
    }
    get iconSize() {
        switch (this.size) {
            case 'l':
                return 'l';
            case 'm':
                return 'm';
            case 's':
                return 'm';
            case 'xs':
                return 's';
        }
        return this.size;
    }
    get iconStroke() {
        return 1.5;
    }
    get iconClass() {
        const classes = [];
        if (this.color) {
            classes.push('icon--' + this.color);
        }
        if (this.hover) {
            classes.push('icon--hover');
        }
        if (this.disabled) {
            classes.push('icon--disabled');
        }
        return classes;
    }
    get labelClass() {
        const classes = [];
        if (this.labelPosition) {
            classes.push('label--' + this.labelPosition);
        }
        if (this.labelSize) {
            classes.push('label--' + this.labelSize);
        }
        if (this.hover) {
            classes.push('label--hover');
        }
        if (this.staticLabel) {
            classes.push('label--static');
        }
        return classes;
    }
    onMouseEnter() {
        this.hover = true;
    }
    onMouseLeave() {
        this.hover = false;
    }
}
ButtonIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ButtonIconComponent, deps: [{ token: i1.FormDisabledDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
ButtonIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ButtonIconComponent, selector: "[ui-button-icon], [ui-button-icon-outline]", inputs: { icon: "icon", color: "color", size: "size", shape: "shape", labelPosition: "labelPosition", labelSize: "labelSize", setStaticLabel: ["staticLabel", "setStaticLabel"], setDisabled: ["disabled", "setDisabled"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "attr.size": "this.size", "attr.disabled": "this.viewDisabled" } }, ngImport: i0, template: "<div class=\"icon\" [class]=\"iconClass\">\n  <ui-icon [name]=\"icon\" [size]=\"iconSize\" [stroke]=\"iconStroke\"></ui-icon>\n</div>\n<div class=\"label\" [class]=\"labelClass\">\n  <ng-content></ng-content>\n</div>\n", styles: [".transition{transition:all .5s ease-in}.transition-fast{transition:all .2s ease-in}.loader{position:absolute;display:block;width:var(--spiner-width);height:var(--spiner-height);left:50%;top:50%;transform:translate(-50%,-50%)}.loader__spinner,.loader__spinner:after{display:block;border-radius:50%;width:100%;height:100%}.loader__spinner{position:relative;text-indent:-9999em;border-top:2px solid var(--spiner-color-bg);border-right:2px solid var(--spiner-color-bg);border-bottom:2px solid var(--spiner-color-bg);border-left:2px solid var(--spiner-color-ring);transform:translateZ(0);-webkit-animation:loadAnim 1.1s infinite linear;animation:loadAnim 1.1s infinite linear}:host{--btn-icon-size: var(--btn-height);border:none;background:none;margin:0;padding:0;display:flex;align-items:center;color:var(--color-contrast-90);text-decoration:none;cursor:pointer}:host .icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:var(--btn-icon-size);height:var(--btn-icon-size);border-radius:var(--btn-radius);border:var(--border-thin) var(--btn-color);background:var(--btn-color);box-shadow:var(--btn-active);color:var(--btn-color-contrast);order:1;-webkit-tap-highlight-color:transparent;transition:background .2s ease}@media screen and (max-width: 959px){:host .label:not(:host .label--static){display:none}}@media screen and (min-width: 960px){:host .label{display:block;padding:0 10px;white-space:nowrap;order:2}}:host .label:empty{display:none}:host .label--left{order:0}:host .label--right{order:2}:host .label--big{font-size:var(--btn-default-font-size);font-weight:600}:host .label--static{padding:0 10px}:host[ui-button-icon-outline]{--btn-color: var(--color-contrast-10);--btn-color-hover: var(--color-contrast-15);--btn-color-active: var(--color-contrast-5);--btn-color-focus: var(--color-contrast-50);--btn-color-disabled: var(--color-contrast-30);--btn-color-contrast: var(--color-contrast-100);--spiner-color-ring: var(--color-contrast-100);--spiner-color-bg: var(--color-contrast-20)}:host[ui-button-icon-outline]:disabled{--btn-color: var(--color-contrast-5);--btn-color-contrast: var(--btn-color-disabled)}:host[ui-button-icon-outline]:disabled .icon{background:var(--btn-color)}:host[ui-button-icon-outline] .icon{background:var(--color-contrast-0);border:var(--btn-border) var(--btn-color)}@media not all and (pointer: coarse){:host[ui-button-icon-outline]{transition:border-color .2s ease}}:host[ui-button-icon-outline]:focus{outline:1px dotted var(--color-accent)}:host[ui-button-icon-outline]:focus:not(:focus-visible){outline:none}:host[ui-button-icon-outline]:focus-visible{border-color:var(--btn-color-focus)}@media not all and (pointer: coarse){:host[ui-button-icon-outline]:hover .icon:not(.icon--disabled){border-color:var(--btn-color-hover)}}:host[size=l]{--btn-icon-size: 3.5rem}:host[size=m]{--btn-icon-size: 3rem}:host[size=s]{--btn-icon-size: 2.5rem}:host[size=xs]{--btn-icon-size: 2rem}:host[shape=circle]{--btn-radius: 50%}:host[color=primary]{--btn-color: var(--color-primary);--btn-color-hover: var(--color-primary-dark);--btn-color-active: var(--color-primary-ultralight);--btn-color-focus: var(--color-primary-dark);--btn-color-contrast: var(--color-primary-contrast);--color-border: var(--btn-color)}:host[color=warning]{--btn-color: var(--color-warning);--btn-color-hover: var(--color-warning-dark);--btn-color-active: var(--color-warning-ultralight);--btn-color-focus: var(--color-warning-dark);--btn-color-contrast: var(--color-warning-contrast);--color-border: var(--btn-color)}:host[color=critical]{--btn-color: var(--color-critical);--btn-color-hover: var(--color-critical-dark);--btn-color-active: var(--color-critical-ultralight);--btn-color-focus: var(--color-critical-dark);--btn-color-contrast: var(--color-critical-contrast);--color-border: var(--btn-color)}:host[color=contrast-40]{--btn-color: var(--color-contrast-40);--btn-color-hover: var(--color-contrast-100);--btn-color-active: var(--color-contrast-40);--btn-color-focus: var(--color-contrast-100);--btn-color-contrast: var(--color-contrast-100);--color-border: var(--btn-color)}:host:focus{outline:1px dotted var(--color-accent)}:host:focus:not(:focus-visible){outline:none}:host:focus-visible .icon:not(.icon--disabled){border-color:var(--btn-color-focus)}@media not all and (pointer: coarse){:host:hover .icon:not(.icon--disabled){background:var(--btn-color-hover)}}:host:active .icon:not(.icon--disabled){box-shadow:0 0 0 2px var(--btn-color-active)}:host:disabled{cursor:not-allowed}:host:disabled .icon{--btn-color: var(--color-contrast-5);--btn-color-contrast: var(--btn-color-disabled)}:host.loading{cursor:progress;background:var(--btn-color-hover)}@-webkit-keyframes loadAnim{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loadAnim{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], components: [{ type: i2.IconComponent, selector: "ui-icon", inputs: ["name", "color", "size", "stroke", "styles"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ButtonIconComponent, decorators: [{
            type: Component,
            args: [{ selector: '[ui-button-icon], [ui-button-icon-outline]', template: "<div class=\"icon\" [class]=\"iconClass\">\n  <ui-icon [name]=\"icon\" [size]=\"iconSize\" [stroke]=\"iconStroke\"></ui-icon>\n</div>\n<div class=\"label\" [class]=\"labelClass\">\n  <ng-content></ng-content>\n</div>\n", styles: [".transition{transition:all .5s ease-in}.transition-fast{transition:all .2s ease-in}.loader{position:absolute;display:block;width:var(--spiner-width);height:var(--spiner-height);left:50%;top:50%;transform:translate(-50%,-50%)}.loader__spinner,.loader__spinner:after{display:block;border-radius:50%;width:100%;height:100%}.loader__spinner{position:relative;text-indent:-9999em;border-top:2px solid var(--spiner-color-bg);border-right:2px solid var(--spiner-color-bg);border-bottom:2px solid var(--spiner-color-bg);border-left:2px solid var(--spiner-color-ring);transform:translateZ(0);-webkit-animation:loadAnim 1.1s infinite linear;animation:loadAnim 1.1s infinite linear}:host{--btn-icon-size: var(--btn-height);border:none;background:none;margin:0;padding:0;display:flex;align-items:center;color:var(--color-contrast-90);text-decoration:none;cursor:pointer}:host .icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:var(--btn-icon-size);height:var(--btn-icon-size);border-radius:var(--btn-radius);border:var(--border-thin) var(--btn-color);background:var(--btn-color);box-shadow:var(--btn-active);color:var(--btn-color-contrast);order:1;-webkit-tap-highlight-color:transparent;transition:background .2s ease}@media screen and (max-width: 959px){:host .label:not(:host .label--static){display:none}}@media screen and (min-width: 960px){:host .label{display:block;padding:0 10px;white-space:nowrap;order:2}}:host .label:empty{display:none}:host .label--left{order:0}:host .label--right{order:2}:host .label--big{font-size:var(--btn-default-font-size);font-weight:600}:host .label--static{padding:0 10px}:host[ui-button-icon-outline]{--btn-color: var(--color-contrast-10);--btn-color-hover: var(--color-contrast-15);--btn-color-active: var(--color-contrast-5);--btn-color-focus: var(--color-contrast-50);--btn-color-disabled: var(--color-contrast-30);--btn-color-contrast: var(--color-contrast-100);--spiner-color-ring: var(--color-contrast-100);--spiner-color-bg: var(--color-contrast-20)}:host[ui-button-icon-outline]:disabled{--btn-color: var(--color-contrast-5);--btn-color-contrast: var(--btn-color-disabled)}:host[ui-button-icon-outline]:disabled .icon{background:var(--btn-color)}:host[ui-button-icon-outline] .icon{background:var(--color-contrast-0);border:var(--btn-border) var(--btn-color)}@media not all and (pointer: coarse){:host[ui-button-icon-outline]{transition:border-color .2s ease}}:host[ui-button-icon-outline]:focus{outline:1px dotted var(--color-accent)}:host[ui-button-icon-outline]:focus:not(:focus-visible){outline:none}:host[ui-button-icon-outline]:focus-visible{border-color:var(--btn-color-focus)}@media not all and (pointer: coarse){:host[ui-button-icon-outline]:hover .icon:not(.icon--disabled){border-color:var(--btn-color-hover)}}:host[size=l]{--btn-icon-size: 3.5rem}:host[size=m]{--btn-icon-size: 3rem}:host[size=s]{--btn-icon-size: 2.5rem}:host[size=xs]{--btn-icon-size: 2rem}:host[shape=circle]{--btn-radius: 50%}:host[color=primary]{--btn-color: var(--color-primary);--btn-color-hover: var(--color-primary-dark);--btn-color-active: var(--color-primary-ultralight);--btn-color-focus: var(--color-primary-dark);--btn-color-contrast: var(--color-primary-contrast);--color-border: var(--btn-color)}:host[color=warning]{--btn-color: var(--color-warning);--btn-color-hover: var(--color-warning-dark);--btn-color-active: var(--color-warning-ultralight);--btn-color-focus: var(--color-warning-dark);--btn-color-contrast: var(--color-warning-contrast);--color-border: var(--btn-color)}:host[color=critical]{--btn-color: var(--color-critical);--btn-color-hover: var(--color-critical-dark);--btn-color-active: var(--color-critical-ultralight);--btn-color-focus: var(--color-critical-dark);--btn-color-contrast: var(--color-critical-contrast);--color-border: var(--btn-color)}:host[color=contrast-40]{--btn-color: var(--color-contrast-40);--btn-color-hover: var(--color-contrast-100);--btn-color-active: var(--color-contrast-40);--btn-color-focus: var(--color-contrast-100);--btn-color-contrast: var(--color-contrast-100);--color-border: var(--btn-color)}:host:focus{outline:1px dotted var(--color-accent)}:host:focus:not(:focus-visible){outline:none}:host:focus-visible .icon:not(.icon--disabled){border-color:var(--btn-color-focus)}@media not all and (pointer: coarse){:host:hover .icon:not(.icon--disabled){background:var(--btn-color-hover)}}:host:active .icon:not(.icon--disabled){box-shadow:0 0 0 2px var(--btn-color-active)}:host:disabled{cursor:not-allowed}:host:disabled .icon{--btn-color: var(--color-contrast-5);--btn-color-contrast: var(--btn-color-disabled)}:host.loading{cursor:progress;background:var(--btn-color-hover)}@-webkit-keyframes loadAnim{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loadAnim{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.FormDisabledDirective, decorators: [{
                    type: Optional
                }] }]; }, propDecorators: { icon: [{
                type: Input
            }], color: [{
                type: Input
            }], size: [{
                type: HostBinding,
                args: ['attr.size']
            }, {
                type: Input
            }], shape: [{
                type: Input
            }], labelPosition: [{
                type: Input
            }], labelSize: [{
                type: Input
            }], setStaticLabel: [{
                type: Input,
                args: ['staticLabel']
            }], setDisabled: [{
                type: Input,
                args: ['disabled']
            }], viewDisabled: [{
                type: HostBinding,
                args: ['attr.disabled']
            }], onMouseEnter: [{
                type: HostListener,
                args: ['mouseenter']
            }], onMouseLeave: [{
                type: HostListener,
                args: ['mouseleave']
            }] } });
//# sourceMappingURL=data:application/json;base64, 