import { __decorate, __param } from "tslib";
import { Component, HostBinding, Input, Optional } from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { FormDisabledDirective } from '../form-disabled.directive';
export const buttonColors = ['primary', 'warning', 'critical', 'contrast-40'];
export const buttonSizes = ['l', 'm', 's', 'xs'];
let ButtonComponent = class ButtonComponent {
    constructor(formDisabled) {
        this.formDisabled = formDisabled;
        this.size = 'l';
        this.isLoading = false;
        this.filled = false;
    }
    set setDisabled(value) {
        this.disabled = coerceBooleanProperty(value);
    }
    set setFilled(value) {
        this.filled = coerceBooleanProperty(value);
    }
    ngOnInit() {
    }
    get viewDisabled() {
        var _a;
        return this.disabled || ((_a = this.formDisabled) === null || _a === void 0 ? void 0 : _a.disabled) || null;
    }
};
ButtonComponent.ctorParameters = () => [
    { type: FormDisabledDirective, decorators: [{ type: Optional }] }
];
__decorate([
    HostBinding('attr.color'),
    Input()
], ButtonComponent.prototype, "color", void 0);
__decorate([
    HostBinding('attr.size'),
    Input()
], ButtonComponent.prototype, "size", void 0);
__decorate([
    HostBinding('class.loading'),
    Input()
], ButtonComponent.prototype, "isLoading", void 0);
__decorate([
    Input()
], ButtonComponent.prototype, "icon", void 0);
__decorate([
    Input()
], ButtonComponent.prototype, "iconRight", void 0);
__decorate([
    HostBinding('attr.disabled')
], ButtonComponent.prototype, "disabled", void 0);
__decorate([
    HostBinding('attr.filled')
], ButtonComponent.prototype, "filled", void 0);
__decorate([
    Input('disabled')
], ButtonComponent.prototype, "setDisabled", null);
__decorate([
    Input('filled')
], ButtonComponent.prototype, "setFilled", null);
__decorate([
    HostBinding('attr.disabled')
], ButtonComponent.prototype, "viewDisabled", null);
ButtonComponent = __decorate([
    Component({
        // tslint:disable-next-line:component-selector
        selector: '[ui-button], [ui-button-outline], [ui-button-ghost]',
        template: "<span class=\"loader\" [class]=\"'loader--'+size\" *ngIf=\"isLoading\">\n  <span class=\"loader__spinner\"></span>\n</span>\n<span class=\"content\" [class.content--hidden]=\"isLoading\">\n  <ui-icon *ngIf=\"icon\" [name]=\"icon\"></ui-icon>\n  <span class=\"content__label\"><ng-content></ng-content></span>\n  <ui-icon *ngIf=\"iconRight\" [name]=\"iconRight\"></ui-icon>\n</span>\n",
        styles: [".transition{transition:.5s ease-in}.transition-fast{transition:.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:1.1s linear infinite loadAnim;animation:1.1s linear infinite loadAnim}:host{position:relative;display:inline-block;font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-color-contrast);background:var(--btn-color);text-decoration:none;padding:var(--btn-padding);height:var(--btn-height);border:0;border-radius:var(--btn-radius);white-space:nowrap;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;-webkit-tap-highlight-color:transparent;--spiner-width:20px;--spiner-height:20px;--spiner-color-bg:rgba(255, 255, 255, 0.4);--spiner-color-ring:var(--btn-color-contrast)}:host:focus{box-shadow:0 0 0 2px var(--btn-color-focus)}:host:focus:not(:focus-visible){box-shadow:none}:host:focus-visible{box-shadow:0 0 0 2px var(--btn-color-focus)}:host:active{box-shadow:0 0 0 2px var(--btn-color-active)}:host .content{display:flex;align-items:center;justify-content:center;text-align:center;height:100%}:host .content--hidden{opacity:0}:host .content__label:not(:empty){padding:0 8px}:host[filled=true]{width:100%}:host:disabled{cursor:not-allowed;color:var(--btn-color-disabled);background:var(--color-contrast-5)}:host:disabled:active{box-shadow:none}:host.loading{cursor:progress;background:var(--btn-color-hover)}:host[ui-button-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-5);--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);background:0 0;border:var(--btn-border) var(--btn-color)}:host[ui-button-outline][color]{--btn-color-contrast:var(--btn-color)}:host[ui-button-outline]:disabled{--btn-color:var(--color-contrast-5)}:host[ui-button-ghost]{--btn-color:transparent;--btn-color-hover:var(--btn-color-hover);--btn-color-active:var(--color-contrast-100);--btn-color-focus:var(--color-contrast-5);--btn-color-contrast:var(--color-contrast-100);background:0 0}:host[ui-button-ghost][size]{--btn-padding:0}:host[ui-button-ghost][color]{--btn-color-contrast:var(--btn-color)}@media not all and (pointer:coarse){:host{transition:background .3s}:host:hover{background:var(--btn-color-hover)}:host[ui-button-outline]{transition:border-color .2s}:host[ui-button-outline]:hover:not(:disabled){border-color:var(--btn-color-hover)}:host[ui-button-ghost]{transition:color .2s}:host[ui-button-ghost]:hover:not(:disabled){color:var(--btn-color-hover);background:0 0}}:host[size=l]{--btn-font-size:var(--font-size-m);--btn-height:3.5rem;--btn-padding:0 1.5rem}:host[size=m]{--btn-font-size:var(--font-size-m);--btn-height:3rem;--btn-padding:0 1rem}:host[size=s]{--btn-font-size:var(--font-size-s);--btn-height:2.5rem;--btn-padding:0 1rem;--btn-radius:0.625rem;--spiner-width:16px;--spiner-height:16px}:host[size=xs]{--btn-font-size:var(--font-size-m);--btn-height:2rem;--btn-padding:0 0.75rem;--btn-radius:0.625rem;--spiner-width:16px;--spiner-height:16px}: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-ultralight);--btn-color-contrast:var(--color-primary-contrast)}: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-ultralight);--btn-color-contrast:var(--color-warning-contrast)}: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-ultralight);--btn-color-contrast:var(--color-critical-contrast)}: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-40);--btn-color-contrast:var(--color-contrast-100)}@-webkit-keyframes loadAnim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes loadAnim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}"]
    }),
    __param(0, Optional())
], ButtonComponent);
export { ButtonComponent };
//# sourceMappingURL=data:application/json;base64, 